【JavaScript入門】JSON

　JSON（JavaScript Object Notation）は「人にも機械にも読みやすい」テキスト形式のデータ交換フォーマットです。JavaScript のオブジェクト表記に似ていますが、プロパティ名・文字列は必ず ダブルクォーテーション " " で囲み、undefined や関数は含められません。Ajax／Fetch／Web API などブラウザ通信の“共通言語”として使われます。

１．JSON の基礎

項目内容
拡張子.json
扱える型オブジェクト / 配列 / 文字列 / 数値 / true / false / null
使えない型undefined / 関数 / Symbol など
主な用途Web API レスポンス、設定ファイル、ローカルストレージ保存

1.1. ネスト構造

JSON はオブジェクトと配列を自由に入れ子にできます。

{
  "shop": "Cafe Latte",
  "menu": [
    {"name": "ホットコーヒー", "price": 450},
    {"name": "チョコケーキ",   "price": 500}
  ],
  "open": true,
  "note": null
}

1.2. シングル vs ダブルクォート

文字列・キーは “必ず” " "。' ' や ` ` は無効なので注意します。

２．組み込み JSON オブジェクト

メソッド説明
JSON.stringify(obj)オブジェクト → JSON 文字列
JSON.stringify(obj, null, space)整形して出力（space = インデント文字列）
JSON.parse(text)文字列 → オブジェクト（失敗で例外）

2.1. stringify のポイント

  • 循環参照があると例外
  • 関数や undefined は出力から除外

2.2. parse のポイント

  • 無効な JSON は SyntaxError
  • 日付文字列は自動で Date に変換されない（自前で処理）

３．サンプルプログラム

 ファイル名： json-demo.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>🗂️ JSON の基礎デモ</title>
  <style>
    body{font-family:"Segoe UI",sans-serif;margin:2rem;background:#f9fbff}
    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;margin-right:.4rem}
    button:hover{opacity:.85}
    #result{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>🗂️ JSON の基礎デモ</h1>
  <button id="toJson">オブジェクト → JSON</button>
  <button id="toObj">JSON → オブジェクト</button>
  <div id="result"></div>

  <script>
  // テスト用オブジェクト
  const cafeData = {
    menu: [
      {name: "ホットコーヒー", price: 450},
      {name: "アイスコーヒー", price: 450},
      {name: "チーズケーキ",   price: 500}
    ],
    open: true,
    note: null
  };

  // ダミー JSON 文字列（上記を stringify したもの）
  const jsonText = JSON.stringify(cafeData);

  const out = txt => document.getElementById("result").textContent = txt;

  // ボタン: オブジェクト → JSON 文字列
  document.getElementById("toJson").onclick = () => {
    const pretty = JSON.stringify(cafeData, null, "  ");
    out("★ stringify の結果 ↓\n" + pretty);
  };

  // ボタン: JSON 文字列 → オブジェクト
  document.getElementById("toObj").onclick = () => {
    try {
      const obj = JSON.parse(jsonText);
      out("★ parse の結果 ↓\n" + obj);
    } catch(e) {
      out("パース失敗: " + e);
    }
  };
  </script>
</body>
</html>

ブラウザの出力例

プログラム解説

  1. cafeData — JSON 化したい通常の JS オブジェクト。
  2. JSON.stringify — 第３引数 " " を与えて２スペースインデント整形。
  3. JSON.parse — 文字列を元の形へ復元。例外処理は try … catch で。
  4. UI ボタン — 結果を <div id="result"> に表示し、コンソールなしでも挙動を確認。

まとめ

JSON は 軽量・自己記述的 なフォーマットで、Web のデータ通信に欠かせません。

  • JSON.stringify で送信文字列を生成
  • JSON.parse で受信文字列を安全にオブジェクト化
    という２ステップを覚えれば、API 連携やローカル保存をスムーズに実装できます。まずは小さなオブジェクトを手作業で stringify / parse し、構造とルールを体感してみましょう。