はじめに
JSONは「JavaScript Object Notation」の略であり、Webアプリケーションに役立つ軽量型のデータ交換フォーマットです。テキストベースのフォーマットなので読み書きが簡単で、さらにプログラムで容易に解析できる正規構文を備えています。基本的にはJavaScriptのサブセットであり、詳しくは後で説明しますが、XML以上に構文の解析が容易です。
AJAXは「Asynchronous JavaScript and XML」の略称であり、JavaScriptを使って非ブロッキングのサーバー呼び出しを実行するWeb開発テクニックです。ただし、「and XML」の部分は、どうやら時間と共に影が薄くなりつつあります。AJAXの当初のデータ転送フォーマットはXMLでしたが、HTMLやプレーンテキストなど、任意のフォーマットを使ってなんら支障はありません。JSONを使っていけない理由はないのです。コンピュータから見た場合、XMLも、HTMLも、そしてJSONも、みなプレーンテキストだからです。
この記事では、AJAX、JSON、JavaScript、PHPを使ってニュースティッカー（ニュース速報ツール）を作成する方法を説明します。このアプリケーションは図1のようになります。
ASP.NETやJ2EEなどの他のサーバーサイドテクノロジの知識はあるが、PHPはまったくわからない？ ご心配にはおよびません。同じテクニックがASP.NETやJ2EEにも応用できます。PHPスクリプトを別の言語に変換することも、とても簡単です。
このサンプルアプリケーションを作成する過程では、ObserverパターンをJavaScriptで実装する方法も学びます。
JSONとXMLの比較
JSONとXMLの用途は基本的に同じであり、どちらもデータの表現と交換を目的にしています。AJAX開発のコンテキストでXMLの代わりにJSONを使う理由は何でしょうか？employeeクラス（実際にはemployeeのリスト）の記述がXMLとJSONでどう違うのか、以下に例を示します。このように並べて比較すると、JSONによるデータ表記の方法が見えてくるでしょう。
<?xml version='1.0' encoding='UTF-8'?> <employees> <employee> <surname>Lacava</surname> <name>Alessandro</name> <city>Milan</city> <state>Italy</state> <department>IT</department> </employee> <employee> <surname>Brown</surname> <name>John</name> <city>Rome</city> <state>Italy</state> <department>IT</department> </employee> </employees>
{
"employees" :
[
{
"surname" : "Lacava",
"name" : "Alessandro",
"city" : "Milan",
"state" : "Italy",
"department" : "IT"
},
{
"surname" : "Brown",
"name" : "John",
"city" : "Rome",
"state" : "Italy",
"department" : "IT"
}
]
}
見ての通り、JSONはXMLより簡潔です。これはパフォーマンスの向上に直結します。データが少なければ、転送と解析の対象となるバイト数も減少し、JSONが必要とする帯域幅、メモリやCPUのリソースも少なくなります。JavaScript開発の経験がある方には、JSONがJavaScriptのサブセットだと分かるはずです。実際、ここに挙げたJSONコードは、JavaScriptの配列とオブジェクトのリテラル表現にほかなりません。
配列とオブジェクト：JSONの基本要素
基本的に、JSONは配列とオブジェクトを表すために使います。ここで言う「オブジェクト」とは、不特定の名前/値ペアの集まりを指します。例えば、オブジェクトpersonは、次のように表せます。
{ "person" :
{
"firstName" : "John",
"lastName" : "Brown",
"age" : 30,
"sex" : "M"
}
}
JSONでは、中カッコ（{ }）でオブジェクトを区切ります。オブジェクトは{で始まり、}で終わります。上記の例では、personがオブジェクト名で、その後にオブジェクトのプロパティを名前/値ペア形式で表記します。firstName、secondName、age、sexがプロパティです。プロパティの値に使えるのは、文字列、数値、オブジェクト、配列、true、false、nullのいずれかです。上記の例では、3つの文字列と1つの数値（年齢）を使っています。
一方、配列は特定の値の集まりであり、上記のいずれの型の値も指定できます。以下は、JSONの配列表現です。
{"states" :
[
"California",
"Florida",
"Alabama"
]
}
この記事の冒頭でJSONはJavaScriptのサブセットであると書きましたが、それはJSONテキストがJavaScriptのオブジェクトと配列をリテラルで表記したものにほかならないということです。JavaScriptの専門知識をお持ちでなく、まだこの説明に納得できない方のため、具体的な例を使って説明します。オブジェクトの表記に話を戻しますが、JavaScriptでは、personオブジェクトを次のように定義できます。
var person = new Object(); person.firstName = "John"; person.lastName = "Brown"; person.age = 30; person.sex = "M";
以下は、リテラル記法を使った場合の定義です。
var person = "firstName" : "John", "lastName" : "Brown", "age" : 30, "sex" : "M" ;
JSONの構文に似てはいるがこのリテラル記法は別のものだ、と異論があるかもしれません。それはそのとおりですが、以下のコードを見てください。
var obj = eval( {"person" : { "firstName" : "John", "lastName" : "Brown", "age" : 30, "sex" : "M" } } ); //個人の名をポップアップ表示する alert(obj.person.firstName);
どうでしょうか。JSONがJavaScriptのサブセットにほかならないことが、納得いただけたでしょうか。JavaScriptの組み込み関数evalは、実際はJavaScriptインタプリタであり、任意のJavaScriptコードの実行に使えます。そう、もうお分かりです。JSONメッセージの解析を、たった1行のコードで実行できるのです。これを知った瞬間に、JavaScriptを使ってXMLを解析していた人（私も含めて）は、JSONのありがたみを痛感します。そうは言っても、XMLを否定するつもりはありません。XMLは優れたデータ交換フォーマットであり、今後もそれは変わりません。2つの異種テクノロジが透過的に対話するためには不可欠のフォーマットです。しかし今回の場合、JavaScriptとJSONは異種テクノロジではありません。同じ言語（JavaScript）を話すのに、インタプリタ（通訳）を介して対話する必要があるでしょうか。
