015-Poke picture book｜Step2_PokeAPIでデータを取得

ポケモンデータを取ってくるプログラム！

このプログラムは、**「ポケモンの情報をインターネットから取ってきて使う」**というものだよ！
ポケモンの情報をもらうために、「PokeAPI（ポケモンのデータがいっぱいあるサイト）」を使っているよ。

コードを分けて考えよう！

このプログラムは 2つの大事な部分 に分かれているよ！

1. ポケモンデータをもらう関数（getAllPokemon）
2. ポケモンデータを使うアプリ（App）

1. ポケモンデータをもらう関数 (getAllPokemon)

export const getAllPokemon = (url) => {
    return new Promise((resolve, reject) => {
        fetch(url)
            .then((res) => res.json())
            .then((data) => resolve(data));
    });
};

この関数の働き

この関数は 「ポケモンのデータをPokeAPIからもらう」 という仕事をするよ！

fetch(url) とは？

• fetch(url) は、インターネット上のデータをもらうためのもの。
• url の場所に行って、データを取ってくるよ。
• 例えば url に "https://pokeapi.co/api/v2/pokemon" を入れると、ポケモンのデータを取れるよ。

「.then((res) => res.json())」の意味

• res.json() は、「取ってきたデータを分かりやすい形（JSON）にする」こと。
• JSON（ジェイソン）は、プログラムがデータを読みやすくするためのルールだよ。

データを受け取る準備

• resolve(data) で、データを返しているよ。
• つまり、この関数を使えば 「ポケモンのデータを取ってこれる！」 ということ！

2ポケモンデータを使う (App コンポーネント)

import { useEffect } from 'react';
import './App.css';
import { getAllPokemon } from './utils/pokemon';

function App() {
  const initialURL = "https://pokeapi.co/api/v2/pokemon";

  useEffect(()=>{
    const fetchPokemonData = async () => {
      // 全てのポケモンデータを取得
      let res = await getAllPokemon(initialURL);
      console.log(res);
    };
    fetchPokemonData();
  },[]);

  return (
    <div className="App">
      
    </div>
  );
}

export default App;

App コンポーネントって何？

App は、ポケモンデータを取ってきて 「表示するための部品（コンポーネント）」 だよ！
Reactという仕組みを使って、Webページにデータを見せることができるよ。

useEffect とは？

useEffect(()=>{
    const fetchPokemonData = async () => {
      let res = await getAllPokemon(initialURL);
      console.log(res);
    };
    fetchPokemonData();
},[]);

useEffect は、「ページが開いたときにポケモンデータを取る」ために使うよ。

何が起こるの？

1. useEffect が動くのは ページが開いたとき。
2. fetchPokemonData という関数が動く。
3. fetchPokemonData の中で getAllPokemon(initialURL) を呼び出して、ポケモンデータを取ってくる。
4. console.log(res); で、データを画面（開発ツールのコンソール）に表示する。

このプログラムの流れ

1. 最初に App が開く（Webページが開く）。
2. useEffect が動く（ポケモンデータを取りにいく）。
3. getAllPokemon がAPIからデータを取る。
4. データを受け取って console.log(res); で表示！

まとめ

• getAllPokemon はポケモンデータをもらう関数。
• App はデータをもらって表示するコンポーネント。
• useEffect を使ってページが開いたときにポケモンデータを取る。
• 最終的にポケモンデータが console.log で見える！

もっとわかりやすく例えると？

これは 「ポケモンずかんを見せるお店」 みたいなものだよ！

1. getAllPokemon(url) は 「ポケモンを探しに行く店員さん」。
2. App は 「ポケモンずかんを見せるお店」。
3. useEffect は 「お客さん（ユーザー）が来たら、店員さんを動かす仕組み」。

ポケモンずかんを見たい人が（Webページを開いたら）、店員さんがPokeAPIに行ってポケモンデータを取ってきてくれる！ って感じだよ！

「もっとポケモンデータを画面に表示したい！」 と思ったら、console.log(res) の部分を div にデータを表示するようにするといいよ！