解説
「JSON」(JavaScript Object Notation)は、JavaScriptのオブジェクトと同じ形式で書いたデータのことです。波括弧でオブジェクト囲い、「"キー" : "値"」を「,」区切りで並べることで、データを記述していきます。
値は文字列だけでなく、数値や真偽値、配列も扱えます。数値や真偽値は「"」で囲まず、「"キー" : 123」「"キー" : true」のように書きます。配列は「"キー" : [0, 1, 2]」のように角括弧を使い、カンマ区切りでデータを並べます。オブジェクトや配列は、ネストさせることも可能です。
外部ファイルのJSONをJavaScriptで読み込む際は、セキュリティ上の制約から同じサーバーにファイルが存在している必要があります。
「JSONP」(JSON with Padding)は、JSONをJavaScriptの関数でラッピングしたものです。WebブラウザからJavaScriptファイルとして読み込み実行することで、関数の引数としてデータを受け取ります。
そのため、同じサーバーになくても、JSONPは読み込めます。公開されているWebAPI(XMLなどで情報を取得可能なサービス)は、JSONPに対応していることが多いです。
サンプル
WikipediaのAPIを利用したJavaScriptのプログラムを掲載します。ファイルはUTF-8で保存してください。検証はGoogle Chromeで行なっています。
jQueryでは「callback=?」の「?」の所は、内部生成された関数名に自動で置き換わり、実行されます。
出力結果は、Webブラウザの開発者向けツール上で確認してください。Google Chromeでは、Windowsの場合は「F12」キー、Macの場合は「Command+Option+I」キーを押すと、デベロッパーツールが表示されるので、「Console」タブを選択します。
<html>
<head>
<title>「JavaScript」のサンプル</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<p>コンソールに結果を出力</p>
<script>
var p = $.param({
action: 'query',
list: 'search',
srsearch: 'CodeZine',
format: 'json'
});
var url = 'http://ja.wikipedia.org/w/api.php?' + p + '&callback=?';
$.getJSON(url).done(function(data) {
console.log(JSON.stringify(
data.query.search.map(x => x.title)
, null, ' '));
});
</script>
</body>
</html>
/**/cb123({"batchcomplete":"","continue":{"sroffset":10,"continue":"-||"},"query":{"searchinfo":{"totalhits":26},"search":[{"ns":0,"title":"\u7fd4\u6cf3\u793e","pageid":412439},{"ns":0,"title":"Apache Struts","pageid":108190},{"ns":0,"title":"\u643a\u5e2f\u96fb\u8a71\u30b2\u30fc\u30e0","pageid":790733},{"ns":0,"title":"Windows Presentation Foundation","pageid":878260},{"ns":0,"title":"MikuMikuDance","pageid":1920772},{"ns":0,"title":"\u702c\u5ddd\u6676\u53f8","pageid":263363},{"ns":0,"title":"\u3064\u3051\u9eba","pageid":954490},{"ns":0,"title":"Windows Subsystem for Linux","pageid":3496494},{"ns":0,"title":"Windows Communication Foundation","pageid":1253810},{"ns":0,"title":"Zend Framework","pageid":1841282}]}})
http://ja.wikipedia.org/w/api.php?action=query&list=search&srsearch=CodeZine&srprop=&format=json&callback=? [ "翔泳社", "Apache Struts", "携帯電話ゲーム", "Windows Presentation Foundation", "MikuMikuDance", "瀬川晶司", "つけ麺", "Windows Subsystem for Linux", "Windows Communication Foundation", "Zend Framework" ]
