言語
日本語
English

Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

JavaScript辞典

  1. トップページ
  2. JavaScript辞典
  3. JSON.parse() / stringify()

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

JSON形式の文字列とJavaScriptのオブジェクトを相互に変換するためのメソッドです。サーバーとのデータ通信やデータの保存に使用します。

構文

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

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

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

メソッド一覧

メソッド概要
JSON.parse(文字列)JSON形式の文字列をJavaScriptのオブジェクトに変換します。無効なJSON文字列を渡すとエラーが発生します。
JSON.stringify(値)JavaScriptの値をJSON形式の文字列に変換します。第3引数でインデントを指定すると、整形された文字列が得られます。

サンプルコード

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

JSON.parse()のエラー処理

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

対応ブラウザ

Chrome Chrome
49 以降
2 以前 ×
Firefox Firefox
57 以降
2.5 以前 ×
Safari Safari
18 以降
3.1 以前 ×
Edge Edge
80 以降
11 以前 ×
IE IE
11 以降
7 以前 ×
Opera Opera
48 以降
10 以前 ×
iOS Safari iOS Safari
18 以降
3 以前 ×
Android Browser Android Browser
37 以降
4 以前 ×
Chrome Android Chrome Android
36 以降
17 以前 ×
Firefox Android Firefox Android
79 以降
3 以前 ×

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。