Recommandé
Contenu connexe
Similaire à Mvc
Dernier
Dernier (8)
Mvc
- 4. こんにちは。あもです。 職業 旅人副業 プログラマ Python, PHP, CoffeeScript, JavaScript, Objective-C など amoO_O@Twitter
- 5. こんにちは。あもです。 職業 旅人副業 プログラマ Python, PHP, CoffeeScript, JavaScript, Objective-C など amoO_O@Twitter 求職中（年明け〜）
- 6. Introduction
- 13. とある Web アプリケーション クライアントサイド Controller ViewModel Http Response
- 14. クライアントサイド Controller ViewModel よくある Web アプリケーションの MVC フレームワーク …
- 18. クライアントサイド Controller ViewModel MVC アーキテクチャに関する我々の誤解 ・ このアーキテクチャは、MVC アーキテクチャにおいて説明される Model, View, Controller という 3つの要素と た ま た ま 同 じ 名 前 を 使 っ て し ま っ て い る が、全く異なるアーキテクチャ・パターンである。
- 20. MVC アーキテクチャのこころ ・ Trygve Reenskaugが考案し、SmallTalk-80 に実装されたアイデア
- 21. MVC アーキテクチャのこころ ・ Trygve Reenskaugが考案し、SmallTalk-80 に実装されたアイデア ・ Domain Objects … 現実世界に関する認識をモデリングしたもの（Model） ・ 次の 2 つを明確に分離すること（Separated Presentation）： ・ Presentation Objects … ユーザーが実際に目にする GUI エレメント Domain Objects Presentation Objects Separated Presentation Pattern
- 22. MVC アーキテクチャのこころ ・ Trygve Reenskaugが考案し、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
- 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 アーキテクチャとも言う 忘れられがちだが 重要な役割
- 35. 我々の誤解：Web アプリを MVC アーキテクチャで構築…
- 36. 我々の誤解：Web アプリを MVC アーキテクチャで構築…
- 37. 我々の誤解：Web アプリを MVC アーキテクチャで構築…
- 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 HTTP Response 不特定多数に知らせるには？ ■ 内部状態 ・ モード：冷房 ・ 温度：26℃ ・ 湿度：40% ・ 風量：3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる／下げる ・ 湿度上げる／下げる ・ 風量強める／弱める
- 50. 実際にはこうなっているはず クライアントサイド ViewModel Front Controller Action Controller 1 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 Controller Pattern と言う。 クライアントサイド ViewModel Front Controller Action Controller 1 Action Controller 2 …
- 54. MVC と Front Controller では、Controller の意味する ところが全く違う クライアントサイド ViewModel Front Controller Action Controller 1 Action Controller 2 … MVC Front Controller ・ Controller は Model を制御する ・ Front Controller は HTTP Request を誰が処理するかを制御する ・ Action Controller は Model と View を制御する たまたま同じ名前を使っているだけ
- 56. まずクラサバ間ではシステムが異なることを認識する サーバーサイド ・ 入力として HTTP Request を受け取る ・ 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 は有用