2019/05/21
Vue.jsでSPA
Vue.jsでSPAやってみたので、備忘録です。
何するの?
最近流行りのSPAを、Vue.jsとvue-routerを使って実装してみました。
今回は環境構築までを行います。
環境構築はvue-cliを使いました。
バージョンは以下の通りです。
- Vue.js : 3.7.0
SPAってなんぞや
まず、初めにSPAについて軽く説明しておきます。
Wikipediaさん曰く
シングルページアプリケーション(英: single-page application、SPA)とは、単一のWebページのみから構成することで、デスクトップアプリケーションのようなユーザ体験を提供するWebアプリケーションまたはWebサイトである。
必要なコード(HTML、JavaScript、CSS)は最初にまとめて読み込むか[1]、ユーザの操作などに応じて動的にサーバと通信し、必要なものだけ読み込みを行う。
出典: シングルページアプリケーション
とあります。
なんだか良くわかったような、よくわからないような。。。
個人的な解釈としては、SPAでサービス開発を行うことにより、従来のwebサービスでは
- ユーザーが何らかのアクションを実行
- サーバーへリクエストを飛ばす
- サーバー側で処理を行い、結果を生成して返却
- クライアント側でまるっと描写
といった流れだったものを
- ユーザーが何らかのアクションを実行
- アクションに対応するデータ処理のみをサーバーへ要求
- 返却したデータをクライアント側で処理
- 差分を描写
とすることができるものとして理解しています。
差分のみ描写するので、ページをまるっと置き換えた場合に比べてパフォーマンスの向上が見込めます。
また、ページ描画までの待ち時間が減少することにより、ユーザーのストレスが減少も期待できます。
まだまだ勉強中の身ですが、非常に興味深いですね。
SPAに関しては以下の記事が参考になりました。
SPA(Single Page Application)の基本
環境構築
初めにVue.jsとvue-routerを扱うための環境を構築します。
CLIツールであるvue-cliをインストールします。
yarn global add @vue/cli
以下のコマンド打って、表示がされるか確認して下さい。
vue --version
バージョンが表示されたら準備完了です!
早速プロジェクトを作りましょう!
vue create <プロジェクト名>
cliツールが立ち上がるので、表示される選択肢の中から任意の構成を選んでいきます。
Vue CLI v3.7.0
? Please pick a preset: (Use arrow keys)
default (babel, eslint)
> Manually select features
プロジェクト構成です。
ここではManually...
を選択します。
Vue CLI v3.0.0から関連モジュールがインストールできるようになりました。
vue-routerも導入できるので、default
ではなく、こちらを選択します。
Check the features needed for your project:
>(*) Babel
(*) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
インストールするものを選択します。
spaceキーで選択肢のオンオフが出来るらしいので、好きなものを選択していきます。
自分は上記の構成にしました。
あとは選んだオプションに応じて色々質問があり、全てに回答するとインストールが開始されます。
完了後、作成されたプロジェクトに移動して、起動コマンドを入力しましょう!
yarn serve
画面の読み込みが始まります。
http://localhost:8080/
で以下の画面が確認できます。
vue-routerも導入されているので、環境構築は完了です。
実際に動かしてみる
実際に挙動を少し確認しましょう。
まずはsrc直下にあるmain.ts
を開きます。
import Vue from 'vue'; | |
import App from './App.vue'; | |
import router from './router'; | |
Vue.config.productionTip = false; | |
new Vue({ | |
router, | |
render: h => h(App), | |
}).$mount('#app'); |
router
の読み込みを行なっているのが分かりますね!
ではそのrotuerはどのように書かれているかを見てみましょう!
import Vue from 'vue'; | |
import Router from 'vue-router'; | |
import Home from './views/Home.vue'; | |
Vue.use(Router); | |
export default new Router({ | |
mode: 'history', | |
base: process.env.BASE_URL, | |
routes: [ | |
{ | |
path: '/', | |
name: 'home', | |
component: Home, | |
}, | |
{ | |
path: '/about', | |
name: 'about', | |
// route level code-splitting | |
// this generates a separate chunk (about.[hash].js) for this route | |
// which is lazy-loaded when the route is visited. | |
component: () => import(/* webpackChunkName: "about" */ './views/About.vue'), | |
}, | |
], | |
}); |
なんとなく雰囲気で分かるかも知れません。
上記のページは以下のように動きます。
/
へアクセスした場合、./views/Home.vue
の表示を行う/about
へアクセスした場合、./views/About.vue
の表示を行う。
では試しに./views/
直下にPage2.vue
を作ってみましょう
<template> | |
<div class="page2"> | |
<h1>This is an page2</h1> | |
</div> | |
</template> |
これを読み込むように設定してみたいと思います。
aboutを読み込みしている部分をpage2
に変更してください。
import Vue from 'vue'; | |
import Router from 'vue-router'; | |
import Home from './views/Home.vue'; | |
Vue.use(Router); | |
export default new Router({ | |
mode: 'history', | |
base: process.env.BASE_URL, | |
routes: [ | |
{ | |
path: '/', | |
name: 'home', | |
component: Home, | |
}, | |
{ | |
path: '/page2', | |
name: 'page2', | |
component: () => import(/* webpackChunkName: "Page2" */ './views/Page2.vue'), | |
}, | |
], | |
}); |
あとは遷移したいページで下記の記載をすればOKです。
App.vueに以下の記述を追加しましょう
<router-link to="/page2">Page2</router-link>
こんな感じになると思います。
<template> | |
<div id="app"> | |
<div id="nav"> | |
<router-link to="/">Home</router-link> | | |
<router-link to="/page2">Page2</router-link> | |
</div> | |
<router-view/> | |
</div> | |
</template> | |
<style> | |
#app { | |
font-family: 'Avenir', Helvetica, Arial, sans-serif; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
text-align: center; | |
color: #2c3e50; | |
} | |
#nav { | |
padding: 30px; | |
} | |
#nav a { | |
font-weight: bold; | |
color: #2c3e50; | |
} | |
#nav a.router-link-exact-active { | |
color: #42b983; | |
} | |
</style> |
あとはファイルを保存し、ページ遷移するだけです。
SPAの雰囲気が掴めたかと思います。
まとめ
おおまかに、vueでSPAを体験するためには
- vue-cliでプロジェクト作成は簡単
- SPAにはvue-routerを使う
- router.tsにルーティングの設定を記載
- router-linkタグでどこに遷移できるかが記述できる
とやればOKです。
色々公式が用意していくれているおかげで、簡単に導入することが出来ました。