図鑑アプリを作る①——設計と一覧

最後の題材は、ポケモン図鑑です。PokéAPIという、世界中の学習者に愛されている無料APIを使って、「一覧を表示し(今章)、選ぶと詳細が出る(次章)」図鑑アプリを2章かけて作ります。React教材のToDoと同じく、新しい道具はゼロ。この教材で学んだ手順——実物を見る→型を写す→3状態→表示——を、初見のAPIに対して自力で回す練習です。実務で新しいAPIと出会った日にやることを、そのまま先取りします。

手順①: まず実物を見る

新しいAPIに触れる最初の一歩は、ブラウザで開いて実物を見る。

https://pokeapi.co/api/v2/pokemon?limit=20

URLの ?limit=20 は「20件ください」という注文です(? 以降はクエリパラメータと呼ばれる注文欄——名前だけ覚えれば今は十分です)。返ってくるJSONの、使う部分だけ抜粋します:

{
  "count": 1302,
  "results": [
    { "name": "bulbasaur", "url": "https://pokeapi.co/api/v2/pokemon/1/" },
    { "name": "ivysaur",   "url": "https://pokeapi.co/api/v2/pokemon/2/" }
  ]
}