vue.jsのMVVMとは何なのか?

vue.jsのMVVMとは何なのか?

事前知識
1, アーキテクチャ(建築学)
⇒⇒⇒こう作るべき!という思想。一番上位の考え方

2, プログラミング言語(設計図)
⇒⇒⇒実装(コーディング)する時に記述する書き方

3, ライブラリ(家具)
⇒⇒⇒決まりきったプログラミングの小さなパッケージ(ファイル圧縮など共通の処理は、わざわざ自分で実装しなくていい)

4, フレームワーク(建売住宅)
⇒⇒⇒決まりきったプログラミングのセット(パターン)、独自の処理がある所だけコーディングする

MVVM(Model, View, ViewModel)は、1番のアーキテクチャ(こう作るべき!という思想。一番上位の考え方)
そもそもアーキテクチャが無いと、何が困るか?
1, 小さなプログラミングなら不要
2, プログラミングが大量&複雑になってきたら、どこにどのようにコーディングするか?という指針がないと、コーディングする人の技量によって品質や書き方がバラバラになる。
3, デメリットとしては、コーディングの仕方を強制するので、慣れるまで書きづらい&学習コストがかかる(なぜ、こんな面倒臭い事をしないと駄目なのか?)

MVVM(Model, View, ViewModel)の大元となっているのは、有名なMVC(Model,View,Controller)モデル

Model
⇒⇒⇒MySQLなどのデータベースを抽象化した物。データを扱う

View
⇒⇒⇒ブラウザ画面などユーザインタフェースを抽象化した物。表示を扱う

Controller
⇒⇒⇒モデルとビューの制御を抽象化した物。全体的な処理を扱う

Routing
⇒⇒⇒コントローラーの入り口。WebアプリならURLとコントローラーを結びつける物

それぞれの処理が別れてていいじゃん!と思うのだが、実装を始めると、
1, モデルに処理させるべき所をコントローラーに処理させたり(Fat Controller)、あまつさえルーティングで処理しちゃったり・・・。
2, ビューも表示させるだけなのに、表示の切り分けが段々複雑化して行って、コントローラーで処理させるべきじゃ・・・。(jsで処理とか)
3, 結果として、モデルがスカスカになって、全然MVCモデルじゃないじゃん!とかになる

なぜこうなってしまうかを考えてみると、出来るだけUIに近い所で処理をするからだと思う。
1, ビューで処理する(コントローラまで戻るのが面倒)
2, コントローラーでデータ処理してしまう(モデルまで引き渡すのが面倒)
3, モデルからデータ処理を実装させるのは、かなり全体的な動きが分かってないと難しい(最初に関数作成して、main処理からコールするのに近い考え方)

なので、MVCの発展系として出てきたのがMVP(Model,View,Presenter)
→→→プレゼンターって何?コントローラーと何が違う?
MVPには2種類あって
1, ViewとModelを完全に独立させ、Presenterで結ぶ「パッシブビューMVP」 =従来のMVCと同じ(ViewはGet/Setするだけで処理はしない)
2, ViewとModelを監視する形で結びつける「監視コントロールMVP」= Viewを基準にmodelを作る。viewが変更されたら、presenter経由でmodelも変更

そして監視コントロールMVPを更に発展させたのがMVVM(Model,View,ViewModel)
→→→ViewModelって何?コントローラーやプレゼンターと何が違う?
ViewModel(双方向データバインディング)はデータ変更が中心の考え方。
処理で変数が変更されたら表示が変わるし、ユーザ入力で変数が変更されたら処理が走る。

まとめ
1, MVC=Controllerは処理中心(if文・for文で処理がガリガリ書く)
2, MVP=Presenterはビュー中心(ビューから呼ばれるための関数を大量に書く)
3, MVVM=ViewModel(双方向データバインディング)はデータ変更が中心。処理で変数が変更されたら表示が変わるし、ユーザ入力で変数が変更されたら処理が走る。

これらのアーキテクチャは、あくまで考え方であって、実装はまた別の話。
例えば、ランチはコスパ重視・スピード重視・弁当派など考え方は色々あるけど、実際のお昼に何を食べるか?(=実装)は、また別の話。

コメントを残す

メールアドレスが公開されることはありません。