Downloaded 22 times
![[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://cdn.slidesharecdn.com/ss_thumbnails/net20122asp-netmvc4beta-120225025400-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Mvc
- 1.
- 2.
- 3.
- 4. こんにちは。あもです。 職業 旅人副業 プログラマ Python,PHP, CoffeeScript, JavaScript, Objective-C など amoO_O@Twitter
- 5. こんにちは。あもです。 職業 旅人副業 プログラマ Python,PHP, CoffeeScript, JavaScript, Objective-C など amoO_O@Twitter 求職中（年明け〜）
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14. クライアントサイド Controller ViewModel よくある Web アプリケーションのMVC フレームワーク …
- 15.
- 16.
- 17.
- 18. クライアントサイド Controller ViewModel MVC アーキテクチャに関する我々の誤解 ・ このアーキテクチャは、MVCアーキテクチャにおいて説明される Model, View, Controller という 3つの要素と た ま た ま 同 じ 名 前 を 使 っ て し ま っ て い る が、全く異なるアーキテクチャ・パターンである。
- 19.
- 20. MVC アーキテクチャのこころ ・ TrygveReenskaugが考案し、SmallTalk-80 に実装されたアイデア
- 21. MVC アーキテクチャのこころ ・ TrygveReenskaugが考案し、SmallTalk-80 に実装されたアイデア ・ Domain Objects … 現実世界に関する認識をモデリングしたもの（Model） ・ 次の 2 つを明確に分離すること（Separated Presentation）： ・ Presentation Objects … ユーザーが実際に目にする GUI エレメント Domain Objects Presentation Objects Separated Presentation Pattern
- 22. MVC アーキテクチャのこころ ・ TrygveReenskaugが考案し、SmallTalk-80 に実装されたアイデア ・ Domain Objects … 現実世界に関する認識をモデリングしたもの（Model） ・ 次の 2 つを明確に分離すること（Separated Presentation）： ・ Presentation Objects … ユーザーが実際に目にする GUI エレメント ・ MVC では、更に Presentation Object を次の 2 つの関心事に分離している： ・ Controller … Model を操作するための要素 ・ View … Model を表示するための要素 Domain Objects Model Presentation Objects View Controller Separated Presentation Pattern MVC Pattarn
- 23.
- 24. ■ 内部状態 ・ モード：冷房 ・温度：22℃ ・ 湿度：40% ・ 風量：3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる／下げる ・ 湿度上げる／下げる ・ 風量強める／弱める システムの内部状態とアクションを Model と言う エアコンモデル
- 25. 22℃ Model を表示する機構を Viewと言う。 I/O ■ 内部状態 ・ モード：冷房 ・ 温度：22℃ ・ 湿度：40% ・ 風量：3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる／下げる ・ 湿度上げる／下げる ・ 風量強める／弱める エアコンモデル
- 26. 22℃ Model を更新する機構を Controllerと言う I/O ■ 内部状態 ・ モード：冷房 ・ 温度：22℃ ・ 湿度：40% ・ 風量：3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる／下げる ・ 湿度上げる／下げる ・ 風量強める／弱める エアコンモデル
- 27. 22℃ MVC アーキテクチャの3大要素 ■ 内部状態 ・モード：冷房 ・ 温度：22℃ ・ 湿度：40% ・ 風量：3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる／下げる ・ 湿度上げる／下げる ・ 風量強める／弱める エアコンモデル Controller View Model
- 28. User が Controllerを使用する 22℃ エアコンモデル ■ 内部状態 ・ モード：冷房 ・ 温度：22℃ ・ 湿度：40% ・ 風量：3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる／下げる ・ 湿度上げる／下げる ・ 風量強める／弱める
- 29. Controller が Modelのアクションを実行する 22℃ エアコンモデル ■ 内部状態 ・ モード：冷房 ・ 温度：22℃ ・ 湿度：40% ・ 風量：3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる／下げる ・ 湿度上げる／下げる ・ 風量強める／弱める
- 30. ■ 内部状態 ・ モード：冷房 ・温度：22℃ ・ 湿度：40% ・ 風量：3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる／下げる ・ 湿度上げる／下げる ・ 風量強める／弱める Model が 自身 を更新する 22℃ エアコンモデル
- 31. ■ 内部状態 ・ モード：冷房 ・温度：26℃ ・ 湿度：40% ・ 風量：3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる／下げる ・ 湿度上げる／下げる ・ 風量強める／弱める View が Model の更新を検知する 26℃ エアコンモデル I/O 変化しない View もある
- 32. User が Viewを知覚する 26℃ エアコンモデル ■ 内部状態 ・ モード：冷房 ・ 温度：26℃ ・ 湿度：40% ・ 風量：3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる／下げる ・ 湿度上げる／下げる ・ 風量強める／弱める
- 33. この情報の流れが MVC アーキテクチャの「概念」 MVC-Uアーキテクチャとも言う 忘れられがちだが 重要な役割
- 34.
- 35. 我々の誤解：Web アプリを MVCアーキテクチャで構築…
- 36. 我々の誤解：Web アプリを MVCアーキテクチャで構築…
- 37. 我々の誤解：Web アプリを MVCアーキテクチャで構築…
- 38.
- 39.
- 40. Model はサーバーサイドにある クライアントサイド サーバーサイド User Model ■内部状態 ・ モード：冷房 ・ 温度：22℃ ・ 湿度：40% ・ 風量：3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる／下げる ・ 湿度上げる／下げる ・ 風量強める／弱める
- 41. View は？？ クライアントサイド サーバーサイド User Model ■内部状態 ・ モード：冷房 ・ 温度：22℃ ・ 湿度：40% ・ 風量：3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる／下げる ・ 湿度上げる／下げる ・ 風量強める／弱める
- 42. Controller は？？ クライアントサイド サーバーサイド User Model ■内部状態 ・ モード：冷房 ・ 温度：22℃ ・ 湿度：40% ・ 風量：3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる／下げる ・ 湿度上げる／下げる ・ 風量強める／弱める
- 43. サーバーサイドにいる？ クライアントサイド サーバーサイド User Model ■ 内部状態 ・モード：冷房 ・ 温度：22℃ ・ 湿度：40% ・ 風量：3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる／下げる ・ 湿度上げる／下げる ・ 風量強める／弱める
- 44. サーバーサイドにいる？ クライアントサイド サーバーサイド User Model 風来ねぇ ■ 内部状態 ・モード：冷房 ・ 温度：22℃ ・ 湿度：40% ・ 風量：3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる／下げる ・ 湿度上げる／下げる ・ 風量強める／弱める
- 45. クライアントサイドにある？ クライアントサイド サーバーサイド User Model ■ 内部状態 ・モード：冷房 ・ 温度：22℃ ・ 湿度：40% ・ 風量：3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる／下げる ・ 湿度上げる／下げる ・ 風量強める／弱める
- 46. クライアントサイドにある？ クライアントサイド サーバーサイド User ModelHTTP Request ■内部状態 ・ モード：冷房 ・ 温度：22℃ ・ 湿度：40% ・ 風量：3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる／下げる ・ 湿度上げる／下げる ・ 風量強める／弱める
- 47. クライアントサイドにある？ クライアントサイド サーバーサイド User ModelHTTP Response ■内部状態 ・ モード：冷房 ・ 温度：26℃ ・ 湿度：40% ・ 風量：3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる／下げる ・ 湿度上げる／下げる ・ 風量強める／弱める
- 48. User が1人ならいいけど… クライアントサイド サーバーサイド Users Model HTTPResponse 不特定多数に知らせるには？ ■ 内部状態 ・ モード：冷房 ・ 温度：26℃ ・ 湿度：40% ・ 風量：3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる／下げる ・ 湿度上げる／下げる ・ 風量強める／弱める
- 49.
- 50. 実際にはこうなっているはず クライアントサイド ViewModel Front Controller Action Controller1 Action Controller 2 …
- 51. Front Controller はHttp Request を 誰が処理するか を制御する クライアントサイド ViewModel Front Controller HTTP Request Dispatch / Routing Action Controller 1 Action Controller 2 …
- 52. Action Controller はModel と View を制御する クライアントサイド ViewModel Front Controller Dispatch / Routing View の生成Model の更新 Action Controller 1 Action Controller 2 …
- 53. これを Front ControllerPattern と言う。 クライアントサイド ViewModel Front Controller Action Controller 1 Action Controller 2 …
- 54. MVC と FrontController では、Controller の意味する ところが全く違う クライアントサイド ViewModel Front Controller Action Controller 1 Action Controller 2 … MVC Front Controller ・ Controller は Model を制御する ・ Front Controller は HTTP Request を誰が処理するかを制御する ・ Action Controller は Model と View を制御する たまたま同じ名前を使っているだけ
- 55.
- 56. まずクラサバ間ではシステムが異なることを認識する サーバーサイド ・ 入力として HTTPRequest を受け取る ・ Model の更新を行う ・ 出力として HTTP Response という文字 列を返す ・ サーバーサイドはこの文字列がどのよう に解釈されるかを関知しない
- 57. まずクラサバ間ではシステムが異なることを認識する クライアントサイド ・ 入力として Controllerが ユーザー操 作を受け取る ・ （クライアント側の）Model 更新を行う ・ 必要に応じて、通信を行い、サーバー 側の更新も行う ・ 出力として View が変更される（DOM の変更、またはページ遷移） サーバーサイド ・ 入力として HTTP Request を受け取る ・ Model の更新を行う ・ 出力として HTTP Response という文字 列を返す ・ サーバーサイドはこの文字列がどのよう に解釈されるかを関知しない ・ HTTP Response を解釈し、レンダリ ングする
- 58. まずクラサバ間ではシステムが異なることを認識する クライアントサイド ・ 入力として Controllerが ユーザー操 作を受け取る ・ （クライアント側の）Model 更新を行う ・ 必要に応じて、通信を行い、サーバー 側の更新も行う ・ 出力として View が変更される（DOM の変更、またはページ遷移） サーバーサイド ・ 入力として HTTP Request を受け取る ・ Model の更新を行う ・ 出力として HTTP Response という文字 列を返す ・ サーバーサイドはこの文字列がどのよう に解釈されるかを関知しない ・ HTTP Response を解釈し、レンダリ ングする クライアントサイド内だけなら MVC が使える サーバーサイドは Front Controller が有用
- 59. MVC の使いドコロ ・ Webアプリケーションのクライアントサイド ・ iOS/Android アプリ ・ デスクトップアプリケーション Controller View
- 60.
- 61. まとめ ・ システムの内部状態とその操作窓口を Modelと言う ・ Model を表示する機構を View と言う ・ Model を操作する機構を Controller と言う ・ サーバーサイド向けに提供されている MVC フレーム ワークは実は Front Controller Pattern の実装 ・ クライアントサイドやスマホのネイティブアプリには MVC は有用
- 62.