TEXTBOOK SECTION / AI LEARNING

ポケモンの名前・画像URL・高さ・重さを取得する

Flutterアプリケーション開発概論の「Flutter API連携入門｜ポケモン図鑑アプリの作り方」より、ポケモンの名前・画像URL・高さ・重さを取得するを解説。生成AI、AI活用、DX、業務改善を実践しながら学べるオンライン教材です。

第6節Flutter API連携入門｜ポケモン図鑑アプリの作り方Flutter / iOS / Android / MacOS / Windows / 基礎から学ぶ / 開発 / アプリ開発
本文を読む教材トップへ戻る

OVERVIEW

この節で学べること

概要を表示する
項目内容
教材名Flutterアプリケーション開発概論
章Flutter API連携入門｜ポケモン図鑑アプリの作り方
節ポケモンの名前・画像URL・高さ・重さを取得する
カテゴリFlutter / iOS / Android / MacOS / Windows / 基礎から学ぶ / 開発 / アプリ開発
学習内容生成AI、AI活用、DX、業務改善を実践しながら理解するための教材です。

TABLE OF CONTENTS

目次

目次を表示する

CONTENT

ここから

この節では、PokéAPIから返ってきたJSONデータの中から、実際にアプリで使う情報を取り出します。

ここから少し「実装っぽく」なります。

やることは、シンプルです。

たくさんあるデータの中から
必要な4つだけ取り出す

今回取り出すのは、この4つです。

name
sprites.front_default
height
weight

まず結論

ポケモン図鑑アプリで画面に表示するために、次のデータを取得します。

取得するものJSONの場所画面での使い方
名前nameTextで表示
画像URLsprites.front_defaultImage.networkで表示
高さheightTextで表示
重さweightTextで表示

ここで大切なのは、APIから返ってくるデータを全部使おうとしないことです。

PokéAPIのデータはかなり多いです。

でも、初心者が最初に見るべき場所は限られています。

必要なものだけ取る

これがAPI連携の基本です。

APIのデータは「大きな箱」だと思えばいい

APIから返ってくるJSONは、最初は長く見えます。

でも、イメージとしては「大きな箱」です。

その箱の中に、いろいろな情報が入っています。

名前
高さ
重さ
画像
タイプ
技
能力
経験値
その他たくさん

今回の授業では、その中から4つだけ取り出します。

名前
画像URL
高さ
重さ

つまり、全部を理解しようとする必要はありません。

必要なものを探して、取り出せればOKです。

名前を取得する

ポケモンの名前は、name に入っています。

JSONでは、次のような形です。

{
  "name": "pikachu"
}

Flutterでは、次のように取り出します。

final name = data['name'];

これで、pikachu という名前を取り出せます。

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

dataの中にあるnameを見る
↓
pikachuが取り出せる

難しく言うとMapから値を取り出しています。

でも最初は、

data['name'] = 名前を取り出す

と覚えれば大丈夫です。

高さを取得する

高さは、height に入っています。

JSONでは、次のような形です。

{
  "height": 4
}

Flutterでは、次のように取り出します。

final height = data['height'];

これで高さを取得できます。

画面に表示するときは、あとで文字にして表示します。

Text('高さ：$height')

最初は単位まで深く考えなくて大丈夫です。

まずは、APIから数字を取り出して画面に表示できることを優先します。

重さを取得する

重さは、weight に入っています。

JSONでは、次のような形です。

{
  "weight": 60
}

Flutterでは、次のように取り出します。

final weight = data['weight'];

画面に表示するときは、次のようにします。

Text('重さ：$weight')

ここまでで、名前・高さ・重さはかなり簡単です。

name
height
weight

この3つは、JSONの浅い場所にあるので取り出しやすいです。

画像URLは少しだけ奥にある

少しだけ難しいのが画像URLです。

画像URLは、sprites の中の front_default に入っています。

JSONでは、このような形です。

{
  "sprites": {
    "front_default": "https://raw.githubusercontent.com/..."
  }
}

ここで止まる人が多いです。

でも、落ち着いて見れば大丈夫です。

これは、こういう意味です。

spritesという箱の中に
front_defaultという画像URLが入っている

Flutterでは、次のように取り出します。

final imageUrl = data['sprites']['front_default'];

読み方はこうです。

dataの中のspritesを見る
↓
spritesの中のfront_defaultを見る
↓
画像URLを取り出す

つまり、箱の中の箱を開けているだけです。

取り出すコードをまとめる

今回必要なデータを取り出すコードは、次の4行です。

final name = data['name'];
final height = data['height'];
final weight = data['weight'];
final imageUrl = data['sprites']['front_default'];

これだけ見ると、少しコードっぽく見えます。

でも、意味はシンプルです。

名前を取り出す
高さを取り出す
重さを取り出す
画像URLを取り出す

この4つを取り出せれば、ポケモン図鑑アプリの基本画面を作れます。

画面に表示するイメージ

取得したデータは、Flutterの画面に表示します。

Text('名前：$name')
Text('高さ：$height')
Text('重さ：$weight')
Image.network(imageUrl)

画面では、次のように見えます。

名前：pikachu

画像

高さ：4
重さ：60

ここで大事なのは、APIから取得したデータが、画面の部品に変わっていく感覚です。

JSONデータ
↓
Dartの変数
↓
FlutterのWidget
↓
画面に表示

この流れが分かると、API連携がかなり理解しやすくなります。

ここで混乱しやすいポイント

dataって何？

data は、APIから返ってきたJSONをFlutterで使える形にしたものです。

簡単に言うと、

APIから受け取ったデータのまとまり

です。

この中から、name や height を取り出します。

なぜ画像だけ data['sprites']['front_default'] なの？

名前や高さは、すぐ外側にあります。

data['name']
data['height']
data['weight']

でも画像URLは、sprites の中にあります。

だから、2段階で取り出します。

data['sprites']['front_default']

イメージはこれです。

大きな箱 data
↓
sprites の箱
↓
front_default の画像URL

画像はどうやって表示するの？

画像URLを取得したら、Flutterでは Image.network() を使います。

Image.network(imageUrl)

これは、インターネット上の画像を表示するためのWidgetです。

つまり、

画像URLを取得する
↓
Image.networkに渡す
↓
画面に画像が出る

という流れです。

初心者が意識するポイント

API連携では、最初からきれいなコードを書こうとしなくて大丈夫です。

まずは、この順番で考えます。

1. JSONのどこにデータがあるか見る
2. Flutterで取り出す
3. 変数に入れる
4. 画面に表示する

この順番を守ると、混乱しにくくなります。

特に大事なのは、JSONの場所を先に確認することです。

コードを書く前に、

nameはどこ？
heightはどこ？
weightはどこ？
front_defaultはどこ？

と探しておくと、実装が楽になります。

ミニ課題

次のJSONを見て、どのコードで取り出せるか考えてみましょう。

{
  "name": "pikachu",
  "height": 4,
  "weight": 60,
  "sprites": {
    "front_default": "https://example.com/pikachu.png"
  }
}

答えはこちらです。

final name = data['name'];
final height = data['height'];
final weight = data['weight'];
final imageUrl = data['sprites']['front_default'];

この4行が理解できれば、この節はかなりOKです。

この節のゴール

この節のゴールは、PokéAPIのJSONから必要なデータを取り出せるようになることです。

次のことが分かれば大丈夫です。

nameは名前
heightは高さ
weightは重さ
sprites.front_defaultは画像URL
Flutterではdata['キー名']で取り出す
深い場所にあるデータはdata['親']['子']で取り出す

まとめ

この節では、ポケモンの名前・画像URL・高さ・重さを取得する方法を学びました。

今回使うデータは、次の4つです。

name
height
weight
sprites.front_default

Flutterでは、次のように取り出します。

final name = data['name'];
final height = data['height'];
final weight = data['weight'];
final imageUrl = data['sprites']['front_default'];

APIから返ってくるJSONは長いですが、全部を読む必要はありません。

必要なデータの場所を見つけて、取り出し、画面に表示する。

これがAPI連携の基本です。

次の節では、Flutterに http パッケージを追加して、実際にAPIへアクセスする準備をしていきます。

前の節APIから返ってくるJSONデータの読み方次の節Flutterにhttpパッケージを追加する

FAQ

よくある質問

ポケモンの名前・画像URL・高さ・重さを取得するは医療関係者向けだけの内容ですか。
医療分野の例が含まれる場合もありますが、医療関係者だけに限定した内容ではありません。生成AI、AI活用、DX、業務改善、プロトタイプ開発など、一般的なAI学習の事例として読める内容です。
AI初心者でも読めますか。
はい。AIをこれから学ぶ方、数学が苦手な方、仕事でAIを使いたい方にも読み進めやすいように、教材の章と節の流れに沿って整理しています。
サムネイル画像は必ず表示されますか。
はい。教材にcoverUrlが設定されている場合はその画像を表示し、未設定の場合は代替サムネイル画像を表示します。
Flutterアプリケーション開発概論のほかの章も読めますか。
はい。教材トップから章立てを確認でき、前後の節へもページ下部のナビゲーションから移動できます。