MVCモデルについて

MVCモデルとは

MVCモデルとはModel、View、Controllerにプログラムを分けて実装する

JavaScript側でMVCが進んだ背景について

AJAXの普及により、コンテンツ表示の主となり、それに伴ってコード量も増加した。
また、一気にWEBコンテンツは複雑、かつ高度化が進んでいった。

サーバー側のMVC

Controllerがクライアント(画面側)からのリクエストを受けて、そのリクエストからModelの処理に進む。
Modelは場合によっては、DB上のデータを操作する。
Modelの処理結果により、Controllerに返して、ControllerからViewに引き渡す。
ViewはControllerからう蹴ったデータ、情報を基に、HTMLを生成し、クライアント(画面）に返す。
サーバー側のMVCと全く同じではないが、JavaScript側でもMVCを意識して実装していけないほど、
JavaScriptの仕事が複雑になってきた。

JavaScript側のMVC

JavaScript側のMVCは、サーバー側のMVCとは少し異なる。
厳密に言うと、Cotrollerに相当するものがなかったり、ViewがCotrollerの役割を兼用していたりする。
「MV」や「M-V-whatever(MVW)」と呼ばれたりする。
JavaScriptでMVCモデル実現するためには、JavaScriptのフレームワークを使用するのがスタンダード。
JavaScriptでのMVCは、多くのケースでは、Viewnに相当する部分は、ユーザーアクション＊１を受け取る。
何かの処理のトリガーをHTMLのイベントとして拾うことが多いので、Cotrollerの一部をView側で担うことが多い。
Viewは処理のキャッチ後に、Modelに引き渡す。
Model側では、Webサーバーに対し、データ操作をリクエストする。
ここで、APIのXMLHttpRequestを使う。
View側では、レンダリング処理を行う。

JavaScriptの用語まとめ

レンダリング処理は、DOM(Document Object Model)操作やCSS操作を指す。
DOM操作は、特定のコンテンツを追加、変更したり削除したりする処理を実行する操作。
CSS操作は、CSS操作はスタイリングの変更やアニメーション(移動や回転など)の処理を実行する。

*1 マウスを入力したり、文字を入力したりする行為