【React】PokemonAPIを使用してポケモンの名前を日本語で取得する
みなさんこんにちは。
小学2年生になる息子がいるのですが、
ポケモンが大好きです。
かつ、今後のICT教育を見据え、パソコンにはどんどん触れてほしいと思い、ポケモンアプリを開発しました。
ゲームボーイカラー風ポケモンアプリ
【参考：ゲームボーイカラー風ポケモンアプリを操作してみたい人】
開発したポケモンアプリの詳細については過去の記事で紹介させていただいております。
また、アプリの中でポケモンのBGMを流しているのですが、
そちらの再生方法、停止方法については以下で解説しております。
今回はPokemon APIを使用してポケモンの画像やポケモンの名前の取得方法について解説していきたいと思います。
この記事がおすすめな人
今回の記事は以下の人に特におすすめです。
- React：初学者、初級者～中級者
- アプリを開発したい人
- 手順だけを知りたい人
- コードだけを知りたい人
手順
Pokemon APIの存在と仕組みを理解する
まずは、Pokemon APIがどんなものがざっくりでいいので調べる必要があります。
【参考：【公式】Pokemon API についてはこちらで理解を深めましょう！】
コンポーネントを作成する
テキストボックスに任意の数字を入れて、
「ポケモンの名前」を表示するコンポーネントを追加します。
前回の画面構成については、過去記事の内容をご参照ください。
{/* ポケモンの名前 */}
<Grid item xs={12} align="center">
<Typography>
ポケモンの名前：{pokemonname} </Typography>
</Grid>
</Grid>
画面は以下のようになります。
変数と関数をコーディングする
PokemonAPI取得できるポケモンの名前は英語表記になっているので、以下のコードのようにして日本語表記にする必要があります。
// ポケモンの名前を取得
const japaneseName = speciesResponse.data.names.find(name => name.language.name === "ja").name
setPokemonName(japaneseName)
検証
テキスト内に150を入力して「ポケモン取得」ボタンをクリックします。
ミュウツーの名前が日本語で取得できました。
最後に
いかがでしたでしょうか。
Pokemon APIの公式ページで最初に紹介されている基本的な情報取得について解説しました。
レスポンスはもう少し複雑になりますが、画像取得や日本語でのポケモンの名前取得については最初の一歩だと思うので、
まずは基本をしっかりと理解していただければともいます。
開発依頼について
ココナラでWebアプリ開発サービスを出品しております。
自分で開発をしようと思ったけど、依頼したり、何か聞きたいことがあったりしたら
いつでもお気軽にご相談ください。
また、内容についてご不明点があればメッセージをいただけると幸いです
スモールスケールのWebアプリ開発します 先ずはスモールスケールのWebアプリから始めませんか？
Excelにてブラウザ操作自動化ツールを作成します その作業、webスクレイピングを使って自動化しましょう！
業務効率化(RPA)ツールを開発します Excelの”便利”を使って、業務効率化をご提供します！
