【初心者OK】JavaScriptでAPIを使ってみよう｜写真が自動で変わるスライドショー

2025年11月5日2025年11月11日

はじめに｜APIって難しそう…？大丈夫、JavaScriptで、すぐに使えます

今回は、JavaScriptで、よく聞くAPIを使ってみましょう。

「APIってなんだか専門的な人が使うものでは？」
「サーバーとかバックエンドの世界の話じゃないの？」

…と思ってしまいがちですが、実はそんなことはありません。
HTML と JavaScript だけでも API を使ってデータを取得することができます。

今回は 「猫の画像API」 を使って、ランダムな猫の写真を自動で画面に表示するミニアプリを作ってみましょう。

JavaScript の基本である fetch() / then / catch の流れが理解できる構成なので、初心者の方・勉強中の方にもおすすめの内容です。

そもそもAPIとは？

APIとは、インターネット上のサービスにデータをお願いして、返してもらう仕組みです。

こちらが「リクエスト（ください）」を送り、サーバーが「レスポンス（どうぞ）」とデータを返してくれます。

例としては、APIには、次のようなものがあります。

何のAPIか	できること
お天気API	気温や天気の情報を取得できる
ニュースAPI	最新ニュースの一覧をデータとして取得できる
猫画像API	ランダムな猫の写真URLを取得できる

その他にも楽天市場の商品を表示できるAPIや、さまざまな活用できるAPIがたくさんあります。今回このAPIを取得するために、JavaScriptでは、 fetch() という関数を使います。

今回作るもの｜猫の画像をランダムに表示するミニアプリ

ボタンを押すと、ランダムな猫の写真が表示される
画像はインターネット上の「猫API」から取得する
自分のパソコンに画像を保存する必要はない
HTMLとJavaScriptだけで動く

猫APIとして、今回は次のURLを使用します。

https://api.thecatapi.com/v1/images/search

このURLにアクセスすると、猫の画像情報がJSON形式で返ってきます。

HTMLを準備しよう（コピペでOK）

まずは、画像を表示するための枠とボタンだけを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>猫APIで画像表示</title>
    <style>
        img {
            width: 300px;
            height: 300px;
            object-fit: cover;
            display: block;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>猫の画像を表示してみよう</h1>
    <button id="btn">猫を見る</button>
    <img id="catImage" src="" alt="猫の画像">
    
    <script src="script.js"></script>
</body>
</html>

次に、同じフォルダに script.js というファイルを作り、JavaScriptを書いていきます。

JavaScriptでAPIを呼び出してみよう（fetch + then）

script.js に、まずは一番基本的な形を書きます。

const button = document.getElementById('btn');
const catImage = document.getElementById('catImage');

button.addEventListener('click', () => {
    fetch('https://api.thecatapi.com/v1/images/search')
        .then(response => response.json()) // JSONに変換
        .then(data => {
            catImage.src = data[0].url; // 画像URLをimgタグに入れる
        })
        .catch(error => {
            console.log('エラーが発生しました', error);
        });
});

ここまでの流れを整理すると…

ボタンをクリックする
fetch() でAPI（猫データのURL）へリクエストを送る
サーバーからJSON形式のデータが返ってくる
then() でJSONを受け取り、画像URLを取り出す
img タグの src に設定して表示する

then() と catch() の役割をもう少し丁寧に

先ほどのコードでは、次のように .then() と .catch() を使いました。

fetch('https://api.thecatapi.com/v1/images/search')
    .then(response => response.json())
    .then(data => {
        catImage.src = data[0].url;
    })
    .catch(error => {
        console.log('エラーが発生しました', error);
    });

ここで使っている .then() と .catch() の意味を整理してみます。

メソッド	役割
then()	「データが返ってきたら、この処理をしてね」と指示する
catch()	「もし途中でエラーが起きたら、ここで処理する」と指示する

fetch() は、すぐにデータを返すわけではなく、「あとでデータを返しますね」という約束（Promise）を返す関数です。
その「約束」が実行されたあとに継続する処理を書けるのが .then() です。

よくあるエラーと対処方法

APIを使っていると、次のような問題が起こることがあります。

例	原因
画像が表示されない	APIのURLが間違っている、あるいはhttpsではない
console にエラー表示	インターネットが一時的に切れている、API側の問題
CORSエラー	APIが外部からのアクセスを禁止している場合に起こる

特に初心者の方には、画像が表示されないと「自分のコードが間違っているのかな…」と感じやすいですが、
API側のサーバーが不安定なこともあります。まずはブラウザの開発ツール（F12キー）で、Console や Network を確認すると原因が見つかりやすいです。

応用編：3秒ごとに猫画像を自動で切り替える

ここまででは、ボタンをクリックする度に「猫の画像を1回表示する」ことができました。
次は、一定時間ごとに自動で画像が変わるようにしてみます。

ポイントは setInterval() を使うことです。

ランダムな猫の画像を表示する

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>猫APIで画像をフェードイン表示</title>
    <style>
        body {
            font-family: "Yu Gothic", sans-serif;
            text-align: center;
            padding: 20px;
        }

        img {
            width: 300px;
            height: 300px;
            object-fit: cover;
            margin-top: 20px;
            opacity: 0; /* 最初は非表示 */
            transition: opacity 1s; /* フェードイン用 */
        }

        img.show {
            opacity: 1; /* 表示するとフェードイン */
        }
    </style>
</head>
<body>

    <h1>ランダムな猫の画像を表示する</h1>
    <img id="catImage" src="" alt="猫の画像">

    <script>
        const catImage = document.getElementById('catImage');

        // 画像を取得して表示する関数
        function loadCat() {
            fetch('https://api.thecatapi.com/v1/images/search')
                .then(response => response.json())
                .then(data => {
                    // 一旦フェードアウト
                    catImage.classList.remove('show');

                    // 画像を読み込んでからフェードイン
                    catImage.src = data[0].url;
                    catImage.onload = () => {
                        catImage.classList.add('show');
                    };
                })
                .catch(error => {
                    console.log('エラーが発生しました', error);
                });
        }

        // ページを開いたらすぐ表示
        loadCat();

        // 3秒ごとに画像を切り替え
        setInterval(loadCat, 3000);
    </script>
</body>
</html>