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