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