「Jsonデータ」と「Javascriptオブジェクト」の構造は大変似ているが、両者はあくまでも別ものであることに注意。
「Jsonデータ」は文字列であり、「Javascriptオブジェクト」はオブジェクトである。
JSONデータを作成する
以下の通り、記述方法は３通りある。
sample_singleQuote.js
// シングルクォートで囲む場合
const userA = '{ "name": "John", "age": 30 }'
sample_backQuote.js
// バッククォートで囲む場合
const userB = `{ "name": "John", "age": 30 }`
sample_doubleQuote.js
// ダブルクォートで囲む場合
const userC = "{ \"name\": \"John\", \"age\": 30 }"
補足事項
-
一対の
キー（例：name）とデータ（例：John）の組み合わせを「プロパティ」と呼ぶ。 -
2つ以上のプロパティを記述する場合、プロパティとプロパティの間にカンマ（,）を挿入する。
-
キーと値はそれぞれダブルクォートで囲まなければならない。（「"name": "John"」）
ただし、値が「数値」の場合は、ダブルクォートで囲む必要はない。（"age": 30） -
「sample_doubleQuote.js」のようにJsonデータ全体をダブルクォートで囲む場合、キーや値を囲むダブルクォートをバックスラッシュ（\）でエスケープする必要がある。（「\"name\": \"John\"」）
JsonデータをJavascriptオブジェクトに変換する
JSON.parse()メソッドを利用する。
sample.js
const jsonData = `{ "fruits": "peach", "color": "pink" }`
const jsonDataObject = JSON.parse(jsonData)
console.log(jsonDataObject)
出力結果
{fruits: "peach", color: "pink"}
JavascriptオブジェクトをJsonデータに変換する
JSON.stringify()メソッドを利用する。
sample.js
const fruits = { fruits: 'peach', color: 'pink' }
const jsonFruits = JSON.stringify(fruits)
console.log(jsonFruits)
出力結果
"{"fruits":"peach","color":"pink"}"