Weitere ähnliche Inhalte
Kürzlich hochgeladen (11)
Mvc
- 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
・ モード変更
・ 温度上げる/下げる
・ 湿度上げる/下げる
・ 風量強める/弱める
- 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
を制御する
たまたま同じ名前を使っているだけ
- 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
- 61. まとめ
・ システムの内部状態とその操作窓口を Model と言う
・ Model を表示する機構を View と言う
・ Model を操作する機構を Controller と言う
・ サーバーサイド向けに提供されている MVC フレーム
ワークは実は Front Controller Pattern の実装
・ クライアントサイドやスマホのネイティブアプリには
MVC は有用