いまさら聞けない!?
Backbone.js 超入門
2013/6/8 第7回 HTML5など勉強会 - kadoppe
自己紹介
名前:門脇 恒平 @kadoppe
職業:ソフトウェアエンジニア
Backbone.js歴:1年半
所属:
HTML5-West.jp コアメンバ
ShareWis Inc. CTO
スライド:
http://www.slideshare.net/kadoppe
サンプルコード:
https://github.com/kadoppe/html5etc-7
おことわり
今日の話は
HTML5に
関係なし
だって・・・
HTML5など
勉強会
今日の内容
メイン: 5W1H
おまけ: 問題と失敗談
What:
Backbone.jsってなんだ?
Backbone.js
クライアントサイド
MVC
フレームワーク
時間がないので
ひらたく言うと
Webアプリの
JavaScriptコードを
楽に・キレイに
書くための道具
Where:
どこで使われてるの?
hulu
Foursquare
ShareWis
その他活用事例多数
Who:
どんな人が使えばいいの?
JavaScriptを
たくさん書く人
大規模な
JavaScriptを
書く人
フロントエンド
エンジニア
必要なスキル:
JavaScript
jQuery or Zepto.js
Zepto.js jQuery互換の軽量ライブラリ
あるといいスキル:
Underscore.js
Underscore.js 痒いところに手が届くJSライブラリ
When:
いつ使うの?
今でしょ!
Backbone.jsを
活用できる
Webアプリ例
例1:
シングルページ
アプリケーション
ページ遷移せずに
画面をどんどん
切り替えたいときに
例2:
大量のイベント処理・
DOM操作が発生する
アプリケーション
インタラクティブな
Webアプリを
つくりたいときに
例2:
データを扱う
アプリケーション
データをもとにして
ページを動的に
組立てたいときに
Why:
なぜ使うの?
Backbone.js
を使うべき
5つの理由
理由1:
コードの見通しが良くなる
プログラムを
複数のモジュールに
分割できる
メンテナンス性向上!
理由2:
シングルページアプリ
がつくりやすい
Routerが便利!
理由3:
様々な種類のデータ
が扱いやすい
Model・Collection
が便利!
理由4:
イベント処理・DOM
操作関連のコードが
カオスになりにくい
Viewが便利!
理由5:
類似フレームワークと
比べて軽量
6.3 KB
モバイル環境
でも使える
How:
どうやって使うの?
その前に
Backbone.jsの
構成要素を紹介
4つの構成要素
Router
Model
Collection
View
Router:
アプリの状態を管理
Model:
データの管理や加工
Collection:
複数のModelを扱う
配列みたいなもの
View:
イベント処理・DOM
操作・Model/
Collectionの管理
View
Collection
Model
相関図
Router
実際に何か
つくってみる
プチ
ライブ
コーディング
つくるもの:
ToDoリスト
スタート!
おさらい
アプリケーションの構造
FormView
TodoListView
StatsView
AppView
Todos
Collection
Todo
Model
ControlsView
View同士はCollectionのイベントを介して連携
実際に
つくってみて
わかったこと
1. 役割ごとに
コードを分割できた
2. 疎結合な
コードが書けた
疎結合=
コード間の結びつきが
弱いこと
Viewは
他のViewのことを
知らない
メンテナンス性が
高いコードが書けた!
ぜひ使おう
でもちょっと
待って
おまけ:
問題点と失敗談
Backbone.jsの問題:
決まり事が少ない
自由度が高い
うまく書かないと
スパゲッティコードが
途端にできあがる
失敗談1:
Viewのコードが長く
複雑になる
理由1:
Viewが担当する
ページ要素が広すぎる
理由1:
Viewの責任範囲をう
まく分割できてない
AppView
ページ全体をひとつのViewで
まかなおうとする
→ Viewのコードが長く、複雑に
理由1:
Viewの責任範囲をう
まく分割できてない
FormView
TodoListView
StatsView
AppView
ControlsView
ページを複数要素に分割して
小さなViewを割り当てる
→ コードの役割分担が明確に!
理由2:
Viewに
データ処理に関する
コードを書いている
View
Collection
Model
Viewにデータ処理に関する
コードがたくさん含まれる
→ Viewのコードが長く、複雑に
データ処理
データ処理
データ処理
データ処理
データ処理
データ処理
Model
Collection
View
データ処理に関するコードは
Model・Collectionへ
→ データ処理が再利用可能に
データ処理
データ処理
データ処理
データ処理
View
View
失敗談2:
View同士を連携させる
ためのコードを
たくさん書いてしまう
理由:
Model/Collection
のイベントを
うまく活用できてない
View
各Viewが直接連携している
→ 連携のためのコードが増える
→ 各Viewが疎結合ではなくなる
View
View View
View
View
Modelのイベントを介して連携
→ 連携のためのコードが減る
→ 各Viewが疎結合になる
View
View View
View
Model
他にも
考えることは
たくさん!
どんどん
情報共有
しましょー!
Let s Try !!
おしまい

いまさら聞けない!?Backbone.js 超入門