Vue & Flux アプリケーション設計 【4】

前回からの続きです。
今回はフロントアーキテクチャの設計をします。

アーキテクチャ

アーキテクチャとは設計方法、設計思想をいいます。「どうやったらこのView が更新されるか」「情報をどこにもっているか」「どこから情報を呼び出すか」とかそういうのを図にしたり、文章にしたりして共有します。
今回はVue.js を使用するのでまずは公式のアーキテクチャを把握する必要があります。

012-jp.vuejs.org

下記の図がVue.js のアーキテクチャです。

コンセプト概要

処理の流れはModel → ViewModel → View または View → ViewModel → Modelですね。
必ず ViewModel を経由するようになっています。このモデルをMVVMモデルと言います。ViewModel は View と Model を同期させるいわばブリッジとしての役割になっています。
Model はデータオブジェクト とされています。

{ hoge: 'mogemoge' }

上記のようなオブジェクトがあればModel 足り得ます。重要なのはModel はViewModel に監視されているということです。
説明すると長くなるので「監視されている」ということだけ覚えておいたほうがいいです。
View はブラウザに表示されているDOM要素になります。HTML と考えても間違いではないと思います。役割は「結果の表示」「ユーザーアクションの発火元」です。
「結果の表示」はそのまま、ViewModel で処理された内容が表示されることです。上記のオブジェクトならこのように表示させたりできることです。

<p>{{ data.hoge }}</p> 

これで、HTML上には<p>mogemoge</p>とDOMが生成されれば理想通りです。
「ユーザーアクションの発火元」 はクリックなどから発火されたイベントによってModel を変更させたりするように使用します。

公式ページの「クイックな例」を分解してみました。
比較的View 側はわかりやすいと思います。ViewModel と Model が合体していますが、これが「監視」という処理になります。
ViewModel 内のdata にModel を流し込むイメージです。

Vue.js はViewModel が色々と処理をしているということがわかったと思います。 しかし、まだまだ触りも触り、ギターで言うと構え方を知ったくらいです。
フロントアーキテクチャをフレームワークで行う際はしっかりとした前知識が必要です。

次回はVue.js コンポーネントの設計をします。