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です。
色々公式が用意していくれているおかげで、簡単に導入することが出来ました。
