オブジェクトをコピーしたり、APIとやり取りしたりするときに何気なく使うJSON.stringifyとJSON.parse。便利な反面、いくつか「知らないと詰まる」挙動があります。今回は4つのパターンを実際に動かして確認しました。
パターン1: Dateオブジェクトが文字列になる
const obj = { createdAt: new Date('2026-01-01') };
const json = JSON.stringify(obj);
console.log(json);
// → {"createdAt":"2026-01-01T00:00:00.000Z"}
const parsed = JSON.parse(json);
console.log(typeof parsed.createdAt, parsed.createdAt instanceof Date);
// → string false
JSON.stringifyはDateオブジェクトを、ISO 8601形式の文字列に変換します。ここまでは想定通りという人も多いと思いますが、注意したいのはJSON.parseで戻したときです。自動的にDate型へ戻ることはなく、ただの文字列のままになります。parsed.createdAt.getFullYear()のようなDateのメソッドを呼ぶとエラーになるので、必要ならnew Date(parsed.createdAt)で明示的に変換し直す必要があります。
パターン2: undefinedを含むプロパティは消える
const obj = { a: 1, b: undefined, c: 3 };
console.log(JSON.stringify(obj));
// → {"a":1,"c":3}
bプロパティがまるごと消えています。JSON.stringifyは、値がundefinedのプロパティを出力から除外します。「渡したはずのキーが返ってこない」という現象に遭遇したら、値がundefinedになっていないか疑ってみてください。
パターン3: 配列の中のundefinedはnullになる
const arr = [1, undefined, 3];
console.log(JSON.stringify(arr));
// → [1,null,3]
同じundefinedでも、オブジェクトのプロパティなら消え、配列の要素ならnullに変換されます。これは、配列が「要素の順番」を持つ構造だからです。プロパティを削除すると、配列のインデックスがずれてしまうため、代わりにnullという「存在するが値がない」印に置き換える仕様になっています。
パターン4: 循環参照はエラーになる
const obj = { name: 'a' };
obj.self = obj; // 自分自身を参照させる
JSON.stringify(obj);
// → TypeError: Converting circular structure to JSON
オブジェクトが自分自身（またはループする形で）を参照していると、JSON.stringifyは無限ループを避けるためにTypeErrorを投げます。DOM要素をうっかりオブジェクトに含めてしまったときなど、意図せず循環参照が生まれてエラーになるケースがあります。
まとめ
| パターン | 挙動 |
|---|---|
Dateオブジェクト |
文字列に変換される。parseしても自動ではDate型に戻らない |
オブジェクトのundefinedプロパティ |
出力から消える |
配列内のundefined要素 |
nullに変換される |
| 循環参照 |
TypeErrorが発生する |
JSON.stringify/JSON.parseは「オブジェクトを丸ごとコピーする」用途で使われることもありますが（structuredClone()が使えない古い環境など）、上記のような変換ルールがあることを知らずに使うと、思わぬデータ欠損やエラーにつながります。用途によっては、Dateや循環参照も扱えるstructuredClone()の方が安全な場面もあるので、状況に応じて使い分けてみてください。
未経験者向けの講座を運営しています
未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を、全24セッションで体系化した教材です。Claude Code を学習パートナーにする CLAUDE.md と学習モード（learner / developer）の設計までセットで含みます。
- ▶ ライブデモ（インストール不要・無料で今すぐ見られます）→ https://trial-web-ayies128s-projects.vercel.app/?ref=qiita
- 教材完全版＋月5,500円のメンタリング（全24セッション＋チャット質問し放題）→ https://menta.work/plan/20251?ref=qiita
- 無料体験版（git clone して自分の手元で動かす・最初の数セッション分・⭐ Star もよろしくお願いします）→ https://github.com/ayies128/next-ai-camp-trial
- YouTube『AIエンジニア情報局』（AI×開発ニュースを1本5分でキャッチアップできる別運営チャンネル・無料）→ https://www.youtube.com/channel/UC1rXVD9WYsQPQEWZyd-A1KA/?ref=qiita
※ Qiita読者の方には易しすぎる内容なので、初心者の知り合いへの紹介や社内研修の参考としてどうぞ。