みなさんこんにちは。
小学2年生になる息子がいるのですが、
ポケモンが大好きです。
かつ、今後のICT教育を見据え、パソコンにはどんどん触れてほしいと思い、
ポケモンアプリを開発しました。
アプリの詳細については過去のブログで紹介させていただいております。
また、アプリの中でポケモンのBGMを流しているのですが、
そちらの再生方法、停止方法については以下で解説しております。
この記事がおすすめな人
今回の記事は以下の人に特におすすめです。
・React：初学者、初級者～中級者
・アプリを開発したい人
・手順だけを知りたい人
・コードだけを知りたい人
コンポーネントを作成する
テキストボックスに任意の数字を入れて、
「ポケモンの名前」を表示するコンポーネントを追加します。
前回の画面構成については、過去記事の内容をご参照ください。
=============================
{/* ポケモンの名前 */}
<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アプリ開発サービスを出品しております。
自分で開発をしようと思ったけど、依頼したり、
何か聞きたいことがあったりしたら、
いつでもお気軽にご相談ください。
また、内容についてご不明点があればメッセージをいただけると幸いです！！
