はじめに
Reactの学習で、学習記録アプリを作りました。
フロントだけでなく、データベース・テスト・CI/CD・デプロイまで一通り触れたので振り返ります。
デモ: https://study-record-2a28b.web.app
使った技術
React / Vite / Supabase / Vitest / React Testing Library / Firebase / GitHub Actions
学んだこと
useState で状態を管理する
入力値・記録一覧・エラー・ローディングなど、画面の状態はすべてuseStateで管理した。
値が変わると画面が再描画される、というReactの基本を体感できた。
useEffect で初回読み込み時にデータ取得
ページを開いたときに一度だけ Supabase からデータを取得する処理をuseEffectで書いた。
isLoadingをtrue→ 取得→falseと切り替えて、ローディング表示も出し分けた。
Supabase の戻り値は配列ではなくオブジェクト
select()の戻り値は{ data, error }を含むオブジェクト。
そのままmapしてrecords.map is not a functionで何度かハマった。
CI/CD は push するだけで本番が更新される
GitHub Actions で「テスト → ビルド → デプロイ」を自動化。テストが通らなければデプロイされない構成にできた。一度組んでしまえば、あとは push するだけ。
反省点
- コミットがこまめにできていなかった：必要なファイルが 漏れておりCIで何度もつまずいた。
- 環境差を意識していなかった：ローカルとCIの差でnpm ciが失敗した。環境はそろえる意識が必要。
- Supabaseの無料プランの仕様を知らなかった：一定期間アクセスがないとプロジェクトが一時停止し、アプリが表示されなくなって焦った。
おわりに
小さなアプリだが、フロントからデプロイ・CI/CD まで通しで作ることでができた。