Model View ViewModel - 版の履歴

2025年3月5日 (水) 06:20にAdministratorによる

2025-03-05T06:20:13Z

← 古い版		2025年3月5日 (水) 06:20時点における版
63行目:		63行目:
	** [[Model View ViewModel]]		** [[Model View ViewModel]]

	~~== 参考文献 ==~~		[[category: デザインパターン]]
	~~{{reflist}}~~

	~~{{stub}}~~

Administrator: /* 利点と欠点 */

2023-07-28T01:42:12Z

利点と欠点

← 古い版		2023年7月28日 (金) 01:42時点における版
6行目:		6行目:
	== 利点と欠点 ==		== 利点と欠点 ==
	=== 利点 ===		=== 利点 ===
	* ~~UIを仮想化するので単~~[[~~体テスト~~]]がしやすい		* UIを仮想化するので[[単体テスト]]がしやすい

	=== 欠点 ===		=== 欠点 ===

Administrator: /* 総評 */

2023-07-28T01:41:17Z

総評

← 古い版		2023年7月28日 (金) 01:41時点における版
14行目:		14行目:

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

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

Administrator: /* 総評 */

2023-07-28T01:40:38Z

総評

← 古い版		2023年7月28日 (金) 01:40時点における版
14行目:		14行目:

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

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

2023年7月28日 (金) 01:39にAdministratorによる

2023-07-28T01:39:27Z

← 古い版		2023年7月28日 (金) 01:39時点における版
1行目:		1行目:
	'''Model View ViewModel'''（略称：MVVM）とは、[[ユーザーインターフェイス]]（[[UI]]）を構築するための[[デザインパターン]]~~のひとつである。~~		'''Model View ViewModel'''（略称：MVVM）とは、[[ユーザーインターフェイス]]（[[UI]]）を構築するための[[デザインパターン]]のひとつです。

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

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

			=== 欠点 ===
			* [[ハローワールド]]すら[[ソースコード]]が壮大になる
			** プログラマーやデザイナーの学習コストが大きい
			** [[ソースコード]]の量に比例して[[バグ]]の量も増える。ただし[[バグ]]は潰しやすい。

			=== 総評 ===
			高層ビルのような壮大なアプリを建造する際の技法のようなものであり、日曜プログラマーが犬小屋のような小物アプリを作るのに使うような代物ではない。

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

153.220.119.198: /* 主なMVVMフレームワーク */

2015-03-09T07:42:45Z

主なMVVMフレームワーク

← 古い版		2015年3月9日 (月) 07:42時点における版
42行目:		42行目:
	*:知らん。		*:知らん。
	*[[ReactiveProperty]]		*[[ReactiveProperty]]
	*:~~知らん。日本製らしいがXamarin~~.~~Formsネタばかりで~~[[Xamarin.iOS]]~~での使い方がわからなかったから1時間で諦めた。~~		*:知らん。日本製らしいが[[Xamarin.Forms]]ネタばかりで[[Xamarin.iOS]]での使い方がわからなかったので30分で諦めた。
	===JavaScript===		===JavaScript===
	* [[knockout.js]]		* [[knockout.js]]

2015年3月9日 (月) 07:42に153.220.119.198による

2015-03-09T07:42:13Z

← 古い版		2015年3月9日 (月) 07:42時点における版
1行目:		1行目:
	'''Model View ViewModel'''（略称：MVVM）とは、[[ユーザーインターフェイス]]（[[UI]]）を構築するための[[デザインパターン]]のひとつである。		'''Model View ViewModel'''（略称：MVVM）とは、[[ユーザーインターフェイス]]（[[UI]]）を構築するための[[デザインパターン]]のひとつである。

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

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

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

	=== ビューモデル（ViewModel） ===		=== ビューモデル（ViewModel） ===
	~~MVVMにおけるビューモデルとは、操作とデータに対する純粋な表示を受け持つ部分である。~~		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]]

	~~; 主なMVVMフレームワーク~~
	* [[WPF]]
	* [[knockout.js]]

	== 参考文献 ==		== 参考文献 ==
	{{reflist}}		{{reflist}}

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

	{{stub}}		{{stub}}

126.212.129.194: /* ビュー（View） */

2014-03-18T15:17:12Z

ビュー（View）

← 古い版		2014年3月18日 (火) 15:17時点における版
26行目:		26行目:
	ビューモデルから得た情報を表示したり、ビューモデルにコマンドと呼ばれる操作を送ることに特化する。		ビューモデルから得た情報を表示したり、ビューモデルにコマンドと呼ばれる操作を送ることに特化する。

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

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

2013年6月20日 (木) 17:34に1.112.81.168による

2013-06-20T17:34:39Z

← 古い版		2013年6月20日 (木) 17:34時点における版
1行目:		1行目:
	'''Model View ViewModel'''~~（MVVM）とは、~~[[ユーザーインターフェイス]]（[[UI]]）を構築するための[[デザインパターン]]のひとつである。		'''Model View ViewModel'''（略称：MVVM）とは、[[ユーザーインターフェイス]]（[[UI]]）を構築するための[[デザインパターン]]のひとつである。

	勉強中。		勉強中。

	=== MVVMの構造 ===		== MVVMの構造 ==
	== モデル（Model） ==		=== モデル（Model） ===
	~~モデルはアプリケーションのデータを格納する部分。~~		MVVMにおけるモデルとは、[[ビジネスロジック]]を記述する部分である。
	~~ビジネスドメインの操作と~~[[~~データ~~]]~~からなる~~[[~~オブジェクト~~]]~~で、UIからは独立している。~~		いわゆる[[MVC]]パターンのモデルと同じものである。

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

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

	ここで注意しなければならないのはビューモデルはUI自体ではないという点。たとえばビューモデルはボタンやスタイルなどの視覚的な機能を持たない。あくまでUIを抽象化したものである。さらにビューモデルはビューの参照を持たない。[[単体テスト]]がよりいっそう捗る。		ビューモデルは仮想のUI（ビュー）であり、たとえば"ファイルに保存する"などという「操作」をメソッド化し（コマンドと呼ばれる）、その結果は単純にメンバ変数などに反映させておくというものである。

	~~== ビュー（View） ==~~		MVCパターンにおけるビューでは、"ファイルに保存する"という動作がメインメニューとツールバー、さらにはショートカットキーの3通りもある場合には、[[ソースコード]]の書き方次第ではそれぞれに重複して似たようなメソッドが定義されることもしばしばあるが、MVVMパターンではUIを仮想化しているため動作はひとつとなる。
	~~ビューは、ビューモデルから得た情報を表示したり、ビューモデルにコマンドと呼ばれる操作を送ることに特化する。~~

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

			こうすることによって[[単体テスト]]が桁違いに捗ること間違いなし。

			=== ビュー（View） ===
			MVVMにおけるビューとは、仮想のUIであるビューモデルに肉付けを行い、実際のUIを実現する部分である。
			ビューモデルから得た情報を表示したり、ビューモデルにコマンドと呼ばれる操作を送ることに特化する。

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

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

			極端に言えば、[[パソコン]]向けのUI（ビュー）と[[iPhone]]向けのUI（ビュー）が別物であっても、ビューモデルに定義される「操作」は同一にできるという話である。ただし私の知る限りではMVVMは単体テストを捗らさせる目的で使っているものばかりであり、マルチプラットフォームのために使用しているという事例は実際には見たことも聞いたこともない。

	== 関連項目 ==		== 関連項目 ==
24行目:		36行目:
	** [[Model View Controller]]		** [[Model View Controller]]
	** [[Model View ViewModel]]		** [[Model View ViewModel]]

			; 主なMVVMフレームワーク
			* [[WPF]]
			* [[knockout.js]]

	== 参考文献 ==		== 参考文献 ==
	~~<references/>~~		{{reflist}}

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

	{{stub}}		{{stub}}

imported>Administrator: /* 関連項目 */

2012-04-10T07:19:34Z

← 古い版		2012年4月10日 (火) 07:19時点における版
21行目:		21行目:

	== 関連項目 ==		== 関連項目 ==
	* [[Model View Controller]]		* [[デザイン・パターン]]
			** [[Model View Controller]]
			** [[Model View ViewModel]]

	== 参考文献 ==		== 参考文献 ==
	<references/>		<references/>