みなさんこんにちは。
小学2年生になる息子がいるのですが、
ポケモンが大好きです。
かつ、今後のICT教育を見据え、パソコンにはどんどん触れてほしいと思い、ポケモンアプリを開発しました。
アプリの詳細については過去のブログで紹介させていただいております。
また、アプリの中でポケモンのBGMを流しているのですが、
そちらの再生方法、停止方法については以下で解説しております。
今回はPokemon APIを使用してポケモンの画像やポケモンの名前の取得方法について解説していきたいと思います。
この記事がおすすめな人
今回の記事は以下の人に特におすすめです。
・React：初学者、初級者～中級者
・アプリを開発したい人
・手順だけを知りたい人
・コードだけを知りたい人
コンポーネントを作成する
テキストボックスに任意の数字を入れて、
「ポケモンを取得」ボタンをクリックするとポケモンの画像と名前を取得する仕組みを作ります。
画面構成としては以下のようなコードになります。
=============================
<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("<エイチティーティーピーエス>://pokeapi.co/api/v2/pokemon/" + value)
const speciesUrl = response.data.species.url
const speciesResponse = await axios.get(speciesUrl)
// ポケモンの画像を取得
setPokemonImage(response.data.sprites.front_default)
===================================
※ポケモンAPIを呼び出すアドレスはココナラブログの仕様上の問題でカタカナにしております。
公式のリファレンスにもありますがAPIのアドレスの末尾にポケモンの図鑑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("<エイチティーティーピーエス>://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
===================================
検証
テキスト内に150を入力して「ポケモン取得」ボタンをクリックします。
ポケモン図鑑No.150 のミュウツーの画像が表示されました。
同じようにして1000を入力してポケモン情報を取得します。
ポケモン図鑑No.1000 のサーフゴーの画像が表示されました。
最後に
いかがでしたでしょうか。
Pokemon APIの公式ページで最初に紹介されている基本的な情報取得について解説しました。
レスポンスはもう少し複雑になりますが、画像取得が最初の一歩だと思うので、
まずは基本をしっかりと理解していただければともいます。
開発依頼について
ココナラでWebアプリ開発サービスを出品しております。
自分で開発をしようと思ったけど、依頼したり、何か聞きたいことがあったりしたら
いつでもお気軽にご相談ください。
また、内容についてご不明点があればメッセージをいただけると幸いです。
