Download - 5分でわかる?Backbone.js ことはじめ
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
(1)データ管理•データ管理
•アプリケーションに必要なあらゆるデータを管理
•例)Person Modelの firstName プロパティ に Taro を値として設定
•イベント管理
•プロパティの変化などのイベントを他のオブジェクトに伝える
5
Modelの役割
(2)ビジネスロジックの実装
•ビジネスロジック
•データの変換、結合、バリデーションなどを実現するメソッド
•例)firstName と lastNameをくっつけて返す fullName というメソッドを実装
6
Modelの役割
Modelの集合を扱う
•Modelの集合に対する様々な操作
•ソート、フィルタリング、検索など
•イベント管理
•Modelの追加、削除などのイベントを他のオブジェクトに伝える
7
Collectionの役割
(1)DOMツリーの管理
8
Viewの役割
View:
body div ul li
li
li
div form input
input
(1)DOMツリーの管理
8
Viewの役割
View:
body div ul li
li
li
div form input
input
(1)DOMツリーの管理
8
Viewの役割
View:
body div ul li
li
li
div form input
input
(1)DOMツリーの管理
8
Viewの役割
View:
body div ul li
li
li
div form input
input
(1)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
ご清聴ありがとうございました!