きっかけ

MVCとかMVVMとかクリーンアーキテクチャとかそれぞれどの部分の設計思想なのか分かりずらすぎるからまとめたいと思った。

注意事項
本記事は筆者が初学者として学んだ内容をまとめたものです。MVC、MVVM、MVPの解釈や各アーキテクチャとの対応関係について、厳密な定義と異なる可能性があります。

Webアプリケーションの構成

一般的にwebアプリケーションはwebサーバ, アプリケーションサーバ, DBサーバの３つで構成される。

そしてこのサーバの構成を3層アーキテクチャと呼ぶ。

アプリケーションサーバ内部の構成はどんなものがあるのかみていく。

ややこしいことに、サーバの構成と同じく3層アーキテクチャと呼ぶ。混同しないように注意。

システム全体を以下の3層に分ける。

各設計パターンとの対応例:

設計パターン	3層アーキテクチャでの対応例
MVC	`Controller` と `View` → プレゼンテーション層 `Model` → アプリケーション層（ビジネスロジック）
MVVM	`View` と `ViewModel` → プレゼンテーション層 `Model` → アプリケーション層（ビジネスロジック）
MVP	`View` と `Presenter` → プレゼンテーション層 `Model` → アプリケーション層（ビジネスロジック）

レイヤードアーキテクチャは、以下の4層でシステムを構成する。

各設計パターンとの対応例:

設計パターン	レイヤードアーキテクチャでの対応例
MVC	`Controller` → プレゼンテーション層 `Model` → ドメイン層 `View` → プレゼンテーション層
MVVM	`ViewModel` → プレゼンテーション層 `Model` → ドメイン層 `View` → プレゼンテーション層
MVP	`Presenter` → プレゼンテーション層 `Model` → ドメイン層 `View` → プレゼンテーション層

ヘキサゴナルアーキテクチャは、以下の要素で構成され、システムのコア（ドメイン）と外部との依存関係を明確に分離する。

各設計パターンとの対応例:

設計パターン	ヘキサゴナルアーキテクチャでの対応例
MVC	`Model` → ドメイン層 `Controller` と `View` → アダプタ層（ポートを介してドメインと連携）
MVVM	`Model` → ドメイン層 `ViewModel` と `View` → アダプタ層
MVP	`Model` → ドメイン層 `Presenter` と `View` → アダプタ層

オニオンアーキテクチャは、システムの中心にドメイン（コアビジネスロジック）を据え、その周囲にアプリケーション層、インフラ層、プレゼンテーション層を配置して依存関係の逆転を実現する。

各設計パターンとの対応例（※Controller/Presenter/ViewModelはアプリケーション層に位置づける場合もあります）:

設計パターン	オニオンアーキテクチャでの対応例
MVC	`Controller` → アプリケーション層 `Model` → ドメイン層 `View` → プレゼンテーション層
MVVM	`ViewModel` → アプリケーション層 `Model` → ドメイン層 `View` → プレゼンテーション層
MVP	`Presenter` → アプリケーション層 `Model` → ドメイン層 `View` → プレゼンテーション層

クリーンアーキテクチャは、依存関係の逆転原則に基づいてシステムを以下の4層に分割し、内側ほど抽象度が高くビジネスロジックに集中する。

各設計パターンとの対応例:

設計パターン	クリーンアーキテクチャでの対応例
MVC	`Controller` → インターフェースアダプタ層 `Model` はエンティティ層とユースケース層にまたがる `View` → フレームワーク＆ドライバ層
MVVM	`ViewModel` → インターフェースアダプタ層 `Model` はエンティティ層とユースケース層にまたがる `View` → フレームワーク＆ドライバ層
MVP	`Presenter` → インターフェースアダプタ層 `Model` はエンティティ層とユースケース層にまたがる `View` → フレームワーク＆ドライバ層

クリーンアーキテクチャをより詳しく