こんにちは！まだまだポケモンが大好きなkentaです。
もちろんダイパリメイク買いました。懐かしかったです笑

最近APIについて学んで他にどんなAPIがあるのかと調べてみたらどうやらポケモンのAPIがあるらしいので今回はpokemon触ってみようと思います。

とりあえずデータ取得をしてみる

まずデータを取得しないと何も始まらないのでとりあえずjson形式で見やすくしていきます。

const url="https://pokeapi.co/api/v2/pokemon/ditto";
        fetch(url)
        .then(function(response){
            return response.json();
        })
        .then(function(pokemon){
            console.log(pokemon);
        })

とりあえずこれでconsoleにデータを表示することができました。

”ditto”のところにポケモンの名前を入れるとそのポケモンについてのデータが取得できるみたいです。
日本語は使えないみたいでちなみにdiitoはメタモンらしいです。全然日本語と違う、、笑

取れるもの

取得できた内容を見てみると基本何でも取得できます。

名前、タイプ、技、捕まえたときに持っている持ち物、、特に自分が気になったのがポケモンの画像です。今回は試しにそれを表示させてみようと思います。

const url="https://pokeapi.co/api/v2/pokemon/pikachu";
let image = document.querySelector("div")
let sprite = pokemon.sprites.back_default;
let img = document.createElement("img");
img.setAttribute("src",sprite)
image.appendChild(img);

htmlの方にdivだけは用意しておいてください。

urlのdittoの所をpikachuに変えておきましょう。
先程の.then(function(pokemon)の中にこのコードを入れます。

これでピカチュウのかわいい後ろ姿が見れると思います。

他にもたくさんの情報があるので触ってみてください！