ポケモンに関する様々な情報を取得できるAPIのPokeAPI。勉強がてらPokeAPIでポケモンの簡単な情報を取得できるスクリプトを書いてみました。素のJavaScriptのみですが、コードがあまりきれいじゃないのでエレガントに書きたいものです。なお、PokeAPIで取れる情報は以下の記事を参考にしています。

• PokeAPIで取得できるポケモンのデータを簡単にまとめてみた #API – Qiita

一意のポケモンのデータを取得するには、https://pokeapi.co/api/v2/pokemon/{ポケモンの番号} でアクセスすると該当するポケモンの情報がJSON形式で返ってきます。ポケモンの番号の指定が1ならフシギダネ、448ならルカリオといった感じです。それを活用しポケモンの番号、ポケモンの名前、ポケモンの画像、ポケモンのタイプを表示させてみます。

まずはHTMLコード。

<p id="txtNo">{ポケモンの番号}</p>
<img src="{ポケモンの画像}" alt="" loading="lazy" id="imgPokemon">
<p id="txtType">{ポケモンのタイプ}</p>
<p id="txtPokemon">{ポケモンの名前}</p>

JavaScriptコード。pokeNoの値に番号を指定します。サンプルでは25を指定しています。

const pokeNo = 25; //ポケモン番号
const pokeAPI = 'https://pokeapi.co/api/v2/pokemon/'+pokeNo;
const txtNo = document.getElementById('txtNo');
const txtType = document.getElementById('txtType');
const txtPokemon = document.getElementById('txtPokemon');
const imgPokemon = document.getElementById('imgPokemon');
const getAPI = async(url) => {
 const data = await fetch(url).then((res) => res.json());
 return data;
}
async function getPokemonName(data){
 const PokemonName = data.names.find((val) => val.language.name === "ja");
 return PokemonName.name;
}
async function getPokemonType(data){
 let typeLength = data.length;
 let type = new Array();
 for (let i = 0 ; i < typeLength ; i++){
  const getTypes = await getAPI(data[i].type.url);
  const getType = getTypes.names.find((val) => val.language.name === "ja");
  type[i] = getType.name;
 }
 return type;
}
async function init(){
  const dataAPI = await getAPI(pokeAPI);
  const getIMG = dataAPI.sprites.other['official-artwork'].front_default;
  const getName = await getAPI(dataAPI.species.url);
  getPokemonType(dataAPI.types).then(res => {
   txtType.textContent = res;
  });
  getPokemonName(getName).then(res => {
   txtPokemon.textContent = res;
  });
  imgPokemon.setAttribute('src',getIMG);
  txtNo.textContent = 'No.'+pokeNo;
}
init();

PokeAPIは多言語に対応しております。しかしデフォルトのままだとすべて英語になってしまいます。そこでポケモンの名前とタイプはそれぞれlanguage.nameの値がja（日本語）のものを走査し、該当する日本語の値を取得しています。

実行結果です。25番のピカチュウが表示されました。

番号を変えてみます。250番のホウオウです。ポケモンのタイプは複数ある場合があるのでそれぞれ配列で処理されます。

現時点で最新版のポケモン スカーレット・バイオレットのパルデア地方のポケモン情報も取得できます。

ポケモン情報、ゲットだぜ！

おしまい♥