【JS】PokeAPIでasync/awaitを使ってみよう

2024 4/11

2023年2月20日 2024年4月11日

前回の記事でasync/awaitの基礎を解説しました。

さっそく完成品のコード

こちらが完成品のコードです。

See the Pen FetchPokemon by takosan (@Yukiwebcreate) on CodePen.

コードの仕様

・ボタンを押すことで、PokeAPIから第３世代までのポケモンの名前と画像を取得します。

・エラー取得のためのtry/catchは今回は盛り込んでいません。

コードの解説

では細かく見ていきましょう。

CSSは体裁を整えただけなので割愛。

HTMLとJSのみ解説します。

HTMLはこんな感じ。

<div class="wrapper">
<button id="get">Get Random Pokemon</button>
<div id="pokemon"></div>
</div>

wrapperは全体囲ってるだけです。id=”get”は情報取得のボタンですね。

id=”pokemon”は取得した情報をもとに画像と名前を表示するエリアとなっています。

ではここからが本題です。JSのコードです。

const apiUrl = "https://pokeapi.co/api/v2/pokemon/";

document.getElementById("get").addEventListener("click", async () => {
  const response = await fetch(apiUrl + Math.floor(Math.random() * 493));
  const pokemon = await response.json();
  const image = document.createElement("img");
  const name = document.createElement("p");
  image.src = pokemon.sprites.front_default;
  name.textContent = pokemon.name;
  const pokemonDiv = document.getElementById("pokemon");
  pokemonDiv.innerHTML = "";
  pokemonDiv.appendChild(image);
  pokemonDiv.appendChild(name);
});

全体像は↑のような感じ。（少々雑なコードですがお許しを・・・）

まず最初のapiUrlはPokeAPIのURLを指定しています。ここからすべての情報を取ってきますよ、というやつです。

つづいて下記の部分、

document.getElementById("get").addEventListener("click", async () => {

ここでは、addEventListenerを使って、id=”get”のclickイベントを検知し、そこにasyncを仕込みます。

その一つ下の下記のコードでは、

const response = await fetch(apiUrl + Math.floor(Math.random() * 493));

responseを定義し、awaitを使ってPoleAPIから第３世代までのポケモンの情報を取得するまで待つように記述しています。

そしてポケモンの情報をjson()でレスポンスデータをjson形式からJSのオブジェクトに変換します↓

const pokemon = await response.json();

fetch APIを使ってHTTPリクエストを送信すると、レスポンスデータは通常、JSON形式で送信されます。JSON形式はテキスト形式のため、レスポンスをJavaScriptで扱うためには、JSON文字列をJavaScriptのオブジェクトに変換する必要があり、json()を使う事でその変換を行うことができます。

続いて下記の部分では、

const image = document.createElement("img");
const name = document.createElement("p");
image.src = pokemon.sprites.front_default;

画像を表示するためのimg要素と、名前を表示するためのp要素をそれぞれimage,nameとして定義し、

画像のソースをimage.srcで指定しています。ここでの.sprites.front_defaultは、

PokeAPIのレスポンスに含まれるプロパティ名なので、こちらで決めたものではないんです。

先ほどリクエストして返ってきたレスポンスのjsonの中にある、

ポケモンの正面画像のプロパティ名をを明示的に指定しているだけです。

そして残りの部分では

name.textContent = pokemon.name;
const pokemonDiv = document.getElementById("pokemon");
pokemonDiv.innerHTML = "";
pokemonDiv.appendChild(image);
pokemonDiv.appendChild(name);

事前に宣言した名前用のpタグのtextContentに取得したポケモンの名前を格納し、

画像を表示するためのエリアをpokemonDivという変数に入れて最後の処理をわかりやすくまとめています。

表示するためのエリアのinnerHTMLを一旦まっさらにし、

appendChildで画像を表示。

そしてappendChildで名前を表示しています。