「Model View ViewModel」の版間の差分
imported>Administrator (ページの作成:「'''Model View ViewModel'''(MVVM)とは、ユーザーインターフェイス(UI)を構築するためのデザインパターンのひとつであ...」) |
Administrator (トーク | 投稿記録) (→利点と欠点) |
||
(5人の利用者による、間の10版が非表示) | |||
1行目: | 1行目: | ||
− | '''Model View ViewModel''' | + | '''Model View ViewModel'''(略称:MVVM)とは、[[ユーザーインターフェイス]]([[UI]])を構築するための[[デザインパターン]]のひとつです。 |
− | + | ==概要== | |
+ | 最近流行の[[仮想化]]を[[プログラミング]]における[[デザインパターン]]として取り入れたものです。大雑把にいえば、実体の無い「仮想的なUI」である「ビューモデル」を用意して、そこで動作検証を済ませようというものです。 | ||
− | === | + | == 利点と欠点 == |
− | == | + | === 利点 === |
− | + | * UIを仮想化するので[[単体テスト]]がしやすい | |
− | |||
− | [[ | + | === 欠点 === |
+ | * [[ハローワールド]]すら[[ソースコード]]が壮大になる | ||
+ | ** プログラマーやデザイナーの学習コストが大きい | ||
+ | ** [[ソースコード]]の量に比例して[[バグ]]の量も増える。ただし[[バグ]]は潰しやすい。 | ||
− | == | + | === 総評 === |
− | + | [[ITドカタ]]たちが高層ビルのような壮大な[[システム]]を建造する際の技法であり、[[日曜プログラマー]]が犬小屋のような小物アプリを作る際に使うような代物ではない。まさに適材適所であり、小物であれば[[MVC]]の方がいいです。 | |
− | + | == MVVMの構造 == | |
+ | === モデル(Model) === | ||
+ | MVVMにおけるモデルとは、[[ビジネスロジック]]を記述する部分である。 | ||
+ | いわゆる[[MVC]]パターンのモデルと同じものである。 | ||
− | + | プレゼンテーション層、ドメイン層、データソース層の3層からなる[[ドメイン駆動設計]](通称:DDD)の思想に乗っ取れば、モデルはドメイン層に相当するものであるが、一般的にはその下のデータソース層までを含む。それどころかデータソース層に[[SQL]]などを用いて読み書きしているだけというシステムも多い。 | |
− | |||
− | [[MVC]] | + | === ビューモデル(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]] | ||
+ | ** [[Model View ViewModel]] | ||
+ | |||
== 参考文献 == | == 参考文献 == | ||
− | + | {{reflist}} | |
− | + | ||
+ | {{stub}} |
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分で諦めた。