CONTENT
ここから
この節では、PokéAPIから取得できるデータを確認します。
今回のポケモン図鑑アプリでは、すべてのデータを使う必要はありません。
まずは、画面に表示しやすいデータだけを使います。
名前
画像URL
高さ
重さ
PokéAPIとは
PokéAPIは、ポケモンに関するデータを取得できるAPIです。
FlutterアプリからAPIにアクセスすると、ポケモンの情報がJSON形式で返ってきます。
例えば、ポケモン番号 25 のデータを取得する場合は、次のようなURLを使います。
https://pokeapi.co/api/v2/pokemon/25
このURLにアクセスすると、番号25のポケモン情報を取得できます。
今回使うデータ
今回の授業で使うデータは、次の4つです。
| 使うデータ | JSONのキー | 画面での使い方 |
|---|---|---|
| 名前 | name | ポケモン名を表示する |
| 画像URL | sprites.front_default | 画像を表示する |
| 高さ | height | 高さを表示する |
| 重さ | weight | 重さを表示する |
APIからは、他にもタイプ、技、能力、経験値など多くのデータが返ってきます。
ただし、初心者のうちは必要なものだけ取り出せれば大丈夫です。
JSONデータのイメージ
APIから返ってくるデータは、だいたい次のような形です。
{
"name": "pikachu",
"height": 4,
"weight": 60,
"sprites": {
"front_default": "画像URL"
}
}
この中から、画面に表示したいデータを取り出します。
name → 名前
height → 高さ
weight → 重さ
sprites.front_default → 画像URL
Flutterで使うときの考え方
Flutterでは、APIから受け取ったJSONを Map として扱います。
例えば、次のように取り出します。
final name = data['name'];
final height = data['height'];
final weight = data['weight'];
final imageUrl = data['sprites']['front_default'];
この4つを取り出せれば、ポケモン図鑑の基本画面を作れます。
名前をTextで表示
画像URLをImage.networkで表示
高さをTextで表示
重さをTextで表示
画面に表示する完成イメージ
Flutter画面では、このように表示します。
名前：pikachu
画像
高さ：4
重さ：60
最初は英語名のままで大丈夫です。
日本語名やタイプ表示は、あとから追加する応用機能として考えます。
初心者が意識するポイント
PokéAPIから返ってくるデータは多いです。
全部を理解しようとすると難しく感じます。
最初は、次の4つだけ見ればOKです。
name
sprites.front_default
height
weight
API学習では、すべてを読むことよりも、必要なデータを探して取り出すことが大切です。
この節のゴール
この節のゴールは、PokéAPIからどんなデータを取得するかを理解することです。
次のことが分かればOKです。
PokéAPIはポケモン情報を返すAPI
今回は名前・画像URL・高さ・重さを使う
JSONの中から必要なキーを探す
FlutterではMapからデータを取り出す
まとめ
この節では、PokéAPIで取得できるポケモンデータを確認しました。
今回使うデータは、次の4つです。
name
sprites.front_default
height
weight
この4つを取得できれば、ポケモン番号を入力して、名前・画像・高さ・重さを表示する図鑑アプリを作れます。
次の節では、実際にPokéAPIのエンドポイントをブラウザで開いて、返ってくるJSONデータを確認します。