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.
はじめよう 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 と呼ばれる        ...
Backbone.js とは•JavaScript の MVC フレームワーク•大規模開発で効果を発揮する 自分で調べてみ                              てね!!•JavaScript フレームワークの中では知名度高...
Backbone.js とは•JavaScript の MVC フレームワーク•大規模開発で効果を発揮する•JavaScript フレームワークの中では知名度高い•Rails や CakePHP など一般的に MVC と呼ばれる        ...
オブザーバ・パターン“•オブジェクトの状態を観察するような プログラムで使われるデザインパターンの一種        ”                       ウィキペディア•JavaScript はユーザーのアクション (イベント) を...
オブザーバ・パターン“•オブジェクトの状態を観察するような プログラムで使われるデザインパターンの一種        ”                   クリック時に                          ∼する        ...
オブザーバ・パターン“•オブジェクトの状態を観察するような プログラムで使われるデザインパターンの一種        ”                      ウィキペディア•JavaScript はユーザーのアクションこれ大事!!を   ...
Backbone.js のオブジェクト•View ... DOM の監視と操作•Model ... データの取得・保存・更新・削除•Collection ... Model の集合•Router ... URL の監視•History ... ...
Backbone.js のオブジェクト•View ... DOM の監視と操作•Model ... データの取得・保存・更新・削除•Collection ... Model の集合•Router ... URL の監視       これ大事!!...
Backbone.js の MVC   M          V       C Model              Router             ViewCollection          History
Backbone.js の MVC             MV重要!!   M             V       C Model                 Router                ViewCollection ...
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="te...
HTML (抜粋)                                                                  JS 読み込み<head>    <script  type="text/javascript...
HTML (抜粋)<head>    <script  type="text/javascript"  src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>    <script  type="te...
HTML (抜粋)<head>    <script  type="text/javascript"  src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>    <script  type="te...
HTML (抜粋)<head>    <script  type="text/javascript"  src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>    <script  type="te...
HTML (抜粋)<head>    <script  type="text/javascript"  src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>    <script  type="te...
HTML (抜粋)<head>    <script  type="text/javascript"  src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>    <script  type="te...
HTML (抜粋)<head>    <script  type="text/javascript"  src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script>    <script  type="te...
Model
Backbone.Model.Weathervar  Weather  =  Backbone.Model.extend({    defaults:  {            "pref":  13    },    url:  funct...
Backbone.Model.Weather               初期値セッ                             トvar  Weather  =  Backbone.Model.extend({    defaul...
Backbone.Model.Weathervar  Weather  =  Backbone.Model.extend({    defaults:  {            "pref":  13                    A...
Backbone.Model.Weathervar  Weather  =  Backbone.Model.extend({    defaults:  {            "pref":  13    },    url:  funct...
Backbone.Model.Weathervar  Weather  =  Backbone.Model.extend({    defaults:  {            "pref":  13    },    url:  funct...
Backbone.Model.Weathervar  Weather  =  Backbone.Model.extend({    defaults:  {            "pref":  13    },    url:  funct...
View
Backbone.View.ContentViewvar  ContentView  =  Backbone.View.extend({    el:  "div#content",    events:  {        "click  ....
Backbone.View.ContentViewvar  ContentView  =  Backbone.View.extend({    el:  "div#content",                               ...
Backbone.View.ContentView               監視イベントと                                    コールバックvar  ContentView  =  Backbone.Vie...
Backbone.View.ContentViewvar  ContentView  =  Backbone.View.extend({    el:  "div#content",    events:  {                 ...
Backbone.View.ContentViewvar  ContentView  =  Backbone.View.extend({    el:  "div#content",    events:  {        "click  ....
Backbone.View.ContentViewvar  ContentView  =  Backbone.View.extend({    el:  "div#content",    events:  {        "click  ....
Backbone.View.ContentViewvar  ContentView  =  Backbone.View.extend({    el:  "div#content",    events:  {        "click  ....
Backbone.View.ContentViewvar  ContentView  =  Backbone.View.extend({    el:  "div#content",    events:  {        "click  ....
Backbone.View.ContentViewvar  ContentView  =  Backbone.View.extend({    el:  "div#content",    events:  {        "click  ....
Backbone.View.ContentViewvar  ContentView  =  Backbone.View.extend({    el:  "div#content",    events:  {        "click  ....
Backbone.View.ContentViewvar  ContentView  =  Backbone.View.extend({    el:  "div#content",    events:  {        "click  ....
デモのソースは GitHub にありますhttps://github.com/otoyo0122/backbone_sample     \Apache 上で動かしてみてね!!/
\すごいぞ Backbone.js !!/      Collection
ヒソヒソ...                    (この規模なら使う必要なくね?)              Collectionヒソヒソ...(普通に書いた方が早い気が...)
Backbone.js とは                  これ大事!!•JavaScript の MVC フレームワーク•大規模開発で効果を発揮する•JavaScript フレームワークの中では知名度高い•Rails や CakePHP ...
\えっ!?/Collection
fin.
参考文献•Backbone.js  http://backbonejs.org/•Backbone.js 入門  http://qiita.com/items/16b799d0ec0a0ae3f78e
Upcoming SlideShare
Loading in …5
×

はじめよう Backbone.js

40,737 views

Published on

2013年2月25日(月) に開催されました TechBuzz 第4回.js系開発技術勉強会で発表させていただきましたスライドになります。内容は Backbone.js の入門となっております。

  • Be the first to comment

はじめよう Backbone.js

  1. 1. はじめよう Backbone.js TechBuzz 第4回.js系開発技術勉強会
  2. 2. アウトライン1.スピーカーについて2.発表の目的3.Backbone.js とは4.デモとソースの解説
  3. 3. はじめに自己紹介を
  4. 4. スピーカーについて•豊川 弘樹 (25歳)•アプリケーションエンジニア•19歳のとき初めて C++ でオセロゲームを作る•好きな言語は JavaScript, PHP, Obj-C•好きな動物はアルパカ•個人でも活動中@スタジオエサクレ
  5. 5. 最近つくったもの•iPhone アプリ•なぞるロックで大切な写真を保管•2月いっぱいは無料です•http://studio-esakure.com/my-picture/
  6. 6. 発表の目的は?
  7. 7. 発表を聞いてできること•Backbone.js がどんなものか想像できる•Backbone.js のメリット・デメリットがわかる•実際に Backbone.js を使ったソースを見る
  8. 8. 発表を聞いてもできないこと•Backbone.js を使った開発ができるようになる•Backbone.js 以外の JS フレームワークとの比較•イケてる Web サービスを作って異性にモテる
  9. 9. Backbone.js のあらまし
  10. 10. Backbone.js とは•JavaScript の MVC フレームワーク•大規模開発で効果を発揮する•JavaScript フレームワークの中では知名度高い•Rails や CakePHP など一般的に MVC と呼ばれる ※ フレームワークとは大きく異なる ※ 正確には MVC2•オブザーバ・パターン
  11. 11. Backbone.js とは•JavaScript の MVC フレームワーク•大規模開発で効果を発揮する 自分で調べてみ てね!!•JavaScript フレームワークの中では知名度高い•Rails や CakePHP など一般的に MVC と呼ばれる ※ フレームワークとは大きく異なる ※ 正確には MVC2•オブザーバ・パターン
  12. 12. Backbone.js とは•JavaScript の MVC フレームワーク•大規模開発で効果を発揮する•JavaScript フレームワークの中では知名度高い•Rails や CakePHP など一般的に MVC と呼ばれる ※ フレームワークとは大きく異なる ※ 正確には MVC2 ?•オブザーバ・パターン
  13. 13. オブザーバ・パターン“•オブジェクトの状態を観察するような プログラムで使われるデザインパターンの一種 ” ウィキペディア•JavaScript はユーザーのアクション (イベント) を 観察 (監視) するイベント駆動プログラミングが得意•Backbone.js ではオブジェクトの状態変化も イベントとして監視する
  14. 14. オブザーバ・パターン“•オブジェクトの状態を観察するような プログラムで使われるデザインパターンの一種 ” クリック時に ∼する ウィキペディア•JavaScript はユーザーのアクション (イベント) を 観察 (監視) するイベント駆動プログラミングが得意•Backbone.js ではオブジェクトの状態変化も イベントとして監視する
  15. 15. オブザーバ・パターン“•オブジェクトの状態を観察するような プログラムで使われるデザインパターンの一種 ” ウィキペディア•JavaScript はユーザーのアクションこれ大事!!を (イベント) 観察 (監視) するイベント駆動プログラミングが得意•Backbone.js ではオブジェクトの状態変化も イベントとして監視する
  16. 16. Backbone.js のオブジェクト•View ... DOM の監視と操作•Model ... データの取得・保存・更新・削除•Collection ... Model の集合•Router ... URL の監視•History ... Router の履歴監視•Controller というオブジェクトは存在しない
  17. 17. Backbone.js のオブジェクト•View ... DOM の監視と操作•Model ... データの取得・保存・更新・削除•Collection ... Model の集合•Router ... URL の監視 これ大事!!•History ... Router の履歴監視•Controller というオブジェクトは存在しない
  18. 18. Backbone.js の MVC M V C Model Router ViewCollection History
  19. 19. Backbone.js の MVC MV重要!! M V C Model Router ViewCollection History
  20. 20. Collection
  21. 21. \C じゃないよ...!!/ Collection
  22. 22. ここまでのまとめ•Backbone.js は JavaScript の MVC フレームワーク•一般的な MVC2 フレームワークとは違うらしい•イベント駆動のオブザーバ・パターン•Controller というオブジェクトはない•M と V が大事らしい
  23. 23. もっと具体的なおはなし
  24. 24. ある Web サービスModel Collection View ユーザ
  25. 25. Model Collection \監視するぜ...!!/ View
  26. 26. Model Collection 監視 監視 View 監視
  27. 27. Model Collection \クリックされた...!!/ View クリック(イベント) この記事見 たいよ
  28. 28. \待ってろ...!!/ Model Collection 呼び出し \データくれ...!!/ View
  29. 29. 非同期通信 (Ajax)Model Collection ・・・ View
  30. 30. \取得OK...!!/ 状態変化 Model Collection イベント \きたか...!!/ View
  31. 31. Model Collection \おまたせ...!!/ View 表示 ♪
  32. 32. Collection
  33. 33. \出番なし...!?/ Collection
  34. 34. Collection 補足•記事単体を扱うのが Model なら 記事一覧など Model の集合を扱うのが Collection•基本的には Model と同じ•Model <-> Collection で相互にイベント監視
  35. 35. ここまでのまとめ•View がユーザ, Model, Collection のイベントを監視•Model, Collection は非同期通信 (Ajax) で Web API とデータをやりとりする•データを取得 (更新) すると状態変化して イベントが発生する
  36. 36. 実際に使ってみました
  37. 37. デモ•1週間の天気予報を JSONP で取得して表示 http://apps.alpacat.com/backbone_sample/
  38. 38. HTML
  39. 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. 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. 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. 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. 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. 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. 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. 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. 47. Model
  48. 48. Backbone.Model.Weathervar  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. 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. 50. Backbone.Model.Weathervar  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. 51. Backbone.Model.Weathervar  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. 52. Backbone.Model.Weathervar  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. 53. Backbone.Model.Weathervar  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. 54. View
  55. 55. Backbone.View.ContentViewvar  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. 56. Backbone.View.ContentViewvar  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. 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. 58. Backbone.View.ContentViewvar  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. 59. Backbone.View.ContentViewvar  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. 60. Backbone.View.ContentViewvar  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. 61. Backbone.View.ContentViewvar  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. 62. Backbone.View.ContentViewvar  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. 63. Backbone.View.ContentViewvar  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. 64. Backbone.View.ContentViewvar  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. 65. Backbone.View.ContentViewvar  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  を描画  */    }});
  66. 66. デモのソースは GitHub にありますhttps://github.com/otoyo0122/backbone_sample \Apache 上で動かしてみてね!!/
  67. 67. \すごいぞ Backbone.js !!/ Collection
  68. 68. ヒソヒソ... (この規模なら使う必要なくね?) Collectionヒソヒソ...(普通に書いた方が早い気が...)
  69. 69. Backbone.js とは これ大事!!•JavaScript の MVC フレームワーク•大規模開発で効果を発揮する•JavaScript フレームワークの中では知名度高い•Rails や CakePHP など一般的に MVC と呼ばれる ※ フレームワークとは大きく異なる ※ 正確には MVC2•オブザーバ・パターン
  70. 70. \えっ!?/Collection
  71. 71. fin.
  72. 72. 参考文献•Backbone.js http://backbonejs.org/•Backbone.js 入門 http://qiita.com/items/16b799d0ec0a0ae3f78e

×