Webアプリ
Study Records
概要
学習内容や学習時間を記録・管理するアプリ
使用技術
- ・React / Vite
- ・TypeScript
- ・Supabase
- ・Tailwind CSS
- ・Vitest
- ・GitHub Actions
主な機能
- ・React / TypeScriptによる画面実装
- ・Supabaseとのデータ連携
- ・認証
- ・RLSの設定
- ・API処理
- ・テスト
工夫した点 / 学んだこと
1. Stateをどこで管理するか
編集機能の実装時、編集状態をフック内で管理していましたが、複数のコンポーネントから同じStateを共有する必要がありました。そこで、編集状態をContextで管理する構成に変更しました。
＜学んだこと＞
Stateは「使う場所」だけでなく、どのコンポーネント間で共有する必要があるかを考えて配置することが重要だと学びました。
2. Contextの責務分離
当初は学習記録データと、編集状態・loading・errorなどのUI状態を1つのContextで管理していました。機能追加に伴って責務が増えたため、『StudyRecordContext：学習記録データ』、『StudyStateContext：編集状態・loading・error』に分離しました。
＜学んだこと＞
単に動作させるだけでなく、責務を分けて依存関係を分かりやすくすることを意識するようになりました。
3. API接続時のページリロード
JSON ServerとのAPI接続後にページがリロードされる問題が発生しました。NetworkやConsoleを確認しながら原因を切り分けた結果、db.jsonの変更をViteが検知してページを再読み込みしていることが分かりました。vite.config.tsでdb.jsonを監視対象から除外して解決しました。
＜学んだこと＞
不具合が発生した際に感覚で修正するのではなく、開発者ツールを利用して原因を切り分けることの重要性を学びました。
4. 非同期処理のテスト
Contextのテストで、APIからデータを取得しているにもかかわらずStateが更新されないように見える問題が発生しました。API呼び出しだけを待つのではなく、API呼び出し → レスポンス取得 → State更新 → 再レンダリング という処理の流れを確認し、最終的にStateが期待した値になったことをテストするように変更しました。
＜学んだこと＞
非同期処理では、単に「処理が実行されたこと」ではなく、最終的に保証したい状態を基準にテストすることを意識するようになりました。
5. 本番環境での動作確認
Vercelへのデプロイ後にログインできない問題が発生しました。調査した結果、Supabaseの認証設定に本番環境のURLが登録されていないことが原因でした。本番環境のURLをSupabaseのリダイレクト設定に追加して解決しました。
＜学んだこと＞
ローカル環境と本番環境では設定が異なるため、デプロイ後の環境差も考慮して動作確認する必要があると学びました。
詳細