JavaScriptにおけるMVC（MVVM） 【JavaScript フレームワーク入門】
Vue.jsの学習メモ。
今日は「JavaScript フレームワーク入門」の第4章を読んでみます。
4-1-1 JavaScriptにおけるMVC（MVVM）
JavaScriptフレームワークの「Vue.js」は、MVCパターンの派生であるMVVMパターンで設計されています。
まず最初に、
という用語の意味を確認しましょう。
MVCパターン
(p.114)
昨今、大規模なアプリケーション開発で多用されるようになっているのが「MVCフレームワーク」と呼ばれるものです。
これはアプリケーションのプログラムを
「Model（モデル）」
「View（ビュー）」
「Controller（コントローラー）」
の3つに整理し、その組み合わせとして構築していく手法です。
Model View Controller - Wikipedia
MVC（Model View Controller モデル・ビュー・コントローラ）は、ユーザーインタフェースをもつアプリケーションソフトウェアを実装するためのデザインパターンである。
MVCパターンは、アプリの構造を「Model」＋「View」＋「Controller」の3つに分割して、それぞれの機能を作る設計方法です。
- Model → データを用意する機能
- View → データを表示する機能
- Controller → ModelとViewを管理する機能
この3つの機能を用意すれば、アプリが作れます。
MVVMパターン
(p.114)
MVVMとは、「Model」「View」「ViewModel」の略です。
これは、プログラムを
「データを管理するもの（Model)」
「画面表示に関するもの（View）」
「データと表示の橋渡しをするもの（ViewModel)」
に分けて管理する考え方です。
Webページでは、JavaScriptを使って画面の表示や各種の処理を行いますが、ここでもっとも大変なのが「データと表示をうまくやり取りする」部分です。
データが変更されたら遅延なく表示を更新しなければいけないし、画面表示に入力があればデータを更新しなければいけない。
こうした「フロントにある表示と、バックにあるデータ」のやり取りこそが、JavaScriptのコーディングで一番面倒な部分といえます。
ここをわかりやすくシステム化できれば、Webページの開発は随分と捗るはずです。
Model View ViewModel - Wikipedia
Model-View-ViewModel (MVVM、モデル・ビュー・ビューモデル) は、独自のグラフィカルユーザーインターフェイス (GUI) を持つアプリケーションソフトウェアを、Model-View-ViewModelの3つの部分に分割して設計・実装するソフトウェアアーキテクチャパターンである。
Model-View-Controller (MVC) の派生パターンであり、特にPresentation Modelパターンを直接の祖先に持つ。
MVVMはMVCの派生です。
MVCの「Controller」の部分が、MVVMでは「ViewModel」になってます。
ViewModel
Viewを描画するための状態の保持と、Viewから受け取った入力を適切な形に変換してModelに伝達する役目を持つ。
すなわちViewとModelの間の情報の伝達と、Viewのための状態保持のみを役割とする要素である。
Viewとの通信はデータバインディング機構のような仕組みを通じて行うため、ViewModelの変更は開発者から見て自動的にViewに反映される。
MVCとMVVMの違い
（参考）Ext JS 5 の MVC と MVVM について。さらに… « 株式会社ゼノフィ
MVC と MVVM の大きな違いは、MVVM では View の抽象化 (ViewModel) が採用されていることです。
これは Model のデータと View のデータの表現の間の変更を管理します (いわゆるデータバインディング) 。
これは一般的に MVC アプリケーションで管理するのは面倒です。
MVVM パターンは MVC のアーキテクチャの長所 (関数の役割の分別) を活用しつつ、それに加えてデータバインディングの利点も提供します。
MVVMは、「データバインディングの機能が利点」とのこと。
データバインディングとは？
データバインディング（データバインド、Data Bindingの訳からデータ結合とも呼ばれる。）とは、XMLなどのデータソースとアプリケーションやウェブページ（ウェブアプリケーション）のユーザインタフェースを静的または動的に結合する技術である。
分離されたデータソースとユーザインタフェースの間を橋渡しする役割を果たし、データが変更されるとそれに応じてユーザインタフェースが変更される一方向なデータバインディングと、併せてユーザインタフェースの変更または操作に応じてデータが変更される双方向のデータバインディングがある。
（参考）データバインディング | AngularJS 1.2 日本語リファレンス | js STUDIO
- ビューを更新するとモデルが更新される
- モデルが更新されるとビューが更新される
ViewModelでは「データバインディング」＝ViewとModelの間の情報伝達を管理する仕組みが便利になっています。
言葉の説明だけではよく分からないので、Vue.jsで実際にデータバインディングの仕組みを確認してみたいと思います。
Vueオブジェクト 【JavaScript フレームワーク入門】 - JavaScript勉強会
まとめ
- JavaScriptフレームワークの「Vue.js」は、MVVMパターンで設計されている。
- MVVMパターンは、双方向のデータバインディング（データ結合）を簡単に書ける。
- Vue.jsのデータバインディング機能で、Webアプリを手軽に作りたい！
