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

白石俊平(あゆた)
2008-01-22 08:00:00
  • このエントリーをはてなブックマークに追加

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: "変数1",
        var2: "変数2",     // 末尾のカンマを許容するか?
    };

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

まとめ

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

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]