JSON — データを送受信するための共通言語

このトピックを修了すると

JSONとは何か、なぜ使用されるのか、そしてJavaScriptでどのように扱うかを理解できるようになります。

なぜJSONなのか

サーバーとクライアントがデータを送受信するには、フォーマットを合わせる必要があります。サーバーがPythonでクライアントがJavaScriptであっても、両方が理解できるフォーマットが必要です。

JSON（JavaScript Object Notation）はその共通言語です。テキストベースであるため、どの言語でも読み書きできます。事実上、Web APIの標準データ形式です。

JSONの構造

{
  "name": "Alice",
  "age": 25,
  "isStudent": false,
  "scores": [85, 92, 78],
  "address": {
    "city": "Seoul",
    "zip": "06000"
  },
  "phone": null
}

ルールは単純です。

• キーは必ず二重引用符で囲みます（一重引用符は不可）
• 値は、文字列、数値、真偽値、配列、オブジェクト、nullのみが許可されます
• 関数、undefined、コメントは許可されません
• 最後のカンマ（trailing comma）は許可されません

JavaScriptオブジェクトに似ていますが、より厳格です。

JSON.stringify: オブジェクト → 文字列

const user = { name: "Alice", age: 25 };
const json = JSON.stringify(user);
console.log(json); // '{"name":"Alice","age":25}'
console.log(typeof json); // "string"

JavaScriptオブジェクトをJSON文字列に変換します。これを**シリアライズ（serialization）**と呼びます。サーバーにデータを送信するときに使用します。

見やすく出力するには：

console.log(JSON.stringify(user, null, 2));

3番目の引数はインデントのスペース数です。

JSON.parse: 文字列 → オブジェクト

const json = '{"name":"Alice","age":25}';
const user = JSON.parse(json);
console.log(user.name); // "Alice"
console.log(typeof user); // "object"

JSON文字列をJavaScriptオブジェクトに変換します。これを**デシリアライズ（deserialization）**と呼びます。サーバーから受信したデータを処理するときに使用します。

無効なJSONを解析するとエラーが発生します。

JSON.parse("not json"); // SyntaxError

したがって、APIレスポンスを解析する場合は、try-catchを使用するのが安全です。

API通信におけるJSON

// データ送信（POST）
await fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Alice", age: 25 }),
});

// データ受信（GET）
const res = await fetch("/api/users/1");
const user = await res.json(); // JSON.parseを自動的に実行

fetchのres.json()はJSON.parseを自動的に呼び出します。送信するときは、JSON.stringifyで明示的に変換する必要があります。

重要なポイント

JSONはテキストベースのデータ交換形式であり、Web APIの事実上の標準です。 JSON.stringifyでオブジェクトを文字列に、JSON.parseで文字列をオブジェクトに変換します。 キーは二重引用符が必須で、関数とundefinedは使用できません。