【JavaScript】JSON文字列に変換する　JSON.stringify()メソッド

JOSNとは？

JSONとは軽量で視認性も高く、データを簡単に扱えるようにフォーマットとして構造化した記述方法です。決まった形式に沿って記述されていることから、読み込んだり加工したりしやすい構造であるのが最大の特徴です。

単純なテキストデータのため、サーバー間の通信やさまざまなプログラミング言語との共有などにも効果的です。

JSONは「JavaScript Object Notation」の略称であり、特にJavaScriptとの親和性が高いです。

JSON.stringify()とは？

JSON.stringify()メソッドは、ある JavaScript のオブジェクトや値を 簡単にJSON 文字列に変換してくれます。

JSON.stringify()メソッドの使い方

一般的な記述方法は以下の通りです。引数へJSON化したいデータを指定すればOKです。

JSON.stringify( オブジェクトデータ )

サンプルコード

var sample = {
    name: '花子',
    age: 20,
    area: 'Osaka'
}
 
var json = JSON.stringify( sample );
 
console.log( json );

//実行結果
{"name":"花子","age":20,"area":"Osaka"}

上のサンプルコードではオブジェクトデータを「JSON.stringify()」でJSON化しています。

併せて覚えたい！JSON.parse()メソッド

JSON.parseメソッドとは、JSON形式で書かれた文字列をJavaScriptのJSONオブジェクトに変換するメソッドです。

JSONデータは単純なテキストデータであり、単なる文字列にすぎません。その為、JavaScriptでJSONデータをう受け取った場合、JavaScriptで扱えるような形式に変換する必要があります。

これを簡単に実現してくれるのが「JSON.parse()」メソッドです！

サンプルコード

var sample = {
    name: '花子',
    age: 20,
    area: 'Osaka'
}
 
var json = JSON.stringify( sample );
 
// オブジェクトデータをJSON化
console.log( json );

console.log( json.name );

//実行結果
undefined

上のサンプルコードでは、オブジェクトデータをJSON化した後にnameプロパティを出力する処理を実行しました。

しかし、実行結果は「undefined」です。

つまり、文字列データのJSONにオブジェクトのようなアクセスはできない、ということです。

そこで、「JSON.parse()」メソッドの出番です！

var sample = {
    name: '花子',
    age: 20,
    area: 'Osaka'
}
 
var json = JSON.stringify( sample );
 
// オブジェクトデータをJSON化
console.log( json );

 // JSONを再びオブジェクトデータの形式に変換
 json = JSON.parse( json );
 console.log( json.name );

//実行結果
花子

上のサンプルコードでは、JSON.parseの引数にJSON化したオブジェクトデータを渡しています。

そうすることで、再度オブジェクトデータに変換し、先ほどは「undefined」でしたが、nameプロパティの値の「花子」を出力されています。

このように、JSONデータのエンコード・デコードはペアでよく使われます。