こんにちは、Jeannieです。
前回は、Vue.jsを始めるために環境構築をやってきました。
これから何をやっていこうかな？と考えた時に、やっぱりVue.jsやるならシングルページアプリケーションを作りたいということで、今回はそのための準備をやっていきたいと思います。
シングルページアプリケーション(SPA)とは？
そもそも、シングルページアプリケーションって何？というところから。
単一のページでコンテンツの切り替えを行うWeb アプリケーションのアーキテクチャの名称。
従来はページ遷移時にページ全体を読み込んで表示内容が書き換わりますが、SPAではページ全体の読み込みは行わず、HTMLの一部を差し替えて表示内容を切り替えます。
ブラウザ上でページ遷移を行わずに表示部分のみを切り替えるため、高速にページを表示することが出来ます。
上記の通り、SPAの一番のメリットは高速にページ遷移ができるところですね。
通常のWEBアプリケーションだと、ページ遷移するたびにページ全体の読み込みが走るのに対して、SPAだと表示の切り替えが必要な部品(コンポーネント)のみを切り替えるので、ページ全体の読み込みを行うことなくページ遷移が実現できます。
Vue.jsを使いこなせば、このSPAを簡単に作ることが出来るというわけです。
シングルページアプリケーション(SPA)を作るための準備
それでは、SPAを作っていくための準備に入りましょう。
SPAを作っていくにあたって、僕は以下をインストールしました。
- Vue Router
- Vuex
- Vuetify
Vue Routerとは？
Vue Routerは、コンポーネントで作られた画面とURLの紐づけを行います。
SPAを構築するためのルーティング用のライブラリです。
Vuexとは？
Vuexは、複数のコンポーネント間でデータを共有するために使用します。
アプリケーション全体の状態を一元管理する状態管理用のライブラリです。
Vuexを入れなくてもコンポーネント間でのデータ共有は出来ますが、Vuexを使用することでコンポーネント間のデータ共有が簡単になります。
Vuetifyとは？
Vuetifyは、マテリアルデザインを使えるようにしたUIフレームワークです。
あらかじめ提供されたコンポーネントを使って画面を作っていくことが出来るので、デザイン部分に時間を割くことなくページを作っていくことができます。
Vuetifyは、SPAに必要なライブラリではありませんが、あらかじめデザインされたコンポーネントを使って見た目を整えたいという想いから、今回インストールすることにしました。
インストールしてみよう！
Vue Router、Vuexのインストール
まずは、Vue RouterとVuexをインストールしていきましょう。
プロジェクトマネージャーから「プラグイン」を選択すると、画面上部にVue RouterとVuexを追加するボタンが表示されていますので、こちらをクリックします。
「続ける」をクリック。
インストールが始まります。
画面が切り替わればインストール完了です。
これと同様の手順でVuexもインストールしてしまいましょう。
Vue Router、Vuexともインストールが完了すると以下のように表示されます。
Vuetifyのインストール
続いて、Vuetifyをインストールしていきましょう。
プロジェクトマネージャーの「プラグイン」から「プラグインを追加する」をクリックします。
検索ボックスに「Vuetify」と入力して、先頭に表示される「vue-cli-plugin-vuetify」を選択してインストールボタンをクリックします。
インストールが始まります。
インストールが完了するとVuetifyの設定が行えますが、ここでは特に何もせず終了ボタンをクリックします。
「続ける」をクリックします。
Vuetifyが正常にインストールされていれば以下のように表示されているはずです。
SPAを作るための準備完了！
これでSPAを作るための準備が整いました！
これまで、Vue.jsを始めるために環境構築から諸々のインストール作業をやってきましたが、ようやく次からソースコードをいじっていきたいと思います。
環境構築などがまだの方は以下の記事を参考にしてくださいませ。
ということで、今回は以上となります。それでは～(^^)/
コメント