うつつごころ

技術メモとか気になったこととか読んだ本とか

MVCとMVVMについて

技術メモ MVC MVVM

こんにちは、うつつです。

今回はMVVMについて。
次の案件で使っているというのでちょこっと調べて自分用にまとめました。

私は今まで入った案件が全てWebアプリだったこともあって、開発はほとんどModel、View、ControllerのMVC(Model2MVC)でやっていました。 ところが先日案件について話している中で出てきたのがこの"MVVMモデル"…Viewが2つにModelが２つ……めっちゃ…ある…(ない)という感じになり…

調べてみたらいやこれ全然違うやんけということが分かるんですが、聞いた時は何も分からず
「今回は一応MVVMでやっていて〜」
みたいな説明を聞きつつ心の中でずっと首を傾げていました。

🤔<MVVM……とは…………？

そもそもMVCとは？

  • M…Model
  • V…View
  • C…Controller


そもそもMVCて何？という話ですが、MVCでは上記の図のようにデータ構造などの保持をModelクラス、画面表示がViewクラス、ロジック部分がControllerクラス、と役割毎にクラスを作成し、機能を分担しています。逆に言えば、Viewクラスは画面表示するだけ、ロジックを書くならViewには書かずにControllerクラスに書きます。
このように処理と表示を分けることでHTMLの中に唐突にロジックが挟まってくる＞唐突な罠＜みたいなことがなくなり、可読性、保守性の高いソースになります。

ただ、どうやらWebアプリ開発でいうMVCは一般的に言われているMVCとは少々異なるようで、MVCよりもMVCから派生したModel2MVCというものの方が近いらしいです。

MVVMとは？

  • M…Model
  • V…View
  • VM…View Model


そこを踏まえてのようやくのMVVMです。
MVVMはロジック処理を行うModelクラス、表示、変更通知を担うViewクラス、データ保持、変換(Viewの制約吸収)の為のView Modelクラスから成り立ちます。(Viewと Modelが2つずつある訳ではなかった…)

MVVMは双方向のデータバインディングありきのモデルです。（Angularみたいな感じかな…？）
Viewは画面に変更があればそれをView Modelへ通知し、View ModelはModelへ処理を引き渡します。 Modelではデータの更新などを行い、データはView ModelからViewへと反映されます。

つまりViewとView Modelの間に変更を監視、反映する仕組みが必須となっています。
これを双方向データバインディングと言います。

基本的にView ModelはViewの制約を吸収してModelが処理出来るようにするという考え方が良いらしく、View Modelにごりごりとロジックを書くのは良くないとされています。(気を付けます…🙃）

まとめ

まとめると、MVVMモデルはデータバインディングなどによりViewとModel間をView Modelが支えるデータ構造なのかな。
メリットなど今のところ掴みきれていないので…案件が終わる頃追記したいと思います。

以上！

うつつがお送りしました。