JavaScriptでぐるなびAPIを使う方法

ぐるなびAPIがすごく面白そうで簡単だったので、使ってまとめてみました。Google Maps APIなどと組み合わせると絶対に強い

##ぐるなびAPI is なに？
株式会社ぐるなびが提供しているAPIです。飲食店の店舗情報について簡単に取得することができます。

##アクセスキー取得
今回は、レストラン検索APIを使っていきます。このAPIはアクセスキー（APIを使うための許可証みたいなもの）が必要です。これを発行するために以下のリンクをクリックして、新規登録アカウント発行をしましょう。
https://api.gnavi.co.jp/api/
<img width="880" alt="キャプチャ5.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/271447/881333cf-8ce5-9c51-af89-9761eef8fc43.png">



新規アカウントが発行されると、アクセスキーが記載されたメールが届くので、それをメモしておいてください。

<img width="514" alt="キャプチャ3.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/271447/064de2fb-c2f6-eee2-8286-dd67419c5910.png">

アクセスキーが使えるか確認するため、以下のURLへアクセスしてください。keyidのところは自分のアクセスキーへ置き換えてください。

```
https://api.gnavi.co.jp/RestSearchAPI/v3/?keyid={発行したアクセスキー}
```

エラーメッセージで、「絞り込み条件を指定してください」と表示されていれば正解です。

##パラメータについて
以下のリンクにリクエストパラメータ（APIに送るデータ）とレスポンス（返ってくるデータ）の一覧が書かれています。
https://api.gnavi.co.jp/api/manual/restsearch/

そして、親切なことにテストツールまであるのでリンクを貼っておきます。パラメータのついたURLと返ってくるデータが表示されます。
https://api.gnavi.co.jp/api/tools/?apitype=ver1_RestSearchAPI


###パラメータの使い方の例
例えば、緯度・37.702492　経度・135.495965　範囲1000m以内 のお店の情報を取得するとします。すると以下のようなパラメータを使います。

| パラメータ名 | 説明 | 値 |
|---|---|---|
| latitude | 緯度 | 34.702492 |
| longitude | 経度 | 135.495965 |
| range | 範囲 | 3 |

（詳しい説明については、パラメータ一覧から確認してください。）

すると、このようなURLになります。

```
https://api.gnavi.co.jp/RestSearchAPI/20150630/?keyid=[アクセスキー]&format=json&latitude=34.702492&longitude=135.495965&range=3
```

これで、JSON形式でデータを取得可能です。

##JavaScriptで表示

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>ぐるなびAPIテスト</title>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
  <input type="text" id="key" placeholder="アクセスキーを入力"><input type="button" id="submit" value="送信">
  <table id="table" border="1">
    <tr><th>店舗名</th><th>営業時間</th></tr>
  </table>

  <script>
    const showResult = result => {
      result.rest.map( item => {
        $("#table").append(`<tr><td>${item.name}</td><td>${item.opentime}</td></tr>`)
      })
    }

    $( function () {
      const url = "https://api.gnavi.co.jp/RestSearchAPI/v3/"
      const params = {
        keyid: "",
        latitude: 34.702492,
        longitude: 135.495965,
        range: 3
      }

      $("#submit").on("click",  () => {
        params.keyid = $("#key").val()
        $.getJSON( url, params, result => {
          showResult( result )
        })
      })
    })
  </script>
</body>
</html>
```

ぐるなびのサンプルコードとほぼ一緒です。シンプルなので、難しくはないと思いますが、一応このコードを分解して簡単に解説します。

```html
<input type="text" id="key" placeholder="アクセスキーを入力"><input type="button" id="submit" value="送信">
<table id="table" border="1">
  <tr><th>店舗名</th><th>営業時間</th></tr>
</table>
```
ここは、アクセスキー入力用のフォームとボタンですね。テーブルに店舗情報を出力していきます。

```javascript
const showResult = result => {
  result.rest.map( item => {
    $("#table").append(`<tr><td>${item.name}</td><td>${item.opentime}</td></tr>`)
  })
}
```
結果の表示用関数です。

```javascript
var url = "https://api.gnavi.co.jp/RestSearchAPI/v3/"
var params = {
  keyid: "",
  latitude: 34.702492,
  longitude: 135.495965,
  range: 3
}
```

URLとパラメータをセットしています。アクセスキーはフォームで入力したものを使うので、空にしています。

```javascript
$("#submit").on("click", function () {
  params.keyid = $("#key").val()
  $.getJSON( url, params, function( result ) {
    showResult( result )
  })
})
```
もしボタンがクリックされたら、パラメータのkeyidに、テキストフォームの中身を取得したものを入れています。最後にgetJSONで表示用関数に受け取ったデータを投げれば完成です。