「Model View ViewModel」の版間の差分

(5人の利用者による、間の11版が非表示)

1行目:

'''Model View ViewModel'''~~（MVVM）とは、~~[[ユーザーインターフェイス]]（[[UI]]）を構築するための[[デザインパターン]]~~のひとつである。~~

'''Model View ViewModel'''（略称：MVVM）とは、[[ユーザーインターフェイス]]（[[UI]]）を構築するための[[デザインパターン]]のひとつです。

~~勉強中。~~

==概要==

最近流行の[[仮想化]]を[[プログラミング]]における[[デザインパターン]]として取り入れたものです。大雑把にいえば、実体の無い「仮想的なUI」である「ビューモデル」を用意して、そこで動作検証を済ませようというものです。

=== ~~MVVMの構造~~ ===

== 利点と欠点 ==

== ~~モデル（Model）~~ ==

=== 利点 ===

~~モデルはアプリケーションのデータを格納する部分。~~

* UIを仮想化するので[[単体テスト]]がしやすい

~~ビジネスドメインの操作と[[データ]]からなる~~[[~~オブジェクト~~]]~~で、UIからは独立している。~~

[[~~MVC~~]]~~パターンのモデルと同じもの。~~

=== 欠点 ===

* [[ハローワールド]]すら[[ソースコード]]が壮大になる

** プログラマーやデザイナーの学習コストが大きい

** [[ソースコード]]の量に比例して[[バグ]]の量も増える。ただし[[バグ]]は潰しやすい。

== ~~ビューモデル（ViewModel）~~ ==

=== 総評 ===

~~ビューモデルは操作とデータに対する純粋な表示を受け持つ。~~

[[ITドカタ]]たちが高層ビルのような壮大な[[システム]]を建造する際の技法であり、[[日曜プログラマー]]が犬小屋のような小物アプリを作る際に使うような代物ではない。まさに適材適所であり、小物であれば[[MVC]]の方がいいです。

ここで注意しなければならないのはビューモデルはUI自体ではないという点。たとえばビューモデルはボタンやスタイルなどの視覚的な機能を持たない。あくまでUIを抽象化したものである。さらにビューモデルはビューの参照を持たない。[[~~単体テスト~~]]~~がよりいっそう捗る。~~

== MVVMの構造 ==

=== モデル（Model） ===

MVVMにおけるモデルとは、[[ビジネスロジック]]を記述する部分である。

いわゆる[[MVC]]パターンのモデルと同じものである。

~~== ビュー（View） ==~~

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

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

[[MVC]]パターンとの決定的な違いはこのビューであり、MVCではコントローラーがモデルとビューを結び付け、以降はビューとモデルが好き勝手にやっていたが、MVVMではビューが通信できるのはビューモデルだけである。例えるなら、MVCは直球な出会い系サイトで、MVVMは監視人がいて建前上は出会い系サイトではないSNSゲームサイトといったところか。

=== ビューモデル（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]]

*:実質的に[[Windows]]でしか使えない。[[デバッグ]]が容易になるが[[コード]]量が増えるので相殺され意味なし。

*[[MvvmCross]]

*:定番。[[NuGet]]が用意されてなくて若干不便。

*[[ReactiveUI]]

*:知らん。

*[[ReactiveProperty]]

*:知らん。日本製らしいが[[Xamarin.Forms]]ネタばかりで[[Xamarin.iOS]]での使い方がわからなかったので30分で諦めた。

===JavaScript===

* [[knockout.js]]

== 関連項目 ==

* [[Model View Controller]]

* [[デザイン・パターン]]

~~== 参考文献 ==~~

** [[Model View Controller]]

~~<references/>~~

** [[Model View ViewModel]]

~~== 外部リンク ==~~

[[category: デザインパターン]]

@@ 1行目: / 1行目: @@
-'''Model View ViewModel'''（MVVM）とは、[[ユーザーインターフェイス]]（[[UI]]）を構築するための[[デザインパターン]]のひとつである。
+'''Model View ViewModel'''（略称：MVVM）とは、[[ユーザーインターフェイス]]（[[UI]]）を構築するための[[デザインパターン]]のひとつです。
-勉強中。
+==概要==
+最近流行の[[仮想化]]を[[プログラミング]]における[[デザインパターン]]として取り入れたものです。大雑把にいえば、実体の無い「仮想的なUI」である「ビューモデル」を用意して、そこで動作検証を済ませようというものです。
-=== MVVMの構造 ===
+== 利点と欠点 ==
-== モデル（Model） ==
+=== 利点 ===
-モデルはアプリケーションのデータを格納する部分。
+* UIを仮想化するので[[単体テスト]]がしやすい
-ビジネスドメインの操作と[[データ]]からなる[[オブジェクト]]で、UIからは独立している。
-[[MVC]]パターンのモデルと同じもの。
+=== 欠点 ===
+* [[ハローワールド]]すら[[ソースコード]]が壮大になる
+** プログラマーやデザイナーの学習コストが大きい
+** [[ソースコード]]の量に比例して[[バグ]]の量も増える。ただし[[バグ]]は潰しやすい。
-== ビューモデル（ViewModel） ==
+=== 総評 ===
-ビューモデルは操作とデータに対する純粋な表示を受け持つ。
+[[ITドカタ]]たちが高層ビルのような壮大な[[システム]]を建造する際の技法であり、[[日曜プログラマー]]が犬小屋のような小物アプリを作る際に使うような代物ではない。まさに適材適所であり、小物であれば[[MVC]]の方がいいです。
-ここで注意しなければならないのはビューモデルはUI自体ではないという点。たとえばビューモデルはボタンやスタイルなどの視覚的な機能を持たない。あくまでUIを抽象化したものである。さらにビューモデルはビューの参照を持たない。[[単体テスト]]がよりいっそう捗る。
+== MVVMの構造 ==
+=== モデル（Model） ===
+MVVMにおけるモデルとは、[[ビジネスロジック]]を記述する部分である。
+いわゆる[[MVC]]パターンのモデルと同じものである。
-== ビュー（View） ==
+プレゼンテーション層、ドメイン層、データソース層の3層からなる[[ドメイン駆動設計]]（通称：DDD）の思想に乗っ取れば、モデルはドメイン層に相当するものであるが、一般的にはその下のデータソース層までを含む。それどころかデータソース層に[[SQL]]などを用いて読み書きしているだけというシステムも多い。
-ビューは、ビューモデルから得た情報を表示したり、ビューモデルにコマンドと呼ばれる操作を送ることに特化する。
-[[MVC]]パターンとの決定的な違いはこのビューであり、MVCではコントローラーがモデルとビューを結び付け、以降はビューとモデルが好き勝手にやっていたが、MVVMではビューが通信できるのはビューモデルだけである。例えるなら、MVCは直球な出会い系サイトで、MVVMは監視人がいて建前上は出会い系サイトではないSNSゲームサイトといったところか。
+=== ビューモデル（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]]
+*:実質的に[[Windows]]でしか使えない。[[デバッグ]]が容易になるが[[コード]]量が増えるので相殺され意味なし。
+*[[MvvmCross]]
+*:定番。[[NuGet]]が用意されてなくて若干不便。
+*[[ReactiveUI]]
+*:知らん。
+*[[ReactiveProperty]]
+*:知らん。日本製らしいが[[Xamarin.Forms]]ネタばかりで[[Xamarin.iOS]]での使い方がわからなかったので30分で諦めた。
+===JavaScript===
+* [[knockout.js]]
 == 関連項目 ==
-* [[Model View Controller]]
+* [[デザイン・パターン]]
-== 参考文献 ==
+** [[Model View Controller]]
-<references/>
+** [[Model View ViewModel]]
-== 外部リンク ==
+[[category: デザインパターン]]