JSON.stringify() とは？

JSON.stringify() は、JavaScriptのオブジェクトや配列を「1本のテキスト（JSON文字列）」に変換するメソッドです。
逆に、JSON文字列を元のJavaScriptオブジェクトに戻すのが JSON.parse() です。

【データの行き来】
JavaScriptオブジェクト  ─── JSON.stringify() ───>  JSON文字列（送信・保存用）
JavaScriptオブジェクト  <───    JSON.parse()   ───  JSON文字列（受信・読み込み用）

インターネットでデータを送る時や、ブラウザにデータを保存（localStorage）する時、JavaScriptのオブジェクトの形のままでは扱えません。共通の規格であるテキスト（JSON）に変換するためにこのメソッドが必要になります。

基本的な使い方と実務パターン

実務で頻出する「API通信」と「localStorage」の2つのパターンを押さえましょう。

① APIでデータを送信する（Reactなどからバックエンドへ）

フロントエンドからサーバーにデータを送る際は、JSON.stringify() で文字列化し、application/json ヘッダーを添えて送るのが一般的です。

const payload = { name: "Taro", age: 20 };

fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(payload) // 文字列化して送信
});

② localStorageに保存する

ブラウザの localStorage は文字列しか保存できません。そのため、オブジェクトを保存したい時は必須のテクニックになります。

const user = { name: "Taro", age: 20 };

// 保存するとき（文字列化）
localStorage.setItem("user_data", JSON.stringify(user));

// 読み出すとき（オブジェクトに戻す）
const savedData = localStorage.getItem("user_data");
const userObj = JSON.parse(savedData);

注意点

JavaScriptのオブジェクトとJSONはルールが異なります。意図しないデータ消失を防ぐため、以下の挙動は必ず頭に入れておきましょう。

• 関数や undefined は消滅する
  JSONはデータ交換のためのフォーマットなので、JavaScript独自の「関数」や「値が存在しないことを示す undefined」は、変換時に自動的に除外（無視）されます。
• 日付データ（Date型）はただの文字列になる
  Dateオブジェクトを文字列化するとISO形式の文字列になります。これを JSON.parse() で戻しても自動でDateオブジェクトには復元されないため、必要に応じて new Date() で作り直す必要があります。
• 末尾のカンマはエラーになる
  JavaScriptで許される「最後の要素の後ろのカンマ」は、JSONでは無効です。手動でJSON文字列を作る際などにカンマが残っていると、JSON.parse() がクラッシュします。

便利な「第2引数」「第3引数」の活用

JSON.stringify() の構文は以下の通りです。

JSON.stringify(value, [replacer, [space]])

これらを使うことで、特定のデータを絞り込んだり、ログを見やすく整形したりできます。

① 第2引数（replacer）：データの選別・変換

「機密情報を除外してログに出したい」「特定のキーだけを抽出したい」という時に使います。配列または関数を指定できます。

// 配列で指定（指定したキーだけを残すホワイトリスト形式）
const user = { id: 1, name: "Taro", token: "secret_123" };

const json1 = JSON.stringify(user, ["id", "name"]); 
// 結果: '{"id":1,"name":"Taro"}'

// 関数で指定（nullの項目を除外する例）
const json2 = JSON.stringify(user, (key, value) => {
  if (value === null) return undefined; // undefinedを返すと除外される
  return value;
});

② 第3引数（space）：綺麗に見やすく整形（インデント）

デフォルトでは改行のない1行の文字列になります。第3引数に数値を指定すると、その分のスペースで綺麗に改行・インデントして出力されます。

const data = { name: "Taro", skills: ["JS", "React"] };

// 第2引数を使わない場合は null を挟むのがルールです
const prettyJson = JSON.stringify(data, null, 2);
console.log(prettyJson);
/*
{
  "name": "Taro",
  "skills": [
    "JS",
    "React"
  ]
}
*/