「Model View ViewModel」の版間の差分
Administrator (トーク | 投稿記録) (→利点と欠点) |
|||
(2人の利用者による、間の4版が非表示) | |||
1行目: | 1行目: | ||
− | '''Model View ViewModel'''(略称:MVVM)とは、[[ユーザーインターフェイス]]([[UI]])を構築するための[[デザインパターン]] | + | '''Model View ViewModel'''(略称:MVVM)とは、[[ユーザーインターフェイス]]([[UI]])を構築するための[[デザインパターン]]のひとつです。 |
==概要== | ==概要== | ||
− | 最近流行の[[仮想化]]を[[プログラミング]]における[[デザインパターン]] | + | 最近流行の[[仮想化]]を[[プログラミング]]における[[デザインパターン]]として取り入れたものです。大雑把にいえば、実体の無い「仮想的なUI」である「ビューモデル」を用意して、そこで動作検証を済ませようというものです。 |
+ | |||
+ | == 利点と欠点 == | ||
+ | === 利点 === | ||
+ | * UIを仮想化するので[[単体テスト]]がしやすい | ||
+ | |||
+ | === 欠点 === | ||
+ | * [[ハローワールド]]すら[[ソースコード]]が壮大になる | ||
+ | ** プログラマーやデザイナーの学習コストが大きい | ||
+ | ** [[ソースコード]]の量に比例して[[バグ]]の量も増える。ただし[[バグ]]は潰しやすい。 | ||
+ | |||
+ | === 総評 === | ||
+ | [[ITドカタ]]たちが高層ビルのような壮大な[[システム]]を建造する際の技法であり、[[日曜プログラマー]]が犬小屋のような小物アプリを作る際に使うような代物ではない。まさに適材適所であり、小物であれば[[MVC]]の方がいいです。 | ||
== MVVMの構造 == | == MVVMの構造 == | ||
42行目: | 54行目: | ||
*:知らん。 | *:知らん。 | ||
*[[ReactiveProperty]] | *[[ReactiveProperty]] | ||
− | *: | + | *:知らん。日本製らしいが[[Xamarin.Forms]]ネタばかりで[[Xamarin.iOS]]での使い方がわからなかったので30分で諦めた。 |
===JavaScript=== | ===JavaScript=== | ||
* [[knockout.js]] | * [[knockout.js]] |
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分で諦めた。