お菓子と紅茶と、時々IT

趣味のお菓子(作る方)と紅茶の話、そして今進めているIT(プログラミングなど)に関する勉強の記録。

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