制作背景
React / Next.jsのキャッチアップを目的に制作しました。実務で経験したAPI連携やZodによるデータ検証を取り入れるとともに、状態管理や画面遷移後の状態復元やテストなど、これまで経験の少なかった実装にも取り組みました。
実装内容
- Google Books APIを利用した書籍タイトル検索と、検索結果の追加読み込み・書籍IDによる重複除外
- 書籍詳細ページの実装と、一覧に戻った際の検索条件・検索結果・スクロール位置の復元
- Loading / Empty / Errorなど、非同期処理の状態に応じた表示
- Next.jsのRoute Handlerを介したAPI通信による、APIキーのサーバー側での管理
- ZodによるAPIレスポンスと保存データの実行時検証
- Vitestによるデータ整形・重複除外・状態遷移のユニットテスト