Ajaxを使ってぐるなびAPIを利用する方法

##0.APIとは
APIとは「Application Programming Interface（アプリケーション・プログラミング・インターフェイス）」の略語であり、「ある1つの機能に特化したプログラムで共有可能なもの」や「ソフトウェアの機能を共有する仕組み」のことです。（https://www.internetacademy.jp/it/programming/javascript/how-to-use-web-api.html より引用）
プログラミングを習い始めた時に使い方がよくわからなかったのですが、あまりにも基本的すぎて、なかなか検索しても出てこなかったので、備忘録的に残しておきます。ここでは例として、ぐるなびレストラン検索APIを使ってみます。

##1.API KEYを取得
APIを使用するためにはAPI KEYを必要とするものが多いです。
ぐるなびAPI KEYは以下のページの[新規アカウント発行]から取得できます。
https://api.gnavi.co.jp/api/

##2.基本的な使い方
一番基本的な使い方としては、APIのリクエストURLをブラウザのURLに直接入力する方法です。
ぐるなびのレストラン検索APIを使って、緯度33.5907407度、経度130.3937826度の半径300m以内のレストランを1件の情報を取ってくるには以下のURLをブラウザに打ち込みます。

https://api.gnavi.co.jp/RestSearchAPI/v3/?keyid=YOURAPIKEY&latitude=33.5907407&longitude=130.3937826&hit_per_page=1&range=1

・YOURAPIKEYには1.で取得したAPI KEYを入れます。
・他の検索条件を「&」で繋ぎます。
latitude=33.5907407：緯度を指定
longitude=130.3937826：経度を指定
hit_per_page=1：１件だけ取得
range=1：緯度/経度からの検索範囲３００m(半径)
・検索条件の詳細は以下のぐるなびレストラン検索APIのマニュアルページを参照
https://api.gnavi.co.jp/api/manual/restsearch/

以下の結果がブラウザに表示されます。

{
    "@attributes": {
        "api_version": "v3"
    },
    "total_hit_count": 292,
    "hit_per_page": 1,
    "page_offset": 1,
    "rest": [
        {
            "@attributes": {
                "order": 0
            },
            "id": "f042104",
            "update_date": "2018-12-05T11:46:08+09:00",
            "name": "炭寅 天神店",
            "name_kana": "スミトラ テンジンテン",
            "latitude": "33.590707",
            "longitude": "130.394215",
            "category": "鶏料理・焼き鳥・水炊き",
            "url": "https://r.gnavi.co.jp/f042104/?ak=qCZ1cHLsVou88ZR1GEk3f8J2kKzg0fhdLqnYtKGhFkc%3D",
            "url_mobile": "http://mobile.gnavi.co.jp/shop/f042104/?ak=qCZ1cHLsVou88ZR1GEk3f8J2kKzg0fhdLqnYtKGhFkc%3D",
            "coupon_url": {
                "pc": "https://r.gnavi.co.jp/f042104/coupon/",
                "mobile": ""
            },
            "image_url": {
                "shop_image1": "https://uds.gnst.jp/rest/img/5b4nz8wx0000/t_004z.jpg",
                "shop_image2": "https://uds.gnst.jp/rest/img/5b4nz8wx0000/t_0050.jpg",
                "qrcode": "https://c-r.gnst.jp/tool/qr/?id=f042104&q=6"
            },
            "address": "〒810-0041 福岡県福岡市中央区大名2-9-35 トウセン天神ビル1F",
            "tel": "050-3477-0084",
            "tel_sub": "092-739-3042",
            "fax": "092-739-3043",
            "opentime": " 17:00～24:00(L.O.23:00)",
            "holiday": "無\n年末年始（2017年12月31日～2018年1月2日）",
            "access": {
                "line": "西鉄天神大牟田線",
                "station": "西鉄福岡(天神)駅",
                "station_exit": "",
                "walk": "5",
                "note": ""
            },
            "parking_lots": "",
            "pr": {
                "pr_short": "【北部九州産！生産者直送の新鮮なみつせ鶏！！】 みつせ鶏と料理長こだわり料理「忘年会特別コース」3000円 博多郷土料理「水炊きコース」3000円",
                "pr_long": "■天神駅より徒歩５分■\n■焼き鳥、水炊き、創作料理など■\n■お気軽にどうぞ■\n落ち着いた雰囲気の店内で、\n生産者直送のとびっきりの鮮度と、\n鶏を知り尽くした職人の品々をご提供。\n焼き鳥をはじめ、水炊き、逸品料理等。\nまた、その他季節ごとの料理や、\nドリンクメニューも充実。\nお仲間内での飲み事から、\n大切なおもてなしまで是非ご利用下さい。\n大名・女子会・二次会・飲み放題・居酒屋"
            },
            "code": {
                "areacode": "AREA140",
                "areaname": "九州",
                "prefcode": "PREF40",
                "prefname": "福岡県",
                "areacode_s": "AREAS5014",
                "areaname_s": "大名",
                "category_code_l": [
                    "RSFST06000",
                    "RSFST04000"
                ],
                "category_name_l": [
                    "焼き鳥・肉料理・串料理",
                    "鍋"
                ],
                "category_code_s": [
                    "RSFST06003",
                    "RSFST04003"
                ],
                "category_name_s": [
                    "焼き鳥",
                    "水炊き"
                ]
            },
            "budget": 3500,
            "party": 4000,
            "lunch": "",
            "credit_card": "VISA,MasterCard,UC,DC,UFJ,ダイナースクラブ,アメリカン・エキスプレス,JCB,MUFG",
            "e_money": "",
            "flags": {
                "mobile_site": 1,
                "mobile_coupon": 0,
                "pc_coupon": 1
            }
        }
    ]
}

これで１件分です。
オブジェクト形式のデータであることがわかります。

##3.Ajaxを使う方法
では、ユーザーが入力した情報を元に、適宜ぐるなびレストラン検索APIにリクエストを送って、情報を取得するようなWebサービスで実装するためにはどうすれば良いでしょうか。
ajaxを使った非同期通信を使うのが一つの方法です。
例えば、2.と同じ条件で、ぐるなびレストランAPIで情報をajaxで非同期に取得するためにはJavascriptで以下のように記載します。

ajax.js

 var ajax = new XMLHttpRequest();
    ajax.open("get", "https://api.gnavi.co.jp/RestSearchAPI/v3/?keyid=YOURAPIKEY&latitude=33.5907407&longitude=130.3937826&hit_per_page=1&range=1");
    ajax.responseType = 'json';
    ajax.send();
    ajax.onload = function (e) {
    console.log(e.target.response);
    };

これでe.target.responseに2.と同じオブジェクト形式のデータを取得することができます。
onload以下の無名関数でWebAPIからレスポンスを受け取った後の動作を記載します。

##4.最後に
2.の使い方はすぐにわかりましたが、3.の使い方がわかるまで時間がかかったので、よかったら参考にしてください。