ProgrammingJavaScript講座第3章 応用・JavaScript関連技術
第3章 応用・JavaScript関連技術

JSONを使ったデータ管理

JSONの概要

JSON（JavaScript Object Notation）はテキストベースのデータフォーマットです。エクセルやGoogleスプレットシートなどに記録していたような情報を、定期的にホームページで更新したいようなとき、JSON形式が便利です。今ではTwitterやGithub、Slackなど多くのサービスで使われています。

JSONはJavaScriptのオブジェクト表記をベースとしており、シンプルで読みやすいように設計されています。主に外部ファイルとして非同期で読み込まれており、読み込まれたあとはオブジェクトのように参照することができます。JavaScriptから派生したフォーマットですが、言語に依存せず使用できます。

JSONの取得方法

JavaScriptからJSONを読み込む場合、JSON形式の文字列はparse()メソッドを使ってオブジェクトに変換することができます。

構文：
JSON.parse( JSON文字列, [reviver] )
引数 説明
JSON文字列 パースしたいJSON文字列を指定します。必須です。
reviver オブジェクトを返す前に値を変換します。詳しくはMDNのparse()のページを参照してください。
parse() - MDN

次のコードは、前節で紹介したAjaxを使ってGithubのAPIに接続しています。Githubが返す文字列はJSON形式になっているので、parse()メソッドを使って扱いやすいオブジェクトに変換しています。

CodePen: https://codepen.io/zionboogie/pen/MVwwmL
HTML
<div id="message"></div>
JavaScript
// XMLHttpRequestのインスタンスを作成
var req = new XMLHttpRequest();

// 接続先のURLやメソッドを設定します
req.open( "GET", "https://api.github.com/users/zionboogie/repos" );

// リクエストをサーバに送信
req.send();
 
// 読み込み時の処理を設定
req.onreadystatechange = function() {
	// readyState=4は全てのデータを受信済み、
	// status=200は正常に処理されたことを意味します
	if( req.readyState == 4 && req.status == 200 ) {
		// responseTextの格納されたJSONデータをJSON.parse()で変換
		var json = JSON.parse( req.responseText );

		// 配列で処理
		var text = "";
		for( var i=0; i<json.length; i++ ){
			text += json[i].name + "<br>";
		}
		// 結果を代入
		document.getElementById( "message" ).innerHTML = text;
	}
}

JSON.parse()でパースしたデータはオブジェクト形式で返されるので、データ構造を知らないと必要なデータが取得できません。データ構造が公開されていない場合は、alert()やconsole.log()でデータを出力すると、その構造を知ることができます。responseTextに格納されているJSONデータは下記のような構造になっています。

[
  {
    "id": 48085424,
    "name": "atom",
    "full_name": "zionboogie/atom",
    "owner": {
      "login": "zionboogie",
      "id": 5801951,
      "avatar_url": "https://avatars3.githubusercontent.com/u/5801951?v=4",
      "gravatar_id": "",
      "url": "https://api.github.com/users/zionboogie",
      "html_url": "https://github.com/zionboogie",
...

Chromeなどのブラウザはローカルでの通信を許可していないので、CodePenなどのWebサービスを利用するのでなければ、テストするときもサーバにアップしたり、ローカルにWebサーバ環境を用意してください。

JSONのフォーマット

JSONとJavaScriptのオブジェクト表記はほぼ同じですが、いくつかの点で違いがあります。JSONはプログラムで解釈しやすいように、JavaScriptよりも表現の幅が狭くなっています。たとえば、JSONではJavaScriptと違い、オブジェクトのプロパティ名はダブルクォーテーションやシングルクォーテーションで囲う必要があり、配列やオブジェクトの最後の要素にカンマがあるとエラーになります。また、大文字、小文字を区別するので、true、false、nullといった値は小文字で書く必要があります。
JSONで表現する文字列や数値などのリテラルは下記のようになります。

値 説明
文字列 ダブルクォーテーションで囲みます。シングルクォーテーションは使えません。
数値 整数、少数など10進数のみ、8進数や16進数は使えません。
真偽値 JavaScriptと同様true/falseが使えます。
NULL nullが使えます。undefinedは使えません。
配列/オブジェクト リテラルの扱いに制限がある以外はだいたいJavaScriptと同じです。

JSONファイルは拡張子を.json、文字コードはUTF-8で作成します。JSONでオブジェクトを作成する場合のサンプルは下記の通りです。

{
	// 数値
	"プロパティ1" : 1, 
// 文字列
	"プロパティ2" : "文字列",
	// 真偽値
	"プロパティ3" : true,
	// 配列
	"プロパティ4" : [1, 2, 3],
	// 配列の中にオブジェクト
	"プロパティ5" : [{"キー1" : 1}, {"キー2" : 2}, {"キー3" : 3}]
}

オブジェクトを複数作成したい場合は、次のように入れ子状態にします。

[
	{
		"プロパティ1" : 1, 
		"プロパティ2" : "文字列",
		....
	},
	{
		"プロパティ1" : 1, 
		"プロパティ2" : "文字列",
		....
	}
]

関連記事