Backbone.js入門

Advanced Tech Night No.06
Java開発者が今から学ぶべき、JavaScriptによるWeb開発

2013/03/15
Acroquest Technology
村田賢一郎(@muraken720)

目次

1. はじめに
2. 少し昔話を・・・
3. AjaxによるクライアントWebアプリケーション
4. JavaScript MVCフレームワークの登場
5. Backbone.jsとは？
6. Backbone.jsの特長
7. アプリケーションを作ってみよう！
8. まとめ

2
Copyright © Acroquest Technology Co., Ltd. All rights reserved.

1. はじめに

自己紹介 =
氏名: ‘村田賢一郎’
twitter: ‘@muraken720’
所属: ‘Acroquest Technology Co.,Ltd.’
仕事:
‘ライフライン系ネットワーク集中監視システム開発’
‘フレームワーク開発’
言語: ‘Java & JavaScript’
興味:
‘node.js’
‘CoffeeScript’
‘機関車トーマス！’
3

宣伝です。

連載をさせて頂いてます！
http://appkitbox.com/knowledge

4

2. 少し昔話を・・・
 JavaによるWebアプリケーション開発の歴史
1. Servletの登場
 Servlet内にHTMLタグをゴリゴリ書くとか、さぁ大変！
2. JSPの登場
 今度はJSP内にアプリケーションロジックを書いくとか、もう大変！

Struts, SpringMVCなどのMVCフレームワークの登場

Client Side Server Side

HTML Action Logic Dao
CSS
JS Template Entity

5

3. AjaxによるクライアントWebアプリケーション
 クライアント側の技術の発展で、アーキテクチャの重心
がクライアント側にシフト
 Ajaxによる非同期通信。さらにCommet、WebSocketに発展！
 JSONによるデータ通信量の削減
 HTML5 / CSS3 / JavaScript
 モバイルアプリケーション
Client Side Server Side

Controller API Logic Dao
重心

View Model Entity

クライアント側でできる処理は、クライアントでやる
6

4. JavaScript MVCフレームワークの登場
 クライアント側でJavaScriptでゴリゴリ書くようになると
直ぐにスパゲティコードになってしまう。

JavaScript MVCフレームワークの登場

7

5. Backbone.jsとは？

1. JavaScript MVC Framework
2. DocumentCloudが公開しているOSS。
 http://backbonejs.org/
3. 開発者： Jeremy Ashkenas氏
 他にも以下を開発
• Underscore.js
• CoffeeScript
4. 豊富な採用事例
① LinkedIn
② Foursquare
③ 37Singals 他

8

6. Backbone.jsの特長①

1. Architecture

9

6-1. アプリケーションにアーキテクチャ（背骨）を作る
 一定のパターンで開発できる分かりやすいアーキテクチャ
hashChange
/ pushState 操作
Backbone Backbone
Router Model
trigger

制御
Backbone Backbone 参照
HTML
View Events
DOM Event 通知

trigger

View Backbone
描画
Template render
Collection
操作

10

6. Backbone.jsの特長②③

2. Simple

3. Lightweight
11

6-2. Simpleで柔軟性に富む

1. フレームワークというよりライブラリ感覚で使える
2. 他ライブラリとの併用が可能
3. プレゼンテーション機能がないため、お気に入りのライブラ
リを利用可能
 Unerscore.jsのtemplate以外にも、Handlebars, Hogan.js,
Mustacheなど
4. バインディング機能のような高度な機能がない分、ライブラ
リの見通しがよく、開発者が細かい制御が可能

12

6-3. Lightweightなフレームワーク

1. Backbone.js（5.6k）+Underscore.js（4k）
 Ember.js（42k）
 AngularJS（29k） Ember.js

 Spine(8.1k) AngularJS

Backbone.js+Underscore.
js
1. 依存ライブラリ：
Spine.js
 Underscore.js
 JQuery or Zepto.js 0 10 20 30 40 50

 json2.js

13

7. アプリケーションを作ってみよう！

 Message List アプリケーション

 jQuery Mobile + Backbone.js

14

7. サンプルアプリケーションの構成
Header

Message入力部

MessageList部

Footer
15


AppView

16


MessageListView

17

7-1. Modelはデータと固有メソッドを持つ

// Model
app.Message = Backbone.Model.extend({

defaluts: {
validateメソッドをオーバーライドするこ
"content": "" とで、バリデーション処理を実装できる。
}
Modelにアプリケーションに必要なメソッ
ドを定義する。
});
デフォルトではサーバサイドとRESTful
な同期を行う。

18

7-2. CollectionはModelを保持するDataStore

// Collection

app.MessageList = Backbone.Collection.extend({
model: app.Message
});
Collectionに格納するModelを定義。

デフォルトではサーバサイドと
RESTfulな同期を行う。

Underscore.jsによる便利なメソッド
を多数持つ。

19

7-3. CollectionとModelの使い方

this.messageList = new app.MessageList();

var message = new app.Message();
message.set({"content": text});
Collectionにaddするとaddイ
this.messageList.add(message); ベントが発生する。

Viewではこのイベントの通知
を受けて描画処理を行うよう
にする。

20

7-4. ViewにCollectionのEventをバインドする
app.MessageListView = Backbone.View.extend({

el: "#msglist", CollectionにModelが
addされたら、renderメ
template: _.template($("#li-template").html()),
ソッドを呼び出すように
定義。
initialize:function (messageList) {
this.collection = messageList;
this.collection.bind("add", this.render, this);
},

render:function (msg) { Viewの描画処理。
$(this.el).append(this.template(msg.toJSON())); jQuery Mobileを使用し
$(this.el).listview('refresh'); ているため、ライブラリ
} に必要な処理をしてい
}); る。

21

7-5. ViewにUIのEventをバインドする
app.AppView = Backbone.View.extend({
el: "#index",

events: { Viewのeventsプロパティを使
"click #addbtn": "onAdd" うとUIイベントを固有のメソッド
}, に関連付けることができる。

onAdd:function () {
var text = this.$("#msg").val();

var message = new app.Message();
message.set({"content": text});
this.messageList.add(message);

this.$("#msg").val("");
}
});
22

7-6. （補足）Backbone.Events
 Eventsが提供するイベントの監視設定と解除、イベントの発火を
利用することにより、コンポーネント間の依存関係を疎結合にす
ることができます。

23

7-7. （補足）Model/CollectionのRESTful JSON API
 Backbone.jsは、ajaxを利用したRESTful JSONインタ
フェースによるサーバ側への永続化機能を標準で備え
ている。

24

8. まとめ

1. Backbone.jsを使うことにより、アプリケーションにMVC
アーキテクチャを導入できる。
2. Model, Collection, Viewとそれぞれの役割をもった機
能に分割できる。
3. Eventsによりお互いを疎結合にしやすい。
4. 機能を小さく分割することで、再利用や並行開発が可
能となる。
5. 大規模なアプリケーションの開発に効果を発揮する。

25

ご清聴、ありがとうございました。

Infrastructures Evolution

26

Backbone.js入門

More Related Content

What's hot

Viewers also liked

Similar to Backbone.js入門

More from AdvancedTechNight

Backbone.js入門