Angular開発メモ

調べたことを記録しておきます。

【MVVMアーキテクチャ比較】Angular・Vue・React・Flutterはどれが向いてる？

アプリのアーキテクチャ設計において、MVVM（Model-View-ViewModel）はよく採用される選択肢の一つ。
特に画面とロジックを綺麗に分離したいとき、MVVMの構造はとても役立ちます。

今回は人気の4大フロントエンド／モバイルフレームワーク
Angular / Vue / React / Flutter を、MVVM視点で比較してみました。

そもそもMVVMとは？

MVVMとは以下の3つの責務に分ける設計パターンです。

層 役割
Model データ層（API、DBなど）
View UI層。ユーザーとのやりとり
ViewModel UIロジック・状態管理（ViewとModelの仲介）

ポイント：Viewは状態を「表示するだけ」。ロジックはViewModelに集約するのが理想です。

AngularはMVVMに向いている？

✅ 特徴

  • .html（テンプレート）と .ts（ロジック）が分かれている
  • 双方向バインディング（[(ngModel)]）が組み込み
  • データとUIが自然に分離される構造
// my.component.ts
export class MyComponent {
  message = 'Hello';
}
<!-- my.component.html -->
<p>{{ message }}</p>

💬 結論

AngularはMVVMの構造をそのまま自然に実現できるフレームワーク。
特別な工夫をしなくても、ViewとViewModelが分かれた形になるので、非常にMVVM向きです。

VueはMVVMに向いている？

✅ 特徴

  • .vue ファイルに template・script・style が分離
  • data, computed, methods, watch によってロジックを整理
  • バインディング構文が豊富（v-model, v-bind, v-on など）
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello'
    }
  }
}
</script>

📘 補足

Vueは公式でも「MVVMインスパイア」であることを明言していました（v2時代）。
Vue 3以降はComposition APIで構造が柔軟になりましたが、MVVMっぽい設計は依然としてしやすいです。

💬 結論

VueはMVVMに非常に向いている。テンプレートとロジックの分離が明確で、状態とUIの結びつきも強すぎない。

ReactはMVVMに向いている？

✅ 特徴

  • JSXでUIをコードで記述（UIとロジックが同じ場所にある）
  • 状態管理は useState, useReducer, Context, Redux など多様
  • アーキテクチャの自由度が高い
function App() {
  const [message, setMessage] = useState('Hello');
  return <p>{message}</p>;
}

🤔 注意点

  • 状態とUIが密結合しやすく、ViewとViewModelが混ざりやすい
  • Reduxなどを使って状態を切り出せば、MVVMに近づける

💬 結論

ReactはデフォルトではMVVM向きではないけど、状態管理を導入すればMVVM的に設計可能。
ただし、「設計ルールを自分で作る必要がある」のが前提です。

FlutterはMVVMに向いている？

✅ 特徴

  • Widget が状態とUIを自己完結
  • 状態管理（Provider, Riverpod, BLoCなど）で責務分離可能
  • ライフサイクルも StatefulWidget 内で完結する
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  String message = 'Hello';
  @override
  Widget build(BuildContext context) {
    return Text(message);
  }
}

🤔 注意点

  • build() にロジックが入りやすく、ViewとViewModelが一体化しやすい
  • 状態管理ツールを使えば責務分離できるが、明示的な設計が必要

💬 結論

FlutterはMVVMを意識しないと実現しにくい。
ただし、RiverpodやProviderでViewModelを切り出せば、かなり近い構造は作れる。

まとめ：MVVMとの相性比較

フレームワーク MVVMとの親和性 理由
Angular ◎ デフォルトでViewとViewModelが分離
Vue ◎ 公式もMVVM志向。構造が分かりやすい
React △ 設計次第。状態管理が鍵
Flutter △ 状態管理を導入すれば近づけるが、自力での分離が必要

おわりに

MVVMを採用するかどうかは、フレームワークの特性とプロジェクトの規模・メンバーの習熟度によっても変わってきます。

AngularやVueは自然とMVVMっぽくなるので、設計ルールを細かく決めずに始めたいチームに向いています。
ReactやFlutterは自由度が高い分、設計力が問われるけど、MVVM的に構成することも十分可能です。

「このプロジェクト、MVVMでいくべき？」と悩んだときの参考になればうれしいです！