Vue.jsでwebアプリ作ってみた

6155 ワード
WebApps Vue.js Vue.js テキストリンク

序

vue.jsを少し囓ったので何か作りたくなったので、作りました。
サーバーサイドの知識がないので「ぐるなび web service」を利用しています。



　

アプリ概要

作ったのは以下の動画のようなアプリで、スマホのGPS機能を利用して最寄りのランチ店を検索しgoogleの経路検索に繋ぎます。
店のデータはぐるなびapiから取得しています。

Youtube動画

※動画のデモはGPSを搭載していないPCで収録しているため現在地は実際とは異なる場所となっています（なぜ綾瀬？）。

　

アプリへのリンク

Lunch navi（ランチナビ）

スマホで動作確認していますが、PCでもGPSを搭載していれば、IE以外のブラウザで機能すると思います。

　

vue.jsの使いどころ

ソースはminifyせずにコメントを付けています興味のある方は色々確認してみてください。メニューの折りたたみやsvgの直書きがあるため複雑そうに見えますが、根幹は以下の部分でシンプルだと思います。

index.html
<template v-for="(data, key) in guruObj">
    <div :id="'card' + key" class="card">
        <h4>{{data.dist}}m</h4>
        <div class="category">{{data.cateSmall}}</div>
    </div>

    <div :id="'card' + key + '_out'" class="pf_out">
        <div :id="'card' + key + '_in'" class="pf_in"></div>
        <div :id="'card' + key + '_detail'" class="cardDetail">
            <div class="detailText">{{data.shopName}}<br>
                <span class="price">ランチ平均予算：{{data.lunchPrice}}</span>
            </div>
            <div class="btnArea">
                <a class="btnDetail btnURL" target="_blank" :href="data.mURL">URL</a>
                <a class="btnDetail btnMap" target="_blank" :href="data.googleURL">経路</a>
            </div>
        </div>
    </div>  
</template>

ぐるなびapiから返されたデータを基にv-forでメニューを作成しているだけです。メニューの折りたたみ機構を実現するため装飾的なdiv要素が多いのですが、構成自体はシンプルなのが確認できると思います。

ちなみにメニューの折りたたみ（css）は過去に記事にしているので興味のある方は見ていってください。
Qiita : cssアニメによる立体的な折り畳み
　

vue.jsの地味な利点

javascript側で検索件数や検索範囲を変更した際に、html側の説明文を修正し忘れるということは意外とあると思うのです（私だけ？）。

しかしvue.jsを利用すれば以下の様にjavascript側の設定を、そのまま表示できるため修正ミスがありません。

※下図のnaviRange、listMaxの部分
index.html
<p>
スマホのGPS機能を利用して現在地から約 {{naviRange}} 以内で
ランチ営業している店舗を最大 {{listMax}} 件までリスト表示します。
以下のボタンで条件の絞り込みができます。
</p>

　

遷移アニメについて

vue.jsのアニメ機能には期待してなかったのですが、意外と高機能で不自由しませんでした。アラートを表示するときも「背景を黒くフェード」してから「アラート表示」と多段階の演出にしたのですが、これもvue.js単独で実現できました。

index.html
<div id='modal' v-if='errFlg'>
    <transition name="fadeUp" v-on:after-leave="errWindowOut">
    //中略
    </transition>
</div>

これはtransitionタグのafter-leaveイベントを利用しています。これを設定すると「〜が終わった後に〜する」というのが簡単に実現できます。
　

まとめ

サーバーと連動したくさんのデータを扱うようなコンテンツではVue.jsは便利だと思いました。

そんしつかんすう
[TIL]プログラマー旅行経路:DFS/BFS