わんわんお！
犬も猫も大好きな、プログラミング初心者オジサンです。
今回は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などにもチャレンジしていこうと思います。