JavaScriptオブジェクトとJSONの違い｜変換で消えるもの一覧

30秒結論

JSONは「保存・通信用の文字列」、JSオブジェクトは「実行用のデータ構造」。

// JavaScriptオブジェクト（メモリ上のデータ）
const obj = { name: "test", count: 1 };

// JSON（文字列）
const json = '{"name": "test", "count": 1}';

見た目は似ているが、JSONはJavaScriptで動作しない。文法が違う。

---

一目でわかる差分表

項目	JS オブジェクト	JSON
本質	オブジェクト	文字列
キーのクォート	省略可	必須
文字列のクォート	シングル可	ダブルのみ
末尾カンマ	OK	エラー
コメント	OK	エラー
関数	OK	不可
undefined	OK	不可

---

変換方法

// オブジェクト → JSON文字列
const json = JSON.stringify(obj);

// JSON文字列 → オブジェクト
const obj = JSON.parse(json);

---

stringify時に消えるもの

const obj = {
  name: "test",
  fn: () => {},       // 関数 → 消える
  undef: undefined,   // undefined → 消える
  sym: Symbol("x"),   // Symbol → 消える
};

JSON.stringify(obj);
// → '{"name":"test"}'

値	結果
関数	消える
undefined	消える
Symbol	消える
NaN	null になる
Infinity	null になる
Date	文字列になる

---

よくあるエラーパターン

循環参照

const obj = { name: "test" };
obj.self = obj;  // 自分自身を参照

JSON.stringify(obj);
// → TypeError: Converting circular structure to JSON

オブジェクトが自分自身を参照しているとJSON化できない。

Dateが文字列になる

const obj = { date: new Date("2025-01-01") };

JSON.stringify(obj);
// → '{"date":"2025-01-01T00:00:00.000Z"}'

JSON.parse('{"date":"2025-01-01T00:00:00.000Z"}');
// → { date: "2025-01-01T00:00:00.000Z" }  ← 文字列のまま

Dateとして扱いたいなら手動で変換が必要。

const data = JSON.parse(json);
data.date = new Date(data.date);

---

「コンソールに貼ったら動いた」は信用するな

ブラウザのコンソールに「JSONっぽいもの」を貼ると動くことがある。

// これはJavaScriptオブジェクトリテラル
{ name: "test" }

これはJavaScriptとして評価されているだけ。JSONとして有効とは限らない。

確認したいなら JSON Formatter に貼って検証する。

---

API通信での使い方

// リクエスト：オブジェクト → JSON文字列
fetch('/api', {
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data),
});

// レスポンス：JSON文字列 → オブジェクト
const data = await response.json();

送信時は stringify、受信時は .json() でパース。

---

まとめ

ポイント	内容
JSON	保存・通信用の文字列
JSオブジェクト	実行用のデータ構造
変換で消えるもの	関数、undefined、Symbol
変換で変わるもの	Date（文字列化）、NaN/Infinity（null化）
変換できないもの	循環参照

👉 「これJSONとして有効？」と思ったら JSON Formatter で検証