JavaScript | 非同期処理：fetch / API 通信 – JSON 送受信

JavaScript JavaScript
スポンサーリンク

JSON と fetch の関係を一言でいうと

JSON と fetch の関係は、
「JavaScript とサーバーが会話するときの“共通言語（JSON）”を、fetch という電話で送受信する」 というイメージです。

  • フロント（JavaScript）：オブジェクト { name: "太郎", age: 20 } を持っている
  • サーバー：文字列しか直接やり取りできない
  • なので、一度 JSON 文字列にして送る
  • サーバーから返ってきた JSON 文字列を、またオブジェクトに戻して使う

この「行き」と「帰り」の変換を、
JSON.stringify と response.json() が担当し、
その運搬役が fetch です。

ここが重要です。
JSON 送受信は、
「オブジェクト ↔ JSON 文字列 ↔ ネットワーク」
を行き来させる流れだと捉えると、全体像が掴みやすくなります。

サーバーから JSON を「受信」する基本の流れ

まずは GET で JSON を取ってくるパターン

基本のパターンはほぼこれです。

async function loadUsers() {
  const response = await fetch("https://example.com/api/users");

  if (!response.ok) {
    throw new Error("HTTP エラー: " + response.status);
  }

  const data = await response.json();

  console.log(data);
}
JavaScript

一行ずつ噛み砕くとこうなります。

1. fetch でリクエストを送る

const response = await fetch("https://example.com/api/users");
JavaScript
  • fetch(url) で「この URL に HTTP リクエスト送って」とブラウザに依頼
  • 何も指定しなければ GET リクエストになる
  • 結果（レスポンス）が返ってくるまで await で待つ
  • 返ってくるのは Response オブジェクト（まだ中身を開けていない箱）

2. HTTP 的に成功しているかチェック

if (!response.ok) {
  throw new Error("HTTP エラー: " + response.status);
}
JavaScript
  • response.ok はステータスコードが 200〜299 なら true
  • 404 や 500 のときも、fetch 自体は「一旦成功」として response を返してしまうので
  • 自分で ok や status を見てエラー判定するのが基本

3. JSON 文字列 → JavaScript オブジェクトに変換

const data = await response.json();
JavaScript
  • サーバーのレスポンスボディは「JSON 文字列」
  • response.json() がそれをパースして、JS のオブジェクトとして返してくれる Into the Program
  • これも非同期なので await が必要

4. あとは普通の変数として扱う

console.log(data);
JavaScript
  • 配列なら data[0].name みたいにアクセス
  • オブジェクトなら data.user.name など自由に使える

ここが重要です。
受信側の基本形は「fetch → ok チェック → response.json() → data を使う」。
fetch の戻り値がいきなり JSON ではない（いったん Response を経由する）ことを必ず意識してください。

サーバーに JSON を「送信」する基本の流れ

POST で JSON を送る定番パターン

次は、フロントからサーバーへ JSON を送る側です。

async function createUser() {
  const body = {
    name: "太郎",
    age: 25,
  };

  const response = await fetch("https://example.com/api/users", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    body: JSON.stringify(body),
  });

  if (!response.ok) {
    throw new Error("HTTP エラー: " + response.status);
  }

  const data = await response.json();
  console.log("作成されたユーザー:", data);
}
JavaScript

1. JavaScript のオブジェクトを用意する

const body = {
  name: "太郎",
  age: 25,
};
JavaScript
  • いつもの JS オブジェクト
  • まだこのままでは「ネットで送れない」

2. fetch の第二引数で詳細設定（method / headers / body）

const response = await fetch("https://example.com/api/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json",
  },
  body: JSON.stringify(body),
});
JavaScript

ここが JSON 送信の一番大事なポイントです。

method: "POST"
→ データを送るので GET ではなく POST を使う。

headers: { "Content-Type": "application/json" }
→ 「これから送るボディは JSON ですよ」とサーバーに宣言。
→ サーバーはこのヘッダーを見て JSON としてパースするか決める。

body: JSON.stringify(body)
→ JS のオブジェクトを JSON 文字列 に変換してから送る。
→ オブジェクトのまま渡したら NG。「文字列」として送る必要がある。

Accept: "application/json" は、
→ 「返事も JSON で返してほしいです」とサーバーにお願いするヘッダーです。

3. レスポンスの JSON を受信して処理する

if (!response.ok) {
  throw new Error("HTTP エラー: " + response.status);
}

const data = await response.json();
console.log("作成されたユーザー:", data);
JavaScript
  • 送信が成功すると、サーバーから「作成したユーザー情報」などが JSON で返ってくることが多い
  • 受信側の処理はさっきの GET と完全に同じ

ここが重要です。
JSON を送るときは必ず
「Content-Type: application/json + JSON.stringify(...)」のセットを忘れないこと。
この 2 つが噛み合って、初めてサーバーは「お、ちゃんと JSON で来たな」と理解できます。

「送る」と「受け取る」を対称で見る

送信側：オブジェクト → JSON 文字列

JavaScript からサーバーへ送るときは、

const body = { name: "太郎", age: 25 };

const jsonText = JSON.stringify(body); // ここで文字列に変換

await fetch(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: jsonText,
});
JavaScript
  • JS の世界ではオブジェクト
  • ネットに乗せるために JSON 文字列に変える
  • ヘッダーで「これは JSON」と宣言する

受信側：JSON 文字列 → オブジェクト

サーバーから返ってきたときは逆です。

const response = await fetch(url);
const data = await response.json(); // ここでオブジェクトに戻す
JavaScript
  • ネットから来るのは JSON 文字列
  • response.json() がパースしてオブジェクトに変えてくれる

ここが重要です。
「送るときは JSON.stringify、受け取るときは response.json()」
この「行き」と「帰り」のペアを、頭の中でひと組として覚えてください。

JSON 送受信でよくあるつまずきポイント

その1：JSON.stringify を忘れてオブジェクトをそのまま渡す

// ❌ よくあるミス
const body = { name: "太郎" };

await fetch(url, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: body, // ← stringify してない
});
JavaScript
  • サーバーが期待するのは「JSON 文字列」
  • オブジェクトをそのまま渡しても、サーバー側でうまく解釈できないことが多い

正しくは：

body: JSON.stringify(body)
JavaScript

その2：Content-Type を付け忘れる

// ❌ これもありがち
await fetch(url, {
  method: "POST",
  body: JSON.stringify(body),
});
JavaScript
  • 中身は JSON 文字列になっているのに、
  • Content-Type が無いせいで、サーバー側が
    「これ、何の形式の文字列？」と分からない

正しくは：

headers: {
  "Content-Type": "application/json",
}
JavaScript

その3：エラーレスポンスを JSON だと決めつける

サーバーによっては、
エラーのときに JSON ではなく HTML やプレーンテキストを返してくることもあります。

そのときに無条件で response.json() すると、
JSON パースエラーが起きてしまうことも。

対策としては、API 仕様書で「エラーも JSON で返すか」を確認したうえで、
場合によっては response.text() を使ったり、Content-Type を見て場合分けしたりします。

ここが重要です。
「サーバーが常にキレイな JSON を返してくれる」と決めつけないこと。
現実の API は、成功時とエラー時で形式が違うこともあるので、仕様書を読む癖をつけてください。

初心者として「JSON 送受信」で本当に押さえてほしいこと

サーバーと JavaScript の会話の「共通語」が JSON。
fetch は、その JSON をネット越しに送ったり受け取ったりするための電話のようなもの。

受信の基本形：
fetch(url) → response.ok をチェック → response.json() → data を使う。

送信の基本形：
JS オブジェクトを作る → JSON.stringify で文字列にする →
headers["Content-Type"] = "application/json" を付けて fetch の body に入れて送る。

「送るときは JSON.stringify、受け取るときは response.json()」
このペアをセットで覚える。

HTTP エラー（404, 500 など）は fetch 自体ではエラーにならないことが多いので、
response.ok や response.status を自分で見てハンドリングする。

ここが重要です。
JSON 送受信は、“形式の変換” さえ理解してしまえば、それほど難しいものではありません。
コードを書くときは、常に頭の中で
「いま自分は、オブジェクトを JSON に変えて送っているのか？」
「それとも、JSON をオブジェクトに戻して使っているのか？」
と自問してみてください。
その問いを繰り返すうちに、JSON と fetch の関係が「感覚」で分かるようになっていきます。

練習としては、次のようなことをやってみると効果的です。

// 1. 手元でオブジェクトを作って JSON.stringify した結果を console.log してみる。
//    逆に JSON 文字列を JSON.parse してオブジェクトに戻す練習をする。

// 2. ダミーの API URL（実際に叩けなくてもOK）を使って、
//    「POST で JSON を送るコード」と「GET で JSON を受け取るコード」を両方書いてみる。

// 3. 送受信の流れを日本語で説明してみる：
//    「ここでオブジェクトを JSON にして、ここで送って、ここで JSON をオブジェクトに戻している」
JavaScript

「形式を変えて、ネットに乗せて、また形式を戻す」
この一連の流れを一度自分の手でたどってみると、
JSON 送受信はもう“謎の黒魔術”ではなく、ちゃんと理解できる技術になります。

スポンサーリンク
タイトルとURLをコピーしました