fetch ― サーバーからデータを取ってくる

導入

天気予報アプリは、どこかのサーバーに「今日の天気ちょうだい」とお願いして、返ってきたデータを画面に出しています。この「サーバーにデータを取りに行く」道具が fetch です。

結果はすぐには返ってきません（通信には時間がかかる）。だから fetch は、第6章で学んだ Promise を返します。await で「返ってくるまで待って」から使うのが基本形です。

説明

ブラウザとサーバーのやり取りを図にすると、こうなります。

sequenceDiagram
  participant B as ブラウザ(あなたのコード)
  participant S as サーバー(API)
  B->>S: fetch("/users/1") リクエスト
  Note over S: データを探す
  S-->>B: レスポンス（JSON文字列）
  Note over B: res.json() でオブジェクトに変換
  B->>B: 画面に表示

実際のコードはこう書きます（本物の書き方）。fetch で取得し、res.json() で本文を JSON として読み取ります。どちらも await で待ちます。

// 本物の通信（この学習環境では通信先の都合で動かないことがあります）
async function loadUser() {
  const res = await fetch("https://example.com/api/users/1");
  const user = await res.json();   // 本文を JSON として解釈
  console.log(user.name);
}

ポイントは2段階の待ちです。①fetch の完了を待つ → ②本文の読み取り（res.json()）を待つ。res.json() も Promise を返すので await が要ります。

学習環境では通信先に届かないことがあるので、ここではサーバーの代わり（mockFetch）を使って、まったく同じ書き方を動かして体験します。下のコードはそのまま実行できます。

// サーバーの代役：0.3秒後に「レスポンスっぽいもの」を返す
function mockFetch(url) {
  return new Promise((resolve) => {
    const body = { id: 1, name: "太郎", city: "東京" };
    // 本物の fetch と同じく、本文は res.json() で取り出す形にする
    resolve({ ok: true, json: () => Promise.resolve(body) });
  });
}

async function loadUser() {
  console.log("取得中…");
  const res = await mockFetch("/api/users/1");  // ① 通信を待つ
  const user = await res.json();                // ② 本文の変換を待つ
  console.log("届いた:", user.name, "／", user.city);
}

loadUser();

通信は失敗することもあります（サーバー停止・ネット切断など）。実務では try / catch で受け止めます。

async function safeLoad() {
  try {
    const res = await mockFetch("/api/users/1");
    const user = await res.json();
    console.log("成功:", user.name);
  } catch (err) {
    console.log("通信に失敗:", err.message);
  }
}
safeLoad();

やってみよう

• mockFetch の body の中身を書き換えて、表示される内容が変わることを確かめましょう。
• resolve(...) を reject(new Error("サーバーエラー")) に変えると、try / catch の catch 側が動きます。試してみましょう。

演習

上の mockFetch を使い、async 関数の中で await して受け取ったデータの city を表示してください。

まとめ

「データは JSON という文字列で運ばれ、fetch で取りに行き、await で待つ」――この流れは、React や Vue などのフレームワークでも、Node.js のサーバー側でも、まったく同じ考え方です。ここまで来れば、あなたはもう”動くWeb”の入口に立っています。