はじめに
前回投稿した記事「Vue.js+Vuetify.jsを使ったWEBアプリケーション構築」で、Vueのサンプルアプリケーションを触ってみて頂いたと思いますので、今回はこのサンプルアプリケーションの構成について説明したいと思います。
今回の記事でサンプルアプリケーションを参考にすればVueで独自のアプリケーションを構築できそうというイメージを持って頂けたら幸いです。
アプリケーションの全体図
サンプルアプリケーションは、Vueの単一ファイルコンポーネントの機能を使って構築しています。
全体図としてコンポーネント図を描いてみました。
※アプリケーションの主要なコンポーネントだけ記載しています。
説明
上記の「アプリケーションの全体図」を基に説明します。
各コンポーネントに色がついていますが、それぞれの役割は以下の通りです。
| コンポーネントの色 | 役割 |
|---|---|
| 緑 | SPA（シングルページアプリケーション）の根幹部分 |
| 白 | 各種外部ライブラリの設定 |
| 青 | 画面 |
| 黄色 | 画面部品（画面の構成要素） |
| グレー | 基礎部品（共通的に利用できる部品） |
緑のコンポーネント
緑のコンポーネントがSPAの根幹部分で「index.html」から「main.js」を読み込み「App.vue」で画面を作成します。シングルページなので、ブラウザからアクセスされるのは「index.html」のみです。
では、どのようにして画面を切り替えているのか？
Vue Routerの出番です。Vue Routerについては以下の「白のコンポーネント」で説明します。
白のコンポーネント
画面の切り替えを行うにはVue Routerを使ってURLと画面の紐付けを行います。サンプルアプリケーションでは「router.js」で行っています。
例）「/【表示言語】/ichiran」というURLは「Ichiran」というコンポーネントを表示
// ・・・
import Ichiran from './components/screen/Ichiran';
// ・・・
let routes = [
// ・・・
// PATH_PREFIXにはjaやenなどの表示言語が入る。
{
path: PATH_PREFIX + '/ichiran',
name: 'ichiran',
component: Ichiran
},
// ・・・
];
このように白のコンポーネントは外部ライブラリの設定など、アプリケーション全体の動作を定義するコンポーネントとなっています。
各コンポーネントと外部ライブラリの対応は以下の通りです。Vueを全く知らない人向けに外部ライブラリの超概要も記載しておきます。
| コンポーネント | 外部ライブラリ名 | 超概要 |
|---|---|---|
| axiosObj.js | Axios | 非同期のHTTP通信 |
| i18n.js | Vue I18n | 多言語対応 |
| router.js | Vue Router | 画面遷移 |
| store/index.js | Vuex | アプリケーション内のデータ共有 |
| vee-validate.js | VeeValidate | 入力値検証 |
| vuetify.js | Vuetify | マテリアルデザインを取り入れた単一ファイルコンポーネントやCSSなど |
青、黄色、グレーのコンポーネント
青、黄色、グレーのコンポーネントはいずれもVueの単一ファイルコンポーネントで、画面を構成するコンポーネントです。コンポーネントの情報整理として、それぞれ画面（青）、画面部品（黄色）、基礎部品（グレー）というグループに分けました。
サンプルアプリケーションでは以下のルールを設けています。
- 青のコンポーネントは画面として公開するため、Vue RouterでURLを割り当てます。
- 青のコンポーネントは必ずBaseLayoutを利用します。
- 黄色のコンポーネントは青のコンポーネントから参照されます。
- グレーのコンポーネントはどのコンポーネントからも利用できるものとします。
サンプルアプリケーションの一覧画面を例に各コンポーネントの関係性を表すと以下のようになります。
また、各画面の実装でVuetifyを利用することで、独自のCSSはほとんど定義せずにリッチな画面を作成できることが、ソースコードを見て頂ければわかっていただけると思います。
おわりに
全体的な動作を変えなくて良いのであれば、サンプルアプリケーションをベースに青（画面）と黄色（画面部品）のコンポーネントを独自に作成するだけで、アプリケーションは容易に作成できると思います。（URLの紐づけは必要になりますが。）
サンプルアプリケーションは、ビルドの設定や単体テストの設定なども行っています。これからVueでアプリケーションの構築を考えている方の参考になれば幸いです。