1. 導入：なぜJSON.stringifyが重要なのか
Web開発において、フロントエンドとバックエンドのデータ通信にはJSON形式が欠かせません。JSON.stringifyは、JavaScriptのオブジェクトを「文字列」に変換するためのメソッドです。APIへデータを送信する際や、ローカルストレージ（localStorage）にデータを保存する際に必須となる技術です。正しく使いこなすことで、デバッグの効率化やデータのシリアライズ（直列化）をスムーズに行えるようになります。
2. 基礎知識：JSON.stringifyの仕組み
JSON.stringifyは、引数として渡された値をJSON文字列に変換します。
通常、JavaScriptのオブジェクトをそのまま文字列として出力しようとすると、[object Object] となってしまい、データの中身を確認できません。このメソッドを使うことで、オブジェクトの構造を維持したままテキストデータとして扱えるようになります。
3. 実装・解決策：第2、第3引数を活用する
多くの開発者は第1引数のみを使いますが、実は第2引数（置き換え関数）や第3引数（スペース数）を活用することで、開発体験が向上します。特に第3引数は、デバッグ時に複雑なJSONを整形して表示するために非常に便利です。
4. サンプルプログラム
以下のコードは、整形出力（スペース設定）と特定のプロパティを除外するフィルター機能の例です。
const user = {
id: 1,
name: "山田太郎",
password: "secret_password", // 保存時に除外したいデータ
role: "admin"
};
// 第1引数: 対象オブジェクト
// 第2引数: null (フィルタリングなし)
// 第3引数: 2 (スペース2つでインデントして読みやすくする)
const formattedJson = JSON.stringify(user, null, 2);
console.log("整形されたJSON:", formattedJson);
// 第2引数を使って特定のプロパティを除外する
const filteredJson = JSON.stringify(user, (key, value) => {
if (key === "password") {
return undefined; // undefinedを返すとそのキーは削除されます
}
return value;
});
console.log("パスワード除外後のJSON:", filteredJson);
5. 応用・注意点：現場で陥りやすいバグの回避策
現場でJSON.stringifyを使う際に注意すべき点がいくつかあります。
循環参照の罠
オブジェクトが自分自身を参照している場合（循環参照）、JSON.stringifyはエラーを投げます。例えば、DOM要素を直接オブジェクトに含めてしまうと、このエラーが発生しやすいです。
BigIntの非対応
JavaScriptのBigInt型をそのままJSON.stringifyに渡すと、「TypeError: Do not know how to serialize a BigInt」が発生します。BigIntを扱う場合は、事前に文字列に変換するなどの処理が必要です。
日付オブジェクトの扱い
DateオブジェクトをJSON.stringifyに渡すと、自動的にISO形式の文字列に変換されます。しかし、JSON.parseで戻すときは文字列のままなので、Date型として復元したい場合は別途 new Date() で変換する手間が発生することを覚えておきましょう。
これらを意識するだけで、データの取り扱いにおけるトラブルを未然に防ぎ、より堅牢なフロントエンド開発が可能になります。