JSONデータを解析するには？［JavaScript／jQuery］：.NET TIPS

JSON.parse／JSON.stringifyメソッドやjQueryのparseJSON／getJSONメソッドなどを使って、JSONデータのシリアライズ／デシリアライズを行う方法を解説する。

» 2016年07月27日 05時00分公開

[山本康彦，BluewaterSoft／Microsoft MVP for Windows Development]

　JSON（ジェイソン、JavaScript Object Notation）は、XMLと並んでWebサービスでよく使われるデータ表現形式だ。このJSON形式の文字列からデータを取り出すにはどうしたらよいだろうか。文字列処理を駆使した解析ロジックを書かなければならないのだろうか？

　実はその名前「JavaScript Object Notation」（直訳すれば「JavaScriptオブジェクト表記法」）が示しているように、JSONとJavaScriptのオブジェクトは親和性が高いのだ。簡単に相互変換（シリアライズ／デシリアライズ）ができるのである。本稿ではその方法を解説する。

JSONデータとオブジェクトを変換するには？

　JSON形式の文字列をオブジェクトに復元する（デシリアライズする）には、次の3通りの方法がある。

JSON.parseメソッド（IE 8以降など、比較的新しいブラウザのみ）
jQueryのparseJSONメソッド（jQuery3.0未満のみ）
eval関数（汎用的だが、セキュリティに注意が必要）

　最近のブラウザ限定であれば、JSON.parseメソッドを使えばよい。

　そして、オブジェクトに復元できれば、その内容を取り出すのは簡単だ。オブジェクトのプロパティを読み取るだけである。

　なお、オブジェクトをJSON形式の文字列に変換する（シリアライズする）には、JSON.parseメソッドが使える環境であれば、JSON.stringifyメソッドが使える。

次に簡単なサンプルコードを示す。

// 画面上の<textarea>要素に文字列を表示するための関数（jQuery使用）
// その<textarea>要素のid属性は「#result」としておく
function addMessage(msg) {
$("#result").text($("#result").text() + msg + "\n");
}

// オブジェクトを用意し、そこからJSON形式の文字列を作る
var original = {
stringData: "文字データ",
result: false,
count: -1
};
// JSON.stringifyメソッドでJSONデータにシリアライズ
// （IE 8以降などの比較的新しいブラウザのみ）
var jsonString = JSON.stringify(original, null, " ");
addMessage("jsonString = " + jsonString);
// 出力 ⇒
// jsonString = {
// "stringData": "文字データ",
// "result": false,
// "count": -1
// }

// 以上で、JSON形式の文字列「jsonString」が用意できた。
// 今度はそれをデシリアライズしてデータを取り出す

// JSON.parseでオブジェクトに復元（IE 8以降などの比較的新しいブラウザのみ）
var jsonObj1 = JSON.parse(jsonString);
addMessage("stringData:" + jsonObj1.stringData
            + ", result:" + jsonObj1.result
            + ", count:" + jsonObj1.count);
// ⇒ stringData:文字データ, result:false, count:-1

// jQueryのparseJSONメソッドでオブジェクトに復元（jQuery3.0未満のみ）
var jsonObj2 = $.parseJSON(jsonString);
addMessage("stringData:" + jsonObj2.stringData
            + ", result:" + jsonObj2.result
            + ", count:" + jsonObj2.count);
// ⇒ stringData:文字データ, result:false, count:-1

// eval関数でオブジェクトに復元（汎用的）
// ※信頼できるソース以外から受け取ったJSONデータの解析には、推奨されない
var jsonObj3 = eval("(function(){return " + jsonString + ";})()");
addMessage("stringData:" + jsonObj3.stringData
            + ", result:" + jsonObj3.result
            + ", count:" + jsonObj3.count);
// ⇒ stringData:文字データ, result:false, count:-1

オブジェクトとJSON形式の文字列を変換するサンプル（JavaScript）
3通りのいずれの方法でも、1行のコードでデシリアライズできる。
なお、JSON形式をあまり知らないという読者は、オブジェクト「original」を定義している部分と、JSON形式の文字列変数「jsonString」の出力結果を見比べてみてほしい。ほぼ同じだと分かるだろう。大きな違いは、JSON形式ではプロパティ名を引用符で囲まなければならないところだ（オブジェクトを定義するときは、プロパティ名を引用符で囲まなくてよい）。

JSONデータを受信してオブジェクトに復元するには？

　JSON形式の文字列をデシリアライズする場面というのは、Webサービスからデータを受け取るときによくあるだろう。その場合でも、データを文字列として受信してから上記のようにしてデシリアライズすればよい。

　ただし、jQueryには、受信したJSON形式の文字列をデシリアライズしてから返してくれるという、便利なメソッドが用意されている。データの受信とデシリアライズが、1回のメソッド呼び出しで済んでしまうのだ。

　jQueryのajaxメソッドを使う方法は「.NET TIPS：Ajax（非同期通信）を実装するには？［JavaScript／jQuery］」で紹介している。ここでは、getJSONメソッドを使う方法を紹介しよう（次のコード）。

// 次でアクセスしている「./data.json」ファイルの内容：
// {"stringData":"文字列", "result":true, "count":99 }

$.getJSON("./data.json", function (json) {
// この関数に引数として渡される「json」変数は、既に復元されたオブジェクト
// なお、この部分は、通信完了後に非同期に実行される
addMessage("stringData:" + json.stringData
+ ", result:" + json.result
+ ", count:" + json.count);
// ⇒ stringData:文字列, result:true, count:99
});