GoF以外のプログラミング・デザインパターン #01 MVC

モダンパターンの代表格でもあるMVCは、アプリケーションの「データ」「表示」「操作」を分離して、保守性・再利用性を高めるデザインパターンです。

基本構造

Controller

ユーザー操作を受け取る ↓

Model

データ・ビジネスロジック ↓

View

表示/UI部分

各役割の説明

Model（モデル）

データやビジネスロジックを担当。 DBとの通信・状態管理を行う。 ViewやControllerには依存しない。

View（ビュー）

ユーザーに見せる部分（HTMLやUI）。 Modelからデータを受け取って表示する。 データの更新は行わない。

Controller（コントローラ）

ユーザーの入力（クリック・フォーム送信など）を受け取り、Modelに処理を依頼。 Modelの結果をViewに渡して画面を更新する。

JavaScriptによるシンプルなMVC例

<div id="app"> <h1 id="count">0</h1> <button id="increment">＋</button> <button id="decrement">−</button> </div> <script> // Model（データ管理） class CounterModel { constructor() { this.value = 0; this.listeners = []; } increment() { this.value++; this.notify(); } decrement() { this.value--; this.notify(); } onChange(listener) { this.listeners.push(listener); } notify() { this.listeners.forEach(l => l(this.value)); } } // View（表示管理） class CounterView { constructor() { this.countEl = document.getElementById("count"); } render(value) { this.countEl.textContent = value; } } // Controller（操作管理） class CounterController { constructor(model, view) { this.model = model; this.view = view; // Modelの変化を監視 this.model.onChange(value => this.view.render(value)); // イベント登録 document.getElementById("increment").addEventListener("click", () => this.model.increment()); document.getElementById("decrement").addEventListener("click", () => this.model.decrement()); } } // 起動 const app = new CounterController(new CounterModel(), new CounterView()); </script>

この構造のポイント

・Model → View への更新は Observerパターン的に実装できる。 ・Controller は イベントの橋渡し役に徹している。 ・データ操作（Model）と描画（View）が完全に分離している。

メリット

・コードの責務が明確で、保守性が高い。 ・ViewやModelを独立してテストしやすい。 ・デザイン変更（View）やビジネスロジック変更（Model）が他に影響しづらい。

デメリット

・小規模アプリでは分割の手間が大きい。 ・Controllerが肥大化（God Controller化）しやすい。 ・双方向データバインディングがないため、更新処理を明示的に書く必要がある。

MVCを使っている代表的な技術

技術	MVCスタイルの採用例
Ruby on Rails	サーバーサイドMVCの定番
Laravel (PHP)	MVC構造でControllerとViewを分離
Spring MVC (Java)	Webフレームワークの王道
ASP.NET MVC	Microsoft系Webアプリ標準
Backbone.js	フロントエンドMVCライブラリ
Django (Python)	実質的にMTV（Model-Template-View）構造

あとがき

多くのフレームワークで搭載されているMVCパターンです。 馴染みのある人も多いと思いますが、メリットとデメリットをしっかりと理解した上で、設計をすることは重要です。 最近では、アンチMVC的なパターンも登場してきているので、もしかしたら今後オワコンになってしまうかもしれませんが、 比較的分かりやすい構造体で、安定運用ができる設計パターンなので、知らずにプログラミングをすることはないでしょう。 教科書的に、覚えておくべきデザインパターンと言っても過言ではないでしょうね。