SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

マンガで分かるプログラミング用語辞典

「JSONとJSONP」
~マンガでプログラミング用語解説

マンガで分かるプログラミング用語辞典(132)

解説

 「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>
取得されたJSONP:「https://ja.wikipedia.org/w/api.php?action=query&list=search&srsearch=CodeZine&srprop=&format=json&callback=cb123」の場合
/**/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"
]
フィードバックお待ちしております!

 ご感想、解説して欲しい用語、解説内容のアドバイスなどございましたら、FacebookTwitterなどでお気軽に編集部までお寄せください。よろしくお願いいたします。

この記事は参考になりましたか?

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。
マンガで分かるプログラミング用語辞典連載記事一覧

もっと読む

この記事の著者

柳井 政和(ヤナイ マサカズ)

クロノス・クラウン合同会社 代表社員http://crocro.com/オンラインソフトを多数公開。プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説も書いています(『裏切りのプログラム』他)。面白いことなら何でもOKのさすらいの企画屋です。 

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/10712 2018/05/22 14:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー