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

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

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

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

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

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

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

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

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

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

なので、MVCの発展系として出てきたのがMVP(Model,View,Presenter)
→→→プレゼンターって何？コントローラーと何が違う？
MVPには２種類あって
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(双方向データバインディング)はデータ変更が中心。処理で変数が変更されたら表示が変わるし、ユーザ入力で変数が変更されたら処理が走る。

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