JSON.parse() / stringify()

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

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

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

sample_jsonParse.js

// JSON.parse() でJSON文字列をオブジェクトに変換します。
var jsonStr = '{"name": "孫悟空", "age": 23, "hobbies": ["武道", "食事"]}';
var user = JSON.parse(jsonStr);
console.log(user.name); // 『孫悟空』と出力されます。
console.log(user.age); // 『23』と出力されます。
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 fighters = ["孫悟空", "ベジータ", "ピッコロ"];
console.log(JSON.stringify(fighters)); // 『["孫悟空","ベジータ","ピッコロ"]』と出力されます。

// 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』と出力されます。

sample_jsonParse.js

// JSON.stringify()の第2引数（replacer）で出力するプロパティを絞り込む例
var fighter = { name: "孫悟空", age: 23, power: 9000, secret: "極意" };

// 配列で絞り込みます。secretプロパティは出力されません。
var filtered = JSON.stringify(fighter, ["name", "age", "power"]);
console.log(filtered); // 『{"name":"孫悟空","age":23,"power":9000}』と出力されます。

sample_jsonParse.js

// JSON.stringify()とJSON.parse()でオブジェクトのディープコピーを作る例
var original = { name: "孫悟空", skills: ["かめはめ波", "元気玉"] };
var copy = JSON.parse(JSON.stringify(original));

// コピーを変更しても元のオブジェクトに影響しません。
copy.skills.push("界王拳");
console.log(original.skills.length); // 『2』と出力されます。（元は変化なし）
console.log(copy.skills.length);     // 『3』と出力されます。

※ このサンプルはブラウザの開発者ツール（コンソール）で実行してください。

孫悟空
23
武道
{"name":"ノートPC","price":89800,"inStock":true}
{
  "name": "ノートPC",
  "price": 89800,
  "inStock": true
}
["孫悟空","ベジータ","ピッコロ"]

サンプルページはこちら

無効な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』に変換されるため、これらの値を含むデータの変換には注意が必要です。