MVCとMVPとMVVM
一般的なWebサイト(ザ・静的サイト)におけるMVCの定義
- Model・・・データ、データにアクセスするための機能、様々なロジックなど。ユーザーインターフェイスのないアプリケーション。内側のシステムっつーことかね。
- View・・・外部にどのようなコンテンツを届けるか定義。ここで言うコンテンツとはHTML, JSONなど。
- Controller・・・Routing後(特定のURLでアクセスされた後)必要に応じてModelと情報のやり取りをしてふさわしいViewをユーザーに返す働きをする。RontingとControllerがModelとユーザー、Viewとユーザーの仲介役になっているイメージ
フロントエンドにおけるMV(Model View)
上で言うところのViewに相当。
もともとWebサイトはHTMLにコンテンツが埋め込まれた状態でユーザーにレスポンスが返されるので、ViewにMVな構成を施す必要がなかった。
しかし、SPA(Single-page application)時代の到来とともにViewの中にもAjaxのデータ通信が必要だったりして、MVな構造が必要となった。
MVP (View, Presenter, Model)
ユーザー⇔View⇔Presenter⇔Model 厳密にはこの矢印違うけど(確認してね)
Presenter
Model, Viewが情報などを入出力するためのインターフェイス。
ユーザーがModelに情報を反映・取得をする時は、必ずViewを通して、Presenterに用意されているインターフェイスを使うことになる。
MVVM (View, ViewModel, Model)
ユーザー⇔View⇔ViewModel⇔Model
ViewModel
ModelとViewの中間に位置し、双方向データバインディングを実現する
双方向データバインディング
Modelの値が変わるとViewModelが変更を検知し、Viewで使われているデータも自動で変更する仕組み。
逆も然りで、ViewでModelの値が変更されれば、それをViewModelが検知し自動でModelの変更に反映する。
MVVMの代表例:Vue.js