JSON.parse() / stringify()対応: ES5（ECMAScript 2009）

// JSON文字列をJavaScriptのオブジェクトに変換します。
var obj = JSON.parse(JSON文字列);

// JavaScriptのオブジェクトをJSON文字列に変換します。
var str = JSON.stringify(オブジェクト);

// インデント付きで見やすく変換します。
var str = JSON.stringify(オブジェクト, null, インデント数);

// JSON.parse() でJSON文字列をオブジェクトに変換します。
var jsonStr = '{"name": "太郎", "age": 25, "hobbies": ["読書", "映画"]}';
var user = JSON.parse(jsonStr);
console.log(user.name); // 『太郎』と出力されます。
console.log(user.age); // 『25』と出力されます。
console.log(user.hobbies[0]); // 『読書』と出力されます。

// JSON.stringify() でオブジェクトをJSON文字列に変換します。
var product = {
	name: "ノートPC",
	price: 89800,
	inStock: true
};
var productJson = JSON.stringify(product);
console.log(productJson); // 1行のJSON文字列が出力されます。

// インデント付きで見やすく変換します。
var prettyJson = JSON.stringify(product, null, 2);
console.log(prettyJson); // 2スペースのインデント付きで出力されます。

// 配列もJSON文字列に変換できます。
var colors = ["赤", "青", "緑"];
console.log(JSON.stringify(colors)); // 『["赤","青","緑"]』と出力されます。

// localStorageへの保存と読み込みの実用例
var settings = { theme: "dark", fontSize: 16 };
localStorage.setItem("settings", JSON.stringify(settings)); // 保存
var loaded = JSON.parse(localStorage.getItem("settings")); // 読み込み
console.log(loaded.theme); // 『dark』と出力されます。

"太郎"               // user.name
25                   // user.age
"読書"               // user.hobbies[0]
'{"name":"ノートPC","price":89800,"inStock":true}'  // JSON.stringify(product)

// JSON.stringify(product, null, 2) の出力
{
  "name": "ノートPC",
  "price": 89800,
  "inStock": true
}

'["赤","青","緑"]'   // JSON.stringify(colors)
"dark"               // localStorageから復元した値

無効なJSON文字列を『JSON.parse()』に渡すとエラーが発生します。サーバーからの応答データなど、内容が保証されない文字列を変換する場合は必ず『try...catch』でエラーを処理してください。

// 無効なJSON文字列はエラーになります。
try {
	var data = JSON.parse("これはJSONではない");
} catch (e) {
	console.log("JSONの変換に失敗しました: " + e.message);
}

// シングルクォートはJSONでは無効です。
try {
	var data = JSON.parse("{'name': '太郎'}"); // エラーになります。
} catch (e) {
	console.log("JSONではプロパティ名と文字列にダブルクォートを使います。");
}

JSONはJavaScript Object Notationの略で、データ交換のための軽量なテキスト形式です。JavaScriptのオブジェクトリテラルに似た書式ですが、プロパティ名を必ずダブルクォートで囲む点や、末尾カンマが許可されない点など、いくつかの違いがあります。

『JSON.parse()』と『JSON.stringify()』はWebアプリケーション開発で最もよく使われるメソッドの1つです。サーバーのAPIからデータを取得した際にJSON文字列をオブジェクトに変換したり、『localStorage』にデータを保存する際にオブジェクトをJSON文字列に変換したりする場面で活躍します。

『JSON.stringify()』では関数、『undefined』、『Symbol』は変換時に無視されます。また『Date』オブジェクトは文字列に変換され、『NaN』や『Infinity』は『null』に変換されるため、これらの値を含むデータの変換には注意が必要です。