「Model View ViewModel」の版間の差分
| 1行目: | 1行目: | ||
'''Model View ViewModel'''（略称：MVVM）とは、[[ユーザーインターフェイス]]（[[UI]]）を構築するための[[デザインパターン]]のひとつである。 | '''Model View ViewModel'''（略称：MVVM）とは、[[ユーザーインターフェイス]]（[[UI]]）を構築するための[[デザインパターン]]のひとつである。 | ||
| − | + | ==概要== | |
| + | 最近流行の[[仮想化]]を[[プログラミング]]における[[デザインパターン]]として取り入れたものである。大雑把にいえば実体の無い仮想的なUIである「ビューモデル」を用意して、そこで動作検証を全部済ませようと思いついたそうだ。 | ||
== MVVMの構造 == | == MVVMの構造 == | ||
| 8行目: | 9行目: | ||
いわゆる[[MVC]]パターンのモデルと同じものである。 | いわゆる[[MVC]]パターンのモデルと同じものである。 | ||
| − | プレゼンテーション層、ドメイン層、データソース層の3層からなる[[ドメイン駆動設計]] | + | プレゼンテーション層、ドメイン層、データソース層の3層からなる[[ドメイン駆動設計]]（通称：DDD）の思想に乗っ取れば、モデルはドメイン層に相当するものであるが、一般的にはその下のデータソース層までを含む。それどころかデータソース層に[[SQL]]などを用いて読み書きしているだけというシステムも多い。 |
=== ビューモデル（ViewModel） === | === ビューモデル（ViewModel） === | ||
| − | + | MVVMにおけるビューモデルとは、操作と[[データ]]に対する純粋な表示を受け持つ部分である。 | |
大雑把にいえば「UI（ビュー）を仮想化（抽象化）したもの」である。 | 大雑把にいえば「UI（ビュー）を仮想化（抽象化）したもの」である。 | ||
| 31行目: | 32行目: | ||
極端に言えば、[[パソコン]]向けのUI（ビュー）と[[iPhone]]向けのUI（ビュー）が別物であっても、ビューモデルに定義される「操作」は同一にできるという話である。ただし私の知る限りではMVVMは単体テストを捗らさせる目的で使っているものばかりであり、マルチプラットフォームのために使用しているという事例は実際には見たことも聞いたこともない。 | 極端に言えば、[[パソコン]]向けのUI（ビュー）と[[iPhone]]向けのUI（ビュー）が別物であっても、ビューモデルに定義される「操作」は同一にできるという話である。ただし私の知る限りではMVVMは単体テストを捗らさせる目的で使っているものばかりであり、マルチプラットフォームのために使用しているという事例は実際には見たことも聞いたこともない。 | ||
| + | |||
| + | ==主なMVVMフレームワーク== | ||
| + | ===.NET=== | ||
| + | *[[WPF]] | ||
| + | *:実質的に[[Windows]]でしか使えない。[[デバッグ]]が容易になるが[[コード]]量が増えるので相殺され意味なし。 | ||
| + | *[[MvvmCross]] | ||
| + | *:定番。[[NuGet]]が用意されてなくて若干不便。 | ||
| + | *[[ReactiveUI]] | ||
| + | *:知らん。 | ||
| + | *[[ReactiveProperty]] | ||
| + | *:知らん。日本製らしいがXamarin.Formsネタばかりで[[Xamarin.iOS]]での使い方がわからなかったから1時間で諦めた。 | ||
| + | ===JavaScript=== | ||
| + | * [[knockout.js]] | ||
== 関連項目 == | == 関連項目 == | ||
| 36行目: | 50行目: | ||
** [[Model View Controller]] | ** [[Model View Controller]] | ||
** [[Model View ViewModel]] | ** [[Model View ViewModel]] | ||
| − | |||
| − | |||
| − | |||
| − | |||
== 参考文献 == | == 参考文献 == | ||
{{reflist}} | {{reflist}} | ||
| − | |||
| − | |||
{{stub}} | {{stub}} | ||
2015年3月9日 (月) 07:42時点における版
Model View ViewModel（略称：MVVM）とは、ユーザーインターフェイス（UI）を構築するためのデザインパターンのひとつである。
目次
概要
最近流行の仮想化をプログラミングにおけるデザインパターンとして取り入れたものである。大雑把にいえば実体の無い仮想的なUIである「ビューモデル」を用意して、そこで動作検証を全部済ませようと思いついたそうだ。
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での使い方がわからなかったから1時間で諦めた。
JavaScript
関連項目
参考文献
|
この項目「Model View ViewModel」は、まだ書きかけの項目です。加筆、訂正などをして下さる協力者を求めています。 |
| このテンプレートは分野別のスタブテンプレート（Monobook:スタブカテゴリ参照）に変更することが望まれています。 | |
