Widely available すべての主要ブラウザで対応済み。安心して使用可能。

JSON

JSON 名前空間オブジェクトは、 JavaScript Object Notation (JSON) を解釈したり、値を JSON に変換したりする静的メソッドを持ちます。

JSONES5

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
JSON
3
12
3.5
4
18
4
JSON.json superset

JSON は、オブジェクト、配列、数値、文字列、ブール値、および null をシリアル化するための構文です。 これは JavaScript 構文に基づいていますが、JavaScript とは異なります。JavaScript のほとんどは JSON ではありません。 例えば：
66
79
62
12
66
12
JSON.parse

JSON.parse() 静的メソッドは、文字列を JSON として解析し、文字列によって記述されている JavaScript の値やオブジェクトを構築します。オプションのリバイバー関数で、生成されたオブジェクトが返される前に変換を実行することができます。
3
12
3.5
4
18
4
JSON.stringify

JSON.stringify() メソッドは、ある JavaScript のオブジェクトや値を JSON 文字列に変換します。置き換え関数を指定して値を置き換えたり、置き換え配列を指定して指定されたプロパティのみを含むようにしたりすることもできます。
3
12
3.5
4
18
4
JSON.stringify.well formed stringify

文字列は整形式の UTF-8 にエスケープされます。
72
79
64
12.1
72
12.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT 
// Parse
const obj = JSON.parse('{\"name\": \"Taro\", \"age\": 25}');

// Convert to string
const json = JSON.stringify(obj);

// Format output
JSON.stringify(obj, null, 2);

// Use `replacer` to output only specific keys
JSON.stringify(obj, ['name']); // '{\"name\":\"Taro\"}'

ライブデモ

JSON.stringify で整形表示

第3引数（スペース）を使って、読みやすい形に整形します。

プレビュー全画面表示

JSON.parse のエラーハンドリング

不正な形式のJSONを解析した際のエラーをキャッチします。

プレビュー全画面表示

replacer による特定キーの抽出

配列として渡したキーのみをJSON化します。

プレビュー全画面表示

実務での使いどころ

  • JSON の活用

    JSON 名前空間オブジェクトは、 JavaScript Object Notation (JSON) を解釈したり、値を JSON に変換したりする静的メソッドを持ちます。

注意点

  • 特になし。すべての主要ブラウザで安定して動作する。

アクセシビリティ

  • JavaScript による動的更新時は、aria-live リージョンで変更をスクリーンリーダーに通知する。

参考リンク