今回の目標
前回はプロジェクトの作成、リクルートWEBサービスのAPIの取得、アプリケーション構成の説明を行いました。
今回の目標は、axiosを使ってグルメサーチAPIからお店の一覧を取得することとします。
axios
axiosについては以前にこちらの記事でまとめてありますので参考にしてください。
一覧ページ「pages/index.vue」では、ページ表示時に現在位置を取得して、その結果をグルメサーチAPIに送信することでお店の一覧を得ることを想定しています。
現在位置の取得は次回の記事で説明します。今回は前回使用した東京駅の座標「緯度：35.681236、経度：139.767125」を使います。
Nuxt.jsプロジェクト作成時に、axiosがインストールされるようにしています。こうすることで、Vueインスタンスプロパティでaxiosを実行することができます。
this.$axios.get('url')お店一覧の取得
ではグルメサーチAPIからお店一覧を取得してみましょう。
グルメサーチAPIのパラメーター
APIに送信前に一度APIリファレンスでグルメサーチAPIの検索クエリについて確認してみます。
必須の欄が「〇」の「key」パラメーターは必須のため設定します。プラスして「*1」のパラメーターグループのいずれか1グループが必須になります。
今回は現在位置からお店の一覧を取得したいので「lat」、「lng」を設定します。同じグループに「range」があるのですが設定しなくてもデフォルトの「1000m」が設定されるので今回は設定しません。
またjsonの形式でデータを取得したいため、「format」に「json」を設定します。
axiosによるリクエスト送信
では「pages/index.vue」にAPIへの送信を実装していきます。今回は現在位置を取得する関係から、mountedに実装します。この理由については次回の記事で説明します。
export default {
data() {
return {
shops: [],
error: false
}
},
methods: {
//レスポンス後の処理
setShop(res) {
this.shops = res.data.results.shop
},
//エラーが発生した場合の処理
setError(err) {
console.log(err)
this.error = true
}
},
mounted() {
this.$axios('http://webservice.recruit.co.jp/hotpepper/gourmet/v1/', {
//パラメータの設定
params: {
key: '<<your api key>>',
lat: '35.681236',
lng: '139.767125',
format: 'json'
}
}).then(this.setShop).catch(this.setError)
}
}書き方はいろいろありますが今回はメソッドにレスポンス後の処理とエラー時の処理を定義し、それぞれthen、catchのコールバック関数として設定しています。
レスポンスを取得したら、その結果からお店の一覧の情報をdataに格納しています。
しかし、このままではエラーになりデータは取得できません。理由はCORSによりブロックされてしまうからです。
プロキシの設定
CORS（Cross-Origin Resource Sharing）については、先ほど紹介したaxiosの記事に記載していますのでそちらを参照してください。
このエラーを回避するために疑似的なプロキシを使用します。プロキシを使用するために「nuxt.config.js」に以下の内容を追加してください。
axios: {
proxy: true
},
proxy: {
'/api': {
target: 'http://webservice.recruit.co.jp/hotpepper',
pathRewrite: { '^/api': '' }
}
},そして先ほどのコードのURLの部分を次に置き換えます。
this.$axios('http://localhost:3000/api/gourmet/v1/', {
})細かい説明は割愛しますが、これにより値が取得できるようになると思います。
画面への表示
ここまできたら実際に画面に表示してみましょう。
<template>
<section>
<h2>検索結果 （{{shops.length}}件）</h2>
<p v-if="error">データの取得に失敗しました</p>
<ul>
<li v-for="shop in shops" :key="shop.id">
<p>{{shop.id}}</p>
<p>{{shop.name}}</p>
</li>
</ul>
</section>
</template>取得できる情報についてはAPIリファレンスを確認してください。
環境変数の設定
今の実装だとAPI Keyがオンコードになってしまっています。他のコンポーネントで使用することや、フェーズごとで別のAPI Keyを使用することなどを考えるとあまりよくはありません。
このような場合には環境変数を使用します。環境変数は「nuxt.config.js」のenvプロパティに設定します。
env: {
apikey: 'your api key'
}環境変数を参照するには「process.env.プロパティ名」とします。これによって先ほどのコードを次のように変更します。
this.$axios('http://localhost:3000/api/gourmet/v1/', {
//パラメータの設定
params: {
key: process.env.apikey, //環境変数によって設定
lat: '35.681236',
lng: '139.767125',
format: 'json'
}
}).then(this.setShop).catch(this.setError)今回は設定していませんが、APIのURLも本来環境変数で設定したほうがいいと思います。
まとめ
- 外部へのリクエストはaxiosを使いましょう
- CORSのエラーになる場合はプロキシの設定をしましょう
- API Keyなどの固定値は環境変数に設定しましょう
次回は現在位置の取得について説明していきます。
↓↓↓次回↓↓↓
- Nuxt.jsのおすすめ書籍はコチラ -
コメント