Webサイトを世界と繋ぐ：外部データの取得

これまで、JavaScriptの基本的な文法、DOM操作、そして非同期処理の仕組み（Promise, async/await）を学んできました。これらの知識が集約されるのが、「外部APIとの連携」です。

Webサイトを単なる静的な情報源から、リアルタイムな情報を取り込む動的なアプリケーションへと進化させるには、天気予報、ニュース記事、株価情報など、外部サーバーが提供するデータを利用する必要があります。

この外部サーバーとの通信を行うのが、JavaScriptに標準で備わっている**fetch API**です。今回は、async/awaitと組み合わせて、fetch APIを使って外部データを取得し、Webサイトに表示するまでの具体的な手順を解説します。

1. fetch APIの基本：外部サーバーとの約束
1. fetchの基本的な使い方
2. async/awaitでシンプルに記述する（推奨）
3. 実践：取得したデータをDOMに反映させる
まとめ：fetchでWebサイトの可能性を広げる

1. fetch APIの基本：外部サーバーとの約束

fetch APIは、ネットワーク経由でリソース（データ）を取得するための仕組みであり、実行すると必ず**Promise**を返します。これにより、データ取得という時間がかかる非同期処理を、Webサイトをフリーズさせることなく実行できます。

fetchの基本的な使い方

fetch関数は、データを取り込みたいURL（エンドポイント）を引数に取ります。

JavaScript

// GitHubのユーザー情報を取得するAPIエンドポイント
const API_URL = 'https://api.github.com/users/github'; 

fetch(API_URL)
  .then(response => {
    // ステップ1: レスポンス（Responseオブジェクト）を受け取る
    // この時点ではまだデータ本体ではない
    return response.json(); // ステップ2: データをJSON形式に変換する
  })
  .then(data => {
    // ステップ3: 変換された実際のデータ（JavaScriptオブジェクト）を受け取る
    console.log(data);
    console.log("ユーザー名:", data.login);
  })
  .catch(error => {
    // 失敗（ネットワークエラーなど）が発生した場合の処理
    console.error("データ取得エラー:", error);
  });

重要なポイント: fetchが返す最初のPromiseの結果は、データ本体ではなく、ネットワーク通信の結果を示す**Responseオブジェクト**です。データ本体を取り出すには、さらにresponse.json()（またはresponse.text()など）を呼び出す必要があります。このresponse.json()もまたPromiseを返すため、.then()が二重に連なる形になります。

2. async/awaitでシンプルに記述する（推奨）

前のセクションで見たように、.then()が連続する記述は複雑になりがちです。ここで、非同期処理をシンプルにする**async/await**の真価が発揮されます。

async/awaitを使えば、上記の3ステップの処理を、まるで同期処理のように上から順に記述できます。

JavaScript

async function fetchAndDisplayUser() {
  const API_URL = 'https://api.github.com/users/github';
  
  try {
    // ステップ1: fetchの完了を待つ (Responseオブジェクトを取得)
    const response = await fetch(API_URL); 

    // ステップ2: response.json()の完了を待つ (データ本体を取得)
    const userData = await response.json(); 

    // ステップ3: 取得したデータをDOMに表示する
    console.log("アバターURL:", userData.avatar_url);
    document.getElementById('username').textContent = userData.login;

  } catch (error) {
    // fetch自体のネットワークエラーなどをキャッチ
    console.error("API通信に失敗しました:", error);
    document.getElementById('error-message').textContent = 'データを読み込めませんでした。';
  }
}

fetchAndDisplayUser();

3. 実践：取得したデータをDOMに反映させる

外部API連携の最終目的は、取得したデータをWebサイトの見た目（DOM）に反映させることです。

上記の例で取得したuserDataオブジェクトは、前々回で学んだDOM操作の知識を使って簡単に表示できます。

JavaScript

// 取得したデータ
// const userData = { login: "github", avatar_url: "...", ... };

// ユーザー名を表示
document.getElementById('username').textContent = userData.login;

// アバター画像を表示
const avatar = document.getElementById('avatar-img');
avatar.setAttribute('src', userData.avatar_url);

この一連の流れ（fetchでデータ取得 → awaitで待機 → response.json()でデータに変換 → 取得したデータでDOM操作）こそが、現代のJavaScriptを使った動的Webサイト構築の根幹です。