図鑑アプリを作る②——完成

最終章です。前章の一覧に「選ぶと詳細が出る」を足して、図鑑を完成させます。設計図を言葉にすると——一覧(チャプター9)と、選択に応じた詳細取得(チャプター8の切り替えパターン)の合体。この教材の全部が、この1画面に入ります。

手順①: 詳細APIの実物を見る

いつもの通り、実物から。ポケモン1匹の詳細はこのURLです。

https://pokeapi.co/api/v2/pokemon/pikachu

末尾は名前でも番号でも指定できます。返ってくるJSONは巨大ですが(数千行!)、怯む必要はありません——使うものだけ写すが我々の流儀です。今回使うのは3つだけ:

{
  "id": 25,
  "name": "pikachu",
  "sprites": {
    "front_default": "https://raw.githubusercontent.com/.../25.png"
  }
}

spritesの中のfront_defaultが、正面画像のURLです。型にすると:

type PokemonDetail = {
  id: number;
  name: string;
  sprites: {
    front_default: string;
  };
};

ネストした型は、ネストのまま写せます(内側を別typeに切り出しても正解です)。数千行のJSONが、使う3行の型になりました——型は「巨大な現実から、使う分だけを宣言する」道具でもあるのです。

手順②: 「何を選んでいるか」をstateにする

一覧と詳細をつなぐ蝶番は、「いま、どのポケモンを選んでいるか」という情報です。時間とともに変わり、画面を左右する——stateですね。