JavaScript-JSON.stringifyとJSON.parseの使い分け

JavaScript-JSON.stringifyとJSON.parseの使い分け

JSONとは

JSONはJavaScript Object Notationの略。
その名の通りJavaScriptの記法でデータを記述できる点が最大の特徴であります。
記法はJavaScriptですが、多くの言語がライブラリを使用している為プログラミング言語間でデータを受け渡せます。
Webサービスでは、ブラウザがJavaScriptを実行できるので相性が良いという事でAjax通信(非同期通信)におけるデータフォーマットとして活用されています。

オブジェクトをJSONに変換

JavaScriptのオブジェクトや値をJSON文字列にエンコード(変換)するのがJSON.stringify()メソッドです。
JSON.stringify(オブジェクトデータ)のように引数へJSON化したいデータを指定します。

const obj = {
  NickName: 'pon',
  age: 23,
  job: 'エンジニア'
}

const json = JSON.stringify(obj);

console.log(json)すると
{"NickName":"pon","age":23,"job":"エンジニア"}
が出力される。
JavaScriptではメンバの名前に識別子や数値も取れますが、JSONではメンバの名前は常に文字列になります。

※オブジェクトは名前と値の集合であり、名前と値の組みをオブジェクトの「メンバ」と呼びます。

配列をJSONにエンコード(変換)するのもオブジェクトと同じ方法でJSON化させたい配列をJSON.stringify()の引数に指定します。

JSONを読み込む(解析する)

JSON文字列をJavaScriptオブジェクトに変換するにはJSON.parse()メソッドを使用します。

JSONデータはテキストデータであり、文字列であるのでJavaScriptが扱いやすい形式に変換する必要があります。
Ajax通信を行う時、APIを呼び出し返ってくる値がJSONデータということがあります。
そういった時にこのJSON.parse()メソッドを使います。

const jsonData = '{"NickName":"pon","age":23,"job":"エンジニア"}' //jsonデータ
console.log(JSON.parse(jsonData)) //オブジェクトに変換される

コンソールに出力される値

パースをするとjsonData.nameのようなアクセスが可能になり、可読性が高くなります。

先ほどのJSON.stringify()と組み合わせる。

const obj = {
  NickName: 'pon',
  age: 23,
  job: 'エンジニア'
}

//オブジェクトをJSON化させている
const json = JSON.stringify(obj)

//JSON文字列をオブジェクトデータに変換
const userData = JSON.parse(json)
console.log(`名前: ${userData.NickName}`) // => 名前: pon


APIを作成する際はJSON.stringify()を使ってJSONデータをクライアントに返すという様な使い方をされ、
クライアント側でデータを受け取る時はJSON形式のデータをJSON.parse()で読み取り→JavaScriptオブジェクトに変換→変換されたデータをVIEWに組み込むという使い方をされると思います。