JSONでデータを扱う

2010/05/19

JavaScriptを書くとき、サーバーとのデータ交換などをするのにJSON形式がよく使われます。JSONはJavaScriptの構文を使用したデータ構造のことで、オブジェクト、配列、文字列、数値、null、ブール値などのデータを扱います。ただし、関数型データは扱えません。このアドベンチャーゲーム用のエディタではデータのインポート/エクスポートにJSONを利用しています。 JSON形式ではデータ値はオブジェクトと配列のいずれかに格納され、場合によって深い構造を持つことがあります。

//オブジェクトは連想配列と同じで、キーと値のセットで表される
{ hensachi: '50' }

//配列はインデックス番号と値で表される
[ 'hensachi', '50' ]

オブジェクトと配列の違いは、配列だとfor文などで処理する要素の順番がインデックス番号通りに保証されているのに対し、オブジェクトはそうでないということです。オブジェクトの要素を取得するのにfor inループを使うことがありますが、オブジェクトに登録した順番通りの処理はブラウザで必ずしも保証されないようです。

//オブジェクトだと並べた要素の順番に処理されるとは限らない
{ namae: 'Tarou', hensachi: '50', yaruki: 'hutsuu' }

//配列はインデックス番号の順番での処理が保証される
[ 'namae', 'Tarou', 'hensachi', '50', yaruki, 'hutsuu' ]

データ構造をオブジェクトだけで表すことも可能ですが、複数のデータを登録する際は、ひとまとまりのデータをまずオブジェクトに入れて、それらを配列でリストにする方が見た目にも分かりやすく効率的です。

//このようにオブジェクトだけで記述する代わりに……
{
	'Tarou': { shiboukou: 'kaisei', yaruki: 'hutsuu' },
	'Jirou': { shiboukou: 'nada', yaruki: 'takai' },
..........
..........
}

//個々のデータをオブジェクトに入れて、それらをリストにすると見た目にもすっきりします
[
	{ namae: 'Tarou', shiboukou: 'kaisei', yaruki: 'hutsuu' },
	{ namae: 'Jirou', shiboukou: 'nada', yaruki: 'takai' },
	{ namae: 'Saburou', shiboukou: 'hibiya', yaruki: 'hikui' },
..........
..........
]

このようなデータ構造のデータを処理するとき、たとえばnamaeプロパティだけを取得したいというときは、次のようにfor-inではなくfor文を使います。

//生徒ごとの進路に関するデータ
var shinroData = [
	{ namae: 'Tarou', shiboukou: 'kaisei', yaruki: 'hutsuu' },
	{ namae: 'Jirou', shiboukou: 'nada', yaruki: 'takai' },
	{ namae: 'Saburou', shiboukou: 'hibiya', yaruki: 'hikui' },
..........
..........
];

var namaeList =[];
for (var index = 0; index < shinroData.length; index++) {
	namaeList[index] = shinroData[index].namae;
}

// namaeList ⇒ ['Tarou', 'Jirou', 'Saburou']

また、Prototype.jsなどのJavaScriptライブラリには、こういうデータ構造を扱うイタレータが数多くあります。たとえば上の作業をPrototype.jsを使って処理するならば、

//生徒ごとの進路に関するデータ
var shinroData = [
	{ namae: 'Tarou', shiboukou: 'kaisei', yaruki: 'hutsuu' },
	{ namae: 'Jirou', shiboukou: 'nada', yaruki: 'takai' },
	{ namae: 'Saburou', shiboukou: 'hibiya', yaruki: 'hikui' },
..........
..........
];

//Prototype.jsのpluckメソッドは指定したプロパティの値だけ配列内から取得する
var namaeList = shinroData.pluck('namae');

// ⇒ ['Tarou', 'Jirou', 'Saburou']

このように一行で書くこともできます。なお、JSON規格でコードを書く際は取り決めとして、オブジェクトのキーや、値をダブルクオテーション（"）で囲うことになっています。シングルクオテーション（'）で囲うのは正式ではないようです。

//個々のデータをオブジェクトに入れて、それらをリストにすると見た目にもすっきりします
[
	//キーと値をダブルクオテーションで囲ったところ
	{ "namae": "Tarou", "shiboukou": "kaisei", "yaruki": "hutsuu" },
	{ "namae": "Jirou", "shiboukou": "nada", "yaruki": "takai" },
	{ "namae": "Saburou", "shiboukou": "hibiya", "yaruki": "hikui" },
..........
..........
]

なお、文字列以外の値（数値、ブール値（true/false）、ヌル（null）などはダブルクオテーションで囲う必要がありません。

[
	{ "namae": "Tarou", "hensachi": 50, "tokui": "suugaku" },
	{ "namae": "Jirou", "hensachi": 70, "tokui": "butsuri" },
	{ "namae": "Saburou", "hensachi": 30, "tokui": null },
..........
..........
]

- JavaScript/Ajax JavaScript, JSON, Prototype