CONTENT
ここから
この節では、APIから返ってくる JSONデータの読み方 を学びます。
APIをブラウザで開くと、たくさんの文字が出てきます。
最初に見ると、
長い。
どこを見ればいいのか分からない。
これを全部読むの？
大丈夫です。
JSONは、全部読むものではありません。
必要な場所だけ探して、使うものです。
まず結論
今回見るのは、この4つだけです。
name
height
weight
sprites.front_default
それぞれの意味はこちらです。
| JSONのキー | 意味 | 画面で使う場所 |
|---|---|---|
name | 名前 | ポケモン名 |
height | 高さ | 高さ表示 |
weight | 重さ | 重さ表示 |
sprites.front_default | 画像URL | ポケモン画像 |
APIのJSONは長いですが、今回のアプリではこの4つだけ分かればOKです。
JSONとは何か
JSONとは、データを整理して渡すための形です。
難しく言うとデータ形式ですが、最初はこう考えてください。
JSON = APIから返ってくるデータのメモ帳
例えば、ポケモン情報がこんな形で返ってきます。
{
"name": "pikachu",
"height": 4,
"weight": 60
}
見た目は少しコードっぽいですが、やっていることはシンプルです。
name には pikachu が入っている
height には 4 が入っている
weight には 60 が入っている
つまり、JSONは「名前」と「中身」のセットでできています。
キーと値を理解しよう
JSONでは、左側がキー、右側が値です。
"name": "pikachu"
この場合、
キー = name
値 = pikachu
です。
別の例です。
"height": 4
この場合、
キー = height
値 = 4
です。
ここで大事なのは、英単語を全部覚えることではありません。
「左の名前を使って、右のデータを取り出す」と分かれば十分です。
{}** は1つのデータのまとまり**
JSONでよく出てくる {} は、1つのデータのまとまりです。
{
"name": "pikachu",
"height": 4,
"weight": 60
}
これは、こういう意味です。
1匹のポケモン情報が、1つのまとまりになっている
最初は、{} を「箱」だと思うと分かりやすいです。
箱の中に
名前
高さ
重さ
が入っている
[]** はデータの一覧**
もう1つよく出てくるのが [] です。
[] は、データの一覧です。
例えば、タイプ情報はこのように複数入ることがあります。
"types": [
{
"type": {
"name": "electric"
}
}
]
ここで急に難しく感じるかもしれません。
でも、落ち着いてください。
[] は「リスト」です。
[] = いくつかのデータが並んでいる
今回はタイプ表示までは必須ではないので、深追いしなくて大丈夫です。
まずは、name、height、weight、front_default に集中しましょう。
画像URLは少し奥にある
名前や高さは、比較的見つけやすいです。
"name": "pikachu",
"height": 4,
"weight": 60
でも、画像URLは少し奥にあります。
"sprites": {
"front_default": "https://raw.githubusercontent.com/..."
}
これは、こういう構造です。
sprites の中に
front_default がある
つまり、画像URLを取り出すときは、
sprites
↓
front_default
の順番でたどります。
Flutterでは、あとでこのように取り出します。
final imageUrl = data['sprites']['front_default'];
ここが少し難しく見えますが、意味はシンプルです。
dataの中のspritesを見て
その中のfront_defaultを取り出す
Flutterで取り出すイメージ
APIから受け取ったJSONをFlutterで使うときは、必要なデータを取り出します。
final name = data['name'];
final height = data['height'];
final weight = data['weight'];
final imageUrl = data['sprites']['front_default'];
それぞれの意味です。
| Dartコード | 取り出しているもの |
|---|---|
data['name'] | 名前 |
data['height'] | 高さ |
data['weight'] | 重さ |
data['sprites']['front_default'] | 画像URL |
ここで全部を暗記する必要はありません。
まずは、JSONのキー名とFlutterの取り出し方がつながっていることを理解しましょう。
読み方のコツ
JSONを読むときは、上から全部読もうとしないでください。
賢く読むコツは、探すものを先に決めることです。
名前がほしい
↓
nameを探す
高さがほしい
↓
heightを探す
重さがほしい
↓
weightを探す
画像がほしい
↓
front_defaultを探す
APIのJSONは、説明書というより倉庫です。
倉庫の中にたくさん物が入っています。
でも、今日必要なのは4つだけです。
よく分からなくなるポイント
文字が多すぎる
APIのJSONは、最初から全部読むものではありません。
検索を使って必要なキーだけ探しましょう。
command + F
Ctrl + F
で、name や front_default を検索すると見つけやすいです。
{}** と [] が混ざっていて混乱する**
これも普通です。
最初は、こう覚えてください。
{} = 1つのまとまり
[] = 一覧
それだけで十分です。
画像URLの場所が分からない
画像は sprites の中にあります。
今回使うのは、
sprites.front_default
です。
つまり、
spritesの中のfront_default
と読みます。
見てみよう
ブラウザで次のURLを開いてください。
https://pokeapi.co/api/v2/pokemon/25
そして、次の4つを探してみましょう。
name
height
weight
front_default
見つけられたら、この節はほぼ理解できています。
余裕がある人は、番号を変えて試してみましょう。
https://pokeapi.co/api/v2/pokemon/1
https://pokeapi.co/api/v2/pokemon/4
https://pokeapi.co/api/v2/pokemon/7
番号を変えると、返ってくるJSONの中身も変わります。
この節のゴール
この節のゴールは、JSONを完璧に読むことではありません。
ゴールは、必要なデータを見つけられるようになることです。
次のことが分かればOKです。
JSONはキーと値でできている
{} は1つのまとまり
[] は一覧
name・height・weightは見つけやすい
画像URLはsprites.front_defaultにある
Flutterではキー名を使ってデータを取り出す
まとめ
APIから返ってくるJSONは、最初は難しく見えます。
でも、全部を読む必要はありません。
今回のポケモン図鑑アプリで見るべきデータは、この4つです。
name
height
weight
sprites.front_default
JSONを読むときのコツは、必要なキーだけ探すことです。
全部読む
ではなく、
必要なデータを探す
と考えましょう。
この考え方が分かると、天気API、ニュースAPI、AI APIなど、他のAPIでも同じようにデータを取り出せるようになります。
次の節では、ポケモンの名前・画像URL・高さ・重さを、実際にFlutterで扱う準備をしていきます。