PokéAPIのエンドポイントをブラウザで確認する

この節では、PokéAPIのエンドポイントをブラウザで開いて、APIからどんなデータが返ってくるのかを確認します。

いきなりFlutterでコードを書く前に、まずはブラウザでAPIを見てみます。

ここはかなり大事です。

なぜなら、API連携でつまずく人の多くは、コードの前に「そもそもAPIから何が返ってくるのか」を見ていないからです。

---

まず結論

今回使うURLはこれです。

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

このURLをブラウザで開くと、番号25のポケモン情報が返ってきます。

まずは、難しく考えずにこう理解してください。

APIのURLを開く
↓
データが返ってくる
↓
そのデータをFlutterで使う

これがAPI連携の最初の一歩です。

---

エンドポイントとは何か

エンドポイントとは、APIにアクセスするためのURLです。

かなり簡単に言うと、

エンドポイント = APIの住所

です。

例えば、今回のURLはこちらです。

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

この中で、最後の 25 がポケモン番号です。

25 = 番号25のポケモンを取得する

つまり、このURLは、

番号25のポケモン情報をください

という意味になります。

---

まずはブラウザで開いてみる

ChromeやSafariを開いて、次のURLを貼り付けてください。

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

開くと、たくさんの文字が出てきます。

ここで多くの人が一回止まります。

うわ、文字が多い。
これ全部読むの？

安心してください。

全部読む必要はありません。

APIのデータは、最初から全部理解しようとすると疲れます。

大事なのは、今回使うデータだけ探すことです。

---

今回探すデータは4つだけ

今回のポケモン図鑑アプリで使うのは、この4つです。

name
height
weight
front_default

それぞれの意味はこちらです。

探すキー	意味	アプリでの表示
name	名前	ポケモン名
height	高さ	高さ
weight	重さ	重さ
front_default	画像URL	ポケモン画像

APIのデータはたくさんあります。

でも、今回はこの4つだけ見れば大丈夫です。

---

nameを探してみよう

ブラウザでAPIを開いたら、まず name を探します。

Macなら、

command + F

Windowsなら、

Ctrl + F

を押してください。

検索欄に name と入力します。

すると、次のような部分が見つかります。

"name": "pikachu"

これがポケモンの名前です。

ここで一度、頭の中でこう整理します。

nameというキーに、pikachuという値が入っている

難しい言い方をすると「キーと値」ですが、最初はこうで大丈夫です。

name → pikachu

---

heightとweightを探してみよう

次に height を探します。

"height": 4

次に weight を探します。

"weight": 60

これで、高さと重さが見つかりました。

ここで大事なのは、数字の単位にこだわりすぎないことです。

今はまず、

height = 高さ
weight = 重さ

と分かれば十分です。

単位の調整や見せ方は、あとから考えれば大丈夫です。

---

画像URLを探してみよう

次に、画像を探します。

画像は front_default というキーに入っています。

ブラウザの検索で front_default を探してください。

すると、次のようなURLが見つかります。

"front_default": "https://raw.githubusercontent.com/..."

このURLがポケモン画像の場所です。

ここも大事です。

Flutterに画像ファイルを直接入れるのではありません。

APIから画像URLを取得する
↓
そのURLを使って画像を表示する

Flutterでは、あとで Image.network() を使って表示します。

Image.network(imageUrl)

つまり、APIから取得した画像URLを、Flutterの画面に表示する流れです。

---

番号を変えるとデータも変わる

ここで少し遊んでみましょう。

URLの最後の数字を変えてください。

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

次に、番号を4にします。

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

次に、番号を7にします。

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

最後の数字を変えるだけで、返ってくるポケモンが変わります。

ここで、今回作るアプリの仕組みが見えてきます。

ユーザーが番号を入力する
↓
その番号をURLの最後に入れる
↓
APIからポケモン情報を取得する
↓
画面に表示する

つまり、ブラウザで手作業でやっていることを、Flutterアプリにやらせるだけです。

---

賢い人が見るポイント

APIを見るときに、全部を読む必要はありません。

見るべきポイントは決まっています。

1. URLは正しいか
2. データは返ってきているか
3. 使いたいキーはあるか
4. どこに画像URLがあるか
5. 番号を変えたらデータも変わるか

この5つを確認できれば十分です。

API連携で強い人は、いきなりコードを書きません。

まずブラウザでAPIを確認します。

これだけで、エラーの原因をかなり減らせます。

---

Flutterでは何をするのか

ブラウザで確認できたら、次はFlutterで同じことをします。

ブラウザでは、人間がURLを開きました。

Flutterでは、アプリがURLを開きます。

ブラウザでURLを開く
↓
人間が確認する

FlutterでURLを開く
↓
アプリが自動で取得する

やっていることは同じです。

違うのは、手で開くか、コードで開くかだけです。

---

Flutterで使うURLの形

アプリでは、入力された番号を使ってURLを作ります。

例えば、入力された番号が 25 の場合です。

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

入力された番号が 150 の場合です。

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

Flutterでは、あとでこのような形でURLを作ります。

final url = 'https://pokeapi.co/api/v2/pokemon/$pokemonNumber';

ここで $pokemonNumber の部分に、ユーザーが入力した番号が入ります。

つまり、

ユーザーの入力
↓
URLを作る
↓
APIにアクセスする

という流れです。

---

ここで分からなくなりやすいこと

JSONが長すぎて分からない

これは普通です。

APIのJSONは、最初はかなり長く見えます。

でも、全部読む必要はありません。

今回見るのは4つだけです。

name
height
weight
front_default

URLを少し間違える

APIはURLが少し違うだけで動きません。

間違い例です。

https://pokeapi.co/api/v2/pokemon25

正しくはこちらです。

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

pokemon と 25 の間に / が必要です。

画像がどこにあるか分からない

画像は sprites の中にあります。

そして、今回使う画像URLは front_default です。

sprites
↓
front_default
↓
画像URL

---

試してみよう

次のURLをブラウザで開いて、name を確認してみましょう。

https://pokeapi.co/api/v2/pokemon/1
https://pokeapi.co/api/v2/pokemon/4
https://pokeapi.co/api/v2/pokemon/7
https://pokeapi.co/api/v2/pokemon/25

確認することは、この4つです。

name
height
weight
front_default

全部読まなくて大丈夫です。

必要なデータだけ探せればOKです。

---

この節のゴール

この節のゴールは、PokéAPIのURLをブラウザで開いて、必要なデータを見つけられるようになることです。

次のことができればOKです。

APIのURLをブラウザで開ける
JSONが返ってくると分かる
nameを探せる
heightとweightを探せる
front_defaultから画像URLを見つけられる
番号を変えると別のポケモンになると分かる

---

まとめ

この節では、PokéAPIのエンドポイントをブラウザで確認しました。

エンドポイントとは、APIにアクセスするためのURLです。

エンドポイント = APIの住所

今回使うURLの形は、次の通りです。

https://pokeapi.co/api/v2/pokemon/番号

番号25なら、次のURLです。

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

ブラウザで開くと、ポケモン情報がJSONで返ってきます。

今回見るべきデータは、次の4つです。

name
height
weight
front_default

API連携で大事なのは、最初から全部を理解することではありません。

必要なデータを見つけて、Flutterで使えるようにすることです。

次の節では、APIから返ってくるJSONデータの読み方を、もう少し丁寧に整理していきます。