SlideShare a Scribd company logo
1 of 72
Download to read offline
はじめよう Backbone.js
     TechBuzz 第4回.js系開発技術勉強会
アウトライン

1.スピーカーについて

2.発表の目的

3.Backbone.js とは

4.デモとソースの解説
はじめに自己紹介を
スピーカーについて

•豊川 弘樹 (25歳)
•アプリケーションエンジニア
•19歳のとき初めて C++ でオセロゲームを作る
•好きな言語は JavaScript, PHP, Obj-C
•好きな動物はアルパカ
•個人でも活動中@スタジオエサクレ
最近つくったもの




•iPhone アプリ
•なぞるロックで大切な写真を保管
•2月いっぱいは無料です
•http://studio-esakure.com/my-picture/
発表の目的は?
発表を聞いてできること

•Backbone.js がどんなものか想像できる
•Backbone.js のメリット・デメリットがわかる
•実際に Backbone.js を使ったソースを見る
発表を聞いてもできないこと

•Backbone.js を使った開発ができるようになる
•Backbone.js 以外の JS フレームワークとの比較
•イケてる Web サービスを作って異性にモテる
Backbone.js のあらまし
Backbone.js とは

•JavaScript の MVC フレームワーク
•大規模開発で効果を発揮する
•JavaScript フレームワークの中では知名度高い
•Rails や CakePHP など一般的に MVC と呼ばれる
                        ※

 フレームワークとは大きく異なる
 ※ 正確には MVC2

•オブザーバ・パターン
Backbone.js とは

•JavaScript の MVC フレームワーク
•大規模開発で効果を発揮する 自分で調べてみ
                              てね!!
•JavaScript フレームワークの中では知名度高い
•Rails や CakePHP など一般的に MVC と呼ばれる
                         ※

 フレームワークとは大きく異なる
 ※ 正確には MVC2

•オブザーバ・パターン
Backbone.js とは

•JavaScript の MVC フレームワーク
•大規模開発で効果を発揮する
•JavaScript フレームワークの中では知名度高い
•Rails や CakePHP など一般的に MVC と呼ばれる
                        ※

 フレームワークとは大きく異なる
 ※ 正確には MVC2
               ?

•オブザーバ・パターン
オブザーバ・パターン

“
•オブジェクトの状態を観察するような
 プログラムで使われるデザインパターンの一種        ”
                       ウィキペディア



•JavaScript はユーザーのアクション (イベント) を
 観察 (監視) するイベント駆動プログラミングが得意

•Backbone.js ではオブジェクトの状態変化も
 イベントとして監視する
オブザーバ・パターン

“
•オブジェクトの状態を観察するような
 プログラムで使われるデザインパターンの一種        ”
                   クリック時に
                          ∼する
                       ウィキペディア



•JavaScript はユーザーのアクション (イベント) を
 観察 (監視) するイベント駆動プログラミングが得意

•Backbone.js ではオブジェクトの状態変化も
 イベントとして監視する
オブザーバ・パターン

“
•オブジェクトの状態を観察するような
 プログラムで使われるデザインパターンの一種        ”
                      ウィキペディア



•JavaScript はユーザーのアクションこれ大事!!を
                       (イベント)
 観察 (監視) するイベント駆動プログラミングが得意

•Backbone.js ではオブジェクトの状態変化も
 イベントとして監視する
Backbone.js のオブジェクト

•View ... DOM の監視と操作
•Model ... データの取得・保存・更新・削除
•Collection ... Model の集合
•Router ... URL の監視
•History ... Router の履歴監視
•Controller というオブジェクトは存在しない
Backbone.js のオブジェクト

•View ... DOM の監視と操作
•Model ... データの取得・保存・更新・削除
•Collection ... Model の集合
•Router ... URL の監視       これ大事!!
•History ... Router の履歴監視
•Controller というオブジェクトは存在しない
Backbone.js の MVC



   M          V       C

 Model              Router
             View
Collection          History
Backbone.js の MVC


             MV重要!!
   M             V       C

 Model                 Router
                View
Collection             History
Collection
\C じゃないよ...!!/


   Collection
ここまでのまとめ

•Backbone.js は JavaScript の MVC フレームワーク
•一般的な MVC2 フレームワークとは違うらしい
•イベント駆動のオブザーバ・パターン
•Controller というオブジェクトはない
•M と V が大事らしい
もっと具体的なおはなし
ある Web サービス

Model                    Collection




            View




                   ユーザ
Model                  Collection


        \監視するぜ...!!/

            View
Model                Collection


        監視          監視


             View


               監視
Model                    Collection


        \クリックされた...!!/

            View


               クリック(イベント)

                   この記事見
                          たいよ
\待ってろ...!!/

  Model                   Collection


      呼び出し \データくれ...!!/


               View
非同期通信 (Ajax)


Model                Collection


             ・・・

              View
\取得OK...!!/   状態変化

  Model                     Collection


      イベント     \きたか...!!/

                 View
Model                  Collection


        \おまたせ...!!/

           View


              表示

                   ♪
Collection
\出番なし...!?/


 Collection
Collection 補足

•記事単体を扱うのが Model なら
 記事一覧など Model の集合を扱うのが Collection

•基本的には Model と同じ
•Model <-> Collection で相互にイベント監視
ここまでのまとめ

•View がユーザ, Model, Collection のイベントを監視
•Model, Collection は非同期通信 (Ajax) で
 Web API とデータをやりとりする

•データを取得 (更新) すると状態変化して
 イベントが発生する
実際に使ってみました
デモ

•1週間の天気予報を JSONP で取得して表示
 http://apps.alpacat.com/backbone_sample/
HTML
HTML (抜粋)
<head>
    <script  type="text/javascript"  src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>
    <script  type="text/javascript"  src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script>
    <script  type="text/javascript"  src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script>
</head>
<body>
    <div  id="content">
        <ul  id="nav-‐‑‒bar"  class="nav  nav-‐‑‒tabs"  style="margin-‐‑‒bottom:10px;">
            <li  class="nav-‐‑‒items  active"><a  href="javascript:void(0);">東京</a></li>
            <li  class="nav-‐‑‒items"><a  href="javascript:void(0);">⼤大阪</a></li>
        </ul>
        <ul  id="weekly"></ul>
    </div>
    
    <script  type="text/javascript"  src="lib/backbone/models/weather.js"></script>
    <script  type="text/javascript"  src="lib/backbone/views/content.js"></script>
    <script  type="text/javascript">
        var  weather  =  new  Weather();
        var  contentView  =  new  ContentView({model:weather});
    </script>
</body>
HTML (抜粋)                                                                  JS 読み込み
<head>
    <script  type="text/javascript"  src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>
    <script  type="text/javascript"  src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script>
    <script  type="text/javascript"  src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script>
</head>
<body>
    <div  id="content">
        <ul  id="nav-‐‑‒bar"  class="nav  nav-‐‑‒tabs"  style="margin-‐‑‒bottom:10px;">
            <li  class="nav-‐‑‒items  active"><a  href="javascript:void(0);">東京</a></li>
            <li  class="nav-‐‑‒items"><a  href="javascript:void(0);">⼤大阪</a></li>
        </ul>
        <ul  id="weekly"></ul>
    </div>
    
    <script  type="text/javascript"  src="lib/backbone/models/weather.js"></script>
    <script  type="text/javascript"  src="lib/backbone/views/content.js"></script>
    <script  type="text/javascript">
        var  weather  =  new  Weather();
        var  contentView  =  new  ContentView({model:weather});
    </script>
</body>
HTML (抜粋)
<head>
    <script  type="text/javascript"  src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>
    <script  type="text/javascript"  src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script>
    <script  type="text/javascript"  src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script>
                          View で扱
</head>                                      う
<body>
    <div  id="content">
        <ul  id="nav-‐‑‒bar"  class="nav  nav-‐‑‒tabs"  style="margin-‐‑‒bottom:10px;">
            <li  class="nav-‐‑‒items  active"><a  href="javascript:void(0);">東京</a></li>
            <li  class="nav-‐‑‒items"><a  href="javascript:void(0);">⼤大阪</a></li>
        </ul>
        <ul  id="weekly"></ul>
    </div>
    
    <script  type="text/javascript"  src="lib/backbone/models/weather.js"></script>
    <script  type="text/javascript"  src="lib/backbone/views/content.js"></script>
    <script  type="text/javascript">
        var  weather  =  new  Weather();
        var  contentView  =  new  ContentView({model:weather});
    </script>
</body>
HTML (抜粋)
<head>
    <script  type="text/javascript"  src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>
    <script  type="text/javascript"  src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script>
    <script  type="text/javascript"  src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script>
</head>
<body>
    <div  id="content">
        <ul  id="nav-‐‑‒bar"  class="nav  nav-‐‑‒tabs"  style="margin-‐‑‒bottom:10px;">
            <li  class="nav-‐‑‒items  active"><a  href="javascript:void(0);">東京</a></li>
            <li  class="nav-‐‑‒items"><a  href="javascript:void(0);">⼤大阪</a></li>
        </ul>
                                                オブジェクト
        <ul  id="weekly"></ul>                                     定義読み込み
    </div>
    
    <script  type="text/javascript"  src="lib/backbone/models/weather.js"></script>
    <script  type="text/javascript"  src="lib/backbone/views/content.js"></script>
    <script  type="text/javascript">
        var  weather  =  new  Weather();
        var  contentView  =  new  ContentView({model:weather});
    </script>
</body>
HTML (抜粋)
<head>
    <script  type="text/javascript"  src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>
    <script  type="text/javascript"  src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script>
    <script  type="text/javascript"  src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script>
</head>
<body>
    <div  id="content">
        <ul  id="nav-‐‑‒bar"  class="nav  nav-‐‑‒tabs"  style="margin-‐‑‒bottom:10px;">
            <li  class="nav-‐‑‒items  active"><a  href="javascript:void(0);">東京</a></li>
            <li  class="nav-‐‑‒items"><a  href="javascript:void(0);">⼤大阪</a></li>
        </ul>
        <ul  id="weekly"></ul>
    </div>
    
                                              実体化
    <script  type="text/javascript"  src="lib/backbone/models/weather.js"></script>
    <script  type="text/javascript"  src="lib/backbone/views/content.js"></script>
    <script  type="text/javascript">
        var  weather  =  new  Weather();
        var  contentView  =  new  ContentView({model:weather});
    </script>
</body>
HTML (抜粋)
<head>
    <script  type="text/javascript"  src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>
    <script  type="text/javascript"  src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script>
    <script  type="text/javascript"  src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script>
</head>
<body>
    <div  id="content">
        <ul  id="nav-‐‑‒bar"  class="nav  nav-‐‑‒tabs"  style="margin-‐‑‒bottom:10px;">
            <li  class="nav-‐‑‒items  active"><a  href="javascript:void(0);">東京</a></li>
            <li  class="nav-‐‑‒items"><a  href="javascript:void(0);">⼤大阪</a></li>
        </ul>
        <ul  id="weekly"></ul>
    </div>
    
    <script  type="text/javascript"  src="lib/backbone/models/weather.js"></script>
                                          Model 実体
                                                           化
    <script  type="text/javascript"  src="lib/backbone/views/content.js"></script>
    <script  type="text/javascript">
        var  weather  =  new  Weather();
        var  contentView  =  new  ContentView({model:weather});
    </script>
</body>
HTML (抜粋)
<head>
    <script  type="text/javascript"  src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>
    <script  type="text/javascript"  src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script>
    <script  type="text/javascript"  src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script>
</head>
<body>
    <div  id="content">
        <ul  id="nav-‐‑‒bar"  class="nav  nav-‐‑‒tabs"  style="margin-‐‑‒bottom:10px;">
            <li  class="nav-‐‑‒items  active"><a  href="javascript:void(0);">東京</a></li>
            <li  class="nav-‐‑‒items"><a  href="javascript:void(0);">⼤大阪</a></li>
        </ul>
        <ul  id="weekly"></ul>
    </div>
    
    <script  type="text/javascript"  src="lib/backbone/models/weather.js"></script>
                                                           View 実体
    <script  type="text/javascript"  src="lib/backbone/views/content.js"></script>
    <script  type="text/javascript">
                                                                          化
        var  weather  =  new  Weather();
        var  contentView  =  new  ContentView({model:weather});
    </script>
</body>
HTML (抜粋)
<head>
    <script  type="text/javascript"  src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>
    <script  type="text/javascript"  src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script>
    <script  type="text/javascript"  src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script>
</head>
<body>
    <div  id="content">
        <ul  id="nav-‐‑‒bar"  class="nav  nav-‐‑‒tabs"  style="margin-‐‑‒bottom:10px;">
            <li  class="nav-‐‑‒items  active"><a  href="javascript:void(0);">東京</a></li>
            <li  class="nav-‐‑‒items"><a  href="javascript:void(0);">⼤大阪</a></li>
        </ul>
        <ul  id="weekly"></ul>
    </div>
                                                                監視するモデル
                                                                                      のセット
    
    <script  type="text/javascript"  src="lib/backbone/models/weather.js"></script>
                                                           View 実体
    <script  type="text/javascript"  src="lib/backbone/views/content.js"></script>
    <script  type="text/javascript">
                                                                          化
        var  weather  =  new  Weather();
        var  contentView  =  new  ContentView({model:weather});
    </script>
</body>
Model
Backbone.Model.Weather
var  Weather  =  Backbone.Model.extend({
    defaults:  {
            "pref":  13
    },
    url:  function(){
        return  "pipe.php?pref="  +  this.get("pref");
    },
    sync:  function(method,  model,  options){
        /*  省省略略:  JSONP  取得⽤用に  Backbone.sync  をオーバーライド  */
        Backbone.sync(method,  model,  params);
    },
    parse:  function(res){
        var  parsed;
        var  pref  =  this.get("pref");
        /*  省省略略:  都道府県に合わせてデータ整形  */
        return  parsed;
    }
});
Backbone.Model.Weather
               初期値セッ
                             ト
var  Weather  =  Backbone.Model.extend({
    defaults:  {
            "pref":  13
    },
    url:  function(){
        return  "pipe.php?pref="  +  this.get("pref");
    },
    sync:  function(method,  model,  options){
        /*  省省略略:  JSONP  取得⽤用に  Backbone.sync  をオーバーライド  */
        Backbone.sync(method,  model,  params);
    },
    parse:  function(res){
        var  parsed;
        var  pref  =  this.get("pref");
        /*  省省略略:  都道府県に合わせてデータ整形  */
        return  parsed;
    }
});
Backbone.Model.Weather
var  Weather  =  Backbone.Model.extend({
    defaults:  {
            "pref":  13                    API の UR
    },
                                                       L
    url:  function(){
        return  "pipe.php?pref="  +  this.get("pref");
    },
    sync:  function(method,  model,  options){
        /*  省省略略:  JSONP  取得⽤用に  Backbone.sync  をオーバーライド  */
        Backbone.sync(method,  model,  params);
    },
    parse:  function(res){
        var  parsed;
        var  pref  =  this.get("pref");
        /*  省省略略:  都道府県に合わせてデータ整形  */
        return  parsed;
    }
});
Backbone.Model.Weather
var  Weather  =  Backbone.Model.extend({
    defaults:  {
            "pref":  13
    },
    url:  function(){                   データ取得用
                                                       メソッド
        return  "pipe.php?pref="  +  this.get("pref");
    },
    sync:  function(method,  model,  options){
        /*  省省略略:  JSONP  取得⽤用に  Backbone.sync  をオーバーライド  */
        Backbone.sync(method,  model,  params);
    },
    parse:  function(res){
        var  parsed;
        var  pref  =  this.get("pref");
        /*  省省略略:  都道府県に合わせてデータ整形  */
        return  parsed;
    }
});
Backbone.Model.Weather
var  Weather  =  Backbone.Model.extend({
    defaults:  {
            "pref":  13
    },
    url:  function(){
        return  "pipe.php?pref="  +  this.get("pref");
    },
    sync:  function(method,  model,  options){
                      データ取得後
        /*  省省略略:  JSONP  取得⽤用に  Backbone.sync  をオーバーライド  */
                                        に呼ばれる
        Backbone.sync(method,  model,  params);
    },
    parse:  function(res){
        var  parsed;
        var  pref  =  this.get("pref");
        /*  省省略略:  都道府県に合わせてデータ整形  */
        return  parsed;
    }
});
Backbone.Model.Weather
var  Weather  =  Backbone.Model.extend({
    defaults:  {
            "pref":  13
    },
    url:  function(){
                                return したデ
                                                  ータ
        return  "pipe.php?pref="  +  this.get("pref"); が属
                                                          性になる
    },
    sync:  function(method,  model,  options){
                      データ取得後
        /*  省省略略:  JSONP  取得⽤用に  Backbone.sync  をオーバーライド  */
                                        に呼ばれる
        Backbone.sync(method,  model,  params);
    },
    parse:  function(res){
        var  parsed;
        var  pref  =  this.get("pref");
        /*  省省略略:  都道府県に合わせてデータ整形  */
        return  parsed;
    }
});
View
Backbone.View.ContentView
var  ContentView  =  Backbone.View.extend({
    el:  "div#content",
    events:  {
        "click  .nav-‐‑‒items":  "clickedNavItems"
    },
    initialize:  function()  {
        this.listenTo(this.model,  "change",  this.render);
        this.model.fetch();
    },
    clickedNavItems:  function(e)  {
        /*  省省略略:  東京、⼤大阪のどちらがクリックされたかを判断  */
        if  (pref  &&  pref  !=  this.model.get("pref"))  {
            this.model.set({pref:  pref},  {silent:  true});
            this.model.fetch();
        }
        /*  省省略略:  ナビバーボタンの選択、⾮非選択スタイルをセット  */
    },
    render:  function()  {
        var  weekly  =  this.model.get("info");
        /*  省省略略:  Model  から受け取った情報に基づき  HTML  を描画  */
    }
});
Backbone.View.ContentView
var  ContentView  =  Backbone.View.extend({
    el:  "div#content",
                                     対象の要素
    events:  {
        "click  .nav-‐‑‒items":  "clickedNavItems"
    },
    initialize:  function()  {
        this.listenTo(this.model,  "change",  this.render);
        this.model.fetch();
    },
    clickedNavItems:  function(e)  {
        /*  省省略略:  東京、⼤大阪のどちらがクリックされたかを判断  */
        if  (pref  &&  pref  !=  this.model.get("pref"))  {
            this.model.set({pref:  pref},  {silent:  true});
            this.model.fetch();
        }
        /*  省省略略:  ナビバーボタンの選択、⾮非選択スタイルをセット  */
    },
    render:  function()  {
        var  weekly  =  this.model.get("info");
        /*  省省略略:  Model  から受け取った情報に基づき  HTML  を描画  */
    }
});
Backbone.View.ContentView
               監視イベントと
                                    コールバック
var  ContentView  =  Backbone.View.extend({
    el:  "div#content",
    events:  {
        "click  .nav-‐‑‒items":  "clickedNavItems"
    },
    initialize:  function()  {
        this.listenTo(this.model,  "change",  this.render);
        this.model.fetch();
    },
    clickedNavItems:  function(e)  {
        /*  省省略略:  東京、⼤大阪のどちらがクリックされたかを判断  */
        if  (pref  &&  pref  !=  this.model.get("pref"))  {
            this.model.set({pref:  pref},  {silent:  true});
            this.model.fetch();
        }
        /*  省省略略:  ナビバーボタンの選択、⾮非選択スタイルをセット  */
    },
    render:  function()  {
        var  weekly  =  this.model.get("info");
        /*  省省略略:  Model  から受け取った情報に基づき  HTML  を描画  */
    }
});
Backbone.View.ContentView
var  ContentView  =  Backbone.View.extend({
    el:  "div#content",
    events:  {
                                    初期化
        "click  .nav-‐‑‒items":  "clickedNavItems"
    },
    initialize:  function()  {
        this.listenTo(this.model,  "change",  this.render);
        this.model.fetch();
    },
    clickedNavItems:  function(e)  {
        /*  省省略略:  東京、⼤大阪のどちらがクリックされたかを判断  */
        if  (pref  &&  pref  !=  this.model.get("pref"))  {
            this.model.set({pref:  pref},  {silent:  true});
            this.model.fetch();
        }
        /*  省省略略:  ナビバーボタンの選択、⾮非選択スタイルをセット  */
    },
    render:  function()  {
        var  weekly  =  this.model.get("info");
        /*  省省略略:  Model  から受け取った情報に基づき  HTML  を描画  */
    }
});
Backbone.View.ContentView
var  ContentView  =  Backbone.View.extend({
    el:  "div#content",
    events:  {
        "click  .nav-‐‑‒items":  "clickedNavItems"
                                            Model 監視
    },
    initialize:  function()  {
        this.listenTo(this.model,  "change",  this.render);
        this.model.fetch();
    },
    clickedNavItems:  function(e)  {
        /*  省省略略:  東京、⼤大阪のどちらがクリックされたかを判断  */
        if  (pref  &&  pref  !=  this.model.get("pref"))  {
            this.model.set({pref:  pref},  {silent:  true});
            this.model.fetch();
        }
        /*  省省略略:  ナビバーボタンの選択、⾮非選択スタイルをセット  */
    },
    render:  function()  {
        var  weekly  =  this.model.get("info");
        /*  省省略略:  Model  から受け取った情報に基づき  HTML  を描画  */
    }
});
Backbone.View.ContentView
var  ContentView  =  Backbone.View.extend({
    el:  "div#content",
    events:  {
        "click  .nav-‐‑‒items":  "clickedNavItems"
    },                      データ取得
    initialize:  function()  {
        this.listenTo(this.model,  "change",  this.render);
        this.model.fetch();
    },
    clickedNavItems:  function(e)  {
        /*  省省略略:  東京、⼤大阪のどちらがクリックされたかを判断  */
        if  (pref  &&  pref  !=  this.model.get("pref"))  {
            this.model.set({pref:  pref},  {silent:  true});
            this.model.fetch();
        }
        /*  省省略略:  ナビバーボタンの選択、⾮非選択スタイルをセット  */
    },
    render:  function()  {
        var  weekly  =  this.model.get("info");
        /*  省省略略:  Model  から受け取った情報に基づき  HTML  を描画  */
    }
});
Backbone.View.ContentView
var  ContentView  =  Backbone.View.extend({
    el:  "div#content",
    events:  {
        "click  .nav-‐‑‒items":  "clickedNavItems"
    },
    initialize:  function()  {
                           オリジナルのコ
                                                 ールバック
        this.listenTo(this.model,  "change",  this.render);
        this.model.fetch();
    },
    clickedNavItems:  function(e)  {
        /*  省省略略:  東京、⼤大阪のどちらがクリックされたかを判断  */
        if  (pref  &&  pref  !=  this.model.get("pref"))  {
            this.model.set({pref:  pref},  {silent:  true});
            this.model.fetch();
        }
        /*  省省略略:  ナビバーボタンの選択、⾮非選択スタイルをセット  */
    },
    render:  function()  {
        var  weekly  =  this.model.get("info");
        /*  省省略略:  Model  から受け取った情報に基づき  HTML  を描画  */
    }
});
Backbone.View.ContentView
var  ContentView  =  Backbone.View.extend({
    el:  "div#content",
    events:  {
        "click  .nav-‐‑‒items":  "clickedNavItems"
    },
    initialize:  function()  {
        this.listenTo(this.model,  "change",  this.render);
        this.model.fetch();
    },
                                     モデル
    clickedNavItems:  function(e)  { に属性をセッ
                                                             ト
        /*  省省略略:  東京、⼤大阪のどちらがクリックされたかを判断  */
        if  (pref  &&  pref  !=  this.model.get("pref"))  {
            this.model.set({pref:  pref},  {silent:  true});
            this.model.fetch();
        }
        /*  省省略略:  ナビバーボタンの選択、⾮非選択スタイルをセット  */
    },
    render:  function()  {
        var  weekly  =  this.model.get("info");
        /*  省省略略:  Model  から受け取った情報に基づき  HTML  を描画  */
    }
});
Backbone.View.ContentView
var  ContentView  =  Backbone.View.extend({
    el:  "div#content",
    events:  {
        "click  .nav-‐‑‒items":  "clickedNavItems"
    },
    initialize:  function()  {
        this.listenTo(this.model,  "change",  this.render);
        this.model.fetch();
    },
    clickedNavItems:  function(e)  {
        /*  省省略略:  東京、⼤大阪のどちらがクリックされたかを判断  */
                               データ取得
        if  (pref  &&  pref  !=  this.model.get("pref"))  {
            this.model.set({pref:  pref},  {silent:  true});
            this.model.fetch();
        }
        /*  省省略略:  ナビバーボタンの選択、⾮非選択スタイルをセット  */
    },
    render:  function()  {
        var  weekly  =  this.model.get("info");
        /*  省省略略:  Model  から受け取った情報に基づき  HTML  を描画  */
    }
});
Backbone.View.ContentView
var  ContentView  =  Backbone.View.extend({
    el:  "div#content",
    events:  {
        "click  .nav-‐‑‒items":  "clickedNavItems"
    },
    initialize:  function()  {
        this.listenTo(this.model,  "change",  this.render);
        this.model.fetch();
    },
    clickedNavItems:  function(e)  {
        /*  省省略略:  東京、⼤大阪のどちらがクリックされたかを判断  */
        if  (pref  &&  pref  !=  this.model.get("pref"))  {
            this.model.set({pref:  pref},  {silent:  true});
            this.model.fetch();
        }                         描画
        /*  省省略略:  ナビバーボタンの選択、⾮非選択スタイルをセット  */
    },
    render:  function()  {
        var  weekly  =  this.model.get("info");
        /*  省省略略:  Model  から受け取った情報に基づき  HTML  を描画  */
    }
});
Backbone.View.ContentView
var  ContentView  =  Backbone.View.extend({
    el:  "div#content",
    events:  {
        "click  .nav-‐‑‒items":  "clickedNavItems"
    },
    initialize:  function()  {
        this.listenTo(this.model,  "change",  this.render);
        this.model.fetch();
    },
    clickedNavItems:  function(e)  {
        /*  省省略略:  東京、⼤大阪のどちらがクリックされたかを判断  */
        if  (pref  &&  pref  !=  this.model.get("pref"))  {
            this.model.set({pref:  pref},  {silent:  true});
            this.model.fetch();
        }
                    モデルの属性(
                                          データ)を取得
        /*  省省略略:  ナビバーボタンの選択、⾮非選択スタイルをセット  */
    },
    render:  function()  {
        var  weekly  =  this.model.get("info");
        /*  省省略略:  Model  から受け取った情報に基づき  HTML  を描画  */
    }
});
デモのソースは GitHub にあります
https://github.com/otoyo0122/backbone_sample




     \Apache 上で動かしてみてね!!/
\すごいぞ Backbone.js !!/


      Collection
ヒソヒソ...
                    (この規模なら使う必要なくね?)




              Collection


ヒソヒソ...
(普通に書いた方が早い気が...)
Backbone.js とは
                  これ大事!!
•JavaScript の MVC フレームワーク
•大規模開発で効果を発揮する
•JavaScript フレームワークの中では知名度高い
•Rails や CakePHP など一般的に MVC と呼ばれる
                           ※

 フレームワークとは大きく異なる
 ※ 正確には MVC2

•オブザーバ・パターン
\えっ!?/


Collection
fin.
参考文献

•Backbone.js
  http://backbonejs.org/

•Backbone.js 入門
  http://qiita.com/items/16b799d0ec0a0ae3f78e

More Related Content

What's hot

実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決までRyuma Tsukano
 
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2Nishida Kansuke
 
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門Atsushi Tadokoro
 
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解するScc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解するJun Futakawa
 
モテる JavaScript
モテる JavaScriptモテる JavaScript
モテる JavaScriptOsamu Monoe
 
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介しくみ製作所
 
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)Daisuke Yamazaki
 
Kawaz的jQuery入門
Kawaz的jQuery入門Kawaz的jQuery入門
Kawaz的jQuery入門Kohki Miki
 
JavaScriptユーティリティライブラリの紹介
JavaScriptユーティリティライブラリの紹介JavaScriptユーティリティライブラリの紹介
JavaScriptユーティリティライブラリの紹介Yusuke Hirao
 
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門spring_raining
 
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。Yossy Taka
 
⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5Nishida Kansuke
 
The master plan of scaling a web application
The master plan ofscaling a web applicationThe master plan ofscaling a web application
The master plan of scaling a web applicationYusuke Wada
 
React を導入した フロントエンド開発
React を導入したフロントエンド開発React を導入したフロントエンド開発
React を導入した フロントエンド開発 daisuke-a-matsui
 
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介schoowebcampus
 
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなことJavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなことMayu Kimura
 
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1Nishida Kansuke
 
introduction to Marionette.js (jscafe14)
introduction to Marionette.js (jscafe14)introduction to Marionette.js (jscafe14)
introduction to Marionette.js (jscafe14)Ryuma Tsukano
 

What's hot (20)

実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
 
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
 
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
 
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解するScc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解する
 
モテる JavaScript
モテる JavaScriptモテる JavaScript
モテる JavaScript
 
2時間で学ぶjQuery
2時間で学ぶjQuery2時間で学ぶjQuery
2時間で学ぶjQuery
 
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
 
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
 
Kawaz的jQuery入門
Kawaz的jQuery入門Kawaz的jQuery入門
Kawaz的jQuery入門
 
JavaScriptユーティリティライブラリの紹介
JavaScriptユーティリティライブラリの紹介JavaScriptユーティリティライブラリの紹介
JavaScriptユーティリティライブラリの紹介
 
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
 
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。
 
⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5
 
The master plan of scaling a web application
The master plan ofscaling a web applicationThe master plan ofscaling a web application
The master plan of scaling a web application
 
React を導入した フロントエンド開発
React を導入したフロントエンド開発React を導入したフロントエンド開発
React を導入した フロントエンド開発
 
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
 
覚醒!JavaScript
覚醒!JavaScript覚醒!JavaScript
覚醒!JavaScript
 
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなことJavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなこと
 
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
 
introduction to Marionette.js (jscafe14)
introduction to Marionette.js (jscafe14)introduction to Marionette.js (jscafe14)
introduction to Marionette.js (jscafe14)
 

Similar to はじめよう Backbone.js

scala+liftで遊ぼう
scala+liftで遊ぼうscala+liftで遊ぼう
scala+liftで遊ぼうyouku
 
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for DesignMagento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for DesignMiho Nakano
 
20110714 j queryベーシック
20110714 j queryベーシック20110714 j queryベーシック
20110714 j queryベーシック良太 増子
 
Introduction for Browser Side MVC
Introduction for Browser Side MVCIntroduction for Browser Side MVC
Introduction for Browser Side MVCRyunosuke SATO
 
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & TipsjQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tipsyoshikawa_t
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】Yasuhito Yabe
 
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会Yukihiro Kitazawa
 
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3editionRails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3editionSatomi Tsujita
 
How do you like knockout?
How do you like knockout?How do you like knockout?
How do you like knockout?Narami Kiyokura
 
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Akira Inoue
 
Web制作勉強会 #2
Web制作勉強会 #2Web制作勉強会 #2
Web制作勉強会 #2Moto Yan
 
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイルJavaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイルMaaya Ishida
 
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門HTML5の前のJavaScript入門
HTML5の前のJavaScript入門Hiroki Toyokawa
 
JavaScriptテンプレートエンジンで活かすData API
JavaScriptテンプレートエンジンで活かすData APIJavaScriptテンプレートエンジンで活かすData API
JavaScriptテンプレートエンジンで活かすData APIHajime Fujimoto
 
【LT】 怖くない恐怖のScala.js
【LT】 怖くない恐怖のScala.js【LT】 怖くない恐怖のScala.js
【LT】 怖くない恐怖のScala.jsYuto Suzuki
 

Similar to はじめよう Backbone.js (20)

scala+liftで遊ぼう
scala+liftで遊ぼうscala+liftで遊ぼう
scala+liftで遊ぼう
 
Study Intro Backbone
Study Intro BackboneStudy Intro Backbone
Study Intro Backbone
 
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for DesignMagento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
 
20110714 j queryベーシック
20110714 j queryベーシック20110714 j queryベーシック
20110714 j queryベーシック
 
Introduction for Browser Side MVC
Introduction for Browser Side MVCIntroduction for Browser Side MVC
Introduction for Browser Side MVC
 
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & TipsjQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
 
いまさらJavaScript
いまさらJavaScriptいまさらJavaScript
いまさらJavaScript
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
 
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
 
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3editionRails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3edition
 
jQuery勉強会#3
jQuery勉強会#3jQuery勉強会#3
jQuery勉強会#3
 
How do you like knockout?
How do you like knockout?How do you like knockout?
How do you like knockout?
 
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
 
Web制作勉強会 #2
Web制作勉強会 #2Web制作勉強会 #2
Web制作勉強会 #2
 
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイルJavaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
 
Visualforce + jQuery
Visualforce + jQueryVisualforce + jQuery
Visualforce + jQuery
 
UnicastWS vol.2
UnicastWS vol.2UnicastWS vol.2
UnicastWS vol.2
 
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門HTML5の前のJavaScript入門
HTML5の前のJavaScript入門
 
JavaScriptテンプレートエンジンで活かすData API
JavaScriptテンプレートエンジンで活かすData APIJavaScriptテンプレートエンジンで活かすData API
JavaScriptテンプレートエンジンで活かすData API
 
【LT】 怖くない恐怖のScala.js
【LT】 怖くない恐怖のScala.js【LT】 怖くない恐怖のScala.js
【LT】 怖くない恐怖のScala.js
 

はじめよう Backbone.js

  • 1. はじめよう Backbone.js TechBuzz 第4回.js系開発技術勉強会
  • 4. スピーカーについて •豊川 弘樹 (25歳) •アプリケーションエンジニア •19歳のとき初めて C++ でオセロゲームを作る •好きな言語は JavaScript, PHP, Obj-C •好きな動物はアルパカ •個人でも活動中@スタジオエサクレ
  • 8. 発表を聞いてもできないこと •Backbone.js を使った開発ができるようになる •Backbone.js 以外の JS フレームワークとの比較 •イケてる Web サービスを作って異性にモテる
  • 10. Backbone.js とは •JavaScript の MVC フレームワーク •大規模開発で効果を発揮する •JavaScript フレームワークの中では知名度高い •Rails や CakePHP など一般的に MVC と呼ばれる ※ フレームワークとは大きく異なる ※ 正確には MVC2 •オブザーバ・パターン
  • 11. Backbone.js とは •JavaScript の MVC フレームワーク •大規模開発で効果を発揮する 自分で調べてみ てね!! •JavaScript フレームワークの中では知名度高い •Rails や CakePHP など一般的に MVC と呼ばれる ※ フレームワークとは大きく異なる ※ 正確には MVC2 •オブザーバ・パターン
  • 12. Backbone.js とは •JavaScript の MVC フレームワーク •大規模開発で効果を発揮する •JavaScript フレームワークの中では知名度高い •Rails や CakePHP など一般的に MVC と呼ばれる ※ フレームワークとは大きく異なる ※ 正確には MVC2 ? •オブザーバ・パターン
  • 13. オブザーバ・パターン “ •オブジェクトの状態を観察するような プログラムで使われるデザインパターンの一種 ” ウィキペディア •JavaScript はユーザーのアクション (イベント) を 観察 (監視) するイベント駆動プログラミングが得意 •Backbone.js ではオブジェクトの状態変化も イベントとして監視する
  • 14. オブザーバ・パターン “ •オブジェクトの状態を観察するような プログラムで使われるデザインパターンの一種 ” クリック時に ∼する ウィキペディア •JavaScript はユーザーのアクション (イベント) を 観察 (監視) するイベント駆動プログラミングが得意 •Backbone.js ではオブジェクトの状態変化も イベントとして監視する
  • 15. オブザーバ・パターン “ •オブジェクトの状態を観察するような プログラムで使われるデザインパターンの一種 ” ウィキペディア •JavaScript はユーザーのアクションこれ大事!!を (イベント) 観察 (監視) するイベント駆動プログラミングが得意 •Backbone.js ではオブジェクトの状態変化も イベントとして監視する
  • 16. Backbone.js のオブジェクト •View ... DOM の監視と操作 •Model ... データの取得・保存・更新・削除 •Collection ... Model の集合 •Router ... URL の監視 •History ... Router の履歴監視 •Controller というオブジェクトは存在しない
  • 17. Backbone.js のオブジェクト •View ... DOM の監視と操作 •Model ... データの取得・保存・更新・削除 •Collection ... Model の集合 •Router ... URL の監視 これ大事!! •History ... Router の履歴監視 •Controller というオブジェクトは存在しない
  • 18. Backbone.js の MVC M V C Model Router View Collection History
  • 19. Backbone.js の MVC MV重要!! M V C Model Router View Collection History
  • 22. ここまでのまとめ •Backbone.js は JavaScript の MVC フレームワーク •一般的な MVC2 フレームワークとは違うらしい •イベント駆動のオブザーバ・パターン •Controller というオブジェクトはない •M と V が大事らしい
  • 24. ある Web サービス Model Collection View ユーザ
  • 25. Model Collection \監視するぜ...!!/ View
  • 26. Model Collection 監視 監視 View 監視
  • 27. Model Collection \クリックされた...!!/ View クリック(イベント) この記事見 たいよ
  • 28. \待ってろ...!!/ Model Collection 呼び出し \データくれ...!!/ View
  • 29. 非同期通信 (Ajax) Model Collection ・・・ View
  • 30. \取得OK...!!/ 状態変化 Model Collection イベント \きたか...!!/ View
  • 31. Model Collection \おまたせ...!!/ View 表示 ♪
  • 34. Collection 補足 •記事単体を扱うのが Model なら 記事一覧など Model の集合を扱うのが Collection •基本的には Model と同じ •Model <-> Collection で相互にイベント監視
  • 35. ここまでのまとめ •View がユーザ, Model, Collection のイベントを監視 •Model, Collection は非同期通信 (Ajax) で Web API とデータをやりとりする •データを取得 (更新) すると状態変化して イベントが発生する
  • 37. デモ •1週間の天気予報を JSONP で取得して表示 http://apps.alpacat.com/backbone_sample/
  • 38. HTML
  • 39. HTML (抜粋) <head>    <script  type="text/javascript"  src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>    <script  type="text/javascript"  src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script>    <script  type="text/javascript"  src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script> </head> <body>    <div  id="content">        <ul  id="nav-‐‑‒bar"  class="nav  nav-‐‑‒tabs"  style="margin-‐‑‒bottom:10px;">            <li  class="nav-‐‑‒items  active"><a  href="javascript:void(0);">東京</a></li>            <li  class="nav-‐‑‒items"><a  href="javascript:void(0);">⼤大阪</a></li>        </ul>        <ul  id="weekly"></ul>    </div>        <script  type="text/javascript"  src="lib/backbone/models/weather.js"></script>    <script  type="text/javascript"  src="lib/backbone/views/content.js"></script>    <script  type="text/javascript">        var  weather  =  new  Weather();        var  contentView  =  new  ContentView({model:weather});    </script> </body>
  • 40. HTML (抜粋) JS 読み込み <head>    <script  type="text/javascript"  src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>    <script  type="text/javascript"  src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script>    <script  type="text/javascript"  src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script> </head> <body>    <div  id="content">        <ul  id="nav-‐‑‒bar"  class="nav  nav-‐‑‒tabs"  style="margin-‐‑‒bottom:10px;">            <li  class="nav-‐‑‒items  active"><a  href="javascript:void(0);">東京</a></li>            <li  class="nav-‐‑‒items"><a  href="javascript:void(0);">⼤大阪</a></li>        </ul>        <ul  id="weekly"></ul>    </div>        <script  type="text/javascript"  src="lib/backbone/models/weather.js"></script>    <script  type="text/javascript"  src="lib/backbone/views/content.js"></script>    <script  type="text/javascript">        var  weather  =  new  Weather();        var  contentView  =  new  ContentView({model:weather});    </script> </body>
  • 41. HTML (抜粋) <head>    <script  type="text/javascript"  src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>    <script  type="text/javascript"  src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script>    <script  type="text/javascript"  src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script> View で扱 </head> う <body>    <div  id="content">        <ul  id="nav-‐‑‒bar"  class="nav  nav-‐‑‒tabs"  style="margin-‐‑‒bottom:10px;">            <li  class="nav-‐‑‒items  active"><a  href="javascript:void(0);">東京</a></li>            <li  class="nav-‐‑‒items"><a  href="javascript:void(0);">⼤大阪</a></li>        </ul>        <ul  id="weekly"></ul>    </div>        <script  type="text/javascript"  src="lib/backbone/models/weather.js"></script>    <script  type="text/javascript"  src="lib/backbone/views/content.js"></script>    <script  type="text/javascript">        var  weather  =  new  Weather();        var  contentView  =  new  ContentView({model:weather});    </script> </body>
  • 42. HTML (抜粋) <head>    <script  type="text/javascript"  src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>    <script  type="text/javascript"  src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script>    <script  type="text/javascript"  src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script> </head> <body>    <div  id="content">        <ul  id="nav-‐‑‒bar"  class="nav  nav-‐‑‒tabs"  style="margin-‐‑‒bottom:10px;">            <li  class="nav-‐‑‒items  active"><a  href="javascript:void(0);">東京</a></li>            <li  class="nav-‐‑‒items"><a  href="javascript:void(0);">⼤大阪</a></li>        </ul> オブジェクト        <ul  id="weekly"></ul> 定義読み込み    </div>        <script  type="text/javascript"  src="lib/backbone/models/weather.js"></script>    <script  type="text/javascript"  src="lib/backbone/views/content.js"></script>    <script  type="text/javascript">        var  weather  =  new  Weather();        var  contentView  =  new  ContentView({model:weather});    </script> </body>
  • 43. HTML (抜粋) <head>    <script  type="text/javascript"  src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>    <script  type="text/javascript"  src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script>    <script  type="text/javascript"  src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script> </head> <body>    <div  id="content">        <ul  id="nav-‐‑‒bar"  class="nav  nav-‐‑‒tabs"  style="margin-‐‑‒bottom:10px;">            <li  class="nav-‐‑‒items  active"><a  href="javascript:void(0);">東京</a></li>            <li  class="nav-‐‑‒items"><a  href="javascript:void(0);">⼤大阪</a></li>        </ul>        <ul  id="weekly"></ul>    </div>     実体化    <script  type="text/javascript"  src="lib/backbone/models/weather.js"></script>    <script  type="text/javascript"  src="lib/backbone/views/content.js"></script>    <script  type="text/javascript">        var  weather  =  new  Weather();        var  contentView  =  new  ContentView({model:weather});    </script> </body>
  • 44. HTML (抜粋) <head>    <script  type="text/javascript"  src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>    <script  type="text/javascript"  src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script>    <script  type="text/javascript"  src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script> </head> <body>    <div  id="content">        <ul  id="nav-‐‑‒bar"  class="nav  nav-‐‑‒tabs"  style="margin-‐‑‒bottom:10px;">            <li  class="nav-‐‑‒items  active"><a  href="javascript:void(0);">東京</a></li>            <li  class="nav-‐‑‒items"><a  href="javascript:void(0);">⼤大阪</a></li>        </ul>        <ul  id="weekly"></ul>    </div>        <script  type="text/javascript"  src="lib/backbone/models/weather.js"></script> Model 実体 化    <script  type="text/javascript"  src="lib/backbone/views/content.js"></script>    <script  type="text/javascript">        var  weather  =  new  Weather();        var  contentView  =  new  ContentView({model:weather});    </script> </body>
  • 45. HTML (抜粋) <head>    <script  type="text/javascript"  src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>    <script  type="text/javascript"  src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script>    <script  type="text/javascript"  src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script> </head> <body>    <div  id="content">        <ul  id="nav-‐‑‒bar"  class="nav  nav-‐‑‒tabs"  style="margin-‐‑‒bottom:10px;">            <li  class="nav-‐‑‒items  active"><a  href="javascript:void(0);">東京</a></li>            <li  class="nav-‐‑‒items"><a  href="javascript:void(0);">⼤大阪</a></li>        </ul>        <ul  id="weekly"></ul>    </div>        <script  type="text/javascript"  src="lib/backbone/models/weather.js"></script> View 実体    <script  type="text/javascript"  src="lib/backbone/views/content.js"></script>    <script  type="text/javascript"> 化        var  weather  =  new  Weather();        var  contentView  =  new  ContentView({model:weather});    </script> </body>
  • 46. HTML (抜粋) <head>    <script  type="text/javascript"  src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>    <script  type="text/javascript"  src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script>    <script  type="text/javascript"  src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script> </head> <body>    <div  id="content">        <ul  id="nav-‐‑‒bar"  class="nav  nav-‐‑‒tabs"  style="margin-‐‑‒bottom:10px;">            <li  class="nav-‐‑‒items  active"><a  href="javascript:void(0);">東京</a></li>            <li  class="nav-‐‑‒items"><a  href="javascript:void(0);">⼤大阪</a></li>        </ul>        <ul  id="weekly"></ul>    </div> 監視するモデル のセット        <script  type="text/javascript"  src="lib/backbone/models/weather.js"></script> View 実体    <script  type="text/javascript"  src="lib/backbone/views/content.js"></script>    <script  type="text/javascript"> 化        var  weather  =  new  Weather();        var  contentView  =  new  ContentView({model:weather});    </script> </body>
  • 47. Model
  • 48. Backbone.Model.Weather var  Weather  =  Backbone.Model.extend({    defaults:  {            "pref":  13    },    url:  function(){        return  "pipe.php?pref="  +  this.get("pref");    },    sync:  function(method,  model,  options){        /*  省省略略:  JSONP  取得⽤用に  Backbone.sync  をオーバーライド  */        Backbone.sync(method,  model,  params);    },    parse:  function(res){        var  parsed;        var  pref  =  this.get("pref");        /*  省省略略:  都道府県に合わせてデータ整形  */        return  parsed;    } });
  • 49. Backbone.Model.Weather 初期値セッ ト var  Weather  =  Backbone.Model.extend({    defaults:  {            "pref":  13    },    url:  function(){        return  "pipe.php?pref="  +  this.get("pref");    },    sync:  function(method,  model,  options){        /*  省省略略:  JSONP  取得⽤用に  Backbone.sync  をオーバーライド  */        Backbone.sync(method,  model,  params);    },    parse:  function(res){        var  parsed;        var  pref  =  this.get("pref");        /*  省省略略:  都道府県に合わせてデータ整形  */        return  parsed;    } });
  • 50. Backbone.Model.Weather var  Weather  =  Backbone.Model.extend({    defaults:  {            "pref":  13 API の UR    }, L    url:  function(){        return  "pipe.php?pref="  +  this.get("pref");    },    sync:  function(method,  model,  options){        /*  省省略略:  JSONP  取得⽤用に  Backbone.sync  をオーバーライド  */        Backbone.sync(method,  model,  params);    },    parse:  function(res){        var  parsed;        var  pref  =  this.get("pref");        /*  省省略略:  都道府県に合わせてデータ整形  */        return  parsed;    } });
  • 51. Backbone.Model.Weather var  Weather  =  Backbone.Model.extend({    defaults:  {            "pref":  13    },    url:  function(){ データ取得用 メソッド        return  "pipe.php?pref="  +  this.get("pref");    },    sync:  function(method,  model,  options){        /*  省省略略:  JSONP  取得⽤用に  Backbone.sync  をオーバーライド  */        Backbone.sync(method,  model,  params);    },    parse:  function(res){        var  parsed;        var  pref  =  this.get("pref");        /*  省省略略:  都道府県に合わせてデータ整形  */        return  parsed;    } });
  • 52. Backbone.Model.Weather var  Weather  =  Backbone.Model.extend({    defaults:  {            "pref":  13    },    url:  function(){        return  "pipe.php?pref="  +  this.get("pref");    },    sync:  function(method,  model,  options){ データ取得後        /*  省省略略:  JSONP  取得⽤用に  Backbone.sync  をオーバーライド  */ に呼ばれる        Backbone.sync(method,  model,  params);    },    parse:  function(res){        var  parsed;        var  pref  =  this.get("pref");        /*  省省略略:  都道府県に合わせてデータ整形  */        return  parsed;    } });
  • 53. Backbone.Model.Weather var  Weather  =  Backbone.Model.extend({    defaults:  {            "pref":  13    },    url:  function(){ return したデ ータ        return  "pipe.php?pref="  +  this.get("pref"); が属 性になる    },    sync:  function(method,  model,  options){ データ取得後        /*  省省略略:  JSONP  取得⽤用に  Backbone.sync  をオーバーライド  */ に呼ばれる        Backbone.sync(method,  model,  params);    },    parse:  function(res){        var  parsed;        var  pref  =  this.get("pref");        /*  省省略略:  都道府県に合わせてデータ整形  */        return  parsed;    } });
  • 54. View
  • 55. Backbone.View.ContentView var  ContentView  =  Backbone.View.extend({    el:  "div#content",    events:  {        "click  .nav-‐‑‒items":  "clickedNavItems"    },    initialize:  function()  {        this.listenTo(this.model,  "change",  this.render);        this.model.fetch();    },    clickedNavItems:  function(e)  {        /*  省省略略:  東京、⼤大阪のどちらがクリックされたかを判断  */        if  (pref  &&  pref  !=  this.model.get("pref"))  {            this.model.set({pref:  pref},  {silent:  true});            this.model.fetch();        }        /*  省省略略:  ナビバーボタンの選択、⾮非選択スタイルをセット  */    },    render:  function()  {        var  weekly  =  this.model.get("info");        /*  省省略略:  Model  から受け取った情報に基づき  HTML  を描画  */    } });
  • 56. Backbone.View.ContentView var  ContentView  =  Backbone.View.extend({    el:  "div#content", 対象の要素    events:  {        "click  .nav-‐‑‒items":  "clickedNavItems"    },    initialize:  function()  {        this.listenTo(this.model,  "change",  this.render);        this.model.fetch();    },    clickedNavItems:  function(e)  {        /*  省省略略:  東京、⼤大阪のどちらがクリックされたかを判断  */        if  (pref  &&  pref  !=  this.model.get("pref"))  {            this.model.set({pref:  pref},  {silent:  true});            this.model.fetch();        }        /*  省省略略:  ナビバーボタンの選択、⾮非選択スタイルをセット  */    },    render:  function()  {        var  weekly  =  this.model.get("info");        /*  省省略略:  Model  から受け取った情報に基づき  HTML  を描画  */    } });
  • 57. Backbone.View.ContentView 監視イベントと コールバック var  ContentView  =  Backbone.View.extend({    el:  "div#content",    events:  {        "click  .nav-‐‑‒items":  "clickedNavItems"    },    initialize:  function()  {        this.listenTo(this.model,  "change",  this.render);        this.model.fetch();    },    clickedNavItems:  function(e)  {        /*  省省略略:  東京、⼤大阪のどちらがクリックされたかを判断  */        if  (pref  &&  pref  !=  this.model.get("pref"))  {            this.model.set({pref:  pref},  {silent:  true});            this.model.fetch();        }        /*  省省略略:  ナビバーボタンの選択、⾮非選択スタイルをセット  */    },    render:  function()  {        var  weekly  =  this.model.get("info");        /*  省省略略:  Model  から受け取った情報に基づき  HTML  を描画  */    } });
  • 58. Backbone.View.ContentView var  ContentView  =  Backbone.View.extend({    el:  "div#content",    events:  { 初期化        "click  .nav-‐‑‒items":  "clickedNavItems"    },    initialize:  function()  {        this.listenTo(this.model,  "change",  this.render);        this.model.fetch();    },    clickedNavItems:  function(e)  {        /*  省省略略:  東京、⼤大阪のどちらがクリックされたかを判断  */        if  (pref  &&  pref  !=  this.model.get("pref"))  {            this.model.set({pref:  pref},  {silent:  true});            this.model.fetch();        }        /*  省省略略:  ナビバーボタンの選択、⾮非選択スタイルをセット  */    },    render:  function()  {        var  weekly  =  this.model.get("info");        /*  省省略略:  Model  から受け取った情報に基づき  HTML  を描画  */    } });
  • 59. Backbone.View.ContentView var  ContentView  =  Backbone.View.extend({    el:  "div#content",    events:  {        "click  .nav-‐‑‒items":  "clickedNavItems" Model 監視    },    initialize:  function()  {        this.listenTo(this.model,  "change",  this.render);        this.model.fetch();    },    clickedNavItems:  function(e)  {        /*  省省略略:  東京、⼤大阪のどちらがクリックされたかを判断  */        if  (pref  &&  pref  !=  this.model.get("pref"))  {            this.model.set({pref:  pref},  {silent:  true});            this.model.fetch();        }        /*  省省略略:  ナビバーボタンの選択、⾮非選択スタイルをセット  */    },    render:  function()  {        var  weekly  =  this.model.get("info");        /*  省省略略:  Model  から受け取った情報に基づき  HTML  を描画  */    } });
  • 60. Backbone.View.ContentView var  ContentView  =  Backbone.View.extend({    el:  "div#content",    events:  {        "click  .nav-‐‑‒items":  "clickedNavItems"    }, データ取得    initialize:  function()  {        this.listenTo(this.model,  "change",  this.render);        this.model.fetch();    },    clickedNavItems:  function(e)  {        /*  省省略略:  東京、⼤大阪のどちらがクリックされたかを判断  */        if  (pref  &&  pref  !=  this.model.get("pref"))  {            this.model.set({pref:  pref},  {silent:  true});            this.model.fetch();        }        /*  省省略略:  ナビバーボタンの選択、⾮非選択スタイルをセット  */    },    render:  function()  {        var  weekly  =  this.model.get("info");        /*  省省略略:  Model  から受け取った情報に基づき  HTML  を描画  */    } });
  • 61. Backbone.View.ContentView var  ContentView  =  Backbone.View.extend({    el:  "div#content",    events:  {        "click  .nav-‐‑‒items":  "clickedNavItems"    },    initialize:  function()  { オリジナルのコ ールバック        this.listenTo(this.model,  "change",  this.render);        this.model.fetch();    },    clickedNavItems:  function(e)  {        /*  省省略略:  東京、⼤大阪のどちらがクリックされたかを判断  */        if  (pref  &&  pref  !=  this.model.get("pref"))  {            this.model.set({pref:  pref},  {silent:  true});            this.model.fetch();        }        /*  省省略略:  ナビバーボタンの選択、⾮非選択スタイルをセット  */    },    render:  function()  {        var  weekly  =  this.model.get("info");        /*  省省略略:  Model  から受け取った情報に基づき  HTML  を描画  */    } });
  • 62. Backbone.View.ContentView var  ContentView  =  Backbone.View.extend({    el:  "div#content",    events:  {        "click  .nav-‐‑‒items":  "clickedNavItems"    },    initialize:  function()  {        this.listenTo(this.model,  "change",  this.render);        this.model.fetch();    }, モデル    clickedNavItems:  function(e)  { に属性をセッ ト        /*  省省略略:  東京、⼤大阪のどちらがクリックされたかを判断  */        if  (pref  &&  pref  !=  this.model.get("pref"))  {            this.model.set({pref:  pref},  {silent:  true});            this.model.fetch();        }        /*  省省略略:  ナビバーボタンの選択、⾮非選択スタイルをセット  */    },    render:  function()  {        var  weekly  =  this.model.get("info");        /*  省省略略:  Model  から受け取った情報に基づき  HTML  を描画  */    } });
  • 63. Backbone.View.ContentView var  ContentView  =  Backbone.View.extend({    el:  "div#content",    events:  {        "click  .nav-‐‑‒items":  "clickedNavItems"    },    initialize:  function()  {        this.listenTo(this.model,  "change",  this.render);        this.model.fetch();    },    clickedNavItems:  function(e)  {        /*  省省略略:  東京、⼤大阪のどちらがクリックされたかを判断  */ データ取得        if  (pref  &&  pref  !=  this.model.get("pref"))  {            this.model.set({pref:  pref},  {silent:  true});            this.model.fetch();        }        /*  省省略略:  ナビバーボタンの選択、⾮非選択スタイルをセット  */    },    render:  function()  {        var  weekly  =  this.model.get("info");        /*  省省略略:  Model  から受け取った情報に基づき  HTML  を描画  */    } });
  • 64. Backbone.View.ContentView var  ContentView  =  Backbone.View.extend({    el:  "div#content",    events:  {        "click  .nav-‐‑‒items":  "clickedNavItems"    },    initialize:  function()  {        this.listenTo(this.model,  "change",  this.render);        this.model.fetch();    },    clickedNavItems:  function(e)  {        /*  省省略略:  東京、⼤大阪のどちらがクリックされたかを判断  */        if  (pref  &&  pref  !=  this.model.get("pref"))  {            this.model.set({pref:  pref},  {silent:  true});            this.model.fetch();        } 描画        /*  省省略略:  ナビバーボタンの選択、⾮非選択スタイルをセット  */    },    render:  function()  {        var  weekly  =  this.model.get("info");        /*  省省略略:  Model  から受け取った情報に基づき  HTML  を描画  */    } });
  • 65. Backbone.View.ContentView var  ContentView  =  Backbone.View.extend({    el:  "div#content",    events:  {        "click  .nav-‐‑‒items":  "clickedNavItems"    },    initialize:  function()  {        this.listenTo(this.model,  "change",  this.render);        this.model.fetch();    },    clickedNavItems:  function(e)  {        /*  省省略略:  東京、⼤大阪のどちらがクリックされたかを判断  */        if  (pref  &&  pref  !=  this.model.get("pref"))  {            this.model.set({pref:  pref},  {silent:  true});            this.model.fetch();        } モデルの属性( データ)を取得        /*  省省略略:  ナビバーボタンの選択、⾮非選択スタイルをセット  */    },    render:  function()  {        var  weekly  =  this.model.get("info");        /*  省省略略:  Model  から受け取った情報に基づき  HTML  を描画  */    } });
  • 68. ヒソヒソ... (この規模なら使う必要なくね?) Collection ヒソヒソ... (普通に書いた方が早い気が...)
  • 69. Backbone.js とは これ大事!! •JavaScript の MVC フレームワーク •大規模開発で効果を発揮する •JavaScript フレームワークの中では知名度高い •Rails や CakePHP など一般的に MVC と呼ばれる ※ フレームワークとは大きく異なる ※ 正確には MVC2 •オブザーバ・パターン
  • 71. fin.
  • 72. 参考文献 •Backbone.js http://backbonejs.org/ •Backbone.js 入門 http://qiita.com/items/16b799d0ec0a0ae3f78e