Enviar búsqueda
Cargar
Mvc
•
Descargar como PPTX, PDF
•
24 recomendaciones
•
6,579 vistas
Shutaro Anno
Seguir
煮詰まり倒す
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 62
Descargar ahora
Recomendados
知らないと損するアプリ開発におけるStateMachineの活用法(15分版)
知らないと損するアプリ開発におけるStateMachineの活用法(15分版)
Ken Morishita
WKWebViewとUIWebView
WKWebViewとUIWebView
Yuki Hirai
ブラック企業から学ぶMVCモデル
ブラック企業から学ぶMVCモデル
Yuta Hiroto
ゲーム開発とMVC
ゲーム開発とMVC
Takashi Komada
Model View Presenter for Android
Model View Presenter for Android
shinnosuke kugimiya
iOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPractice
Ken Morishita
Rails基礎講座 part.2
Rails基礎講座 part.2
Jun Yokoyama
20090212
20090212
小野 修司
Recomendados
知らないと損するアプリ開発におけるStateMachineの活用法(15分版)
知らないと損するアプリ開発におけるStateMachineの活用法(15分版)
Ken Morishita
WKWebViewとUIWebView
WKWebViewとUIWebView
Yuki Hirai
ブラック企業から学ぶMVCモデル
ブラック企業から学ぶMVCモデル
Yuta Hiroto
ゲーム開発とMVC
ゲーム開発とMVC
Takashi Komada
Model View Presenter for Android
Model View Presenter for Android
shinnosuke kugimiya
iOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPractice
Ken Morishita
Rails基礎講座 part.2
Rails基礎講座 part.2
Jun Yokoyama
20090212
20090212
小野 修司
130329 04
130329 04
openrtm
20130329 rtm4
20130329 rtm4
openrtm
GUI アプリケーションにおける MVC
GUI アプリケーションにおける MVC
Yu Nobuoka
ASP.NET MVC 1.0
ASP.NET MVC 1.0
Shinpei Ohtani
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
ria1201
TableViewAgent
TableViewAgent
Akura Pi
Rails and twitter #twtr_hack
Rails and twitter #twtr_hack
i7a
UnicastWS vol.2
UnicastWS vol.2
Unicast Inc.
はじめての ASP.NET MVC
はじめての ASP.NET MVC
jz5 MATSUE
MVCになぞらえて理解するReact
MVCになぞらえて理解するReact
iPride Co., Ltd.
Windows storeアプリ brekky
Windows storeアプリ brekky
Satoshi Sekine
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
Yoshitaka Seo
G0042 h
G0042 h
silicone69
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Más contenido relacionado
Similar a Mvc
130329 04
130329 04
openrtm
20130329 rtm4
20130329 rtm4
openrtm
GUI アプリケーションにおける MVC
GUI アプリケーションにおける MVC
Yu Nobuoka
ASP.NET MVC 1.0
ASP.NET MVC 1.0
Shinpei Ohtani
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
ria1201
TableViewAgent
TableViewAgent
Akura Pi
Rails and twitter #twtr_hack
Rails and twitter #twtr_hack
i7a
UnicastWS vol.2
UnicastWS vol.2
Unicast Inc.
はじめての ASP.NET MVC
はじめての ASP.NET MVC
jz5 MATSUE
MVCになぞらえて理解するReact
MVCになぞらえて理解するReact
iPride Co., Ltd.
Windows storeアプリ brekky
Windows storeアプリ brekky
Satoshi Sekine
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
Yoshitaka Seo
G0042 h
G0042 h
silicone69
Similar a Mvc
(13)
130329 04
130329 04
20130329 rtm4
20130329 rtm4
GUI アプリケーションにおける MVC
GUI アプリケーションにおける MVC
ASP.NET MVC 1.0
ASP.NET MVC 1.0
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
TableViewAgent
TableViewAgent
Rails and twitter #twtr_hack
Rails and twitter #twtr_hack
UnicastWS vol.2
UnicastWS vol.2
はじめての ASP.NET MVC
はじめての ASP.NET MVC
MVCになぞらえて理解するReact
MVCになぞらえて理解するReact
Windows storeアプリ brekky
Windows storeアプリ brekky
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
G0042 h
G0042 h
Último
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Último
(10)
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Mvc
1.
MVC アーキテクチャ論考 煮詰まる!
2.
こんにちは。あもです。 amoO_O@Twitter
3.
こんにちは。あもです。 職業 旅人amoO_O@Twitter
4.
こんにちは。あもです。 職業 旅人副業 プログラマ Python,
PHP, CoffeeScript, JavaScript, Objective-C など amoO_O@Twitter
5.
こんにちは。あもです。 職業 旅人副業 プログラマ Python,
PHP, CoffeeScript, JavaScript, Objective-C など amoO_O@Twitter 求職中(年明け〜)
6.
Introduction
7.
とある Web アプリケーション クライアントサイド Controller ViewModel
8.
とある Web アプリケーション クライアントサイド Controller ViewModel HTTP
Request
9.
とある Web アプリケーション クライアントサイド Controller ViewModel Model
の更新
10.
とある Web アプリケーション クライアントサイド Controller ViewModel 更新後の
Data
11.
とある Web アプリケーション クライアントサイド Controller ViewModel View
の生成
12.
とある Web アプリケーション クライアントサイド Controller ViewModel 生成されたView
13.
とある Web アプリケーション クライアントサイド Controller ViewModel Http
Response
14.
クライアントサイド Controller ViewModel よくある Web アプリケーションの
MVC フレームワーク …
15.
クライアントサイド Controller ViewModel これこそが理想的な MVC フレームワーク…
16.
クライアントサイド Controller ViewModel ではない。
17.
クライアントサイド Controller ViewModel かすってもいない。
18.
クライアントサイド Controller ViewModel MVC アーキテクチャに関する我々の誤解 ・ このアーキテクチャは、MVC
アーキテクチャにおいて説明される Model, View, Controller という 3つの要素と た ま た ま 同 じ 名 前 を 使 っ て し ま っ て い る が、全く異なるアーキテクチャ・パターンである。
19.
MVC アーキテクチャってなんぞ 本日のテーマ
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
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.
我々の誤解 MVCアーキテクチャに関する
35.
我々の誤解:Web アプリを MVC
アーキテクチャで構築…
36.
我々の誤解:Web アプリを MVC
アーキテクチャで構築…
37.
我々の誤解:Web アプリを MVC
アーキテクチャで構築…
38.
…出来るの? クライアントサイド サーバーサイド
39.
User はクライアントサイドにいる クライアントサイド サーバーサイド User
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 ・ モード変更 ・ 温度上げる/下げる ・ 湿度上げる/下げる ・ 風量強める/弱める
49.
冒頭のこれ クライアントサイド Controller ViewModel
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 を制御する たまたま同じ名前を使っているだけ
55.
MVC アーキテクチャの使いドコロ
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 は有用
62.
http://www.ac-illust.com/main/profile.php?id=DwDjQTBB イラスト:麦さま
Descargar ahora