MVVMとは?

Vue.jsを勉強するなかで、「MVVM」という概念に初めて出会いました。

正直まだまだ理解できてないのですが、今の時点でわかったことをメモがわりにまとめてみました。

MVVMとは?

MVVMとはプログラムを

ViewViewModelModelの3つに分けて設計していくこと。

目的を、「UI部分とビジネスロジックの分離」とする。

View

  • ユーザーが目で見える部分(UI)。
  • 基本的には「この要素をここに描画する」という記述しかしない。
  • ViewModelに情報を通知し、ViewModelからの情報を取得して描画する。
  • ViewとViewModelでデータをやりとりする方法として、データバインディング、コマンドなどがある。

View Model

  • Viewで描画したい情報を保持する。
  • ViewとViewModelのデータは連動している。
  • Viewで起こった、ユーザーの入力やボタンを押すなどといったビヘイビアをModelに通知する。
  • Modelの変更をViewが理解できるように変換して通知する。

Model

  • ViewとView Model以外の部分全部を指す
  • Viewで描画するデータ本体やそのデータの処理手順(ビジネスロジック)とかの部分。

なぜMVVMを使うのか?

  • 可読性の高い設計になる
  • 再現性の高い設計になる(同じプログラムを使いまわせる)
  • 保守性の高い設計になる(コードビハインドを書かなくて良い)
  • UIと「それ以外」は違うスキルが必要だったりするので、MVVMではそれぞれのプロがいい感じに分業できる

MVVMで誤解が多いらしいところ

「データバインディング=MVVM」

⇨データバインディングはあくまでVとVMをつなぐ手法の一つ。

「MVVMはコードビハインドを書かない」

⇨コードビハインドとはページデザインとプログラムコードを分離すること。

MVVMではビヘイビアやアクション、トリガーを駆使することでコードビハインドを書く必要がほとんどない。

つまり、「書かない」のではなく「書く必要がない」ことが多いだけであって、アニメーションがめちゃめちゃ複雑な時とかはコードビハインド書くこともあるらしい(極めて希)。


雑なまとめ方をすると、「健康的な設計ができる」というのが今のMVVMの理解です。

今後Vue.jsを深く勉強していきながら、この記事の内容もアップデートしていきます!