JSON ― データを文字列でやり取りする

導入

プログラムの中では、データをオブジェクト（{ name: "太郎", age: 20 }）で扱います。でも、そのオブジェクトをそのままサーバーやファイルに送ることはできません。ネットワークを流れるのは結局「ただの文字列」だからです。

そこで登場するのが JSON（JavaScript Object Notation）。オブジェクトを文字列に変換して運び、届いた先で元のオブジェクトに戻すための、世界共通の約束事です。

説明

やり取りの流れを図にすると、こうなります。行きは JSON.stringify、帰りは JSON.parse で変換します。

flowchart LR
  obj["JSオブジェクト<br/>{ name: '太郎', age: 20 }"]
  str["JSON文字列<br/>'{&quot;name&quot;:&quot;太郎&quot;,&quot;age&quot;:20}'"]
  server["サーバー / ファイル"]
  obj -->|"JSON.stringify"| str
  str -->|"送信・保存"| server
  server -->|"受信・読込"| str
  str -->|"JSON.parse"| obj

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

const user = { name: "太郎", age: 20, hobbies: ["読書", "散歩"] };

const text = JSON.stringify(user);
console.log(text);            // {"name":"太郎","age":20,"hobbies":["読書","散歩"]}
console.log(typeof text);     // string ← ただの文字列になった

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

const text = '{"name":"花子","age":25}';

const obj = JSON.parse(text);
console.log(obj.name);        // 花子
console.log(obj.age + 1);     // 26 ← 数値として計算できる

第2引数と第3引数で見やすく整形もできます（インデント幅を指定）。

const data = { title: "JS入門", tags: ["web", "js"] };
console.log(JSON.stringify(data, null, 2));
// {
//   "title": "JS入門",
//   "tags": [
//     "web",
//     "js"
//   ]
// }

注意点：JSON はあくまで文字列のフォーマットです。キーは必ずダブルクォートで囲まれ、function・undefined・Symbol は変換で消えます（数値・文字列・真偽値・配列・オブジェクト・null だけが運べます）。

やってみよう

• stringify したいオブジェクトに配列や入れ子のオブジェクトを足して、文字列がどう変わるか見てみましょう。
• parse した後のオブジェクトのプロパティを書き換えて表示してみましょう。

演習

const text = '{"name":"ポチ","price":1200}'; を JSON.parse でオブジェクトに戻し、price を表示してください。