ポケモンのAPIを使用してみよう！

はじめに

Poke APIという、ポケモンのタイプや種族値などの情報を取得できる、完全無料のAPIがあります。
この記事では、Poke APIでポケモンの情報を取得したいと思います。

レート制限はありませんが、APIのサーバー負荷を軽減するためにリクエストの頻度を極力減らすよう、心がけてください。

Poke APIを使用したWebアプリの例

https://maitaketeikoku.github.io/maitake-pokedex/

取得できる情報

dexNumberにはポケモンの図鑑番号を入れてください。
languageには言語の種類を入れてください。日本語の場合は"ja"です。
日本語で取得できる情報を中心に紹介します。

• https://pokeapi.co/api/v2/pokemon/から取得できる情報の一例

  • 高さ（例：0.4 m）
  • 重さ（例：6 kg）
  • 種族値（例：HP: 35、こうげき: 55、ぼうぎょ: 40、とくこう: 50、とくぼう: 50、すばやさ: 90）
  • タイプ（例：でんき）

  // 図鑑番号（例：No.25）を指定
  const dexNumber: string = "25";
  
  // APIにリクエスト
  const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${dexNumber}`);
  const data = await response.json();
  
  // 高さ（例：0.4）
  const height: number = data.height / 10;
  // 重さ（例：6）
  const weight: number = data.weight / 10;
  
  // 種族値（例：{ h: 35, a: 55, b: 40, c: 50, d: 50, s: 90 }）
  type StatsList = { h: number, a: number, b: number, c: number, d: number, s: number };
  const statsList: StatsList = {
    h: data.stats.find((stat: any) => stat.stat.name === "hp")?.base_stat ?? 0,
    a: data.stats.find((stat: any) => stat.stat.name === "attack")?.base_stat ?? 0,
    b: data.stats.find((stat: any) => stat.stat.name === "defense")?.base_stat ?? 0,
    c: data.stats.find((stat: any) => stat.stat.name === "special-attack")?.base_stat ?? 0,
    d: data.stats.find((stat: any) => stat.stat.name === "special-defense")?.base_stat ?? 0,
    s: data.stats.find((stat: any) => stat.stat.name === "speed")?.base_stat ?? 0
  };
  
  // 合計種族値を計算（例：320）
  const totalStats: number = Object.values(statsList).reduce((a, b) => a + b, 0);
  
  // 英語のタイプ（例：electric）
  const typeNames: string[] = data.types.map((item: any) => item.type.name);
  

• https://pokeapi.co/api/v2/pokemon-species/から取得できる情報の一例

  • ポケモンの名前（例：ピカチュウ）
  • ポケモンの分類（例：ねずみポケモン）
  • 伝説かどうか（例：false）
  • 幻かどうか（例：false）

  // 図鑑番号（例：No.25）を指定
  const dexNumber: string = "25";
  // 言語（例：日本語）を指定
  const language: string = "ja";
  
  // APIにリクエスト
  const speciesResponse = await fetch(`https://pokeapi.co/api/v2/pokemon-species/${dexNumber}`);
  const speciesData = await speciesResponse.json();
  
  // ポケモンの名前（例：ピカチュウ）
  const name: string = speciesData.names.find((item: any) => item.language.name === language)?.name || "";
  
  // ポケモンの分類（例：ねずみポケモン）
  const genus: string = speciesData.genera.find((item: any) => item.language.name === language)?.genus || "";
  
  // 伝説かどうか（例：false）
  const isLegendary: boolean = speciesData.is_legendary;
  
  // 幻かどうか（例：false）
  const isMythical: boolean = speciesData.is_mythical;
  

• ポケモンの画像を取得（画像の種類は、GIF画像など他にもたくさんありますが、ここでは一例を紹介します。）

  // 図鑑番号（例：No.25）を指定
  const dexNumber: string = "25";
  // 色違いかどうか（例：通常色）を指定
  const isShiny: boolean = false;
  // 画像の種類（例：ゲーム内で正面から見た画像）を指定
  const imageType: string = "正面";
  
  // 指定した情報を変換
  const imageTypeList: { type: string, url: string }[] = [
    { type: "公式イラスト", url: "/other/official-artwork" },
    { type: "正面", url: "" },
    { type: "背面", url: "/back" },
    { type: "ポケモンホーム", url: "/other/home" }
  ];
  const imageTypeUrl = imageTypeList.find((item) => item.type === imageType)?.url;
  const shiny: string = isShiny ? "/shiny" : "";
  
  // ポケモンの画像URL
  const url: string = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon${imageTypeUrl}${shiny}/${dexNumber}.png`;
  

• ポケモンの鳴き声を取得（音声ファイルがOGG形式なので、再生できないブラウザがあります。）

  // 図鑑番号（例：No.25）を指定
  const dexNumber: string = "25";
  
  // ポケモンの鳴き声を再生する関数
  const playCries = () => {
    const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
    
    fetch(`https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/${dexNumber}.ogg`)
    .then(response => response.arrayBuffer())
    .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
    .then(audioBuffer => {
      const source = audioContext.createBufferSource();
      source.buffer = audioBuffer;
      source.connect(audioContext.destination);
      source.start(0);
    })
    .catch(e => console.error(e));
  };
  

• 言語やタイプ名は更新頻度が非常に低いので、自作のリストを作成しておき、必要に応じて変換すると良いです。

  // 言語の種類
  const languageList: { value: string; label: string }[] = [
    { value: "ja", label: "日本語" },
    { value: "ja-Hrkt", label: "にほんご" },
    { value: "en", label: "English" },
    { value: "ko", label: "한국어" },
    { value: "fr", label: "français" },
    { value: "de", label: "Deutsch" },
    { value: "es", label: "español" },
    { value: "it", label: "Italiano" },
    { value: "zh-Hant", label: "繁體" },
    { value: "zh-Hans", label: "简体" },
  ];
  
  // タイプ名の英日変換一覧
  const typeNamesList: { name: string, nameJa: string }[] = [
    { name: "normal", nameJa: "ノーマル" },
    { name: "fire", nameJa: "ほのお" },
    { name: "water", nameJa: "みず" },
    { name: "grass", nameJa: "くさ" },
    { name: "electric", nameJa: "でんき" },
    { name: "ice", nameJa: "こおり" },
    { name: "fighting", nameJa: "かくとう" },
    { name: "poison", nameJa: "どく" },
    { name: "ground", nameJa: "じめん" },
    { name: "flying", nameJa: "ひこう" },
    { name: "psychic", nameJa: "エスパー" },
    { name: "bug", nameJa: "むし" },
    { name: "rock", nameJa: "いわ" },
    { name: "ghost", nameJa: "ゴースト" },
    { name: "dragon", nameJa: "ドラゴン" },
    { name: "dark", nameJa: "あく" },
    { name: "steel", nameJa: "はがね" },
    { name: "fairy", nameJa: "フェアリー" }
  ];
  
  // タイプを英語から日本語に変換
  const typeNamesJa: string[] = typeNames.map((typeName) =>
    typeNamesList.find((type) => type.name === typeName)?.nameJa || ""
  );