オブジェクトリテラルとJSON：続JavaScriptのオブジェクトについて

JSONとは

　「オブジェクトリテラルとは何か」がわかったところで、JSONと言うデータ形式についてもお話ししておきましょう。 JSONとは、「JavaScript Object Notation（JavaScriptのオブジェクト表記法）」の略です。前述のオブジェクトリテラルも含め、JavaScriptにおけるオブジェクト表記方法をそのまま通信データの形式に用いると言うアイデアです。以下はWikipedia からの引用ですが、以下のデータ型をJavaScriptの表記法に則って記述することができます。

• 数値（整数、浮動小数点数）
• 文字列（バックスケープ記法を含む、ダブルクォーテーションで括った文字列）
• 真偽値（trueとfalse）
• 配列（データのシーケンス）
• オブジェクト（キーと値のペアの集まり。JSONではハッシュと等価）
• null

　前述のオブジェクトリテラルも含めることができるので、非常に表現力豊かなデータ形式だということがお分かりでしょう。しかも、JSONは「eval()関数で評価すれば、簡単にJavaScriptオブジェクトに変換できる」と言う非常に便利な特徴を持つことから、Ajaxにおけるサーバとのデータやり取りではよく用いられます。そういった処理を擬似的に表した、以下の例を参照してください。

例： サーバから、以下のJSON文字列が返される（JSONのプロパティ名は文字列リテラルにする必要がある）。

    {
        "userId": 29,
        "name": "白石",
        "age": 67,
        "parentIds": [122, 67]
    }

Ajaxクライアントはeval()を用いてJavaScriptオブジェクトに変換し、利用する。

    var responseText = ... (サーバからのレスポンス) ...

    // 式として評価するため「( )」で囲み、eval()実行
    var user = eval("(" + responseText + ")");

    // プロパティにアクセス
    alert(user.name);

こぼれ話：オブジェクトリテラルに関するブラウザ間の違い

　オブジェクトリテラルは、プロパティ（キー : 値）同士をカンマで区切って指定します。この際、「最後の要素の後ろにカンマを許容するかどうか」と言う部分が、ブラウザごとに異なります。

    var obj = {
        var1: "変数１",
        var2: "変数２",     // 末尾のカンマを許容するか？
    };

　本来ここにはカンマを許容しないのが文法上正しいのですが、IE以外のブラウザ（FirefoxやSafari）では、利便性のために許容しています。オブジェクトのプロパティをごちゃごちゃいじっていると、末尾にカンマが残ってしまうことはよくあります。ほかのブラウザでは動作するのに、IEだとスクリプトエラーになる、と言う場合は、末尾のカンマが原因なこともしばしばです。チェックしてみるとよいでしょう。

まとめ

　今回は、JavaScriptオブジェクトの話の続きとして、オブジェクトリテラルとJSONについてお話ししました。次回はin演算子を紹介して、JavaScriptのオブジェクトに関する話をいったん終わりにします。