JavaScript/JSON

出典: フリー教科書『ウィキブックス(Wikibooks)』
ナビゲーションに移動 検索に移動
Wikipedia
ウィキペディアJavaScript Object Notationの記事があります。

JSON(ジェイソン、JavaScript Object Notation)とは、JavaScriptのオブジェクトの文法をもとにした軽量データ記述言語およびデータシリアライゼーションフォーマットです。

JSONとは[編集]

たとえば、下記のような、htmlファイルに、JavaScript を組み込んだコードで、

<html>
    <head>
        <script type="text/javascript">
        // 成績表
        var seiseki = [
            {"name": "ヤマダ" , "kokugo": 80 , "suugaku": 70 },
            {"name": "サトウ" , "kokugo": 60 , "suugaku": 90 }
        ]

        // デバッグ確認用
        document.write (seiseki[1].name);

        </script>
    </head>
</html>

における、

var seiseki = [
    {"name": "ヤマダ" , "kokugo": 80 , "suugaku": 70 },
    {"name": "サトウ" , "kokugo": 60 , "suugaku": 90 }
]

の部分が、JSONというデータ形式を採用したコードの例である。

なお、このhtmlファイルをwebブラウザで読む込むと、

サトウ

と表示する。

文法の用語[編集]

JSONのフォーマットはJavaScriptのオブジェクトとほとんど同じですが、文字列は必ず '' ではなく "" で囲みます。

さて、用語として

{
    "key": "value"
}

という用語「key」と用語「value」を知ってください。

document.write (seiseki[1].name);

では

document.write (配列名[配列番号].キー);

です。

角カッコ [ ] がついているのは、単に例のコードが配列で定義したからです。

この場合、配列なので、0から数えることに注意してください。

なので、もし document.write (seiseki[0].name); という風に、配列番号を0に変更してからwebページを再読み込みすると、webブラウザに表示される結果は「ヤマダ」に変更します。


なので、もし document.write (seiseki[0].kokugo); という風に、キーを変更すると、webブラウザに表示される結果は例のコードの場合なら「80」(ヤマダの国語の点数)に変更します。


なお、JSONにコメントはありません。

どうしてもコメントをかきたいなら、JSONのカッコの外側の、JavsScript のスコープ内部の部分に、コメントを書いてください。

つまり

// コメントを書くなら、ここか
var seiseki = [
    {"name": "ヤマダ" , "kokugo": 80 , "suugaku": 70 },
    {"name": "サトウ" , "kokugo": 60 , "suugaku": 90 }
]
// あるいは、ここにコメントを書くことになるだろう

という事です。

JSONのいろいろ[編集]

JavaScriptのJSONオブジェクトはJavaScriptのオブジェクトをJSON文字列に変換したり、JSON文字列をJavaScriptのオブジェクトに変換したりすることができます。

var json = JSON.stringify( { 'key': 'value' } );
alert(json); // {"key": "value"}
var object = JSON.parse(json);

メソッド[編集]

  • parse
    JSON文字列をオブジェクトに変換して返します。
  • stringify
    オブジェクトをJSON文字列に変換して返します。

JSONP[編集]

JSONP(ジェイソンピー、JSON with Padding)とは、動的にscript要素を生成してJSONが埋め込まれた外部スクリプトを読み込むテクニックを指します。

function jsonp(json) {
    alert( json.key );
}

var script  = document.createElement('script');
script.type = 'text/javascript';
script.src  = 'http://www.example.com/api?callback=jsonp';
document.body.appendChild(script);

ここでhttp://www.example.com/apiが次のような返答を返すことを想定します。

jsonp({"key":"value"});

するとあらかじめ定義しておいたjsonp関数が呼び出されるので、"value" と表示されます。このようなテクニックを用いて外部のウェブサーバとJSON形式のデータをやり取りすることができます。

このページ「JavaScript/JSON」は、書きかけです。加筆・訂正など、協力いただける皆様の編集を心からお待ちしております。また、ご意見などがありましたら、お気軽にノートへどうぞ。