東京都

外部APIからデータを取得しよう!

戸塚直道, 岸本真拓

SES事業部長, 社員

戸塚直道

株式会社アルシエ / SES事業部長

フォロー

岸本真拓

株式会社ディアライフエージェンシー / 社員

フォロー

on 2023/10/05

こんにちは！株式会社アルシエで教育に関するサポートをしている岸本です。

今回は「外部APIからデータの表示方法」についてお伝えしていきます。

JavaScriptのFetchを使用して外部APIからデータを取得しよう

Web開発では、外部のAPIからデータを取得して表示することがあります。

JavaScriptのFetch APIを使用することで、これを実現することができます。

Fetch APIとは何か？

Fetch APIは、ブラウザーからリソースを取得するためのWeb APIです。

データを非同期で取得し、リクエストとレスポンスを扱うための強力な手段です。

Fetch APIの基本的な使い方

Fetch APIを使用するためには、以下のようにfetch()関数を使用します。

fetch(url, options)
    .then(response => {
        // レスポンスを処理するコード
    })
    .catch(error => {
        // エラーハンドリング
    });

url: 取得したいデータのURLを指定します。
options (オプション): リクエストのオプションを指定します（HTTPメソッド、ヘッダーなど）。

fetch()関数は、Promiseを返し、非同期でリクエストを行います。

その後、.then()を使用してレスポンスを処理し、.catch()を使用してエラーをハンドリングします。

外部APIからユーザーリストを取得して表示

以下は、Fetch APIを使用して外部APIからユーザーリストを取得し、HTMLページに表示するコードです。

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ユーザーリスト</title>
</head>
<body>
    <h1>ユーザーリスト</h1>
    <ul id="user-list">
        <li>Loading...</li>
    </ul>

    <!-- 別ファイルのJavaScriptを読み込む -->
    <script src="script.js"></script>
</body>
</html>

// script.js

// APIのエンドポイント
const apiUrl = 'https://jsonplaceholder.typicode.com/users';

// ユーザーリストを表示する要素
const userList = document.getElementById('user-list');

// Fetch APIを使用してデータを取得
fetch(apiUrl)
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTPエラー！ステータスコード: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        // データを取得して表示
        userList.innerHTML = ''; // ローディングメッセージを削除
        data.forEach(user => {
            const listItem = document.createElement('li');
            listItem.textContent = `ユーザー名: ${user.username}, メール: ${user.email}`;
            userList.appendChild(listItem);
        });
    })
    .catch(error => {
        // エラーハンドリング
        console.error('データの取得中にエラーが発生しました:', error);
        userList.innerHTML = 'データの取得中にエラーが発生しました。';
    });