はじめに
今回は友人とGWの初日に1からモブプログラミングでアプリを開発したので内容についてまとめて行きたます。
今回作成したアプリケーションは以下になります
どんなアプリ？
今回はふりかえり(レトロスペクティブ)の記録をするためのアプリを作りました
私自身が日々ふりかえりをした記録をスプレッドシートにまとめています
これをアプリ化したいなと思い今回作成しました
1. ふりかえりログ登録
- 実施日
- ふりかえりに使用したボードのURL
- 情報収集に使った手法
- アイデア出しに使った手法
- ふりかえりのふりかえり(ふりふり)に使った手法
- メモ
を登録することができます
メモはメモアイコンをクリックするとモーダルで表示されます
2. ログの一覧表示
登録したログは一覧で確認ができます
3. 手法一覧
どの手法を何回行ったかを一覧で表示します
しかし、ここは今回1日のテックデイでは完成しませんでした
自分がふりかえりをしたあとにフィードバックをメモして、次回のふりかえりにつなげたり、やったことのない手法などを確認することができます
4. ログイン周り
登録するとメールが飛んだり、zodでバリデーションをしたり、アラートをSweetAlertで表示するなど時間がない中でも実装しました
最低限のログイン周りは用意しています
使用技術
- TypeScript
- React
- DaisyUI
- supabase
- Vitest
- Firebase
その他: zod, sweetAlert2...
いままでJestで書くことが多かったですが今回はVitestを入れてみました
ほとんど書き心地は変わらない印象でした
開発について
今回は1日でアプリを作り、お互いの知っている技術を教え合うコンセプトのもと友人と一緒に3人で9.5時間かけてコーディングをしました (うち休憩は1時間くらい)
すべてをモブプロ、TDDで行い、なるべくクリーンアーキテクチャでコーディングしていきました
私自身が今回の開発で初挑戦することになるのは「DaisyUI」と「supabase」だったのでそちらについてまとめます
DaisyUI
TailwindのCSSコンポーネントで普段ChakraUIしか使わない私ですが久しぶりに新しいものを使いました
感想としてはChakuraUIではないようなタブなどがあり、便利だなと思いました。
またclassNameに書いてCSSを適応できるのはやはり便利だなと思いました。
ChakraUIはとてもよいですが、インポートが大変です。
supabase
なんだかんだでFirebaseばかりやっていて使っていなかったので今回楽しみにしていました
主にログイン認証とDBで利用したのですが、ほとんどの機能が関数1つでかけてしまうし、ほしいと思う機能がすべて手軽に使えてしまったのでかなり気に入りました
これを味わってしまうとログイン機能をコーディングするの大変と思ってしまいそうです
React×supabse×firebase×ChakraUIなら爆速で開発できることがわかったので、これから個人開発更に捗りそうです
これが今回の開発での大きな収穫でした！
他のメンバーは実践的なTDDやクリーンアーキテクチャについて初めて触れたようですが、1日でかなり多くを吸収できていて、開発中にもメリットを感じていたようなので有意義な1日になったかと思います
おわりに
今回9時間で実装をしましたが、教える時間などもしっかりとりながら理解することを大事にして最低限の機能まではできたのでリリースして終了しました
修正したいところや足りていないところなどはIssueに追加したのでもし気になる方は比較的簡単な技術でやっているので触ってみてください。プルリクお待ちしております
お互いが知っている技術を織り交ぜながら開発お題を作成して1日で開発するのは充実感があってとてもよかったです。また次も企画してやりたいです
参考