JSON (JavaScript Object Notation)

JSONとは、オブジェクトや配列を組み合わせて構造化されたデータを表現する、データ記述言語です。

JSONの記述方法

データ型

オブジェクトと配列は、自由にネストすることができます。よってそれらを使用して、複数のデータを記述することができます。

数値 (number)

数値は10進数で記述します。8進数や16進数は使用できません。

負数を表すにはマイナス記号 ( - ) を付けますが、正数を表すのにプラス記号 ( + ) は使用できません。

文字列 (string)

JavaScriptでは文字列を記述するのに、ダブルクォート ( " )かシングルクォート( ' )のいずれかを使用できます。しかしJSONでは、ダブルクォートしか認められないことに注意が必要です。

使用可能な文字は、ダブルクォート ( " ) とバックスラッシュ ( \ ) 以外です。また以下のエスケープシーケンスをサポートします。

表記 説明
\" 二重引用符 quotation mark
\\ バックスラッシュ reverse solidus
\/ スラッシュ solidus
\b 後退 (バックスペース) backspace
\f 改ページ formfeed
\n 改行 newline
\r 復帰 carriage return
\t タブ horizontal tab
\uXXXX 4桁の16進数で表記されたUnicode文字 4 hexadecimal digits

なおサーバからJSONで出力する場合には、バックスラッシュ自体がエスケープ文字とみなされてしまうため、「\\n」のようにバックスラッシュをエスケープする必要があります。

オブジェクト (object)

オブジェクトは、基本的にオブジェクトリテラルの形式で記述します。しかしそれとの相違点として、プロパティ名は文字列としてダブルクォート ( " ) で囲む必要があることに注意が必要です。

{ "property1":"text", "property2":10 }

最後の要素の後にカンマ (,) を付けてはならない。

配列 (array)

配列は配列リテラルの形式で記述します。

[ 1, 2, "text" ]

最後の要素の後にカンマ (,) を付けてはならない。

論理値 (true、false)

「true」「false」と記述します。

true

null

「null」と記述します。

null

ファイル形式

エンコーディング UTF-8
拡張子 .json
MIMEタイプ application/json
RFC 4627 application/json

参照

  • JSON Example
    JSONの記述例。そしてJSONとXMLの記述の比較があります。

JSON形式の文字列データを、JavaScriptオブジェクトへ変換する方法

JSON形式の文字列データは、eval()関数で評価することでJavaScriptのオブジェクトに変換できます。

このときeval()に渡す文字列は括弧で囲む必要があります。さもなくば「SyntaxError: invalid label」として例外が発生します。

var data = '{ "property1":"text", "property2":10 }';

var obj = eval( '(' + data + ')' );

このコードを実行するとobjは次のようになります。

FirebugによるJSONデータのデバッグ結果

サーバからの取得

XMLHttpRequestオブジェクトとeval()関数を使用することで、サーバからJSON形式のデータを取得して処理できます。

var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = function()
{
    var READYSTATE_COMPLETED = 4;
    var HTTP_STATUS_OK = 200;

    if( xmlHttpRequest.readyState == READYSTATE_COMPLETED
     && xmlHttpRequest.status == HTTP_STATUS_OK )
    {
        if( xmlHttpRequest.getResponseHeader( 'Content-Type' ) == 'application/json' )
        {
            // JavaScriptオブジェクトとしてJSONデータを取得する
            var data = eval( '(' + xmlHttpRequest.responseText + ')' );
        }
    }
}

var requestUrl = 'test.json';

xmlHttpRequest.open( 'GET', requestUrl );
xmlHttpRequest.send( null );

Prototype.jsを使用するならば、同様の処理は次のようになります。

new Ajax.Request( 'test.json',
    {
        method: 'get',
        onSuccess: function( response )
        {
            var data = response.responseJSON;
        }
    } );

開発ツール (JSONView)

FirefoxのアドオンであるJSONViewを使用することで、JSON形式のデータをブラウザ内で書式化して表示することができます。

JSONViewの表示例

このアドオンは正確なJSONデータしか受け入れず、書式に誤りがあるときには読み込み中のまま処理が終了しません。

参照

関連ページ