5分でわかる?backbone.js ことはじめ
DESCRIPTION
2012/11/14に開催された「なんでもないただの先端技術勉強会(仮)」にて、Backbone.jsの概要説明に使ったスライドです。TRANSCRIPT
![Page 1: 5分でわかる?Backbone.js ことはじめ](https://reader033.vdocuments.site/reader033/viewer/2022052412/558cc833d8b42a0c7c8b46e2/html5/thumbnails/1.jpg)
2012/11/14 なんでもないただの先端技術勉強会(仮)ShareWis Inc. 門脇 恒平
5分でわかる?Backbone.js ことはじめ
1
![Page 2: 5分でわかる?Backbone.js ことはじめ](https://reader033.vdocuments.site/reader033/viewer/2022052412/558cc833d8b42a0c7c8b46e2/html5/thumbnails/2.jpg)
自己紹介
•名前:門脇 恒平 @kadoppe
•職業:ソフトウェアエンジニアWebアプリケーション / iOSアプリケーション / Backbone.js
•所属:ShareWis Inc. CTO / HTML5-West.jpコアメンバ
2
![Page 3: 5分でわかる?Backbone.js ことはじめ](https://reader033.vdocuments.site/reader033/viewer/2022052412/558cc833d8b42a0c7c8b46e2/html5/thumbnails/3.jpg)
Backbone.js とは
•クライアントサイドJavaScript MVC フレームワーク
•実際のところ
•WebアプリケーションにModel, View, Collection, Eventの構造・仕組みを提供するフレームワーク
•従来のMVCフレームワークとは別物
3
と言われている
![Page 4: 5分でわかる?Backbone.js ことはじめ](https://reader033.vdocuments.site/reader033/viewer/2022052412/558cc833d8b42a0c7c8b46e2/html5/thumbnails/4.jpg)
Backbone.js のメリット•役割ごとにソースコードを分割・整理できる
•Model, View, Collectionそれぞれのコードを独立して開発しやすくなる
•特に大規模JavaScriptプロジェクトで有用
4
Model View Collection
![Page 5: 5分でわかる?Backbone.js ことはじめ](https://reader033.vdocuments.site/reader033/viewer/2022052412/558cc833d8b42a0c7c8b46e2/html5/thumbnails/5.jpg)
(1)データ管理•データ管理
•アプリケーションに必要なあらゆるデータを管理
•例)Person Modelの firstName プロパティ に Taro を値として設定
•イベント管理
•プロパティの変化などのイベントを他のオブジェクトに伝える
5
Modelの役割
![Page 6: 5分でわかる?Backbone.js ことはじめ](https://reader033.vdocuments.site/reader033/viewer/2022052412/558cc833d8b42a0c7c8b46e2/html5/thumbnails/6.jpg)
(2)ビジネスロジックの実装
•ビジネスロジック
•データの変換、結合、バリデーションなどを実現するメソッド
•例)firstName と lastNameをくっつけて返す fullName というメソッドを実装
6
Modelの役割
![Page 7: 5分でわかる?Backbone.js ことはじめ](https://reader033.vdocuments.site/reader033/viewer/2022052412/558cc833d8b42a0c7c8b46e2/html5/thumbnails/7.jpg)
Modelの集合を扱う
•Modelの集合に対する様々な操作
•ソート、フィルタリング、検索など
•イベント管理
•Modelの追加、削除などのイベントを他のオブジェクトに伝える
7
Collectionの役割
![Page 8: 5分でわかる?Backbone.js ことはじめ](https://reader033.vdocuments.site/reader033/viewer/2022052412/558cc833d8b42a0c7c8b46e2/html5/thumbnails/8.jpg)
(1)DOMツリーの管理
8
Viewの役割
View:
body div ul li
li
li
div form input
input
![Page 9: 5分でわかる?Backbone.js ことはじめ](https://reader033.vdocuments.site/reader033/viewer/2022052412/558cc833d8b42a0c7c8b46e2/html5/thumbnails/9.jpg)
(1)DOMツリーの管理
8
Viewの役割
View:
body div ul li
li
li
div form input
input
![Page 10: 5分でわかる?Backbone.js ことはじめ](https://reader033.vdocuments.site/reader033/viewer/2022052412/558cc833d8b42a0c7c8b46e2/html5/thumbnails/10.jpg)
(1)DOMツリーの管理
8
Viewの役割
View:
body div ul li
li
li
div form input
input
![Page 11: 5分でわかる?Backbone.js ことはじめ](https://reader033.vdocuments.site/reader033/viewer/2022052412/558cc833d8b42a0c7c8b46e2/html5/thumbnails/11.jpg)
(1)DOMツリーの管理
8
Viewの役割
View:
body div ul li
li
li
div form input
input
![Page 12: 5分でわかる?Backbone.js ことはじめ](https://reader033.vdocuments.site/reader033/viewer/2022052412/558cc833d8b42a0c7c8b46e2/html5/thumbnails/12.jpg)
(1)DOMツリーの管理
8
Viewの役割
View:
body div ul li
li
li
div form input
input
jQueryなどを使ってDOM操作・イベント監視
![Page 13: 5分でわかる?Backbone.js ことはじめ](https://reader033.vdocuments.site/reader033/viewer/2022052412/558cc833d8b42a0c7c8b46e2/html5/thumbnails/13.jpg)
•Model・Collectionの操作
•Modelのプロパティ値変更
•CollectionへのModel追加・削除
•イベント監視
•ModelやCollectionが発生させるイベントの監視
9
(2)Model・Collectionの管理Viewの役割
![Page 14: 5分でわかる?Backbone.js ことはじめ](https://reader033.vdocuments.site/reader033/viewer/2022052412/558cc833d8b42a0c7c8b46e2/html5/thumbnails/14.jpg)
• DOMツリーとModel・Collectionの橋渡し
10
(3)中継Viewの役割
View
Model
Collection
:イベント :操作
![Page 15: 5分でわかる?Backbone.js ことはじめ](https://reader033.vdocuments.site/reader033/viewer/2022052412/558cc833d8b42a0c7c8b46e2/html5/thumbnails/15.jpg)
まとめ
11
• Backbone.js
•Model, View, Collectionを提供してくれるフレームワーク
•大規模JavaScriptプロジェクトでも各部分を独立して開発しやくすなる
•紹介していない他の機能はまた別の機会に
• Router, RESTful JSONインタフェースなど
![Page 16: 5分でわかる?Backbone.js ことはじめ](https://reader033.vdocuments.site/reader033/viewer/2022052412/558cc833d8b42a0c7c8b46e2/html5/thumbnails/16.jpg)
学習に役立つページ
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
![Page 17: 5分でわかる?Backbone.js ことはじめ](https://reader033.vdocuments.site/reader033/viewer/2022052412/558cc833d8b42a0c7c8b46e2/html5/thumbnails/17.jpg)
おしまい!
13
ご清聴ありがとうございました!