初めてWeb APIを叩いてみた（超初心者） #初心者

設計

ボタンを押したらランダムに犬の写真が表示されるサイト。必要なのはボタンと写真が表示されるスペースのみです。

HTMLファイルの作成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dog Image Creater</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <img src="" alt="" id="dog_image">

    <button onclick="create_image()">Create</button>
    
    <script src="./index.js"></script>
</body>
</html>

CSSファイルを作成

今回はただ写真のサイズがバラバラだった為、サイズだけcssで編集します。

#dog_image{
    width: 900px;
    height: 600px;
}

JSファイルを作成

jsファイルで初めてのfetchメソッドを使っていきます。
今回は下記サイトの無料で利用できるapiを使用します。犬の種類も指定できるそうですが今回はランダムに表示させます。

function create_image(){
    fetch('https://dog.ceo/api/breeds/image/random')
    .then(response=>{
        return response.json();
    })
    .then(data=>{
        console.log(data)
        const image_url = data.message
    
        const img = document.getElementById('dog_image');
        img.setAttribute('src', image_url);
        console.log(image_url)
    })
    .catch(error=>{
        console.log(error);
    });
}

結果

かなり写真を表示させるまでに時間がかかってしまいましたが、最終的には可愛い犬たちの写真を表示できました！response.json();の部分で（）をつけ忘れている凡ミスで時間が溶けました。

みなさんのこのコードに関するご意見もぜひ聞きたいのでぜひコメントをお願いいたします！
拙い文章ですが、最後まで読んでいただきありがとうございました。