JavaScript/JSON
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ではキーが一意（いちい）でなくても、動作してしまう。
たとえば下記コードでは、
{"name": "サトウ" , "name": 60 , "suugaku": 90 }
に"name"キーが2つある。
- コード例
<html>
<head>
<script type="text/javascript">
// 成績表
var seiseki = [
{"name": "ヤマダ" , "kokugo": 80 , "suugaku": 70 },
{"name": "サトウ" , "name": 60 , "suugaku": 90 }
]
// デバッグ確認用
document.write (seiseki[1].name);
</script>
</head>
</html>
- （※ Fedora32 および Firefox 77 で 2020年6月12日 に動作を確認。）
- 実行結果
60
ただし、このようなキーが重複している使い方は、まぎらわしいので、避けるべきである。
類似の機能をもつプログラム言語（Go言語など）やデータベースによっては、キーの重複を禁止している製品もあるので、それら類似ツールとの互換性のためにもキーの重複は避けたほうがいい。
JSONのいろいろ[編集]
JavaScriptのJSONオブジェクトはJavaScriptのオブジェクトをJSON文字列に変換したり、JSON文字列をJavaScriptのオブジェクトに変換したりすることができます。
var json = JSON.stringify( { 'key': 'value' } );
alert(json); // {"key": "value"}
var object = JSON.parse(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形式のデータをやり取りすることができます。