【Vue.js】Vue-CLI・VueRouter・Vuexを使って、最小構成のSPAアプリケーション構築

こんにちは！らーらです。

わたしは普段Vue.jsにVuexとVueRouterというライブラリを追加して、SPA(シングルページアプリケーション)を制作しています。

今回紹介するVueCLIというコマンドライン機能を使えば、30分もかからずにVue.jsでSPAを作る土台を整えることが出来ます。

本日は、VueCLI・Vuex・VueRouterというVue.jsでSPAを作るときに必須の３つのライブラリを使用して、最小構成のVue.jsアプリケーションの作り方を解説いたします。

Vue-CLIでVueアプリケーションの土台を作る

もし、VueCLIがローカルマシンにインストールされていない場合

npm i -g vue-cli

1	npm i -g vue-cli

をターミナルで実行して、VueCLIをグローバルインストールしてください。

VueCLIを使って、Vueアプリケーションの土台を作ります。プロジェクトを作成したディレクトリに移動して

vue init webpack-simple <プロジェクト名>

1	vue init webpack-simple <プロジェクト名>

を入力。(Project name?等の質問が流れますが、全てEnterで大丈夫です。)

すると、以下のようなファイル構成のプロジェクトディレクトリが出来ますので、

プロジェクトディレクトリ
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── src
└── webpack.config.js

プロジェクトディレクトリ

├── README.md

├── index.html

├── package-lock.json

├── package.json

├── src

└── webpack.config.js

プロジェクトディレクトリの中に入って、

npm i

npm i

コマンドを叩き、node_modulesをインストールしてください。

これで、Vue.js単体の最小構成のアプリケーションが出来ました。プロジェクトディレクトリ内で

npm run dev

1	npm run dev

と入力すると、以下のような画面がブラウザに表示され、Vueアプリケーションが立ち上がります。

Vuexや、VueRouterを使わずに簡単なアプリケーションを作成するだけでしたら、もうこれで準備完了です。

srcディレクトリの中にComponentを作っていきて、自分の好きなアプリケーションを構築しましょう。

VueRouterでルーティング処理を可能にする

Vueアプリケーションの雛形ができたところで、Vue.jsのSPA(シングルページアプリケーション)上でページ遷移を可能にするVueRouterをセットアップしていきます。まずは、vue-routerをインストールします。

npm i -S vue-router

1	npm i -S vue-router

インストールが完了したら、srcディレクトリ配下のmain.jsを

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import { routes } from './routes';

Vue.use(VueRouter);

const router = new VueRouter({
  routes
});

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

import Vue from 'vue';

import VueRouter from 'vue-router';

import App from './App.vue';

import { routes } from './routes';

Vue.use(VueRouter);

const router = new VueRouter({

routes

});

new Vue({

el: '#app',

router,

render: h => h(App)

})

に変更。

2行目：VueRouterをインポート
4行目：routes.jsをインポート(ルート情報を書き込むファイル)
6行目：VueRouterをVueのミドルウェアとして使用する宣言
8行目：routes.jsの情報をVueRouterに入れる
14行目：Vueをインスタンス化する際にrouterを渡す

といった処理を追加していますが、もうこれはVueRouterを使うときのお決まりの書き方なのでコピペしてしまったほうが早いです。

次に、ルーティング情報を記載する「routes.js」ファイルをsrcディレクトリ配下に作成して、そのファイル(src/routes.js)を以下のように記載

import A from './components/A.vue';
import B from './components/B.vue';
import C from './components/C.vue';

export const routes = [
  { path: '/a', component: A },
  { path: '/b', component: B },
  { path: '/c', component: C },
];

import A from './components/A.vue';

import B from './components/B.vue';

import C from './components/C.vue';

export const routes = [

{ path: '/a', component: A },

{ path: '/b', component: B },

{ path: '/c', component: C },

];

非常にシンプルなルーティングです。

1〜3行目：必要なコンポーネントをインポート(今回はComponentディレクトリの中にA.vue,B.vue,C.vueと作成)
5〜9行目：インポートしたコンポーネントを表示したいパスと結びつける

パッとみただけで、何がしたいか分かりますね。

「/a」というパスにアクセスした時は、A.vueというコンポーネントを、「/b」というパスにアクセスしたときは、B.vueというコンポーネントを表示するように設定されています。

ここで設定したルーティングが先程作成したmain.jsにインポートされ、アプリケーション全体に反映されます。

最後に、routes.jsで設定したコンポーネントを表示する場所を記載しましょう。

App.vueを

<template>
  <div id="app">
    <div class="header">ヘッダー</div>
    <router-view></router-view>
    <div class="footer">フッター</div>
  </div>
</template>

<style>
  #app {
    text-align: center;
    font-size: 40px;
  }
  .header {
    height: 50px;
    background-color: #ebebeb;
    margin-bottom: 50px;
  }
  .footer {
    height: 50px;
    background-color: #ebebeb;
    margin-top: 70px;
  }
</style>

<router-view></router-view>

</div>

</template>

<style>

#app {

text-align: center;

font-size: 40px;

}

.header {

height: 50px;

background-color: #ebebeb;

margin-bottom: 50px;

}

.footer {

height: 50px;

background-color: #ebebeb;

margin-top: 70px;

}

</style>

に変更してください。

そうすると、「router-view」と記載された部分に、routes.jsで設定したコンポーネントが表示されるようになります。

ここまで作った状態で、「http://localhost:8080/#/a」にアクセスすると、

「http://localhost:8080/#/b」にアクセスすると、

といった具合に、通常のwebサイトと同じように、SPA(シングルページアプリケーション)の挙動を維持しながら、ルーティング処理やナビゲーション処理が可能になりました。

Vuexで状態管理を楽にする

Vue CLIでお手軽にVueアプリケーションを構築する
Vue Routerで、Vueアプリケーションにルーティング処理を構築する

まで、出来るようになりました。

最後に、VuexというライブラリをインストールしてVueアプリケーションの状態管理をしやすくしましょう。

まずは、Vuexをインストールします。

npm i -S vuex vuex-router-sync

1	npm i -S vuex vuex-router-sync

vuexのインストールと一緒に「vuex-router-sync」というライブラリも一緒にインポートしておきました。

このライブラリは、Vuexで使うstore(mutationやgetter,actions)の中でroute情報を使えるようにするライブラリです。Vuexを使う際は、便利なので、一緒に入れておくと良いでしょう。

必要なライブラリをインポート出来たところで、main.jsを以下に書き換えます。

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import { routes } from './routes';
import store from './store/store';
import { sync } from 'vuex-router-sync'

Vue.use(VueRouter);

const router = new VueRouter({
  routes
});

sync(store, router);

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

import Vue from 'vue';

import VueRouter from 'vue-router';

import App from './App.vue';

import { routes } from './routes';

import store from './store/store';

import { sync } from 'vuex-router-sync'

Vue.use(VueRouter);

const router = new VueRouter({

routes

});

sync(store, router);

new Vue({

el: '#app',

router,

store,

render: h => h(App)

})

特に難しいことはしておらず、Vuexで状態管理をする「store/store.js」のインポート(5行目)、vuex-router-syncのインポート(6行目)、vuex-router-syncを使って、router(ルーティング)とstore(状態)を結びつける処理(14行目)を追記しただけです。

これも、VueプロジェクトでVuexを使うときはお決まりの書き方なので、覚えるというよりは、コピペしてしまっても問題ありません。

Vuexで状態(store)管理

Vuexで状態管理をするためにstoreというディレクトリを作り、以下のフォルダ構成にしました。

store
├── modules
│   └── counter.js
└── store.js

store

├── modules

│ └── counter.js

└── store.js

基本的には、modules内にVuexで管理するstoreやstoreの状態を変更するmutations、mutationsに命令を出すactionsを書いたファイルを入れていきます。そして、store.jsはそれらのモジュールをまとめて、main.jsにexportします。

全てのモジュールファイルをまとめて、main.jsにエクスポートするstore.jsは以下です。

import Vue from 'vue';
import Vuex from 'vuex';

import counter from './modules/counter';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    counter
  }
});

import Vue from 'vue';

import Vuex from 'vuex';

import counter from './modules/counter';

Vue.use(Vuex);

export default new Vuex.Store({

modules: {

counter

}

});

1〜2行目：vueとvuexをインポート
4行目：必要なモジュールをインポート
10行目：インポートしたモジュールをVuex.Storeに登録

次にVuexの本体となる状態管理を担うファイル「modules/counter.js」は以下のような記述になっています。

import Vue from 'vue'

const state = {
  count: 0
};

const mutations = {
  'CHANGE_COUNT' (state) {
    state.count = state.count + 1;
  },
};

const actions = {
  plusCount: ({commit}) => {
    commit('CHANGE_COUNT');
  }
};

const getters = {
  currentCount: state => {
    return state.count;
  }
}

export default {
  state,
  mutations,
  actions,
  getters
}

import Vue from 'vue'

const state = {

count: 0

};

const mutations = {

'CHANGE_COUNT' (state) {

state.count = state.count + 1;

};

const actions = {

plusCount: ({commit}) => {

commit('CHANGE_COUNT');

}

};

const getters = {

currentCount: state => {

return state.count;

}

export default {

state,

mutations,

actions,

getters

}

今回はテスト用に数字(count)をVuexのstateで管理して、View側からボタンを押すと管理している数字が上がっていく処理を作成しました。(そのため、ファイル名がcounter.jsになっています。)

上から順にファイルの中身を説明していくと

state：管理したい値をここにobject形式で記載していきます
mutations：stateの値を変更したいときはmutationsに命令を出して、mutationsからstateの値を変更します
actions：Viewなどから状態変更やAPI通信をしたいときに、ここで定義したactionを呼び出します。(あとで、plusCountを呼び出す処理を紹介します。)
getters：stateで管理している値を参照したいときに、gettersにアクセスします(直接stateの値を参照しないのは、gettersでmapやfloorの処理などを挟むことによって、リファクタリングしやすくしたり、様々な形式でデータにアクセスできるようにするためです。)

以上がVuexの役割です。

次にVuexで管理している値を参照したり、値を変更するボタンを設置しているファイルを紹介します。

Vue Routerで使用したA.vueファイルを以下のように変更しました。

<template>
  <div>
    <button @click="countUp">add count</button>
    <div>{{currentCount}}</div>
  </div>
</template>

<script>
  export default {
    computed: {
      currentCount() {
        return this.$store.getters.currentCount;
      }
    },
    methods: {
      countUp() {
        this.$store.dispatch("plusCount");
      }
    }
  }
</script>

<div>

<button @click="countUp">add count</button>

<div>{{currentCount}}</div>

</div>

</template>

export default {

computed: {

currentCount() {

return this.$store.getters.currentCount;

}

methods: {

countUp() {

this.$store.dispatch("plusCount");

}

</script>

このVueコンポーネントを見るとわかるように、

ボタンを押すと「this.$store.dispatch(“plusCount”);」にてplusCountアクションにアクセス
「this.$store.getters.currentCount」にて、Vuexで管理しているstoreを参照(gettersのcurrentCountにアクセス)

しています。

この状態で、ブラウザの「localhost:8080/#/a」にアクセスすると、

という画面が表示されます。

ここで表示されている「０」はVuexのcounter.jsで管理しているstateのcountの値です。

add countボタンを押すと、数字が上がっていきます。

これは、コンポーネントから、plusCountアクションに「this.$store.dispatch(“plusCount”);」にてアクセスして、そのplusCountアクションがCHANGE_COUNT mutationsに命令を出し、stateのcountを変更しているからです。

いかがでしょう？Vuexの状態管理が何となくお分かりいただけたでしょうか？

Vuexを使って、どのComponentからも共通のstate(今回で言うとcount)にアクセスできるようになったおかげで、Component間でデータを受け渡ししまくるバケツリレーのようなアプリケーション構築から解放されます。

これで、VueCLI・VueRouter・Vuexを使った最小構成のWebアプリケーションは完成です。ここまで制作できれば、あとは見よう見まねで色々なSPA(シングルページアプリケーション)を作ることが出来るでしょう。

フロントエンドエンジニアにとってVueやReactといったSPAフレームワークは必須のスキルになっています。是非、マスターして、色々なアプリケーションを作ってみてください！

今回制作したアプリケーションは以下に配置してありますので、参考にしたい人は是非！

https://github.com/rara-tan/vuecli-vuex-vuerouter

カテゴリー

【Vue.js】Vue-CLI・VueRouter・Vuexを使って、最小構成のSPAアプリケーション構築

Vue-CLIでVueアプリケーションの土台を作る

VueRouterでルーティング処理を可能にする

Vuexで状態管理を楽にする

Vuexで状態(store)管理

ABOUTこの記事をかいた人

NEW POSTこのライターの最新記事

vuetifyをvue.jsに導入する際に、【no such file or…

【Typescript】呼び出しシグネチャと省略記法の書き方

React.jsのprops.childrenとはなにか？javascrip…

firebase認証のonAuthStateChangedはどこでログイン状…

プロフィール

最近の投稿

アーカイブ

カテゴリー

カテゴリー

Vue-CLIでVueアプリケーションの土台を作る

VueRouterでルーティング処理を可能にする

Vuexで状態管理を楽にする

Vuexで状態(store)管理

RECOMMENDこちらの記事も人気です。

Vue.jsで親Componentから子Componentのmethod…

Vue.jsでtitleタグやヘッダータイトルをGlobal MixIn…

【Vue.js Nuxt】Vuetifyのv-file-inputが動作…

【Vue.js】Vueの制御構文（v-if,v-show,v-for）【…

Nuxt.jsでtitle・description・OGPタグを設定しS…

【Vue.js】双方向データバインディング(v-model)・compu…

Nuxt.jsで簡単なWebアプリを作成するチュートリアル(ルーティング…

vuetifyをvue.jsに導入する際に、【no such file …

ABOUTこの記事をかいた人

NEW POSTこのライターの最新記事

vuetifyをvue.jsに導入する際に、【no such file or…

【Typescript】呼び出しシグネチャと省略記法の書き方

React.jsのprops.childrenとはなにか？javascrip…

firebase認証のonAuthStateChangedはどこでログイン状…

プロフィール

最近の投稿

アーカイブ

カテゴリー