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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

に変更。

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

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

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

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

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

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

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

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

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

App.vueを

に変更してください。

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

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

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

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

Vuexで状態管理を楽にする

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

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

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

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

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

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

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

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

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

Vuexで状態(store)管理

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

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

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

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

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

今回はテスト用に数字(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ファイルを以下のように変更しました。

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

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

しています。

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

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

ここで表示されている「0」は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

ABOUTこの記事をかいた人

新卒ノマドエンジニアとして独立し、半年で月収100万円を達成する。フリーランスのエンジニアとして活動しながら、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んでいる。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは好きなことだけ仕事にしています。