「駅すぱあとWebサービス」を使って駅の情報を取ってくるサンプル

Vue.js

はじめに

Vue.jsと「駅すぱあとWebサービス」を利用して、駅名の検索および駅の路線情報等々を取得するサンプルを作ってみました。

必要な準備

「駅すぱあとWebサービス」を利用するにあたり、APIキーを取得する必要があります。下記サイトから申請すると、数営業日で無料発行してもらえます。(今回は即日発行していただけました)

ご利用の手引き
路線検索のWebAPI「駅すぱあとWebサービス」の開発者向けドキュメントサイトです。駅データ利用、乗り換え案内などのTipsやリファレンスが満載です。

やること

  • 「駅すぱあとWebサービス」を使って駅名を検索して結果を取得
  • 「駅すぱあとWebサービス」を使って駅の路線情報などを取得
  • 上記の取得した情報をVue.jsで画面に表示

駅すぱあとWebサービスへのアクセスには axios というHTTPクライアントを利用します。

検索結果の取得

検索結果が1件だけの場合は連想配列が直接返ってきますが、複数件あった場合は連想配列の配列が返ってくるので、条件分岐を追加してます。

こんな感じ。

同様に、駅個別の情報(例えば出口情報など)も結果が1件のみの場合と複数件ある場合とで返り方が違うので、条件分岐してます。

こんな感じ。

Vue.jsで表示

v-forを使って取得情報を一覧表示します。また、駅個別の情報は最初非表示にしておきたいので、v-ifを使って非表示にしておきます。

こんな感じ。

v-for

v-if

最終的な出来上がり

ソース全体はこんな感じ。うーん、改善の余地ありそうですが。。。

HTML

Javascript

駅名検索をインクリメントサーチ化できれば、、、というところですが、ひとまず今日はココまでです。

参考

フリープランAPI概要
路線検索のWebAPI「駅すぱあとWebサービス」の開発者向けドキュメントサイトです。駅データ利用、乗り換え案内などのTipsやリファレンスが満載です。

 

 

コメント