REST API と fetch（フロントとサーバの通信）

REST 自体は厳密な仕様ではなく設計スタイル（流儀）です。だから「これは100%RESTだ／違う」と白黒つけにくく、実務では「RESTっぽい（RESTful な）HTTP API」を指して REST API と呼ぶことがほとんどです。土台は HTTP なので、HTTP のメソッドとステータスコードが分かっていれば話の半分は終わっています。

RESTの考え方（リソースとURI）

REST の中心にあるのは「操作ではなく“もの”に名前をつける」発想です。

• リソース = 扱う対象（ユーザー、記事、注文…）。それぞれに URI（URL） という住所を与える。
• 「何をするか」は URL に書かない。動詞は HTTPメソッド が担当する。

たとえば「ユーザー」というリソースなら、こう整理できます。

ポイントは、URL には「名詞（リソース）」を、操作は「メソッド（動詞）」を使うこと。/getUser?id=42 や /deleteUser のように URL に動詞を入れるのは REST の流儀からは外れます（動いてしまうので“悪”ではないですが、設計としては惜しい）。

JSON（やり取りの共通フォーマット）

REST API がやり取りするデータの中身は、いまや圧倒的に JSON（JavaScript Object Notation） です。人にも読みやすく、ほぼすべての言語で扱えます。

{
  "id": 42,
  "name": "Taro",
  "tags": ["web", "frontend"],
  "active": true
}

JSON は「文字列」です。一方、JavaScript で扱いたいのは「オブジェクト」。この変換を意識するのが第一歩です。

• JSON.parse(文字列) … JSON文字列 → JSオブジェクト（受け取るとき）
• JSON.stringify(オブジェクト) … JSオブジェクト → JSON文字列（送るとき）

fetch では res.json() がこの parse を内部でやってくれるので、自分で JSON.parse を書く場面はそれほど多くありません。送信側で JSON.stringify を使う頻度の方が高いです。

fetch でデータを取得する

ブラウザ標準の fetch で、先ほどの窓口を叩きます。fetch は Promise を返すので、async/await で書くとほぼ同期コードのように読めます。

async function getUser(id) {
  const res = await fetch(`/users/${id}`); // 既定は GET
  const user = await res.json();           // 本文(JSON)を取り出す
  return user;
}

ここで await が2回出てくるのが要点です。

1. 1回目 … サーバから「応答ヘッダ（ステータス等）」が返るのを待つ。
2. 2回目 … res.json() で「本文」を最後まで読み、JSオブジェクトに変換するのを待つ。

ステータスコードと「成功／失敗」

サーバが「どうなったか」は ステータスコード で返ってきます（詳しくは HTTP 参照）。fetch では res.status（数値）や res.ok（200〜299 なら true）で確認します。

• 2xx 成功: 200 OK / 201 Created（作成成功）/ 204 No Content（成功・本文なし）
• 4xx こちらのミス: 400 不正 / 401 未認証 / 403 権限なし / 404 なし
• 5xx サーバ側の障害: 500 内部エラー / 503 利用不可

「ネットワークエラー」と「HTTPエラー」は別物、と整理すると分かりやすいです。

エラー処理込みの取得（実用形）

res.ok の確認と try/catch を組み合わせた、実務で使える形がこちらです。

async function getUser(id) {
  try {
    const res = await fetch(`/users/${id}`);

    if (!res.ok) {
      // 404/500 など HTTP エラーは自分で投げて catch に流す
      throw new Error(`HTTP ${res.status}`);
    }

    return await res.json();
  } catch (err) {
    // 回線断・CORS・上で投げた HTTP エラーが、ここに集約される
    console.error('取得に失敗:', err);
    throw err; // 呼び出し側で握りつぶさないよう再送出
  }
}

データを送る（POST / PUT）

新規作成や更新では、メソッド・ヘッダ・ボディを指定します。ボディは JSON.stringify で文字列化し、Content-Type で「これは JSON です」とサーバに伝えるのが定石です。

async function createUser(data) {
  const res = await fetch('/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data), // オブジェクト → JSON文字列
  });

  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return await res.json(); // 作成されたリソースが返ることが多い
}

つまずきポイントまとめ

• res.ok を見ない … 404/500 が catch に入ると思い込むと事故ります（最頻出）。
• res.json() の二重消費 … レスポンス本文は一度しか読めません。res.json() を2回呼ぶとエラーになります。
• 本文が空なのに res.json() … 204 No Content のときに json() すると失敗します。ステータスで分岐を。
• 別ドメインを叩いて怒られる … ブラウザの安全機構によりブロックされることがあります。これは CORS の話で、サーバ側の許可設定が必要です。
• メソッドが GET 固定だと思っている … fetch の既定は GET。送信・更新では method の指定を忘れずに。