【Nuxt.jsで近くのお店を探すアプリを作成】#1 開発準備

Web

はじめに

Nuxt.jsのお勉強のために、リクルートWEBサービスのホットペッパーAPIを利用したシンプルなお店検索アプリを作成していきます。

作りはとてもシンプルで、現在位置をホットペッパーAPIに送信すると近くのお店のデータを返してくれるのでそれをリストで表示します。そして詳細ページではお店のIDからお店の情報を再取得して表示しています。

実際に操作している画面を載せておきます。(位置情報はChromeで偽装しています…。)

 

いくつかの記事に分けてNuxt.jsの基礎的な部分を説明できたらと思います。Nuxt.jsが初めてという方はあらかじめこちらの記事を読んでいただければより理解しやすいと思います。

Web開発をより身近に!Nuxt.jsの始め方
Nuxt.jsは、Vue.jsによるWebアプリケーション開発のためのフレームワークです。Nuxt.jsを用いることでより簡単に、より高速にWebアプリケーションを作成することができます。まずはNuxt.jsプロジェクトの始め方を説明します。
簡単!Nuxt.jsにおけるページの構成方法
Nuxt.jsではpagesディレクトリにVueファイルを配備するだけで簡単にページ構成を作ることができます。この記事ではさらにNuxt.jsのページの機能について紹介をしていきます。

デザインについてはわりと適当なので説明しません。(デザインについては逆に教えてほしいです。)

Nuxt.js プロジェクトの作成

まずはプロジェクトを作成します。プロジェクト名は適当につけてください。

$npx create-nuxt-app <<project-name>>

いくつか質問されますが基本的にデフォルトのままで構いません。ただし、ホットペッパーAPIにアクセスするためにaxios(エイキシオス)を使用するのでこれだけは選択してください。

プロジェクトが作成されたら一度サーバーを起動して動作するか確認してみましょう。

$npm run dev

デフォルトでは3000ポートが使用されるので「localhost:3000」にアクセスします。下のようなページが表示されればプロジェクトの作成は完了です。

リクルートWEBサービスのAPI Keyを取得

リクルートWEBサービスにある各種APIを使用するためにはAPI Keyが必要になります。下記のリンクからユーザー登録を行ってAPI Keyを取得してください。

新規登録 | リクルートWEBサービス

リクルートWEbサービスにはホットペッパー以外にもケイコとマナブ.netなどのAPIもあるので興味のある方は見てみてください。

今回のアプリではホットペッパーAPIの中のグルメサーチAPIを使用します。APIリファレンスは以下になります。

ホットペッパー | APIリファレンス | リクルートWEBサービス

API Keyを取得出来たらブラウザで以下のURLにアクセスしてみてください。(API Keyは取得したものを利用してください。)

http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=<<API Key>>&lat=35.681236&lng=139.767125&format=json

文字が多すぎてよくわからないかもしれませんが、東京駅周辺のお店の情報をjson形式で取得しています。

もう1つ以下のURLにアクセスしてみてください。

http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=<<API Key>>&format=json

条件が足りないなどのエラーがある場合は、取得したデータにerrorが設定されます。

アプリケーションの構成

今回作るアプリは一覧ページと詳細ページで構成します。

図のようにコンテキストパスのルートを一覧ページとし、詳細ページはクエリパラメーターを使用します。このルーティングを実現するために、プロジェクトのpagesディレクトリに「index.vue」と「_id.vue」を作成します。

それぞれの実装についてはまた別の記事で説明しますが、大まかな動きを簡単に説明しておきます。

一覧ページはページ表示時に現在位置を取得し、グルメサーチAPIに送信します。そして受け取ったデータを一覧で表示します。

詳細ページはクエリパラメーターに設定されたIDをグルメサーチAPIに送信し、店の情報を取得します。そして取得した情報をページに表示します。

サンプル

ソースはGithubで公開していますのでよければ動かしてみてください。動かすには自身のリクルートWEBサービスのAPI Keyが必要になります。

b1san/hotpepper-sample
Contribute to b1san/hotpepper-sample development by creating an account on GitHub.

先のことになりますが、ホットペッパーのマスタ系のAPIを使って検索機能などを実装するのも面白いと思います。時間があるようであればそちらも手を付けたいです。

では実装については次回以降で説明していきます。

↓↓↓次回↓↓↓

【Nuxt.jsで近くのお店を探すアプリを作成】#2 外部APIへのリクエスト
Nuxt.jsで外部APIにアクセスするにはaxiosを使用します。この記事ではaxiosを使用して、ホットペッパーのAPIからお店の情報を取得する方法を説明します。

- Nuxt.jsのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました