2012/11/14 なんでもないただの先端技術勉強会（仮）ShareWis Inc. 門脇 恒平

5分でわかる？Backbone.js ことはじめ

1

自己紹介

•名前：門脇 恒平 @kadoppe

•職業：ソフトウェアエンジニアWebアプリケーション / iOSアプリケーション / Backbone.js

•所属：ShareWis Inc. CTO / HTML5-West.jpコアメンバ

2

Backbone.js とは

•クライアントサイドJavaScript MVC フレームワーク

•実際のところ

•WebアプリケーションにModel, View, Collection, Eventの構造・仕組みを提供するフレームワーク

•従来のMVCフレームワークとは別物

3

と言われている

Backbone.js のメリット•役割ごとにソースコードを分割・整理できる

•Model, View, Collectionそれぞれのコードを独立して開発しやすくなる

•特に大規模JavaScriptプロジェクトで有用

4

Model View Collection

（１）データ管理•データ管理

•アプリケーションに必要なあらゆるデータを管理

•例）Person Modelの firstName プロパティ に Taro を値として設定

•イベント管理

•プロパティの変化などのイベントを他のオブジェクトに伝える

5

Modelの役割

（２）ビジネスロジックの実装

•ビジネスロジック

•データの変換、結合、バリデーションなどを実現するメソッド

•例）firstName と lastNameをくっつけて返す fullName というメソッドを実装

6

Modelの役割

Modelの集合を扱う

•Modelの集合に対する様々な操作

•ソート、フィルタリング、検索など

•イベント管理

•Modelの追加、削除などのイベントを他のオブジェクトに伝える

7

Collectionの役割

（１）DOMツリーの管理

8

Viewの役割

View:

body div ul li

li

li

div form input

input

（１）DOMツリーの管理

8

Viewの役割

View:

body div ul li

li

li

div form input

input

（１）DOMツリーの管理

8

Viewの役割

View:

body div ul li

li

li

div form input

input

（１）DOMツリーの管理

8

Viewの役割

View:

body div ul li

li

li

div form input

input

（１）DOMツリーの管理

8

Viewの役割

View:

body div ul li

li

li

div form input

input

jQueryなどを使ってDOM操作・イベント監視

•Model・Collectionの操作

•Modelのプロパティ値変更

•CollectionへのModel追加・削除

•イベント監視

•ModelやCollectionが発生させるイベントの監視

9

（2）Model・Collectionの管理Viewの役割

• DOMツリーとModel・Collectionの橋渡し

10

（3）中継Viewの役割

View

Model

Collection

：イベント ：操作

まとめ

11

• Backbone.js

•Model, View, Collectionを提供してくれるフレームワーク

•大規模JavaScriptプロジェクトでも各部分を独立して開発しやくすなる

•紹介していない他の機能はまた別の機会に

• Router, RESTful JSONインタフェースなど

学習に役立つページ

12

• Backbone.js 公式ドキュメント

• http://backbonejs.org/

• Backbone.js Advent Calendar 2011

• 特に「Backbone.js入門」シリーズ

• http://qiita.com/advent-calendar/2011/backbone

• これまでの「MVC」とBackbone.jsの関係について少し理解した。

• http://kadoppe.com/archives/2012/04/relation-between-traditional-mvc-and-backbonejs.html

おしまい！

13

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