「Model View ViewModel」の版間の差分
Administrator (トーク | 投稿記録) |
Administrator (トーク | 投稿記録) (→利点と欠点) |
||
(同じ利用者による、間の2版が非表示) | |||
6行目: | 6行目: | ||
== 利点と欠点 == | == 利点と欠点 == | ||
=== 利点 === | === 利点 === | ||
− | * | + | * UIを仮想化するので[[単体テスト]]がしやすい |
=== 欠点 === | === 欠点 === | ||
14行目: | 14行目: | ||
=== 総評 === | === 総評 === | ||
− | + | [[ITドカタ]]たちが高層ビルのような壮大な[[システム]]を建造する際の技法であり、[[日曜プログラマー]]が犬小屋のような小物アプリを作る際に使うような代物ではない。まさに適材適所であり、小物であれば[[MVC]]の方がいいです。 | |
== MVVMの構造 == | == MVVMの構造 == |
2023年7月28日 (金) 01:42時点における最新版
Model View ViewModel(略称:MVVM)とは、ユーザーインターフェイス(UI)を構築するためのデザインパターンのひとつです。
目次
概要[編集 | ソースを編集]
最近流行の仮想化をプログラミングにおけるデザインパターンとして取り入れたものです。大雑把にいえば、実体の無い「仮想的なUI」である「ビューモデル」を用意して、そこで動作検証を済ませようというものです。
利点と欠点[編集 | ソースを編集]
利点[編集 | ソースを編集]
- UIを仮想化するので単体テストがしやすい
欠点[編集 | ソースを編集]
総評[編集 | ソースを編集]
ITドカタたちが高層ビルのような壮大なシステムを建造する際の技法であり、日曜プログラマーが犬小屋のような小物アプリを作る際に使うような代物ではない。まさに適材適所であり、小物であればMVCの方がいいです。
MVVMの構造[編集 | ソースを編集]
モデル(Model)[編集 | ソースを編集]
MVVMにおけるモデルとは、ビジネスロジックを記述する部分である。 いわゆるMVCパターンのモデルと同じものである。
プレゼンテーション層、ドメイン層、データソース層の3層からなるドメイン駆動設計(通称:DDD)の思想に乗っ取れば、モデルはドメイン層に相当するものであるが、一般的にはその下のデータソース層までを含む。それどころかデータソース層にSQLなどを用いて読み書きしているだけというシステムも多い。
ビューモデル(ViewModel)[編集 | ソースを編集]
MVVMにおけるビューモデルとは、操作とデータに対する純粋な表示を受け持つ部分である。 大雑把にいえば「UI(ビュー)を仮想化(抽象化)したもの」である。
ビューモデルは仮想のUI(ビュー)であり、たとえば"ファイルに保存する"などという「操作」をメソッド化し(コマンドと呼ばれる)、その結果は単純にメンバ変数などに反映させておくというものである。
MVCパターンにおけるビューでは、"ファイルに保存する"という動作がメインメニューとツールバー、さらにはショートカットキーの3通りもある場合には、ソースコードの書き方次第ではそれぞれに重複して似たようなメソッドが定義されることもしばしばあるが、MVVMパターンではUIを仮想化しているため動作はひとつとなる。
さらにビューモデルはビューの参照を持たず、ビューがどうなっていようと知ったことではないというのが重要な要素のひとつである。
こうすることによって単体テストが桁違いに捗ること間違いなし。
ビュー(View)[編集 | ソースを編集]
MVVMにおけるビューとは、仮想のUIであるビューモデルに肉付けを行い、実際のUIを実現する部分である。 ビューモデルから得た情報を表示したり、ビューモデルにコマンドと呼ばれる操作を送ることに特化する。
大雑把な例であるが、一切装飾をしていないHTML(ビューモデル)に、壮大なCSSで装飾しJavaScriptでゴリゴリする(ビュー)ようなものである。
MVCパターンとの決定的な違いはこのビューであり、MVCではコントローラーがモデルとビューを結び付け、以降はビューとモデルが好き勝手にやっていたが、MVVMではビューが通信できるのはビューモデルだけである。
極端に言えば、パソコン向けのUI(ビュー)とiPhone向けのUI(ビュー)が別物であっても、ビューモデルに定義される「操作」は同一にできるという話である。ただし私の知る限りではMVVMは単体テストを捗らさせる目的で使っているものばかりであり、マルチプラットフォームのために使用しているという事例は実際には見たことも聞いたこともない。
主なMVVMフレームワーク[編集 | ソースを編集]
.NET[編集 | ソースを編集]
- WPF
- MvvmCross
- 定番。NuGetが用意されてなくて若干不便。
- ReactiveUI
- 知らん。
- ReactiveProperty
- 知らん。日本製らしいがXamarin.FormsネタばかりでXamarin.iOSでの使い方がわからなかったので30分で諦めた。