JavaScriptのJSONとは？ | IT職種コラム

TOP
コラム
JavaScriptのJSONとは？

JavaScriptとJSON

JavaScriptではJSONと呼ばれるものが使われることがあります。

ここではJSONについて説明します。

JSONとは?

JSONとはJavaScript Object Notationの略称です。

JavaScriptのオブジェクト形式のような構造をしており、もともとJavaScriptと連携する他の言語と連携するために考え出されたものです。

また、JavaScriptだけでなく、複数の言語間で連携を行うことも出来ます。

JSONはオブジェクトの構造のままテキストとして表記できます。

そのためテキストデータの軽量さを活かすことができます。

JavaScriptの内部でのJSONはJavaScriptのオブジェクトであるかのよう使用できます。

JSONはさまざまな情報をやりとりするためのデータ形式のことでファイルの拡張子は.jsonになります。

JSONデータの作成方法

JSONデータの作成方法はJavaScriptのオブジェクト構造を作るときとほぼ一緒ですが、プロパティと値をそれぞれ"（ダブルクォーテーション）で囲む必要があります。

let json = {
 "name": "yamada",
 "age": "27",
 "place": "東京"
}

このコードではname、age、placeという3つのプロパティと値がペアになったJSONデータを作成しています。

このデータを○○○.jsonというファイル名で保存することで、様々なことに利用できるJSONファイルとなります。

配列構造のJSONデータ

JSONデータは配列構造を形成することが可能です。

let json = [
 {
  "name": "田中",
  "place": "東京",
  "like": ["sports","ryouri"]
 },
 {
  "name": "山田",
  "place": "名古屋",
  "like": "sports"
 },
 {
  "name": "大山",
  "place": "大阪",
  "like": "ryouri"
 }
]

このコードでは一人ずつのJSONデータを配列に格納しまとめています。

また、値を配列にすることも可能です。

カンマ区切りで複数のデータをまとめることも可能であり、データの階層構造を作ることもできます。

JSONデータを参照する

let json = {
 "name": "yamada",
 "age": "27",
 "like": ["東京","名古屋"]
}

console.log(json.name);
console.log(json.like[0]);

出力結果

yamada
東京

JSONデータがプロパティ名に.(ドット)を繋げることでプロパティにアクセスしています。

そのためこのコードでは出力結果のように値を取得しています。

配列構造のJSONデータの取得

'use strict'

let json = [
 {
  "name": "田中",
  "place": "東京",
  "like": ["sports","ryouri"]
 },
 {
  "name": "山田",
  "place": "名古屋",
  "like": "sports"
 },
 {
  "name": "大山",
  "place": "大阪",
  "like": "ryouri"
 }
]

console.log(json[2].name);
console.log(json[0].like[0]);

出力結果

大山
sports

配列構造のJSONを取得するには、json[2].nameのようにJavaScriptの配列を扱う感覚と一緒でインデックス番号を指定することで値を取得することが可能です。

JSONデータの操作

JSONデータを追加、削除する方法について説明します。

データを追加する

let json = {
 "name": "yamada",
 "age": "27",
 "place": "東京"
}

このjsonデータに新しくidというプロパティと値を追加するためには以下のように記述します。

json.id ="123";

このコードによって"id":"123"が新しく追加されます。

配列構造をしているJSONにデータを追加する

配列構造をしているJSONにデータを追加するには、pushを使用します。

json.push({id:'123'});

この場合末尾に新しいデータが追加されます。

既存の配列構造のJSONデータにプロパティを追加したい場合は以下のように記述します。

json[0].id ='123'

このコードでは、0番目に登録されているJSONデータの中にidというプロパティを追加しています。

JSONデータを削除する

JSONデータを削除するには、オブジェクトデータを削除できるdelete演算子を使用します。

'use strict'
 let json = {
 "name": "yamada",
 "age": "27",
 "place": "東京"
}
delete json.age;

console.log(json);

出力結果

name: "yamada"
place: "東京"

このコードではdeleteを使用しageプロパティを削除してます。

そのため結果にはageが表示されていません。

オブジェクトをJSONにエンコードする

様々なオブジェクトをJSONデータにするにはJSON.stringify()を使用します。

基本構文

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

引数にオブジェクトデータを指定することでエンコードが可能となります。

使用例

'use strict'
 let obj = {
 name: '山田',
 age: '27',
 area: ['東京','大阪']
}

let json = JSON.stringify(obj);

console.log(json);

出力結果

{"name":"山田","age":"27","area":["東京","大阪"]}

出力結果ではプロパティが""で囲まれており、JSON化ができています。

また、プロパティの値がundefinedの場合、JSONに変換される時省略されます。

配列データもJSONにエンコードすることができます。

そのためには以下のように行います。

JSON.stringify(配列データ)

使用方法はオブジェクトをJSONデータにエンコードする方法と一緒です。

JSONデータをオブジェクトにデコードする

JavaScriptでJSONデータを受け取った場合、プログラミングで利用しやすい形式に変換する必要があります。

オブジェクトデータをJSONにエンコードしたあと、プロパティを出力しようとしてもundefinedになってしまいます。

これは文字列データのJSONにオブジェクトのようなアクセスが出来ないからです。

JSONを使用するには、オブジェクトデータの形式に変換することでJavaScriptで使用できます。

デコードするにはparce()メソッドを使用します。

実際の使用例

'use strict'
 let obj = {
 name: '山田',
 age: '27',
 area: ['東京','大阪']
}
//オブジェクトデータをJSON化
let json = JSON.stringify(obj);
//JSONを再びオブジェクトデータ形式に変換
json = JSON.parse(json);
console.log(json.name);

出力結果

山田

JSON.parse()の引数にJSONデータを指定することでオブジェクトデータに変換できます。

この例では再びオブジェクトデータに変換することでnameプロパティにアクセスでき値を出力結果にて表示させています。

まとめ

JavaScriptでよく使われるデータ形式JSONについて説明しました。

JSONはオブジェクトの構造のままテキストとして表記できるものです。