Mvc

4,458 views

Published on

煮詰まり倒す

Published in: Technology
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,458
On SlideShare
0
From Embeds
0
Number of Embeds
2,185
Actions
Shares
0
Downloads
19
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

Mvc

  1. 1. MVC アーキテクチャ論考 煮詰まる!
  2. 2. こんにちは。あもです。 amoO_O@Twitter
  3. 3. こんにちは。あもです。 職業 旅人amoO_O@Twitter
  4. 4. こんにちは。あもです。 職業 旅人副業 プログラマ Python, PHP, CoffeeScript, JavaScript, Objective-C など amoO_O@Twitter
  5. 5. こんにちは。あもです。 職業 旅人副業 プログラマ Python, PHP, CoffeeScript, JavaScript, Objective-C など amoO_O@Twitter 求職中(年明け〜)
  6. 6. Introduction
  7. 7. とある Web アプリケーション クライアントサイド Controller ViewModel
  8. 8. とある Web アプリケーション クライアントサイド Controller ViewModel HTTP Request
  9. 9. とある Web アプリケーション クライアントサイド Controller ViewModel Model の更新
  10. 10. とある Web アプリケーション クライアントサイド Controller ViewModel 更新後の Data
  11. 11. とある Web アプリケーション クライアントサイド Controller ViewModel View の生成
  12. 12. とある Web アプリケーション クライアントサイド Controller ViewModel 生成されたView
  13. 13. とある Web アプリケーション クライアントサイド Controller ViewModel Http Response
  14. 14. クライアントサイド Controller ViewModel よくある Web アプリケーションの MVC フレームワーク …
  15. 15. クライアントサイド Controller ViewModel これこそが理想的な MVC フレームワーク…
  16. 16. クライアントサイド Controller ViewModel ではない。
  17. 17. クライアントサイド Controller ViewModel かすってもいない。
  18. 18. クライアントサイド Controller ViewModel MVC アーキテクチャに関する我々の誤解 ・ このアーキテクチャは、MVC アーキテクチャにおいて説明される Model, View, Controller という 3つの要素と た ま た ま 同 じ 名 前 を 使 っ て し ま っ て い る が、全く異なるアーキテクチャ・パターンである。
  19. 19. MVC アーキテクチャってなんぞ 本日のテーマ
  20. 20. MVC アーキテクチャのこころ ・ Trygve Reenskaugが考案し、SmallTalk-80 に実装されたアイデア
  21. 21. MVC アーキテクチャのこころ ・ Trygve Reenskaugが考案し、SmallTalk-80 に実装されたアイデア ・ Domain Objects … 現実世界に関する認識をモデリングしたもの(Model) ・ 次の 2 つを明確に分離すること(Separated Presentation): ・ Presentation Objects … ユーザーが実際に目にする GUI エレメント Domain Objects Presentation Objects Separated Presentation Pattern
  22. 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
  23. 23. 例:エアコン ごっつ寒い ブウォォォオオオ オオオオオオオオ
  24. 24. ■ 内部状態 ・ モード:冷房 ・ 温度:22℃ ・ 湿度:40% ・ 風量:3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる/下げる ・ 湿度上げる/下げる ・ 風量強める/弱める システムの内部状態とアクションを Model と言う エアコンモデル
  25. 25. 22℃ Model を表示する機構を View と言う。 I/O ■ 内部状態 ・ モード:冷房 ・ 温度:22℃ ・ 湿度:40% ・ 風量:3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる/下げる ・ 湿度上げる/下げる ・ 風量強める/弱める エアコンモデル
  26. 26. 22℃ Model を更新する機構を Controller と言う I/O ■ 内部状態 ・ モード:冷房 ・ 温度:22℃ ・ 湿度:40% ・ 風量:3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる/下げる ・ 湿度上げる/下げる ・ 風量強める/弱める エアコンモデル
  27. 27. 22℃ MVC アーキテクチャの3大要素 ■ 内部状態 ・ モード:冷房 ・ 温度:22℃ ・ 湿度:40% ・ 風量:3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる/下げる ・ 湿度上げる/下げる ・ 風量強める/弱める エアコンモデル Controller View Model
  28. 28. User が Controller を使用する 22℃ エアコンモデル ■ 内部状態 ・ モード:冷房 ・ 温度:22℃ ・ 湿度:40% ・ 風量:3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる/下げる ・ 湿度上げる/下げる ・ 風量強める/弱める
  29. 29. Controller が Model のアクションを実行する 22℃ エアコンモデル ■ 内部状態 ・ モード:冷房 ・ 温度:22℃ ・ 湿度:40% ・ 風量:3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる/下げる ・ 湿度上げる/下げる ・ 風量強める/弱める
  30. 30. ■ 内部状態 ・ モード:冷房 ・ 温度:22℃ ・ 湿度:40% ・ 風量:3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる/下げる ・ 湿度上げる/下げる ・ 風量強める/弱める Model が 自身 を更新する 22℃ エアコンモデル
  31. 31. ■ 内部状態 ・ モード:冷房 ・ 温度:26℃ ・ 湿度:40% ・ 風量:3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる/下げる ・ 湿度上げる/下げる ・ 風量強める/弱める View が Model の更新を検知する 26℃ エアコンモデル I/O 変化しない View もある
  32. 32. User が View を知覚する 26℃ エアコンモデル ■ 内部状態 ・ モード:冷房 ・ 温度:26℃ ・ 湿度:40% ・ 風量:3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる/下げる ・ 湿度上げる/下げる ・ 風量強める/弱める
  33. 33. この情報の流れが MVC アーキテクチャの「概念」 MVC-U アーキテクチャとも言う 忘れられがちだが 重要な役割
  34. 34. 我々の誤解 MVCアーキテクチャに関する
  35. 35. 我々の誤解:Web アプリを MVC アーキテクチャで構築…
  36. 36. 我々の誤解:Web アプリを MVC アーキテクチャで構築…
  37. 37. 我々の誤解:Web アプリを MVC アーキテクチャで構築…
  38. 38. …出来るの? クライアントサイド サーバーサイド
  39. 39. User はクライアントサイドにいる クライアントサイド サーバーサイド User
  40. 40. Model はサーバーサイドにある クライアントサイド サーバーサイド User Model ■ 内部状態 ・ モード:冷房 ・ 温度:22℃ ・ 湿度:40% ・ 風量:3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる/下げる ・ 湿度上げる/下げる ・ 風量強める/弱める
  41. 41. View は?? クライアントサイド サーバーサイド User Model ■ 内部状態 ・ モード:冷房 ・ 温度:22℃ ・ 湿度:40% ・ 風量:3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる/下げる ・ 湿度上げる/下げる ・ 風量強める/弱める
  42. 42. Controller は?? クライアントサイド サーバーサイド User Model ■ 内部状態 ・ モード:冷房 ・ 温度:22℃ ・ 湿度:40% ・ 風量:3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる/下げる ・ 湿度上げる/下げる ・ 風量強める/弱める
  43. 43. サーバーサイドにいる? クライアントサイド サーバーサイド User Model ■ 内部状態 ・ モード:冷房 ・ 温度:22℃ ・ 湿度:40% ・ 風量:3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる/下げる ・ 湿度上げる/下げる ・ 風量強める/弱める
  44. 44. サーバーサイドにいる? クライアントサイド サーバーサイド User Model 風来ねぇ ■ 内部状態 ・ モード:冷房 ・ 温度:22℃ ・ 湿度:40% ・ 風量:3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる/下げる ・ 湿度上げる/下げる ・ 風量強める/弱める
  45. 45. クライアントサイドにある? クライアントサイド サーバーサイド User Model ■ 内部状態 ・ モード:冷房 ・ 温度:22℃ ・ 湿度:40% ・ 風量:3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる/下げる ・ 湿度上げる/下げる ・ 風量強める/弱める
  46. 46. クライアントサイドにある? クライアントサイド サーバーサイド User ModelHTTP Request ■ 内部状態 ・ モード:冷房 ・ 温度:22℃ ・ 湿度:40% ・ 風量:3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる/下げる ・ 湿度上げる/下げる ・ 風量強める/弱める
  47. 47. クライアントサイドにある? クライアントサイド サーバーサイド User ModelHTTP Response ■ 内部状態 ・ モード:冷房 ・ 温度:26℃ ・ 湿度:40% ・ 風量:3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる/下げる ・ 湿度上げる/下げる ・ 風量強める/弱める
  48. 48. User が1人ならいいけど… クライアントサイド サーバーサイド Users Model HTTP Response 不特定多数に知らせるには? ■ 内部状態 ・ モード:冷房 ・ 温度:26℃ ・ 湿度:40% ・ 風量:3 ■ アクション ・ スイッチ I/O ・ モード変更 ・ 温度上げる/下げる ・ 湿度上げる/下げる ・ 風量強める/弱める
  49. 49. 冒頭のこれ クライアントサイド Controller ViewModel
  50. 50. 実際にはこうなっているはず クライアントサイド ViewModel Front Controller Action Controller 1 Action Controller 2 …
  51. 51. Front Controller は Http Request を 誰が処理するか を制御する クライアントサイド ViewModel Front Controller HTTP Request Dispatch / Routing Action Controller 1 Action Controller 2 …
  52. 52. Action Controller は Model と View を制御する クライアントサイド ViewModel Front Controller Dispatch / Routing View の生成Model の更新 Action Controller 1 Action Controller 2 …
  53. 53. これを Front Controller Pattern と言う。 クライアントサイド ViewModel Front Controller Action Controller 1 Action Controller 2 …
  54. 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 を制御する たまたま同じ名前を使っているだけ
  55. 55. MVC アーキテクチャの使いドコロ
  56. 56. まずクラサバ間ではシステムが異なることを認識する サーバーサイド ・ 入力として HTTP Request を受け取る ・ Model の更新を行う ・ 出力として HTTP Response という文字 列を返す ・ サーバーサイドはこの文字列がどのよう に解釈されるかを関知しない
  57. 57. まずクラサバ間ではシステムが異なることを認識する クライアントサイド ・ 入力として Controller が ユーザー操 作を受け取る ・ (クライアント側の)Model 更新を行う ・ 必要に応じて、通信を行い、サーバー 側の更新も行う ・ 出力として View が変更される(DOM の変更、またはページ遷移) サーバーサイド ・ 入力として HTTP Request を受け取る ・ Model の更新を行う ・ 出力として HTTP Response という文字 列を返す ・ サーバーサイドはこの文字列がどのよう に解釈されるかを関知しない ・ HTTP Response を解釈し、レンダリ ングする
  58. 58. まずクラサバ間ではシステムが異なることを認識する クライアントサイド ・ 入力として Controller が ユーザー操 作を受け取る ・ (クライアント側の)Model 更新を行う ・ 必要に応じて、通信を行い、サーバー 側の更新も行う ・ 出力として View が変更される(DOM の変更、またはページ遷移) サーバーサイド ・ 入力として HTTP Request を受け取る ・ Model の更新を行う ・ 出力として HTTP Response という文字 列を返す ・ サーバーサイドはこの文字列がどのよう に解釈されるかを関知しない ・ HTTP Response を解釈し、レンダリ ングする クライアントサイド内だけなら MVC が使える サーバーサイドは Front Controller が有用
  59. 59. MVC の使いドコロ ・ Web アプリケーションのクライアントサイド ・ iOS/Android アプリ ・ デスクトップアプリケーション Controller View
  60. 60. まとめ
  61. 61. まとめ ・ システムの内部状態とその操作窓口を Model と言う ・ Model を表示する機構を View と言う ・ Model を操作する機構を Controller と言う ・ サーバーサイド向けに提供されている MVC フレーム ワークは実は Front Controller Pattern の実装 ・ クライアントサイドやスマホのネイティブアプリには MVC は有用
  62. 62. http://www.ac-illust.com/main/profile.php?id=DwDjQTBB イラスト:麦さま

×