5分でわかる？Backbone.js ことはじめ
•
34 likes•11,460 views
2012/11/14に開催された「なんでもないただの先端技術勉強会（仮）」にて、Backbone.jsの概要説明に使ったスライドです。
Recommended
More Related Content
What's hot
What's hot (20)
Similar to 5分でわかる？Backbone.js ことはじめ
Similar to 5分でわかる？Backbone.js ことはじめ (20)
More from Kohei Kadowaki
More from Kohei Kadowaki (17)
Recently uploaded
Recently uploaded (16)
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