5分でわかる?
Backbone.js ことはじめ
2012/11/14 なんでもないただの先端技術勉強会(仮)
ShareWis Inc. 門脇 恒平




                      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プロジェクトで有用



          Model        View      Collection



                         4
Model
の役割     (1)データ管理
• データ管理


 • アプリケーションに必要なあらゆるデータを管理


 •   例)Person Modelの firstName プロパティ に Taro
     を値として設定

• イベント管理


 •   プロパティの変化などのイベントを他のオブジェクトに
     伝える
                      5
Model
の役割
        (2)ビジネスロジックの実装


• ビジネスロジック


• データの変換、結合、バリデーションなどを実現す
  るメソッド

• 例)firstName   と lastNameをくっつけて返す
  fullName というメソッドを実装


                    6
Modelの集合を扱う
Collection
  の役割




• Modelの集合に対する様々な操作


  • ソート、フィルタリング、検索など


• イベント管理


  • Modelの追加、削除などのイベントを他のオブジェ
    クトに伝える


                  7
View
の役割     (1)DOMツリーの管理
 body     div        ul     li


                            li


                            li


          div       form   input


View:                      input
                8
View
の役割     (1)DOMツリーの管理
 body     div        ul     li


                            li


                            li


          div       form   input


View:                      input
                8
View
の役割     (1)DOMツリーの管理
 body     div        ul     li


                            li


                            li


          div       form   input


View:                      input
                8
View
の役割     (1)DOMツリーの管理
 body     div        ul     li


                            li


                            li


          div       form   input


View:                      input
                8
View
の役割     (1)DOMツリーの管理
 body     div        ul     li


                            li
 jQueryなどを使って
DOM操作・イベント監視                li


          div       form   input


View:                      input
                8
View
の役割
       (2)Model・Collectionの管理

• Model・Collectionの操作


 • Modelのプロパティ値変更


 • CollectionへのModel追加・削除


• イベント監視


 • ModelやCollectionが発生させるイベントの監視


                   9
View
の役割    (3)中継
• DOMツリーとModel・Collectionの橋渡し

    :イベント    :操作



                                Model



                   View

                                Collecti
                                  on



                   10
まとめ
• Backbone.js


 • Model,
      View, Collectionを提供してくれるフレー
  ムワーク

 • 大規模JavaScriptプロジェクトでも各部分を独立し
  て開発しやくすなる

• 紹介していない他の機能はまた別の機会に


 • Router,   RESTful JSONインタフェースなど
                     11
学習に役立つページ
•   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
おしまい!

ご清聴ありがとうございました!



       13

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

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