Suche senden
Hochladen
JavascriptのMVC開発について調べてみた 〜BACKBONE.JS〜
•
11 gefällt mir
•
4,886 views
Toshio Ehara
Folgen
HTML5+α初心者勉強会 @福岡 第1回で発表しようとしていた資料です! もしかしたら第2回でそのまま使うかもしれませんので第2回いらっしゃる方は見ないでね!
Weniger lesen
Mehr lesen
Melden
Teilen
Melden
Teilen
1 von 53
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
今日から使える Microsoft Azure
今日から使える Microsoft Azure
Masaki Yamamoto
JavaScriptのテストコード 一緒に勉強しませんか??
JavaScriptのテストコード 一緒に勉強しませんか??
Toshio Ehara
BACKBONE.JSでMVC始めませんか?
BACKBONE.JSでMVC始めませんか?
Toshio Ehara
JavaScript MVC入門
JavaScript MVC入門
大樹 小倉
BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!
BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!
Toshio Ehara
MVC 03
MVC 03
Satoshi Shoda
MVC 01
MVC 01
Satoshi Shoda
MVC 02
MVC 02
Satoshi Shoda
Empfohlen
今日から使える Microsoft Azure
今日から使える Microsoft Azure
Masaki Yamamoto
JavaScriptのテストコード 一緒に勉強しませんか??
JavaScriptのテストコード 一緒に勉強しませんか??
Toshio Ehara
BACKBONE.JSでMVC始めませんか?
BACKBONE.JSでMVC始めませんか?
Toshio Ehara
JavaScript MVC入門
JavaScript MVC入門
大樹 小倉
BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!
BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!
Toshio Ehara
MVC 03
MVC 03
Satoshi Shoda
MVC 01
MVC 01
Satoshi Shoda
MVC 02
MVC 02
Satoshi Shoda
iPhoneアプリを Javaで書くよ?
iPhoneアプリを Javaで書くよ?
Toshio Ehara
Java初心者勉強会(2015/08/07)資料
Java初心者勉強会(2015/08/07)資料
Toshio Ehara
Java電卓勉強会資料
Java電卓勉強会資料
Toshio Ehara
BABELで、ES2015(ES6)を学ぼう!
BABELで、ES2015(ES6)を学ぼう!
Toshio Ehara
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Toshio Ehara
traceur-compilerで ECMAScript6を体験
traceur-compilerで ECMAScript6を体験
Toshio Ehara
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
Toshio Ehara
AngularJS入門の巻2
AngularJS入門の巻2
Toshio Ehara
JenkinsをJava開発でこんな感じで使っています
JenkinsをJava開発でこんな感じで使っています
Toshio Ehara
AngularJS入門の巻
AngularJS入門の巻
Toshio Ehara
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
Toshio Ehara
AngularJSのDirectiveで俺俺タグつくっちゃお
AngularJSのDirectiveで俺俺タグつくっちゃお
Toshio Ehara
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -
Toshio Ehara
福岡のIT勉強会情報の集め方(LT資料)
福岡のIT勉強会情報の集め方(LT資料)
Toshio Ehara
BACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSによるWebアプリケーション開発について
Toshio Ehara
BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)
BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)
Toshio Ehara
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
Toshio Ehara
LT Leap MotionとJavaScriptで遊ぼう!
LT Leap MotionとJavaScriptで遊ぼう!
Toshio Ehara
JavaScriptもBACKBONE.JSならスッキリ ~MVCぽいのを初体験!~
JavaScriptもBACKBONE.JSならスッキリ ~MVCぽいのを初体験!~
Toshio Ehara
はじめてのjQuery入門 01 2013年7月14日(日)
はじめてのjQuery入門 01 2013年7月14日(日)
Toshio Ehara
Weitere ähnliche Inhalte
Mehr von Toshio Ehara
iPhoneアプリを Javaで書くよ?
iPhoneアプリを Javaで書くよ?
Toshio Ehara
Java初心者勉強会(2015/08/07)資料
Java初心者勉強会(2015/08/07)資料
Toshio Ehara
Java電卓勉強会資料
Java電卓勉強会資料
Toshio Ehara
BABELで、ES2015(ES6)を学ぼう!
BABELで、ES2015(ES6)を学ぼう!
Toshio Ehara
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Toshio Ehara
traceur-compilerで ECMAScript6を体験
traceur-compilerで ECMAScript6を体験
Toshio Ehara
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
Toshio Ehara
AngularJS入門の巻2
AngularJS入門の巻2
Toshio Ehara
JenkinsをJava開発でこんな感じで使っています
JenkinsをJava開発でこんな感じで使っています
Toshio Ehara
AngularJS入門の巻
AngularJS入門の巻
Toshio Ehara
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
Toshio Ehara
AngularJSのDirectiveで俺俺タグつくっちゃお
AngularJSのDirectiveで俺俺タグつくっちゃお
Toshio Ehara
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -
Toshio Ehara
福岡のIT勉強会情報の集め方(LT資料)
福岡のIT勉強会情報の集め方(LT資料)
Toshio Ehara
BACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSによるWebアプリケーション開発について
Toshio Ehara
BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)
BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)
Toshio Ehara
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
Toshio Ehara
LT Leap MotionとJavaScriptで遊ぼう!
LT Leap MotionとJavaScriptで遊ぼう!
Toshio Ehara
JavaScriptもBACKBONE.JSならスッキリ ~MVCぽいのを初体験!~
JavaScriptもBACKBONE.JSならスッキリ ~MVCぽいのを初体験!~
Toshio Ehara
はじめてのjQuery入門 01 2013年7月14日(日)
はじめてのjQuery入門 01 2013年7月14日(日)
Toshio Ehara
Mehr von Toshio Ehara
(20)
iPhoneアプリを Javaで書くよ?
iPhoneアプリを Javaで書くよ?
Java初心者勉強会(2015/08/07)資料
Java初心者勉強会(2015/08/07)資料
Java電卓勉強会資料
Java電卓勉強会資料
BABELで、ES2015(ES6)を学ぼう!
BABELで、ES2015(ES6)を学ぼう!
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
traceur-compilerで ECMAScript6を体験
traceur-compilerで ECMAScript6を体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
AngularJS入門の巻2
AngularJS入門の巻2
JenkinsをJava開発でこんな感じで使っています
JenkinsをJava開発でこんな感じで使っています
AngularJS入門の巻
AngularJS入門の巻
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJSのDirectiveで俺俺タグつくっちゃお
AngularJSのDirectiveで俺俺タグつくっちゃお
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -
福岡のIT勉強会情報の集め方(LT資料)
福岡のIT勉強会情報の集め方(LT資料)
BACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)
BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
LT Leap MotionとJavaScriptで遊ぼう!
LT Leap MotionとJavaScriptで遊ぼう!
JavaScriptもBACKBONE.JSならスッキリ ~MVCぽいのを初体験!~
JavaScriptもBACKBONE.JSならスッキリ ~MVCぽいのを初体験!~
はじめてのjQuery入門 01 2013年7月14日(日)
はじめてのjQuery入門 01 2013年7月14日(日)
JavascriptのMVC開発について調べてみた 〜BACKBONE.JS〜
1.
JavascriptのMVC開発について調べてみた ∼BACKBONE.JS∼ 未 発 表 13年5月26日日曜日
2.
13年5月26日日曜日
3.
13年5月26日日曜日
4.
13年5月26日日曜日
5.
13年5月26日日曜日
6.
13年5月26日日曜日
7.
13年5月26日日曜日
8.
13年5月26日日曜日
9.
13年5月26日日曜日
10.
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日日曜日
11.
13年5月26日日曜日
12.
13年5月26日日曜日
13.
13年5月26日日曜日
14.
ボタン 2 回押したよ! 13年5月26日日曜日
15.
Controller View Model ①画面のボタン押した ボタン 2 回押したよ! 13年5月26日日曜日
16.
Controller View Model ①画面のボタン押した ②ボタン押されたに気づく Viewは知らないかも ボタン 2 回押したよ! 13年5月26日日曜日
17.
Controller View Model ①画面のボタン押した ②ボタン押されたに気づく Viewは知らないかも ③モデルを操作する 押した回数++ ボタン 2 回押したよ! 13年5月26日日曜日
18.
Controller View Model ①画面のボタン押した ②ボタン押されたに気づく Viewは知らないかも ③モデルを操作する 押した回数++ ④モデル変更に気づく Modelは気づいてないかも ボタン 2 回押したよ! 13年5月26日日曜日
19.
Controller View Model ①画面のボタン押した ②ボタン押されたに気づく Viewは知らないかも ③モデルを操作する 押した回数++ ④モデル変更に気づく Modelは気づいてないかも ボタン 2 回押したよ! ボタン 3
回押したよ! 13年5月26日日曜日
20.
13年5月26日日曜日
21.
13年5月26日日曜日
22.
Controller View Model この3つ役割がはっきりしているから どこに何が記述されているのか分かりやすいのです! 13年5月26日日曜日
23.
13年5月26日日曜日
24.
テスト駆動開発(TDD - Test
Driven Development)とは テスト駆動開発は,小さなステップを繰り返してプログラムの設計と開発を行っていくソフト ウェア開発手法です。テスト駆動開発は次の3ステップから構成されています。 • ステップ1:これから書く機能に対するテストを1つ書き,テストが失敗することを確認する ( レッド ) • ステップ2:ステップ1のテストを通す最低限のコードを実装する( グリーン ) • ステップ3:リファクタリングを行う( リファクタリング ) リファクタリングを行ったあとは,再度ステップ1に戻り,次に作成する機能のテストを書いてテ ストを失敗させ,コードを書き,またリファクタリングを行い……というサイクルを回していき ます。 http://tddbc.doorkeeper.jp/events/3472 13年5月26日日曜日
25.
http://tddbc.doorkeeper.jp/events/3472 13年5月26日日曜日
26.
13年5月26日日曜日
27.
Modelのお仕事 データの管理と計算をする係です。 もくもくと自分の仕事をこなします。 描画など他の処理に関心がありません。 ➡誰にも依存しません! Model Controller View Model 13年5月26日日曜日
28.
Viewの仕事 ユーザとの窓口です。 ユーザ操作を受け付けます。 Modelデータを分かりやすい形で表示します。 Modelの事に関心があってデータ変更を感知する 事が出来ます。Modelに依存してます。 View Controller View Model 13年5月26日日曜日
29.
Controllerの仕事 仲介人です。 Viewの操作イベントを感知して Modelを操るのがお仕事です。 Viewの事もModelの事も良く知っている反面 ViewとModelに依存してます。 Controller Controller View Model 13年5月26日日曜日
30.
ボタン 2 回押したよ! 13年5月26日日曜日
31.
13年5月26日日曜日
32.
13年5月26日日曜日
33.
ボタン 2 回押したよ! 13年5月26日日曜日
34.
// 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日日曜日
35.
13年5月26日日曜日
36.
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日日曜日
37.
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日日曜日
38.
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日日曜日
39.
13年5月26日日曜日
40.
ボタン 2 回押したよ! 13年5月26日日曜日
41.
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日日曜日
42.
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.extend Backbone.Viewをベースに プロパティやメソッドを追加できます。 機能を拡張 (extend) して作ります 13年5月26日日曜日
43.
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日日曜日
44.
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日日曜日
45.
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> Model変更時に起動する関数を書きます 主に描画処理になります。 this.$(‘セレクタ’) Viewが管理している範囲で検索して高速です。 $(‘セレクタ’)=$el.find(‘セレクタ’) 13年5月26日日曜日
46.
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> events:{’イベント名 セレクタ名’:呼出メソッド} View内部で発生するイベントを監視します。 13年5月26日日曜日
47.
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日日曜日
48.
13年5月26日日曜日
49.
// DOMの読み込み完了時 // 最初に起動する処理(
jQueryの機能 ) $(function(){ var model = new CountDataModel(); var view = new CountView({model:model}); }); ModelとView生成 画面が読込みの所でModelとViewを生成して完成です! 13年5月26日日曜日
50.
http://jsdo.it/itoKami1123/xMqT/ 13年5月26日日曜日
51.
13年5月26日日曜日
52.
13年5月26日日曜日
53.
13年5月26日日曜日
Jetzt herunterladen