中野's workspace

  • Profile
  • Privacy
  • Contact

2019/05/21

Vue.jsでSPA

  • #SPA
  • #Vue.js

目次

Vue.jsでSPAやってみたので、備忘録です。

何するの?

最近流行りのSPAを、Vue.jsvue-routerを使って実装してみました。
今回は環境構築までを行います。
環境構築はvue-cliを使いました。

バージョンは以下の通りです。

  • Vue.js : 3.7.0

SPAってなんぞや

まず、初めにSPAについて軽く説明しておきます。
Wikipediaさん曰く

 シングルページアプリケーション(英: single-page application、SPA)とは、単一のWebページのみから構成することで、デスクトップアプリケーションのようなユーザ体験を提供するWebアプリケーションまたはWebサイトである。
必要なコード(HTML、JavaScript、CSS)は最初にまとめて読み込むか[1]、ユーザの操作などに応じて動的にサーバと通信し、必要なものだけ読み込みを行う。
出典: シングルページアプリケーション

とあります。

なんだか良くわかったような、よくわからないような。。。

個人的な解釈としては、SPAでサービス開発を行うことにより、従来のwebサービスでは

  1. ユーザーが何らかのアクションを実行
  2. サーバーへリクエストを飛ばす
  3. サーバー側で処理を行い、結果を生成して返却
  4. クライアント側でまるっと描写

といった流れだったものを

  1. ユーザーが何らかのアクションを実行
  2. アクションに対応するデータ処理のみをサーバーへ要求
  3. 返却したデータをクライアント側で処理
  4. 差分を描写

とすることができるものとして理解しています。

差分のみ描写するので、ページをまるっと置き換えた場合に比べてパフォーマンスの向上が見込めます。
また、ページ描画までの待ち時間が減少することにより、ユーザーのストレスが減少も期待できます。
まだまだ勉強中の身ですが、非常に興味深いですね。

SPAに関しては以下の記事が参考になりました。
SPA(Single Page Application)の基本

環境構築

初めにVue.jsvue-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');
view raw main.ts hosted with ❤ by GitHub

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'),
},
],
});
view raw router-default.ts hosted with ❤ by GitHub

なんとなく雰囲気で分かるかも知れません。

上記のページは以下のように動きます。

  • /へアクセスした場合、./views/Home.vueの表示を行う
  • /aboutへアクセスした場合、./views/About.vueの表示を行う。

では試しに./views/直下にPage2.vueを作ってみましょう

<template>
<div class="page2">
<h1>This is an page2</h1>
</div>
</template>
view raw Page2.vue hosted with ❤ by GitHub

これを読み込むように設定してみたいと思います。

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'),
},
],
});
view raw router-after.ts hosted with ❤ by GitHub

あとは遷移したいページで下記の記載をすれば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>
view raw App.vue hosted with ❤ by GitHub

あとはファイルを保存し、ページ遷移するだけです。

SPAの雰囲気が掴めたかと思います。

まとめ

おおまかに、vueでSPAを体験するためには

  1. vue-cliでプロジェクト作成は簡単
  2. SPAにはvue-routerを使う
  3. router.tsにルーティングの設定を記載
  4. router-linkタグでどこに遷移できるかが記述できる

とやればOKです。

色々公式が用意していくれているおかげで、簡単に導入することが出来ました。

このエントリーをはてなブックマークに追加