javascriptのmvc開発について調べてみた 〜backbone.js〜
DESCRIPTION
HTML5+α初心者勉強会 @福岡 第1回で発表しようとしていた資料です! もしかしたら第2回でそのまま使うかもしれませんので第2回いらっしゃる方は見ないでね!TRANSCRIPT
� ����<§Âöª¾���í»�ï±�
��¼�Ö�Ï�²�
JavascriptのMVC開発について調べてみた~BACKBONE.JS~
未発表
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
ĔNáÄčĐ
éø¢¸dóČIâDå]SAVcWj@°ICrHkësgUvA
��{�µÝĄ]Sc]GHQ`ã@¦Hp`DãICseéø�k��{�]KXODBA
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
#*'w��u�Å^üFe
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
-�7*4:�¨]Sobč
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
èĉ��IOKOK�sYlEč
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
]k@ûÛIµJK`r^AA
Cs@ÑÏÔDW~�}AA
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
���uÇQWÀc«J�¤aÔDWZLAA
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
ÞÏcߦ]þąIÁ¶aĆE�24;����
���! ���ĎfKWVďäÍ£êòØu�çQ\GqgS�+663 ��999�3&.76&52�(20�
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
Vv`^J׺]÷D×uéúQgQWč
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
http://www.amazon.co.jp/Backbone-js%E3%82%AC%E3%82%A4%E3%83%89%E3%83%96%E3%83%83%E3%82%AF-%E9%AB%98%E6%A9%8B-%E4%BE
%91%E4%B9%85/dp/4899773501
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
Mc×āi^�"�^DEõFÎu�E^SZJqÔLrpQD^üE�I
tHqgQWč
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
FZ�"�Z\ēē
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
�2)*/@",*9@�21642//*4cđ[a¿©u¦Lr�uDDgSč
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
�Fe@���uÇQW±ËuøìSrkcu�ZW^J
ボタン2 回押したよ!
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
Controller
View Model
①画面のボタン押した
ボタン
2 回押したよ!
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
Controller
View Model
①画面のボタン押した
②ボタン押されたに気づくViewは知らないかも
ボタン
2 回押したよ!
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
Controller
View Model
①画面のボタン押した
②ボタン押されたに気づくViewは知らないかも
③モデルを操作する押した回数++
ボタン
2 回押したよ!
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
Controller
View Model
①画面のボタン押した
②ボタン押されたに気づくViewは知らないかも
③モデルを操作する押した回数++
④モデル変更に気づくModelは気づいてないかも
ボタン
2 回押したよ!
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
Controller
View Model
①画面のボタン押した
②ボタン押されたに気づくViewは知らないかも
③モデルを操作する押した回数++
④モデル変更に気づくModelは気づいてないかも
ボタン
2 回押したよ!
ボタン
3 回押したよ!
13年5月26日日曜日
� ����<§Âöª¾���í»?ï�±
g@gtqK_DAA
13年5月26日日曜日
� ����<§Âöª¾���í»?ï�±
]kDDM^ICrc]SA
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
Controller
View Model
この3つ役割がはっきりしているからどこに何が記述されているのか分かりやすいのです!
D[kµ�®R{��a`rč�%�%�}�ċ«ćéI¹¡QmSVEč
13年5月26日日曜日
� ����<§Âöª¾���í»?ï�±
FZč�}�ċ«ćéZ\ē
13年5月26日日曜日
� ����<§Âöª¾���í»?ï�±
テスト駆動開発(TDD - Test Driven Development)とはテスト駆動開発は,小さなステップを繰り返してプログラムの設計と開発を行っていくソフトウェア開発手法です。テスト駆動開発は次の3ステップから構成されています。
• ステップ1:これから書く機能に対するテストを1つ書き,テストが失敗することを確認する( レッド )
• ステップ2:ステップ1のテストを通す最低限のコードを実装する( グリーン )• ステップ3:リファクタリングを行う( リファクタリング )リファクタリングを行ったあとは,再度ステップ1に戻り,次に作成する機能のテストを書いてテストを失敗させ,コードを書き,またリファクタリングを行い……というサイクルを回していきます。
î]dĀÐ¥ÙgUvAA]kĒÖa ��cx���ICroE]Sč
http://tddbc.doorkeeper.jp/events/3472
13年5月26日日曜日
� ����<§Âöª¾���í»?ï�±
http://tddbc.doorkeeper.jp/events/3472
13年5月26日日曜日
� ����<§Âöª¾���í»?ï�±
ÿuÆQgQ\�"�c¿©ukE�½ĀÐQgSč
13年5月26日日曜日
Modelのお仕事
� ����<§Âöª¾���í»?ï±
データの管理と計算をする係です。
もくもくと自分の仕事をこなします。描画など他の処理に関心がありません。➡誰にも依存しません!
Model
Controller
View Model
13年5月26日日曜日
Viewの仕事� ����<§Âöª¾���í»?ï±
ユーザとの窓口です。ユーザ操作を受け付けます。Modelデータを分かりやすい形で表示します。
Modelの事に関心があってデータ変更を感知する事が出来ます。Modelに依存してます。
View
Controller
View Model
13年5月26日日曜日
Controllerの仕事� ����<§Âöª¾���í»?ï±
仲介人です。Viewの操作イベントを感知してModelを操るのがお仕事です。
Viewの事もModelの事も良く知っている反面ViewとModelに依存してます。
Controller
Controller
View Model
13年5月26日日曜日
� ����<§Âöª¾���í»?ï�±
]d�����������]Mv`>hWD`
ボタン2 回押したよ!
èĉu�Z\hgQnEč
13年5月26日日曜日
� ����<§Âöª¾���í»?ï�±
Y`ha�����������d!1)*45(24*�-5�ÃĊ]SA
C^@�-�7*4:�H�$*362kÃù]Sč�EÒd�ôaDsgQnEBA
13年5月26日日曜日
� ����<§Âöª¾���í»?ï�±
gTd�2)*/u�qgQnEč
13年5月26日日曜日
� ����<§Âöª¾���í»?ï�±
�±c�2)*/d{�uñæQgSč
ボタン2 回押したよ!
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
// Backbone.Modelクラスをベースに拡張します。var CountDataModel= Backbone.Model.extend({ // モデルが管理するデータの初期値 defaults: { "count": 0 // :int 押した回数 }, // 押した回数取得 getCount: function (){ return this.get('count'); }, // 押した回数追加 countUp: function (){ var count= this.get('count'); count++; this.set('count', count); }});
Model
���³Ó
��� È
Ú¬ýð
13年5月26日日曜日
� ����<§Âöª¾���í»?ï�±
ëp`DÌàI´D]Sb����HpĀÐQ\DJgS^
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
Model
�������
// Backbone.Modelクラスをベースに拡張します。var CountDataModel= Backbone.Model.extend({ // モデルが管理するデータの初期値 defaults: { "count": 0 // :int 押した回数 }, // 押した回数取得 getCount: function (){ return this.get('count'); }, // 押した回数追加 countUp: function (){ var count= this.get('count'); count++; this.set('count', count); }});
Backbone.Model.extend({Backbone.Modelをベースにプロパティやメソッドを追加できます。機能を拡張(extend)してModelを作ります。
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
Model
�������
// Backbone.Modelクラスをベースに拡張します。var CountDataModel= Backbone.Model.extend({ // モデルが管理するデータの初期値 defaults: { "count": 0 // :int 押した回数 }, // 押した回数取得 getCount: function (){ return this.get('count'); }, // 押した回数追加 countUp: function (){ var count= this.get('count'); count++; this.set('count', count); }});
defaults:Modelが持つデータの初期値を書きます。未設定の時に自動で値が設定されます。
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
Model
�������
// Backbone.Modelクラスをベースに拡張します。var CountDataModel= Backbone.Model.extend({ // モデルが管理するデータの初期値 defaults: { "count": 0 // :int 押した回数 }, // 押した回数取得 getCount: function (){ return this.get('count'); }, // 押した回数追加 countUp: function (){ var count= this.get('count'); count++; this.set('count', count); }});
Controller向けメソッドを準備外部Controllerからの操作を受け付けます。
13年5月26日日曜日
� ����<§Âöª¾���í»?ï�±
Üa",*9^�21642//*4u�Z\hgQnEč
13年5月26日日曜日
� ����<§Âöª¾���í»?ï�±
",*9d{�uñæQgSč
ボタン2 回押したよ!
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
var CountView = Backbone.View.extend({ el:'#count_View', initialize:function(){ this.listenTo(this.model,'change',this.render); }, render:function(){ var count=this.model.getCount(); this.$el.find('.countUpNo').text( count ); }, events:{ 'click button':'onClickButton' }, onClickButton:function(e){ this.model.countUp(); }
});
Controller
����
View
èĉÉè
��
注意 !! Σ(=o=
Viewという名前ですがController機能も含んでます!
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
var CountView = Backbone.View.extend({ el:'#count_View', initialize:function(){ this.listenTo(this.model,'change',this.render); }, render:function(){ var count=this.model.getCount(); this.$el.find('.countUpNo').text( count ); }, events:{ 'click button':'onClickButton' }, onClickButton:function(e){ this.model.countUp(); }
});
Controller
����
View
èĉÉè
��
Backbone.View.extendBackbone.Viewをベースにプロパティやメソッドを追加できます。機能を拡張 (extend) して作ります
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
var CountView = Backbone.View.extend({ el:'#count_View', initialize:function(){ this.listenTo(this.model,'change',this.render); }, render:function(){ var count=this.model.getCount(); this.$el.find('.countUpNo').text( count ); }, events:{ 'click button':'onClickButton' }, onClickButton:function(e){ this.model.countUp(); }
});
el:‘セレクタ’このViewが管理するHTMLのDOMを指定します。
<section id="count_View" class="drop-shadow lifted" > <div> <span class="countUpNo" >0</span>回押したよ! </div> <div> <button>押して!</button>
</div></section>
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
var CountView = Backbone.View.extend({ el:'#count_View', initialize:function(){ this.listenTo(this.model,'change',this.render); }, render:function(){ var count=this.model.getCount(); this.$el.find('.countUpNo').text( count ); }, events:{ 'click button':'onClickButton' }, onClickButton:function(e){ this.model.countUp(); }
});
initialize:function(){backboneの機能でインスタンス生成に呼ばれます。
listenTo(監視対象,‘イベント名’,動かすメソッド)backboneの機能でModelの変更を監視してます。
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
var CountView = Backbone.View.extend({ el:'#count_View', initialize:function(){ this.listenTo(this.model,'change',this.render); }, render:function(){ var count=this.model.getCount(); this.$('.countUpNo').text( count ); }, events:{ 'click button':'onClickButton' }, onClickButton:function(e){ this.model.countUp(); }
});
<section id="count_View" class="drop-shadow lifted" > <div> <span class="countUpNo" >0</span>回押したよ! </div> <div> <button>押して!</button>
</div></section>
Model変更時に起動する関数を書きます主に描画処理になります。this.$(‘セレクタ’)Viewが管理している範囲で検索して高速です。$(‘セレクタ’)=$el.find(‘セレクタ’)
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
var CountView = Backbone.View.extend({ el:'#count_View', initialize:function(){ this.listenTo(this.model,'change',this.render); }, render:function(){ var count=this.model.getCount(); this.$el.find('.countUpNo').text( count ); }, events:{ 'click button':'onClickButton' }, onClickButton:function(e){ this.model.countUp(); }
});
<section id="count_View" class="drop-shadow lifted" > <div> <span class="countUpNo" >0</span>回押したよ! </div> <div> <button>押して!</button>
</div></section>
events:{’イベント名 セレクタ名’:呼出メソッド}View内部で発生するイベントを監視します。
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±var CountView = Backbone.View.extend({ el:'#count_View', initialize:function(){ this.listenTo(this.model,'change',this.render); }, render:function(){ var count=this.model.getCount(); this.$el.find('.countUpNo').text( count ); }, events:{ 'click button':'onClickButton' }, onClickButton:function(e){ this.model.countUp(); }
});
Modelを操作するメソッドModelを操作します。(Controllerの役割)
13年5月26日日曜日
� ����<§Âöª¾���í»?ï�±
ÕÀaMspcz�}uă«Sr¤æuÔJgS
13年5月26日日曜日
� ����<§Âöª¾���í»?ï±
// DOMの読み込み完了時// 最初に起動する処理( jQueryの機能 )$(function(){ var model = new CountDataModel(); var view = new CountView({model:model}); });
ModelとView生成画面が読込みの所でModelとViewを生成して完成です!
13年5月26日日曜日
� ����<§Âöª¾���í»?ï�±
]d·Ĉc|���u«HQ\hgQnEč
http://jsdo.it/itoKami1123/xMqT/
13年5月26日日曜日
� ����<§Âöª¾���í»?ï�±
=�!�u�&8&�(4,36]y�y�ÔK`p�"�QWÎI~�}c¯ĂI \r
=�"�]ÔK^�2)*/a� ��cùòI¥\M`Dc]�}�QmSD
=�����������oOVEč
13年5月26日日曜日
� ����<§Âöª¾���í»?ï�±
��]SčCqI^ENPDgQWč
13年5月26日日曜日