GraphQL でポケモン図鑑を作ってみた

概要

このアプリケーションは、ユーザーがさまざまなポケモンを一覧表示・検索・フィルタリングするためのWebアプリケーションです。ポケモンのデータはGraphQLを通じて取得しています。

React: UIの構築にはReactを使用しました。コンポーネントベースの開発を行い、効率的に再利用可能なUIを設計しました。

Next.js: このフレームワークを利用して、サーバーサイドレンダリングを含む高性能なWebアプリケーションを構築しました。

GraphQL: データ取得にGraphQLを採用。クライアント側が必要とするデータだけを効率的に取得することができました。

GraphQLの採用: RESTful APIとは異なり、GraphQLはクライアント側が必要とするデータだけを取得することが可能です。このため、不要なデータの転送を避け、ページの読み込み速度を向上させることができました。

無限スクロール: 一覧表示ページに無限スクロールを実装することで、ユーザーエクスペリエンスを向上させました。ユーザーはページネーションを意識することなく、スクロールするだけで次々と新しいポケモンのデータを読み込むことができます。

タイプでのフィルタリング: ポケモンはその特性（タイプ）によって分類されるため、ユーザーが特定のタイプのポケモンだけを表示するためのフィルタリング機能を実装しました。これにより、ユーザーは探しているポケモンをより迅速に見つけることができます

今回は Pokémon API を GraphQL でリクエストしてポケモンの一覧(ポケモン図鑑)を作成しました。

最近 React(Next.js) と GraphQL を触り始めたのでキャッチアップとして、好きなポケモンをテーマに開発をしてみました。

GraphQL Code Generator を用いて型を作成したのですがうまく使えなかったので現在整備中ですが、一区切りついたタイミングでリポジトリも公開します。