「Model View ViewModel」の版間の差分

編集の要約なし
編集の要約なし
 
(3人の利用者による、間の7版が非表示)
1行目: 1行目:
'''Model View ViewModel'''(略称:MVVM)とは、[[ユーザーインターフェイス]]([[UI]])を構築するための[[デザインパターン]]のひとつである。
'''Model View ViewModel'''(略称:MVVM)とは、[[ユーザーインターフェイス]]([[UI]])を構築するための[[デザインパターン]]のひとつです。


勉強中。
==概要==
最近流行の[[仮想化]]を[[プログラミング]]における[[デザインパターン]]として取り入れたものです。大雑把にいえば、実体の無い「仮想的なUI」である「ビューモデル」を用意して、そこで動作検証を済ませようというものです。
 
== 利点と欠点 ==
=== 利点 ===
* UIを仮想化するので[[単体テスト]]がしやすい
 
=== 欠点 ===
* [[ハローワールド]]すら[[ソースコード]]が壮大になる
** プログラマーやデザイナーの学習コストが大きい
** [[ソースコード]]の量に比例して[[バグ]]の量も増える。ただし[[バグ]]は潰しやすい。
 
=== 総評 ===
[[ITドカタ]]たちが高層ビルのような壮大な[[システム]]を建造する際の技法であり、[[日曜プログラマー]]が犬小屋のような小物アプリを作る際に使うような代物ではない。まさに適材適所であり、小物であれば[[MVC]]の方がいいです。


== MVVMの構造 ==
== MVVMの構造 ==
8行目: 21行目:
いわゆる[[MVC]]パターンのモデルと同じものである。
いわゆる[[MVC]]パターンのモデルと同じものである。


プレゼンテーション層、ドメイン層、データソース層の3層からなる[[ドメイン駆動設計]](通称:DDD)の思想に乗っ取れば、モデルはドメイン層に相当するものであるが、一般的にはその下のデータソース層までを含む。それどころかデータソース層にSQLなどを用いて読み書きしているだけというシステムも多い。
プレゼンテーション層、ドメイン層、データソース層の3層からなる[[ドメイン駆動設計]](通称:DDD)の思想に乗っ取れば、モデルはドメイン層に相当するものであるが、一般的にはその下のデータソース層までを含む。それどころかデータソース層に[[SQL]]などを用いて読み書きしているだけというシステムも多い。


=== ビューモデル(ViewModel) ===
=== ビューモデル(ViewModel) ===
MVVMにおけるビューモデルとは、操作とデータに対する純粋な表示を受け持つ部分である。
MVVMにおけるビューモデルとは、操作と[[データ]]に対する純粋な表示を受け持つ部分である。
大雑把にいえば「UI(ビュー)を仮想化(抽象化)したもの」である。
大雑把にいえば「UI(ビュー)を仮想化(抽象化)したもの」である。


26行目: 39行目:
ビューモデルから得た情報を表示したり、ビューモデルにコマンドと呼ばれる操作を送ることに特化する。
ビューモデルから得た情報を表示したり、ビューモデルにコマンドと呼ばれる操作を送ることに特化する。


大雑把な例であるが、一切装飾をしていない[[HTML]](ビューモデル)に、壮大な[[CSS]]で装飾する(ビュー)ようなものである。
大雑把な例であるが、一切装飾をしていない[[HTML]](ビューモデル)に、壮大な[[CSS]]で装飾し[[JavaScript]]でゴリゴリする(ビュー)ようなものである。


[[MVC]]パターンとの決定的な違いはこのビューであり、MVCではコントローラーがモデルとビューを結び付け、以降はビューとモデルが好き勝手にやっていたが、MVVMではビューが通信できるのはビューモデルだけである。
[[MVC]]パターンとの決定的な違いはこのビューであり、MVCではコントローラーがモデルとビューを結び付け、以降はビューとモデルが好き勝手にやっていたが、MVVMではビューが通信できるのはビューモデルだけである。


極端に言えば、[[パソコン]]向けのUI(ビュー)と[[iPhone]]向けのUI(ビュー)が別物であっても、ビューモデルに定義される「操作」は同一にできるという話である。ただし私の知る限りではMVVMは単体テストを捗らさせる目的で使っているものばかりであり、マルチプラットフォームのために使用しているという事例は実際には見たことも聞いたこともない。
極端に言えば、[[パソコン]]向けのUI(ビュー)と[[iPhone]]向けのUI(ビュー)が別物であっても、ビューモデルに定義される「操作」は同一にできるという話である。ただし私の知る限りではMVVMは単体テストを捗らさせる目的で使っているものばかりであり、マルチプラットフォームのために使用しているという事例は実際には見たことも聞いたこともない。
==主なMVVMフレームワーク==
===.NET===
*[[WPF]]
*:実質的に[[Windows]]でしか使えない。[[デバッグ]]が容易になるが[[コード]]量が増えるので相殺され意味なし。
*[[MvvmCross]]
*:定番。[[NuGet]]が用意されてなくて若干不便。
*[[ReactiveUI]]
*:知らん。
*[[ReactiveProperty]]
*:知らん。日本製らしいが[[Xamarin.Forms]]ネタばかりで[[Xamarin.iOS]]での使い方がわからなかったので30分で諦めた。
===JavaScript===
* [[knockout.js]]


== 関連項目 ==
== 関連項目 ==
37行目: 63行目:
** [[Model View ViewModel]]
** [[Model View ViewModel]]


; 主なMVVMフレームワーク
[[category: デザインパターン]]
* [[WPF]]
* [[knockout.js]]
 
== 参考文献 ==
{{reflist}}
 
== 外部リンク ==
 
{{stub}}