WebAPIから取得したデータをブラウザに表示させてみた #JavaScript

わんわんお！
犬も猫も大好きな、プログラミング初心者オジサンです。

今回はjavascriptでWebAPIの使い方を学ぶため、こちらのAPI（ https://dog.ceo/dog-api/ ）を利用してサンプルコードを書いてみました。
「わんわんお？」というボタンをクリックすると、ボタンの下に犬種と画像が表示されるようにしています。

1.準備（HTMLとCSS）

APIから取得したデータを入れるハコとして、下記のとおりhtmlを書きました。

<!DOCTYPE html> 
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>わんわんお</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <button id='click'>わんわんお？</button>
  <!-- APIから取得した犬種と画像を表示する -->
  <div>犬種：<span id='type'></div>
  <div>画像：<img id='image'></div>
  <script src="js/main.js"></script>
</body>
</html>

なお、APIに登録されている画像サイズが大きいので、画像の高さが300pxになるようCSSで調整しています。

#image {
    height: 300px;
}

2. fetchメソッドで動かす

データ取得はfetchメソッドでやっています。
コードの型は、MDNで紹介されているものをそのまま流用しています。

    const button = document.getElementById('click');
    const type = document.getElementById('type');
    const image = document.getElementById('image');
    // ボタンをクリックしたらイベント発動
    button.addEventListener('click', () => {
        fetch('https://dog.ceo/api/breeds/image/random') // APIのURL
        .then(response => {
            return response.json();
        })
        .then(myJson => {
            // imgタグに取得したURL画像を入れる
            image.src = myJson['message'];
            // 取得したURLをスラッシュ記号で分割し、犬種を表した要素を取得する
            const breed = myJson['message'].split('/')[4];
            type.innerText = breed;
            button.innerText = 'わんわんお！'
        });
    });

こちらのAPIでは、次のようにjsonが構成されていました。

{
    "status": "success",
    "message": "https://images.dog.ceo/breeds/greyhound-italian/n02091032_12144.jpg"
}

messageに犬の画像が入っているので、imgタグのsrcプロパティにmessageを入れればブラウザに写真が表示されるようになります。
また、取得した画像URLをスラッシュ記号で分割すると、5番目（indexだと4）に犬種が登録されているので、splitで配列化して要素を取得すれば、犬種をブラウザ上に表示させることができます。

3. 最後に

今回のAPIはシンプルだったので、サンプルコードを作る練習にはもってこいでした。
今後レベルアップできたら、googleのAPIなどにもチャレンジしていこうと思います。