【React×TypeScript】学習記録アプリをさらに改良した話

はじめに

前回改良を加えた学習記録アプリに、新規機能を増やしたりUIを改良したりしましたので、その感想文です。

▼前回の記事

アプリ概要

1. 主な機能

• 学習記録（内容と時間数）の登録
• 学習記録の一覧表示
• 学習記録の削除
• 学習記録の編集

2. 使用技術

• 言語：TypeScript(型安全性の担保）
• フロントエンド：React, Vite, Chakra UI(v2)
• バックエンド：Supabase
• CI/CD：GitHub Actions + Firebase Hosting
• テスト：Jest

工夫したポイント

1. React Hooksの設計

• 今回は、学習記録の一覧表示や登録、更新、削除を React の custom hook に分離して管理しました。これにより、ロジックとUIの責務が明確になり、今後機能追加や修正時にも再利用しやすくなったと思います。

・作成したcustom hook

　- useAllStudyRecords：全件取得とloading状態の管理
　- useInputStudyRecord：入力フォームの状態と登録処理
　- useDeleteStudyRecord：削除処理と再取得の連携
　- useUpdateStudyRecord：既存データの更新処理

• 一方で、学習記録の削除後の、学習記録再取得処理の責務がApp.tsxにあるのか、hookに持たせるべきか悩みました。
  →今回は、再取得はUI側で制御する方針にし、テストのしやすさや柔軟性を優先しました。

2. Atomic Designの設計

• ボタンやアイコンボタン、モーダル（新規登録ボタンを押すと、入力フォーム画面が開く）などは、Atomic Designの原則に沿って設計しました。
• 一方で、moleculesとorganismsの違いはいまだ分からず。（今回はモーダルをorganismsとして扱いました）。

3. Jest

• 特にSupabaseのDB操作をモック化し、DBに依存しないテスト環境を構築しました。
• 副作用のある処理（登録・削除）では mockResolvedValueOnce() を使い、呼び出しごとに違う値を返すようにして、UIの変化を確認できるように工夫しました。

// 例えば削除の場合
mockGetAllStudyRecords
  .mockResolvedValueOnce([
    new StudyRecord("1", "React", 1),
    new StudyRecord("2", "Jest", 2),
  ])
  .mockResolvedValueOnce([
    new StudyRecord("1", "React", 1),　// 削除後はレコードが2→1つへ
  ]);

→ これにより、「削除後にリストが減る」といったUI挙動もテストで確認できるようになりました。

• 一方で、1ファイルに全テストを書いていたため、モックの外出しや、describe によるグルーピングなど、今後の改善点も見えました。

その他、作ってみての感想

• 今回もChatGPTが大活躍。前回はJestのテストコードの書き方そのものを聞いたりしていたが、今回はUIとロジックの分離など、設計面や考え方でどうすべきか聞くことが多く、また今度も助けられました。
• 「分からないからと止まるのではなく、手を動かしてみることが大事」だと改めて実感しました。最初はドキュメントが理解できず戸惑っていましたが、実装を進めていく中で徐々に内容が頭に入ってくるようになりました。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼