so-zou.jp

JSON (JavaScript Object Notation)

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

JSONの記述方法

データ型

• 数値 (number)
• 文字列 (string)
• オブジェクト (object)
• 配列 (array)
• 論理値 (true、false)
• null

オブジェクトと配列は制限なくネストできるため、それにより複数のデータを記述できます。

数値 (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 - The application/json Media Type for JavaScript Object Notation (JSON)

次のサンプルで、MIMEの違いによりブラウザでどのように認識されるか確認できます。

• MIME : application/json
• MIME : text/javascript

JSON文字列とJavaScriptオブジェクトの相互変換

JSONオブジェクトがサポートされるならば、そのメソッドによりJSON文字列とJavaScriptオブジェクトを簡単に変換できます。それがサポートされるかどうかは、簡単にはWindowオブジェクトにJSONプロパティが存在するかどうかで判別できます。

if( window.JSON )
{
    // JSONがサポートされる
}

ちなみにPrototype.jsでは、

var NATIVE_JSON_PARSE_SUPPORT =
    window.JSON &&
    typeof JSON.parse === 'function' &&
    JSON.parse('{"test": true}').test;

のように判別しています。

JSON文字列 → JavaScriptオブジェクト

JSON.parseがサポートされるならば、それでJSON形式の文字列をオブジェクトに変換できます。

JSON.parse( text [, reviver ] )

JSON.parse - JavaScript | MDN

JSON.parse( '{ "a":1, "b":"foo", "c":null }' );
// Object { a=1, b="foo", c=null}

JSON.parse( '{ "a":true, "b":"true", "c":false, "d":"false" }' );
// Object { a: true, b: "true", c: false, d: "false" }

解析対象のtextが有効なJSON文字列ではない場合には、SyntaxError例外が発生します。

JSON.parse( '' );           // unexpected end of data
JSON.parse( 'a' );          // unexpected character
JSON.parse( '"\\a"' );      // bad escaped character
JSON.parse( '{"a"}' );      // expected ':' after property name in object
JSON.parse( '"{"a":""}"' ); // unexpected non-whitespace character after JSON data

特に空白文字には注意が必要で、それがWhite spaceと見なされないとパースに失敗します。

JSON.parse( '{"a" : 1}' );    // OK
JSON.parse( '{"a"\x09: 1}' ); // OK
JSON.parse( '{"a"\x20: 1}' ); // OK
JSON.parse( '{"a"\xa0: 1}' ); // SyntaxError: JSON.parse: expected ':' after property name in object

オブジェクトへの変換に特別な処理が必要ならば、関数をreviverに渡して処理します。

eval()関数による変換

JSON形式の文字列データは、eval()関数で評価することでもJavaScriptのオブジェクトに変換できます。このときeval()に渡す文字列はかっこで囲む必要があります。さもなくば「SyntaxError: invalid label」として例外が発生します。

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

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

このコードを実行するとobjは、

のようになります。

eval()の使用には危険が伴うため、信頼できるデータ以外には使用してはなりません。eval を使わないでください! - eval - JavaScript | MDN

JavaScriptオブジェクト → JSON文字列

JSON.stringify()がサポートされるならば、それでオブジェクトをJSON形式の文字列に変換できます。

JSON.stringify( value[, replacer [, space]] )

JSON.stringify(value[, replacer [, space]])

var obj = { a: 1, b: 'foo', c: null, d: function(){} };

var str = JSON.stringify( obj );
// '{"a":1,"b":"foo","c":null}'

for ... inによる変換

オブジェクトのプロパティを一覧表示する方法を利用して、プロパティを文字列として連結することでもJSON文字列に変換できます。

サーバからの読み込み

XMLHttpRequestと組み合わせることで、サーバからJSON形式のデータを取得して処理できます。

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

    if( this.readyState == READYSTATE_COMPLETED
     && this.status == HTTP_STATUS_OK )
    {
        // レスポンス ヘッダでJSONのデータであることを確認する※1
        if( this.getResponseHeader( 'Content-Type' ).indexOf( 'application/json' ) != -1 )
        {
            var obj;
            if( window.JSON )
            {
                obj= JSON.parse( this.responseText );
            }
            else
            {
                obj= eval( '(' + this.responseText + ')' );
            }
        }
    }
}

var requestUrl = 'sample.json';

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

※1 サーバの設定によっては「application/json; charset=utf-8」のように返されることがあるため、'application/json'との等値では判断を誤ることがあります。

Prototype.jsによる方法

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

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

なおPrototype.jsでは、window.JSONがサポートされるならばそれで、さもなくばeval()でJavaScriptオブジェクトへの変換を行っています。

ツール

人間が読みやすいように、JSON形式のデータを書式化するツールがあります。

JSON viewer

Firefox 44以降から開発ツールに組み込まれており、コンテンツタイプが'application/json'のデータをブラウザ内で確認できます。ただし既定では無効化されているため、利用するにはabout:configの[devtools.jsonview.enabled]をtrueとします。JSON viewer - Firefox Developer Tools | MDN

読み込んだデータに問題があるときには、SyntaxErrorとしてそれが通知されます。

JSONView

JSONViewはFirefoxのアドオンであり、'application/json'または任意のコンテンツタイプのデータをブラウザ内で確認できます。

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

前述のJSON viewerが有効になっていると、JSONViewは機能しません。

JSToolNpp

Notepad++のプラグインであるJSToolNppでは、テキストのJSONデータを書式化できます。

このツールでは書式に誤りがある場合でも、それなりに表示してくれます。ただしエスケープされた文字列もそのまま表示されるため、別途アンエスケープが必要です。

• 文法
  • 変数
  • データ型
    • 数値
    • 文字列
      • 正規表現
    • 論理値
  • 演算子
  • 文
    • 例外
  • オブジェクト
  • 配列
  • 関数
    • クラス
• イベント
  • イベントハンドラ
• Window
  • Navigator
• DOM
  • Node
    • Document
      • HTMLDocument
    • Element
      • HTMLElement
  • HTMLCollection
• CSS
• XML
  • XPath
• JSON
• Ajax (非同期通信)
  • POSTメソッド
• ファイル
• クッキー
• グラフィック
  • Canvas
• メディア
  • 動画
  • 音声
• ライブラリ
  • Prototype.js
  • jQuery
• 最適化
• セキュリティ
• サンプルコード
  • スクリプトの動的読込
  • 外部スクリプトに引数
  • GETの値の取得
• ツール
  • デバッガ

• お問い合わせ
• プライバシーポリシー
• サイトマップ