【JavaScript入門】Fetch APIで通信をする

　Fetch API はブラウザ標準の HTTP クライアントで、URL を渡すだけで Promise を返す シンプル設計が魅力です。ここでは「サーバー準備 ▶ fetch() の基本 ▶ オプションとレスポンス解析 ▶ 実践サンプル」の順に学びます。

１．ローカルサーバーの起動手順

1.1. Node.js のインストール

　01章のイントロダクション「10 開発環境の準備：Node.jsのインストール」の Node.js の環境準備ができているという前提で話を進めます。Node.js の環境準備ができていない場合は、以下のリンク先をご確認ください。

1.2. index.js の作成

以下の index.js を作成して、例えば「C:\Users\<ユーザー名>\Desktop\node-js\app1」に保存します。

ファイル名： index.js

// index.js
const express = require("express");
const app = express();

// ルート
app.get("/", (_, res) => res.send("Hello World"));

// 静的ファイル（/net, /web-worker 配下）
[
  { path: "/net",         root: __dirname + "/net" },
  { path: "/web-worker",  root: __dirname + "/web-worker" }
].forEach(opt => app.use(opt.path, express.static(opt.root)));

app.listen(3000, () => console.log("Server started: http://localhost:3000/"));

1.3. PowerShell を起動し、index.js を置いたフォルダへ移動します。

移動例：

PS C:\Users\joeac\Desktop\node-js\app1>

1.4. ターミナルで `node .` を実行

node .

1.5. ブラウザのURLに「http://localhost:3000/ 」を入力

すると「Hello World」が表示されます。

２．`fetch()` の基本構文

fetch(url [, options])
  .then(response => { /* Response オブジェクト */ })
  .catch(err => { /* 通信エラー */ });

2.1. 主な `options` プロパティ

プロパティ	役割
`method`	`"GET"` / `"POST"` など
`headers`	`new Headers({ "Content-Type":"application/json" })`
`body`	送信データ（文字列・FormData・Blob など）
`cache`	`"reload"` / `"force-cache"` など

2.2. `Response` の重要プロパティ・メソッド

プロパティ	内容	メソッド	役割
`ok`	成功なら `true`	`.text()`	本文を文字列で取得
`status`	HTTP ステータス	`.json()`	本文を JSON に変換
`statusText`	ステータスメッセージ	`.blob()`	バイナリを取得
`url`	実際にアクセスした URL

３．実践サンプル：JSON を取得して表示

3.1. 必要ファイル

① /net/data.json

以下のjsonファイル「data.json」を作成し、netディレクトリに格納します。

{ "menu": ["ホットコーヒー", "アイスコーヒー"] }

➁ /net/fetch-demo.html（下記）

下記の「fetch-demo.html」ファイルを作成し、netディレクトリに格納します。

3.2. fetch-demo.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>🚀 Fetch API デモ</title>
  <style>
    body{font-family:"Segoe UI",sans-serif;background:#f0f8ff;margin:2rem}
    h1{text-align:center;font-size:1.8rem;margin-bottom:1rem}
    button{padding:.6rem 1.2rem;border:none;border-radius:6px;
           background:#0078d4;color:#fff;font-weight:bold;cursor:pointer}
    button:hover{opacity:.85}
    #log{white-space:pre-wrap;background:#fff;border:1px solid #ccc;
         border-radius:8px;padding:1rem;margin-top:1rem;min-height:6rem}
  </style>
</head>
<body>
  <h1>🚀 Fetch API デモ</h1>
  <button id="loadBtn">メニュー取得</button>
  <div id="log">ここに結果が表示されます</div>

  <script>
  const log = txt => document.getElementById("log").textContent += txt + "\n";

  document.getElementById("loadBtn").onclick = () => {
    document.getElementById("log").textContent = "";
    const url = "./data.json";     // 相対パスなので /net/ 配下を指す

    fetch(url)
      .then(res => {
        log(`URL: ${res.url}`);
        log(`ステータス: ${res.status} (${res.statusText})`);
        if(!res.ok) throw new Error("通信に失敗しました");
        return res.json();         // JSON へ変換
      })
      .then(data => {
        log("--- 取得結果 ---");
        log(JSON.stringify(data, null, "  "));
      })
      .catch(err => {
        log("--- エラー ---");
        log(err);
      });
  };
  </script>
</body>
</html>

3.3. ブラウザの出力例

ブラウザのURLに「http://localhost:3000/net/fetch-demo.html」を入力します。

まとめ

サーバーを立てる（express で OK）
fetch(url[, options]) でリクエスト
Response を検査し .json()／.text() で本文を取得
.catch() でネットワークエラーを一括処理

　これだけでブラウザから API や静的 JSON を手軽に扱えます。次は method:"POST" と body を追加して、フォームデータ送信に挑戦してみましょう。

【JavaScript入門】Fetch APIで通信をする