javascriptのmvc開発について調べてみた〜backbone.js〜

� ��<§Âöª¾��í»�ï±�

��¼�Ö�Ï�²�

JavascriptのMVC開発について調べてみた～BACKBONE.JS～

未発表

13年5月26日日曜日

http://atnd.org/events/38403


� ��<§Âöª¾��í»?ï±

ĔNáÄčĐ

éø¢¸dóČIâDå]SAVcWj@°ICrHkësgUvA

��{�µÝĄ]Sc]GHQ`ã@¦Hp`DãICseéø�k��{�]KXODBA




� ��<§Âöª¾��í»?ï±

#*'w��u�Å^üFe




� ��<§Âöª¾��í»?ï±

-�7*4:�¨]Sobč




� ��<§Âöª¾��í»?ï±

èĉ��IOKOK�sYlEč




� ��<§Âöª¾��í»?ï±

]k@ûÛIµJK`r^AA

Cs@ÑÏÔDW~�}AA




� ��<§Âöª¾��í»?ï±

��uÇQWÀc«J�¤aÔDWZLAA




� ��<§Âöª¾��í»?ï±

ÞÏcß¦]þąIÁ¶aĆE�24;��

��! ��ĎfKWVďäÍ£êòØu�çQ\GqgS�+663 ��999�3&.76&52�(20�




https://www.facebook.com/pakutaso

https://www.facebook.com/pakutaso

http://www.pakutaso.com/

http://www.pakutaso.com/

� ��<§Âöª¾��í»?ï±

Vv`^J×º]÷D×uéúQgQWč




� ��<§Âöª¾��í»?ï±

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




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






� ��<§Âöª¾��í»?ï±

Mc×āi^�"�^DEõFÎu�E^SZJqÔLrpQD^üE�I

tHqgQWč




� ��<§Âöª¾��í»?ï±

FZ�"�Z\ēē




� ��<§Âöª¾��í»?ï±

�2)*/@",*9@�21642//*4cđ[a¿©u¦Lr�uDDgSč




� ��<§Âöª¾��í»?ï±

�Fe@��uÇQW±ËuøìSrkcu�ZW^J

ボタン2 回押したよ！




� ��<§Âöª¾��í»?ï±

Controller

View Model

①画面のボタン押した

ボタン

2 回押したよ！




� ��<§Âöª¾��í»?ï±

Controller

View Model


②ボタン押されたに気づくViewは知らないかも

ボタン





� ��<§Âöª¾��í»?ï±

Controller

View Model



③モデルを操作する押した回数++

ボタン





� ��<§Âöª¾��í»?ï±

Controller

View Model




④モデル変更に気づくModelは気づいてないかも

ボタン





� ��<§Âöª¾��í»?ï±

Controller

View Model




④モデル変更に気づくModelは気づいてないかも

ボタン


ボタン





� ��<§Âöª¾��í»?ï�±

g@gtqK_DAA




� ��<§Âöª¾��í»?ï�±

]kDDM^ICrc]SA




� ��<§Âöª¾��í»?ï±

Controller

View Model

この３つ役割がはっきりしているからどこに何が記述されているのか分かりやすいのです！

D[kµ�®R{��a`rč�%�%�}�ċ«ćéI¹¡QmSVEč




� ��<§Âöª¾��í»?ï�±

FZč�}�ċ«ćéZ\ē




� ��<§Âöª¾��í»?ï�±

テスト駆動開発（TDD - Test Driven Development）とはテスト駆動開発は，小さなステップを繰り返してプログラムの設計と開発を行っていくソフトウェア開発手法です。テスト駆動開発は次の3ステップから構成されています。

• ステップ1：これから書く機能に対するテストを1つ書き，テストが失敗することを確認する（レッド）

• ステップ2：ステップ1のテストを通す最低限のコードを実装する（グリーン）• ステップ3：リファクタリングを行う（リファクタリング）リファクタリングを行ったあとは，再度ステップ1に戻り，次に作成する機能のテストを書いてテストを失敗させ，コードを書き，またリファクタリングを行い……というサイクルを回していきます。

î]dĀÐ¥ÙgUvAA]kĒÖa ��cx��ICroE]Sč

http://tddbc.doorkeeper.jp/events/3472






� ��<§Âöª¾��í»?ï�±







� ��<§Âöª¾��í»?ï�±

ÿuÆQgQ\�"�c¿©ukE�½ĀÐQgSč




Modelのお仕事　

� ��<§Âöª¾��í»?ï±

データの管理と計算をする係です。

もくもくと自分の仕事をこなします。描画など他の処理に関心がありません。➡誰にも依存しません！

Model

Controller

View Model




Viewの仕事� ��<§Âöª¾��í»?ï±

ユーザとの窓口です。ユーザ操作を受け付けます。Modelデータを分かりやすい形で表示します。

Modelの事に関心があってデータ変更を感知する事が出来ます。Modelに依存してます。

View

Controller

View Model




Controllerの仕事� ��<§Âöª¾��í»?ï±

仲介人です。Viewの操作イベントを感知してModelを操るのがお仕事です。

Viewの事もModelの事も良く知っている反面ViewとModelに依存してます。

Controller

Controller

View Model




� ��<§Âöª¾��í»?ï�±

]d��]Mv`>hWD`


èĉu�Z\hgQnEč




� ��<§Âöª¾��í»?ï�±

Y`ha��d!1)*45(24*�-5�ÃĊ]SA

C^@�-�7*4:�H�$*362kÃù]Sč�EÒd�ôaDsgQnEBA




http://underscorejs.org/

http://underscorejs.org/

http://jquery.com/

http://jquery.com/

http://zeptojs.com/

http://zeptojs.com/

� ��<§Âöª¾��í»?ï�±

gTd�2)*/u�qgQnEč




� ��<§Âöª¾��í»?ï�±

�±c�2)*/d{�uñæQgSč





� ��<§Âöª¾��í»?ï±

// 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

��³Ó

�� È

Ú¬ýð





� ��<§Âöª¾��í»?ï�±

ëp`DÌàI´D]Sb��HpĀÐQ\DJgS^




� ��<§Âöª¾��í»?ï±

Model

��Ê�


Backbone.Model.extend({Backbone.Modelをベースにプロパティやメソッドを追加できます。機能を拡張(extend)してModelを作ります。




� ��<§Âöª¾��í»?ï±

Model

��Ê�


defaults:Modelが持つデータの初期値を書きます。未設定の時に自動で値が設定されます。




� ��<§Âöª¾��í»?ï±

Model

��Ê�


Controller向けメソッドを準備外部Controllerからの操作を受け付けます。




� ��<§Âöª¾��í»?ï�±

Üa",*9^�21642//*4u�Z\hgQnEč




� ��<§Âöª¾��í»?ï�±

",*9d{�uñæQgSč





� ��<§Âöª¾��í»?ï±

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機能も含んでます！




� ��<§Âöª¾��í»?ï±


});

Controller

��Ê�

View

èĉÉè

Ê��

Backbone.View.extendBackbone.Viewをベースにプロパティやメソッドを追加できます。機能を拡張 (extend) して作ります




� ��<§Âöª¾��í»?ï±


});

el:‘セレクタ’このViewが管理するHTMLのDOMを指定します。

<section id="count_View" class="drop-shadow lifted" > <div> <span class="countUpNo" >0</span>回押したよ！ </div> <div> <button>押して！</button>

</div></section>





� ��<§Âöª¾��í»?ï±


});

initialize:function(){backboneの機能でインスタンス生成に呼ばれます。

listenTo(監視対象,‘イベント名’,動かすメソッド)backboneの機能でModelの変更を監視してます。




� ��<§Âöª¾��í»?ï±

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(); }

});


</div></section>

Model変更時に起動する関数を書きます主に描画処理になります。this.$(‘セレクタ’)Viewが管理している範囲で検索して高速です。$(‘セレクタ’)=$el.find(‘セレクタ’)




� ��<§Âöª¾��í»?ï±


});


</div></section>

events:{’イベント名セレクタ名’:呼出メソッド}View内部で発生するイベントを監視します。




� ��<§Âöª¾��í»?ï±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の役割)




� ��<§Âöª¾��í»?ï�±

ÕÀaMspcz�}uă«Sr¤æuÔJgS




� ��<§Âöª¾��í»?ï±

// DOMの読み込み完了時// 最初に起動する処理( jQueryの機能 )$(function(){ var model = new CountDataModel(); var view = new CountView({model:model}); });

ModelとView生成画面が読込みの所でModelとViewを生成して完成です！




� ��<§Âöª¾��í»?ï�±

]d·Ĉc|��u«HQ\hgQnEč

http://jsdo.it/itoKami1123/xMqT/






� ��<§Âöª¾��í»?ï�±

g^jč




� ��<§Âöª¾��í»?ï�±

=�!�u�&8&�(4,36]y�y�ÔK`p�"�QWÎI~�}c¯ĂI \r

=�"�]ÔK^�2)*/a� ��cùòI¥\M`Dc]�}�QmSD

=��oOVEč




� ��<§Âöª¾��í»?ï�±

��]SčCqI^ENPDgQWč




javascriptのmvc開発について調べてみた 〜backbone.js〜

Documents

javascriptのmvc開発について調べてみた〜backbone.js〜