Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

15,171 views

Published on

2012/11/14に開催された「なんでもないただの先端技術勉強会(仮)」にて、Backbone.jsの概要説明に使ったスライドです。

Published in: Technology

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

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

×