ポケモン図鑑アプリ（個人開発）
制作背景
ポケモンが好きで、ポケモンAPIの存在を知ったことをきっかけに、これを活用した図鑑アプリを開発しました。
また、ReactにおけるAPI連携や状態管理の理解を深めることも目的としています。
主な機能
- ポケモン一覧表示（日本語対応）
- 名前検索
- タイプフィルター
- 詳細表示
- 画像の色違いの切り替え表示
- ページネーション
工夫した点
- 検索・フィルタ・ページネーションを組み合わせた際に発生する状態不整合（ページ番号が保持される問題）を修正し、UXを改善
- APIデータとローカルデータの役割を整理し、表示用データとして構築することで状態管理を簡素化
- 一覧表示ではローカルJSONを活用し、API依存を減らすことで表示速度と安定性を改善
- 日本語表示に対応するため、APIレスポンスとローカルデータを統合し、ユーザーにとって直感的なUIを実現
- 詳細画面では通常色と色違いの切り替えを実装し、視覚的な楽しさを向上
- UIでは視認性を考慮し、カードデザインやドロップシャドウを調整
成果
API連携を通して、データ取得から表示までの流れや、 Reactにおける状態管理・データ設計への理解を深めました。
また、検索・フィルタ・ページネーションを組み合わせた際の 状態不整合への対応を経験し、 ユーザー視点でUIを改善する重要性を学びました。
使用技術
- React / TypeScript
- Material UI