【React】PokemonAPIを使用して画像を取得する

みなさんこんにちは。

小学2年生になる息子がいるのですが、

ポケモンが大好きです。

かつ、今後のICT教育を見据え、パソコンにはどんどん触れてほしいと思い、ポケモンアプリを開発しました。

ゲームボーイカラー風ポケモンアプリ

【参考：ゲームボーイカラー風ポケモンアプリを操作してみたい人】

開発したポケモンアプリの詳細については過去の記事で紹介させていただいております。

PokemonAPIを使用してポケモンアプリを開発しました

また、アプリの中でポケモンのBGMを流しているのですが、

そちらの再生方法、停止方法については以下で解説しております。

Pokemon Game Sound Libraryで音楽を再生する

今回はPokemon APIを使用してポケモンの画像やポケモンの名前の取得方法について解説していきたいと思います。

この記事がおすすめな人

今回の記事は以下の人に特におすすめです。

React：初学者、初級者～中級者
アプリを開発したい人
手順だけを知りたい人
コードだけを知りたい人

手順

Pokemon APIの存在と仕組みを理解する

まずは、Pokemon APIがどんなものがざっくりでいいので調べる必要があります。

【参考：【公式】Pokemon API　についてはこちらで理解を深めましょう！】

コンポーネントを作成する

テキストボックスに任意の数字を入れて、

「ポケモンを取得」ボタンをクリックするとポケモンの画像と名前を取得する仕組みを作ります。

画面構成としては以下のようなコードになります。

    <Container maxWidth="sm">
      <Box sx={{ flexGrow: 1,
                   bgcolor: '#f5f5f5' }}>
          {/* テキスト表示領域 */}
          <Grid container spacing={2}>
            <Grid item xs={12} align="center">
              <Typography>
                ポケモン画像を取得
              </Typography>
            </Grid>
            <Grid item xs={12} align="center">
              <Typography>
                数字を入力
              </Typography>
            </Grid>
            <Grid item xs={6} align="right">
              <TextField 
                value={value}
                onChange={handleChange}>
              </TextField>
            </Grid>
            <Grid item xs={6} align="left">
              <Button variant='contained'
               onClick={fetchPokemonImages}>
                ポケモンを取得
              </Button>
            </Grid>
            {/* ポケモン表示 */}
            <Grid item xs={12} align="center">
              <img
                src    = {pokemonImage}
                width  = "150px"
                height = "150px"/>
            </Grid>
          </Grid>
      </Box>
    </Container>

画面は以下のようになります。

変数と関数をコーディングする

TextFiledの入力時やボタンクリック時の処理、ポケモン情報取得に関するコードは以下のようになります。

  const [value        , setValue        ] = useState() // 答えのテキストボックスに入力している値
  const [pokemonImage , setPokemonImage ] = useState() // ポケモン画像表示

  // テキストボックスの内容
  const handleChange = (event) => {
    // 入力された値が数字でない場合は削除します
    const inputValue = event.target.value.replace(/[^0-9]/g, '')
    setValue(inputValue)
    console.log(value)
  }

  // ポケモンAPIを呼び出す
  const fetchPokemonImages = async () => {
    // ポケモンAPIを呼び出す
    const response = await axios.get("https://pokeapi.co/api/v2/pokemon/" + value)
    const speciesUrl = response.data.species.url
    const speciesResponse = await axios.get(speciesUrl)
    // ポケモンの画像を取得
    setPokemonImage(response.data.sprites.front_default)
  }

公式のリファレンスにもありますが、「https://pokeapi.co/api/v2/pokemon」の末尾にポケモンの図鑑No.を記載すると

そのNoに該当するポケモンの情報をレスポンスとしてJSON形式で返してくれます。

NO=150でAPIをたたくと、ミュウツーに関する情報がゲットできます。

コード全体

コード全体については以下の内容となります。

import   React      ,
       { useState   ,} from "react"
import { TextField  , 
         Typography ,
         Box        ,
         Grid       ,
         Container  ,
         Button     ,} from "@mui/material"
import   axios         from 'axios'

function PokemonGetImg() {
  const [value        , setValue        ] = useState() // 答えのテキストボックスに入力している値
  const [pokemonImage , setPokemonImage ] = useState() // ポケモン画像表示

  // テキストボックスの内容
  const handleChange = (event) => {
    // 入力された値が数字でない場合は削除します
    const inputValue = event.target.value.replace(/[^0-9]/g, '')
    setValue(inputValue)
    console.log(value)
  }

  // ポケモンAPIを呼び出す
  const fetchPokemonImages = async () => {
    // ポケモンAPIを呼び出す
    const response = await axios.get("https://pokeapi.co/api/v2/pokemon/" + value)
    const speciesUrl = response.data.species.url
    const speciesResponse = await axios.get(speciesUrl)
    // ポケモンの画像を取得
    setPokemonImage(response.data.sprites.front_default)

  }

  return (
    <Container maxWidth="sm">
      <Box sx={{ flexGrow: 1,
                   bgcolor: '#f5f5f5' }}>
          {/* テキスト表示領域 */}
          <Grid container spacing={2}>
            <Grid item xs={12} align="center">
              <Typography>
                ポケモン画像を取得
              </Typography>
            </Grid>
            <Grid item xs={12} align="center">
              <Typography>
                数字を入力
              </Typography>
            </Grid>
            <Grid item xs={6} align="right">
              <TextField 
                value={value}
                onChange={handleChange}>
              </TextField>
            </Grid>
            <Grid item xs={6} align="left">
              <Button variant='contained'
               onClick={fetchPokemonImages}>
                ポケモンを取得
              </Button>
            </Grid>
            {/* ポケモン表示 */}
            <Grid item xs={12} align="center">
              <img
                src    = {pokemonImage}
                width  = "150px"
                height = "150px"/>
            </Grid>
          </Grid>
        <br/>
      </Box>
    </Container>
  );
}

export default PokemonGetImg