はじめよう Backbone.js

はじめよう Backbone.js
TechBuzz 第4回.js系開発技術勉強会

アウトライン

1.スピーカーについて

2.発表の目的

3.Backbone.js とは

4.デモとソースの解説

スピーカーについて

•豊川弘樹 (25歳)
•アプリケーションエンジニア
•19歳のとき初めて C++ でオセロゲームを作る
•好きな言語は JavaScript, PHP, Obj-C
•好きな動物はアルパカ
•個人でも活動中@スタジオエサクレ

最近つくったもの

•iPhone アプリ
•なぞるロックで大切な写真を保管
•2月いっぱいは無料です
•http://studio-esakure.com/my-picture/

発表を聞いてできること

•Backbone.js がどんなものか想像できる
•Backbone.js のメリット・デメリットがわかる
•実際に Backbone.js を使ったソースを見る

発表を聞いてもできないこと

•Backbone.js を使った開発ができるようになる
•Backbone.js 以外の JS フレームワークとの比較
•イケてる Web サービスを作って異性にモテる

Backbone.js とは

•JavaScript の MVC フレームワーク
•大規模開発で効果を発揮する
•JavaScript フレームワークの中では知名度高い
•Rails や CakePHP など一般的に MVC と呼ばれる
※

フレームワークとは大きく異なる
※ 正確には MVC2

•オブザーバ・パターン

Backbone.js とは

•大規模開発で効果を発揮する自分で調べてみ
てね!!
※



Backbone.js とは

※

?


オブザーバ・パターン

“
•オブジェクトの状態を観察するような
プログラムで使われるデザインパターンの一種 ”
ウィキペディア

•JavaScript はユーザーのアクション (イベント) を
観察 (監視) するイベント駆動プログラミングが得意

•Backbone.js ではオブジェクトの状態変化も
イベントとして監視する


“
クリック時に
∼する

•JavaScript はユーザーのアクション (イベント) を



“

•JavaScript はユーザーのアクションこれ大事!!を
(イベント)


Backbone.js のオブジェクト

•View ... DOM の監視と操作
•Model ... データの取得・保存・更新・削除
•Collection ... Model の集合
•Router ... URL の監視
•History ... Router の履歴監視
•Controller というオブジェクトは存在しない

Backbone.js のオブジェクト

•View ... DOM の監視と操作
•Model ... データの取得・保存・更新・削除
•Collection ... Model の集合
•Router ... URL の監視これ大事!!
•History ... Router の履歴監視
•Controller というオブジェクトは存在しない

Backbone.js の MVC

M V C

Model Router
View
Collection History

Backbone.js の MVC

MV重要!!
M V C

Model Router
View
Collection History

＼C じゃないよ...!!／

Collection

ここまでのまとめ

•Backbone.js は JavaScript の MVC フレームワーク
•一般的な MVC2 フレームワークとは違うらしい
•イベント駆動のオブザーバ・パターン
•Controller というオブジェクトはない
•M と V が大事らしい

もっと具体的なおはなし

ある Web サービス

Model Collection

View

ユーザ

Model Collection

＼監視するぜ...!!／

View

Model Collection

監視監視

View

監視

Model Collection

＼クリックされた...!!／

View

クリック(イベント)

この記事見
たいよ

＼待ってろ...!!／

Model Collection

呼び出し＼データくれ...!!／

View

非同期通信 (Ajax)

Model Collection

・・・

View

＼取得OK...!!／状態変化

Model Collection

イベント＼きたか...!!／

View

Model Collection

＼おまたせ...!!／

View

表示

♪

＼出番なし...!?／

Collection

Collection 補足

•記事単体を扱うのが Model なら
記事一覧など Model の集合を扱うのが Collection

•基本的には Model と同じ
•Model <-> Collection で相互にイベント監視

ここまでのまとめ

•View がユーザ, Model, Collection のイベントを監視
•Model, Collection は非同期通信 (Ajax) で
Web API とデータをやりとりする

•データを取得 (更新) すると状態変化して
イベントが発生する

実際に使ってみました

デモ

•1週間の天気予報を JSONP で取得して表示
http://apps.alpacat.com/backbone_sample/

HTML (抜粋)
<head>
<script type="text/javascript" src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>
<script type="text/javascript" src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script>
<script type="text/javascript" src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script>
</head>
<body>
<div id="content">
<ul id="nav-‐‑‒bar" class="nav nav-‐‑‒tabs" style="margin-‐‑‒bottom:10px;">
<li class="nav-‐‑‒items active"><a href="javascript:void(0);">東京</a></li>
<li class="nav-‐‑‒items"><a href="javascript:void(0);">⼤大阪</a></li>
</ul>
<ul id="weekly"></ul>
</div>

<script type="text/javascript" src="lib/backbone/models/weather.js"></script>
<script type="text/javascript" src="lib/backbone/views/content.js"></script>
<script type="text/javascript">
var weather = new Weather();
var contentView = new ContentView({model:weather});
</script>
</body>

HTML (抜粋) JS 読み込み
<head>
</head>
<body>
<div id="content">
</ul>
</div>

</script>
</body>

HTML (抜粋)
<head>
View で扱
</head> う
<body>
<div id="content">
</ul>
</div>

</script>
</body>

HTML (抜粋)
<head>
</head>
<body>
<div id="content">
</ul>
オブジェクト
<ul id="weekly"></ul> 定義読み込み
</div>

</script>
</body>

HTML (抜粋)
<head>
</head>
<body>
<div id="content">
</ul>
</div>

実体化
</script>
</body>

HTML (抜粋)
<head>
</head>
<body>
<div id="content">
</ul>
</div>

Model 実体
化
</script>
</body>

HTML (抜粋)
<head>
</head>
<body>
<div id="content">
</ul>
</div>

View 実体
化
</script>
</body>

HTML (抜粋)
<head>
</head>
<body>
<div id="content">
</ul>
</div>
監視するモデル
のセット

View 実体
化
</script>
</body>

Backbone.Model.Weather
var Weather = Backbone.Model.extend({
defaults: {
"pref": 13
},
url: function(){
return "pipe.php?pref=" + this.get("pref");
},
sync: function(method, model, options){
/* 省省略略: JSONP 取得⽤用に Backbone.sync をオーバーライド */
Backbone.sync(method, model, params);
},
parse: function(res){
var parsed;
var pref = this.get("pref");
/* 省省略略: 都道府県に合わせてデータ整形 */
return parsed;
}
});

初期値セッ
ト
defaults: {
"pref": 13
},
url: function(){
},
},
var parsed;
return parsed;
}
});

defaults: {
"pref": 13 API の UR
},
L
url: function(){
},
},
var parsed;
return parsed;
}
});

defaults: {
"pref": 13
},
url: function(){ データ取得用
メソッド
},
},
var parsed;
return parsed;
}
});

defaults: {
"pref": 13
},
url: function(){
},
データ取得後
に呼ばれる
},
var parsed;
return parsed;
}
});

defaults: {
"pref": 13
},
url: function(){
return したデ
ータ
return "pipe.php?pref=" + this.get("pref"); が属
性になる
},
データ取得後
に呼ばれる
},
var parsed;
return parsed;
}
});

Backbone.View.ContentView
var ContentView = Backbone.View.extend({
el: "div#content",
events: {
"click .nav-‐‑‒items": "clickedNavItems"
},
initialize: function() {
this.listenTo(this.model, "change", this.render);
this.model.fetch();
},
clickedNavItems: function(e) {
/* 省省略略: 東京、⼤大阪のどちらがクリックされたかを判断 */
if (pref && pref != this.model.get("pref")) {
this.model.set({pref: pref}, {silent: true});
this.model.fetch();
}
/* 省省略略: ナビバーボタンの選択、⾮非選択スタイルをセット */
},
render: function() {
var weekly = this.model.get("info");
/* 省省略略: Model から受け取った情報に基づき HTML を描画 */
}
});

el: "div#content",
対象の要素
events: {
},
this.model.fetch();
},
this.model.fetch();
}
},
}
});

監視イベントと
コールバック
el: "div#content",
events: {
},
this.model.fetch();
},
this.model.fetch();
}
},
}
});

el: "div#content",
events: {
初期化
},
this.model.fetch();
},
this.model.fetch();
}
},
}
});

el: "div#content",
events: {
Model 監視
},
this.model.fetch();
},
this.model.fetch();
}
},
}
});

el: "div#content",
events: {
}, データ取得
this.model.fetch();
},
this.model.fetch();
}
},
}
});

el: "div#content",
events: {
},
オリジナルのコ
ールバック
this.model.fetch();
},
this.model.fetch();
}
},
}
});

el: "div#content",
events: {
},
this.model.fetch();
},
モデル
clickedNavItems: function(e) { に属性をセッ
ト
this.model.fetch();
}
},
}
});

el: "div#content",
events: {
},
this.model.fetch();
},
データ取得
this.model.fetch();
}
},
}
});

el: "div#content",
events: {
},
this.model.fetch();
},
this.model.fetch();
} 描画
},
}
});

el: "div#content",
events: {
},
this.model.fetch();
},
this.model.fetch();
}
モデルの属性(
データ)を取得
},
}
});

デモのソースは GitHub にあります
https://github.com/otoyo0122/backbone_sample

＼Apache 上で動かしてみてね!!／

＼すごいぞ Backbone.js !!／

Collection

ヒソヒソ...
(この規模なら使う必要なくね?)

Collection

ヒソヒソ...
(普通に書いた方が早い気が...)

Backbone.js とは
これ大事!!
※



参考文献

•Backbone.js
http://backbonejs.org/

•Backbone.js 入門
http://qiita.com/items/16b799d0ec0a0ae3f78e

はじめよう Backbone.js

More Related Content

はじめよう Backbone.js