読者です 読者をやめる 読者になる 読者になる

MVCアーキテクチャについて調べたこと

MVCアーキテクチャのはじまり

MVCアーキテクチャは、ソフトウェアの構成と役割について言及した概念のひとつ。1978年にXerox Parc(パロアルト研究所)のTrygve Reenskaugが、Smalltalk-76で使われているMVCモデルについて紹介したのが始まりと言われている。Trygve Reenskaug本人のウェブサイトには以下の記述がある。

The essential purpose of MVC is to bridge the gap between the human user's mental model and the digital model that exists in the computer.

 

MVCの目的は、開発者が作りたいソフトウェアのイメージを、コンピューターのデジタルモデルに変換すること。

(Trygve/MVC)

f:id:bambinya:20150613132908g:plain

 1988年に、MVCについて書かれた論文が公開された。

"A Cookbook for Using the Model-View-Controller User Interface Paradigm in Smalltalk-80"

この論文で、MVCアーキテクチャの各コンポーネントの役割と依存関係がまとめられている。18ページとそんなに長くないのでいつか見てみよう。

 

MVCアーキテクチャとは 

ユーザーインターフェースを持つアプリケーションを設計するアーキテクチャ

アプリケーションの内部処理と、ユーザーに対する入出力処理を分離することが目的。

アプリケーションを3つのレイヤーに分割し、それぞれが決められた役割を担当する。

Model (data, logic, rule)

アプリケーションデータ、ビジネスルール、ロジックなどの処理を持つ。

View (UI, presentation, logic)

テキスト、グラフ、図など、情報表現をする。

Controller (façade, flow controll)

ユーザーからの入力を受け取り、ModelとViewへの命令に変換する処理を持つ。

(※façadeとは、Gof(Gang of Four)によって定義された、コンピューターソフトウェアのデザインパターンのひとつ。直訳すると「建物の正面」。処理時間の独立性を高めるために、処理を呼び出す単純な操作だけを持ったクラスを提供すること。)

 

Server-side MVC と Client-side MVC の違い

Server-side MVCモデルを採用したアプリケーションは、基本的にHTTPリクエスト-HTTPレスポンスのコミュニケーションをサーバーと行う。Viewの生成はサーバーサイドで行う。

Client-side MVCモデルを採用したアプリケーションは、Ajax(非同期通信)またはHTML5のWebSocketを用いて、サーバーとの通信を行う。Viewの生成はクライアントサイドが動的に行う。ブラウザのローカルストレージにデータを保存し、サーバーとの通信時間を少なくする。

WebSocket: webサーバーとwebブラウザ間の双方向通信用のプロトコルTCP上で動く。サーバーとブラウザがハンドシェイクを行い、持続的なコネクションを確立した後は、必要な通信を全てそのコネクション上で、専用の軽量プロトコルを用いて行う。サーバー、ブラウザのどちらからでもデータの送信を開始できる。

URIスキーマはws:。wss:はセキュアなWebSocket通信を実現する。

W3CAPIの規格を策定中。The WebSocket API

IETFプロトコルの規格を策定中。RFC 6455 - The WebSocket Protocol

localstorage: ブラウザ側でKey-Value型のデータを保存する機能。クッキーの保存容量が4KBytesなのに対し、ローカルストレージでは5MBytesまでのデータを無期限で保存可能。

 

MVCモデルから派生したMVPモデル、MVVMモデル、MVWモデル

新技術の普及を背景に、MVCモデルでは整理しきれなくなったデータやロジックを誰が担当するか、という問いの解決策として新たなデザインパターンが派生した。

MVPモデル:モデル、ビュー、プレゼンターからなる。MVCモデルではどこにも属さなかった、ビューに関する動的なデータ(他の値によって、値を変える背景色などのデータ)とそのロジックはプレゼンターが担当する。モデル自身はビューやプレゼンターに依存せず、純粋なビジネスロジックのみを持つ。ビューは画面の表示とユーザー入力の受付口を担当し、入力されたデータをプレゼンターに渡す。

MVVMモデル:ビジネスロジックとプレゼンテーションロジックを分けることを目的としたデザインパターン。ViewはUIの外観と構造を定義し、いくつかのプレゼンテーションロジックを含む。ViewModelはプレゼンテーションロジックとステート(=状態)を含む。Modelはビジネスロジックを担当する。ViewのDataContextプロパティにViewModelのインスタンスを設定することで、ViewはViewModelとデータバインドを行う。

MVWモデル:GoogleのIgor MinarがAngular.jsを紹介するときに用いたデザインパターン。Model-View-Whateverの略。プレゼンテーションの中で"Whatever stands for 'whatever works for you'."「Whateverの意味は動けばなんでもいいということ」と紹介している。MV*とも書く。