GUI アプリケーションにおける       MVC      id:nobuoka        (@nobuoka)    2012-12-13 Kyoto.js #3
自己紹介と概要●   id:nobuoka - はてなブックマークチーム●   Java, JavaScript, Ruby あたりの言語が好き●   仕事では Perl と JavaScript●   今日は GUI アプリケーションの MV...
MVC とは?●   Web サービスのサーバーサイドの設計の説明に使われ    ているのをよくみる    –しかし MVC ってホントにサーバーサイドの設計に向い     てるのかなーって思う; 無理やり感高い気がする●   そもそもは Sm...
Model●   データそのものの管理や変更処理を担当する    –データの整合性を保証する (ビジネスロジックの内包)●   多くの場合、Observer パターンにより登録された View    に対して、データの変更を通知するようになって...
View●   表示処理を担当する●   基本的には Model オブジェクトに結び付けられる    – Model から値を取り出して使う    – Model 側に変更があると通知を受けて表示を更新●   ユーザーからの入力を Observ...
View と Model●   Model は抽象表現で View は具象表現●   分離することのメリット :    –   1 つの抽象表現に対して複数の具象表現を実現しや        すい         ● 例) 表形式のデータに対し...
Controller●   ユーザーからの入力 (やその他からの入力) を受け取り、    それに応じた変更をするように Model に伝える●   ユーザーからの入力として、View での UI イベントを受け    取ることが多い    –...
MVC の全体像                  実際のアプリケーションは                  もっと複雑になるが、最小         V        構成の MVC だとこんな感じ             イベント通知変更...
オセロ的なゲームにおける Model●   オセロ的なゲームにおいては以下のデータを管理 (外か    ら参照できる)    – ボード上の石の配置の状態    – 現在先攻か後攻かという情報●   以下の操作を受け付ける    – ボード上の...
オセロ的なゲームにおける View●   ボードの状態を表示する view と先攻・後攻を表示する    view●   HTML 要素 / SVG 要素を生成したりするのはこいつが    担当する●   ボードの状態は、Model からボード...
オセロ的なゲームにおける Controller●   ボードを表す view がクリックされたとき、クリックされた升    目に石を置くように model にメッセージを送る
オセロ的なゲームのデモ●   動くもの :    http://www.vividcode.info/sample/2012/othello_like_game/main.html●   ソースコード :    https://github.c...
Upcoming SlideShare
Loading in...5
×

GUI アプリケーションにおける MVC

3,752

Published on

- 関連ブログ記事 : http://vividcode.hatenablog.com/entry/study-meeting/kyotojs-3-gui-mvc-basis

Kyoto.js #3 での発表資料です。 最近 GUI アプリケーションでの MVC について基本的なことを考えなおしていたので、簡単にオセロ的なゲームを実装してみて、それを発表しました。

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

No Downloads
Views
Total Views
3,752
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
8
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

GUI アプリケーションにおける MVC

  1. 1. GUI アプリケーションにおける MVC id:nobuoka (@nobuoka) 2012-12-13 Kyoto.js #3
  2. 2. 自己紹介と概要● id:nobuoka - はてなブックマークチーム● Java, JavaScript, Ruby あたりの言語が好き● 仕事では Perl と JavaScript● 今日は GUI アプリケーションの MVC の基礎的な話● MVC についてはよく見かけるが微妙な説明が多い気が する –私自身間違ってるかも● 基本に立ち返って単純な MVC を考えてみる● オセロ的なゲームを例に
  3. 3. MVC とは?● Web サービスのサーバーサイドの設計の説明に使われ ているのをよくみる –しかし MVC ってホントにサーバーサイドの設計に向い てるのかなーって思う; 無理やり感高い気がする● そもそもは Smalltalk での GUI アプリケーション開発が 発祥 (?)● GUI アプリケーションにおける 「データの処理」 と 「表示 処理」 と 「ユーザー入力の処理」 を分けるという設計 – Model : データの管理・処理 – View : 表示の処理 – Controller : ユーザー入力に応じて Model や View (やその他オブジェクト) にメッセージを飛ばす
  4. 4. Model● データそのものの管理や変更処理を担当する –データの整合性を保証する (ビジネスロジックの内包)● 多くの場合、Observer パターンにより登録された View に対して、データの変更を通知するようになっている● インターフェイス : – データの設定や取り出しのためのメソッド – 通知先の View を登録するためのメソッド
  5. 5. View● 表示処理を担当する● 基本的には Model オブジェクトに結び付けられる – Model から値を取り出して使う – Model 側に変更があると通知を受けて表示を更新● ユーザーからの入力を Observer パターンによって別の オブジェクトに通知● インターフェイス : – Model からの通知を受け取るためのメソッド – 通知先の Controller を登録するためのメソッド – 必要に応じて Controller からの操作を受け取るメソッ ド
  6. 6. View と Model● Model は抽象表現で View は具象表現● 分離することのメリット : – 1 つの抽象表現に対して複数の具象表現を実現しや すい ● 例) 表形式のデータに対して、表とグラフを表示 – Model を GUI アプリケーション以外でも利用できる 変更通知 V データ参照 M
  7. 7. Controller● ユーザーからの入力 (やその他からの入力) を受け取り、 それに応じた変更をするように Model に伝える● ユーザーからの入力として、View での UI イベントを受け 取ることが多い – だが、View が Controller を知っている必要はない – ここも Observer パターン
  8. 8. MVC の全体像 実際のアプリケーションは もっと複雑になるが、最小 V 構成の MVC だとこんな感じ イベント通知変更通知 データ参照 C M データ参照・操作
  9. 9. オセロ的なゲームにおける Model● オセロ的なゲームにおいては以下のデータを管理 (外か ら参照できる) – ボード上の石の配置の状態 – 現在先攻か後攻かという情報● 以下の操作を受け付ける – ボード上の指定の位置に石を置く● 以下のイベントが発生したときに Observer (view) に通 知 – ボード上の石の配置が変わった – 先攻・後攻のターンが変わった
  10. 10. オセロ的なゲームにおける View● ボードの状態を表示する view と先攻・後攻を表示する view● HTML 要素 / SVG 要素を生成したりするのはこいつが 担当する● ボードの状態は、Model からボード上の石の配置を読ん で、そのとおりに要素を生成して表示● View は自分が結び付けられている Model を知ってい て、石の配置が変わったときや先攻・後攻が変わったとき に通知を受け取る
  11. 11. オセロ的なゲームにおける Controller● ボードを表す view がクリックされたとき、クリックされた升 目に石を置くように model にメッセージを送る
  12. 12. オセロ的なゲームのデモ● 動くもの : http://www.vividcode.info/sample/2012/othello_like_game/main.html● ソースコード : https://github.com/nobuoka/presentation/tree/20121213-kyotojs-3/master
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×