MVC・MVP・MVVM――一見シンプルだが、最強のアーキテクチャパターン

[![Group229.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4075813/e3cb7427-a5c0-474d-8434-18dc0a45eab3.png)](https://leapcell.io/)


**[Leapcell: The Best of Serverless Web Hosting](https://leapcell.io/)**

# MVC Framework
MVCはModel View Controllerの略で、モデル・ビュー・コントローラーを表します。広く応用されているソフトウェアデザインパラダイムの一つです。その核心的なアイデアは、ビジネスロジック、データ、およびインターフェイス表示を分離することでコードを整理し、ビジネスロジックを一つのコンポーネントに集中させることです。このようにすれば、インターフェイスとユーザーインタラクションを改善およびカスタマイズする際に、ビジネスロジックを書き直す必要がありません。MVCは独自に発展し、伝統的な入力、処理、出力機能を論理的なグラフィカルユーザーインターフェイス構造にマッピングするようになりました。

## MVC Programming Pattern
MVCは、MVC（Model View Controller モデル・ビュー・コントローラー）デザインを用いてWebアプリケーションを作成するためのパターンです。具体的な紹介は以下の通りです：
```
+-------------------+
|       Model       |
|  アプリケーションの核心部分、例えば  |
|  データベースなどで、データロジックの処理を担当し、  |
|  データのアクセスと保存を行う          |
+-------------------+
          |
          | データを提供
          ▼
+-------------------+
|       View        |
|  表示効果、例えば  |
|  HTMLページなどで、  |
|  モデルデータに基づいて表示内容を作成する  |
+-------------------+
          |
          | ユーザーインタラクション
          ▲
+-------------------+
|     Controller    |
|  入力を処理し、ビジネスロジックも含み、  |
|  ビューからデータを読み取り、  |
|  ユーザー入力を制御し、  |
|  データをモデルに送信することを担当する  |
+-------------------+
```
- **Model**: アプリケーションの核心を表し、例えばデータベースなどです。主にアプリケーションのデータロジックの処理を担当します。通常、モデルオブジェクトはデータベースへのデータのアクセスと保存のタスクを引き受けます。
- **View**: 表示効果のために使用され、例えば一般的なHTMLページなどです。ビューは一般的にモデルデータに基づいて作成されます。
- **Controller**: ユーザーインタラクションを処理し、通常はビューからデータを読み取り、ユーザー入力を制御し、データをモデルに送信することを担当します。

MVCパターンはまた、HTML、CSS、およびJavaScriptに対する完全な制御を提供します。

## Advantages
1. **Low Coupling**: ビュー層とビジネス層が分離されています。つまり、ビュー層のコードを変更するときに、モデルとコントローラーのコードを再コンパイルする必要はありません。同様に、アプリケーションのビジネスプロセスやビジネスルールが変更されたときには、MVCのモデル層のみを修正すればよいです。モデルがコントローラーとビューから分離されているため、アプリケーションのデータ層とビジネスルールを調整するのが容易です。例えば、データベースをMySQLからOracleに移行する場合や、RDBMSデータソースからLDAPに変更する場合には、モデル部分のみを修正すればよいです。モデルが正しく実装されれば、データソースがデータベースであろうとLDAPサーバーであろうと、ビューは正しく対応するデータを表示することができます。MVCアプリケーションの3つのコンポーネントは互いに独立しているため、そのうちの一つを変更しても他の二つに影響を与えません。したがって、この設計アイデアに基づいて、良好な疎結合のシステムを構築することができます。
2. **High Reusability**: 技術の発展に伴い、アプリケーションに複数の方法でアクセスする必要があります。MVCパターンは、様々な異なるスタイルのビューが同じサーバーサイドのコードにアクセスできるようにします。なぜなら、複数のビューが一つのモデルを共有できるからです。これには、任意のWEB（HTTP）ブラウザや無線ブラウザ（wap）が含まれます。例えば、ユーザーはコンピューターまたは携帯電話を通じてある商品を注文することができます。注文方法は異なっていても、商品注文を処理するためのビジネスロジックは同じです。モデルが返すデータは形式が整えられていないため、同じコンポーネントを異なるインターフェイスで使用することができます。例えば、多くのデータはHTMLで表現されることもあれば、WAPで表現されることもあります。これらの異なる表現を実現するために必要な操作は、ビュー層の実装方法を変更するだけであり、コントロール層とモデル層はまったく変更する必要はありません。データとビジネスルールが表示層から分離されているため、コードを最大限に再利用することができます。モデルはまた、状態管理とデータ永続化処理の機能も持っています。例えば、セッションベースのショッピングカートや電子商取引のプロセスも、Flashウェブサイトや無線ネットワーク接続されたアプリケーションで再利用することができます。
3. **Low Lifecycle Cost**: MVCは、ユーザーインターフェイスを開発および保守するための技術的なコストを削減します。
4. **Fast Deployment**: MVCパターンを使用することで、開発時間が大幅に短縮されます。これにより、プログラマー（Java開発者）はビジネスロジックに専念することができ、インターフェイスプログラマー（HTMLおよびJSP開発者）は表示に専念することができます。
5. **High Maintainability**: ビュー層とビジネスロジック層を分離することで、Webアプリケーションもより保守しやすく、修正しやすくなります。
6. **Beneficial for Software Engineering Management**: 異なる層がそれぞれの機能を果たしているため、各層の異なるアプリケーションには一定の共通特性があり、これはエンジニアリングとツールを通じてプログラムコードを管理する上で有益です。コントローラーはまた、異なるモデルとビューを接続してユーザーの要求を完了するために使用できるという利点も提供します。このようにして、コントローラーはアプリケーションを構築するための強力な手段を提供することができます。いくつかの再利用可能なモデルとビューが与えられた場合、コントローラーはユーザーの要求に応じて処理するためのモデルを選択し、次に処理結果をユーザーに表示するためのビューを選択することができます。

## Disadvantages
1. **No Clear Definition**: MVCを完全に理解することは容易ではありません。MVCを使用するには、慎重な計画が必要です。その内部の原理は比較的複雑であるため、考えるにはある程度の時間がかかります。同時に、モデルとビューが厳密に分離されているため、アプリケーションのデバッグにも一定の困難をもたらします。各コンポーネントは使用する前に十分にテストする必要があります。
2. **Not Suitable for Small and Medium-Sized Applications**: 非常に大きくないアプリケーションにMVCを適用するために多くの時間を費やすことは、しばしば見合わない努力です。
3. **Increases the Complexity of the System Structure and Implementation**: 単純なインターフェイスの場合、MVCを厳密に従い、モデル、ビュー、およびコントローラーを分離すると、構造の複雑さが増し、多すぎる更新操作が発生する可能性があり、動作効率が低下します。
4. **Too Tight Connection between the View and the Controller**: ビューとコントローラーは別個のものですが、密接に関連するコンポーネントです。コントローラーが存在しなければ、ビューの適用は非常に限定的であり、逆もまた同じです。これは、それらの独立した再利用を妨げます。
5. **Inefficient Access to Model Data by the View**: モデルの操作インターフェイスに依存して、ビューは十分な表示データを取得するために複数回呼び出される場合があります。変化しないデータへの不要な頻繁なアクセスも、動作性能を損なうことになります。
6. **General Advanced Interface Tools or Constructors Do Not Support the Pattern**: これらのツールをMVCに適応させるために変換し、別個のコンポーネントを作成するコストは高く、MVCを使用する上で困難を引き起こすことになります。

# MVP Pattern
Full name: Model-View-Presenter. MVPは、古典的なMVCパターンから進化したものです。それらの基本的なアイデアは似ており、つまり、Controller/Presenterが論理処理を担当し、Modelがデータを提供し、Viewが表示を担当するということです。

```
+-------------------+
|       Model       |
|  データを提供し、データ関連のロジックの処理を担当する  |
+-------------------+
          |
          | データを提供
          ▼
+-------------------+
|       View        |
|  データを表示する、ユーザーインターフェイス部分  |
+-------------------+
          |
          | ユーザーインタラクション
          ▲
+-------------------+
|     Presenter     |
|  ロジックを処理し、モデルとビューの間でやり取りを行い、  |
|  データの流れを調整する  |
+-------------------+
```
## Advantages
1. **Complete Separation of the Model and the View**: ビューを修正しても、モデルに影響を与えることなく行うことができます。
2. **More Efficient Use of the Model**: すべてのやり取りは一つの場所 - Presenterの内部で起こるためです。
3. **High Reusability**: 一つのPresenterを複数のビューに使用することができ、Presenterのロジックを変更することなく行うことができます。この機能は非常に役立ちます。なぜなら、ビューはモデルよりも頻繁に変更されるからです。
4. **Easy to Test**: ロジックをPresenterに置けば、ユーザーインターフェイスがなくても、これらのロジック（ユニットテスト）をテストすることができます。

## Disadvantages
ビューのレンダリングがPresenterに配置されているため、ビューとPresenterの間のやり取りが頻繁になりすぎます。また、Presenterがビューをあまりにも多くレンダリングすると、特定のビューとの結びつきがしばしば強すぎることも理解する必要があります。一旦ビューが変更される必要があると、Presenterも変更する必要があります。例えば、もともとHtmlを表示するために使用されていたPresenterが、今後Pdfを表示するためにも使用される場合、ビューもおそらく変更する必要があります。

## Differences between MVP and MVC
新しいパターンとしてのMVPは、MVCと大きな違いがあります。MVPでは、Viewは直接Modelを使用しません。それらの間の通信はPresenter（MVCにおけるController）を介して行われ、すべてのやり取りはPresenterの内部で起こります。MVCでは、ViewはControllerを介さずに直接Modelからデータを読み取ります。

MVCでは、Viewは直接Modelにアクセスできます。その結果、ViewにはModelの情報が含まれ、避けられなくいくつかのビジネスロジックも含まれることになります。MVCモデルでは、Modelの変化により多くの注目が払われ、同時にModelの複数の異なる表示、すなわちViewが存在します。したがって、MVCモデルでは、ModelはViewに依存しませんが、ViewはModelに依存します。また、いくつかのビジネスロジックがViewで実装されているため、Viewを変更するのはより困難であり、少なくともそれらのビジネスロジックは再利用することができません。

MVCにおけるViewは確かにModelに「アクセス」することができますが、ViewにおいてModelに依存することはお勧めしません。むしろ、可能な限りすべてのビジネスロジックをControllerで処理するよう求め、ViewはControllerとのみやり取りを行うようにします。

以下の図に違いを示します（ここでは、提供された元の画像mvc.pngとmvp.pngを参照できます）：

# MVVM Framework
MVVMはModel-View-ViewModelの略です。本質的にはMVCの改良版です。MVVMはViewの状態と動作を抽象化し、ビューUIとビジネスロジックを分離することができます。もちろん、ViewModelはすでにこれを代わりに行ってくれます。ViewModelはModelのデータを抽出することができ、同時に、表示内容のためにViewに関係するビジネスロジックの処理を支援することができます。MicrosoftのWPFは、Silverlight、オーディオ、ビデオ、3D、アニメーションなど、新しい技術的な体験をもたらしており、ソフトウェアUI層をより詳細に、そしてカスタマイズ可能にしています。同時に、技術的な面では、WPFはBinding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplateなどの新機能ももたらしています。MVVM（Model-View-ViewModel）フレームワークの起源は、MVP（Model-View-Presenter）パターンとWPFを組み合わせた適用方法から進化した新しいタイプのアーキテクチャフレームワークです。元のMVPフレームワークに基づいて、WPFの新機能を取り入れて、ますます複雑になる顧客のニーズの変化に対処するためのものです。

## Components of the MVVM Pattern
```
+-------------------+
|       Model       |
|  ドメインモデル（オブジェクト指向）またはデータアクセス層  |
|  （データ中心）で、実際の状態内容を表す  |
+-------------------+
          |
          | データを提供
          ▼
+-------------------+
|     ViewModel     |
|  ビューの抽象化で、公開されたプロパティとコマンドを公開し、  |
|  ビューとデータバインダーの間で通信を行う  |
+-------------------+
          |
          | 双方向バインディング
          ▲
+-------------------+
|       View        |
|  ユーザーが画面上で見る構造、レイアウト、および外観（UI）  |
+-------------------+
```
1. **Model**: モデルとは、実際の状態内容を表すドメインモデル（オブジェクト指向）、または内容を表すデータアクセス層（データ中心）を指します。
2. **View**: MVCやMVPパターンと同じように、ビューはユーザーが画面上で見る構造、レイアウト、および外観（UI）です。
3. **ViewModel**: ビューモデルは、公開されたプロパティとコマンドを公開するビューの抽象化です。MVVMにはMVCパターンにおけるコントローラーも、MVPパターンにおけるプレゼンターもありませんが、バインダーがあります。ビューモデルでは、バインダーがビューとデータバインダーの間で通信を行います。
4. **Binder**: 宣言的なデータとコマンドバインディングはMVVMパターンに暗黙的に含まれています。Microsoftのソリューションスタックでは、バインダーはXAMLと呼ばれるマークアップ言語です。バインダーにより、開発者はビューモデルとビューを同期させるための定型的なロジックを書くことから解放されます。Microsoftスタックの外で実装される場合、宣言的なデータバインディング技術の登場は、このパターンを実装する上での重要な要素です。

## Advantages of MVVM
MVCパターンと同じように、MVVMパターンの主な目的はビュー（View）とモデル（Model）を分離することであり、いくつかの大きな利点があります：
1. **Low Coupling**: ビュー（View）はModelに関係なく独立して変更および修正ができます。一つのViewModelは異なる「View」にバインドすることができます。Viewが変更されても、Modelは変わらず、Modelが変更されても、Viewも変わらないようにすることができます。
2. **Reusability**: いくつかのビューロジックをViewModelに置くことができ、多くのビューがこのビューロジックを再利用することができます。
3. **Independent Development**: 開発者はビジネスロジックとデータ（ViewModel）の開発に専念することができ、デザイナーはページデザインに専念することができます。Expression Blendを使用すると、インターフェイスを簡単に設計し、xamlコードを生成することができます。
4. **Testability**: インターフェイスはこれまで比較的テストしにくいものでしたが、現在ではViewModelに対してテストを書くことができます。

## Differences between MVVM and MVP
mvvmパターンはPresenerをViewModelに改名しており、基本的にはMVPパターンとまったく同じです。唯一の違いは、双方向バインディング（data-binding）を使用していることです：Viewの変化は自動的にViewModelに反映され、逆もまた同じです。このようにして、開発者はイベントを受け取り、Viewを更新するという作業を処理する必要がなくなり、フレームワークが代わりに行ってくれます。 



**[Leapcell: The Best of Serverless Web Hosting](https://leapcell.io/)**

最後に、Webサービスをデプロイするのに最適なプラットフォームをおすすめします：**[Leapcell](https://leapcell.io/)**

[![brandpic7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4075813/710fefdf-ed99-48d8-b4e9-32244aa889fe.png)](https://leapcell.io/)


### 🚀 Build with Your Favorite Language  
JavaScript、Python、Go、またはRustで簡単に開発できます。  

### 🌍 Deploy Unlimited Projects for Free  
使用する分だけ支払います—リクエストがなければ、請求もありません。  

### ⚡ Pay-as-You-Go, No Hidden Costs  
アイドル料金はなく、シームレスにスケーラビリティがあります。  

[![Frame3-withpadding2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4075813/a89720fe-e9db-44c5-bffa-d639a6ec3459.png)](https://leapcell.io/)


[📖 Explore Our Documentation](https://docs.leapcell.io/)  

🔹 Follow us on Twitter: [@LeapcellHQ](https://x.com/LeapcellHQ)