フロントエンドとJavaScript JavaScriptのMV*向けライブラリ BACKBONE.JSによるWebアプリケーション開発について 「オープンソースカンファレンス 2013 福岡」の HTML5と最近のフロントエンド事情で発表した資料です。

1. HTML5と最近のフロントエンド事情
フロントエンドとJavaScript
JavaScriptのMV*向けライブラリ
BACKBONE.JSによるWebアプリケーション開発について
2013/11/16(土) オープンソースカンファレンス 2013 Fukuoka
写真はWeb制作向け無料写真素材／ぱくたそ http://www.pakutaso.comを使ってます。ありがとうございます。

2. 自己紹介です
========
江原と申します。(@itokami1123)
福岡で業務アプリをJSで作って暮らしてます。
こんな野望が持ってます。
・業務系WebアプリのUIをモット使いやすくしたい！
・JavaEEとJSを仲良くさせたい！
・コミュニティの力で福岡を一つに！景気上昇↑雇用拡大↑
・生涯福岡でエンジニアしたい！

3. !
さてさて、今日のお話は
===============
!
jQueryのみで大きな規模のWebアプリを書くと
JSが非常に読みにくくなります。
!
そこで読みやすいコードを書く為に
Backbone.jsとMV*の考え方を導入しました。
!
結果良かった点、悪かった点をお話したいと思います。
!
どうぞよろしくお願いいたします！

4. (
ところで、MV*って何？

5. MV*とはModel(データ)とView(DOM描画)を分離する事をいいます。
(MVC、MVVM、MVP…一杯ありますがよく分からないのでまとめてMV*って表現してます)
ViewはModelの変更結果を反映する仕組みを持ちます。

6. (
あぁ、MVCね。既にMVCやってるよ？

7. 注
・o・
意
ブラウザ
View
HTML
今日お話しするのは
サーバサイドでHTMLを
生成するMVCではありません。
Controller
Model
業務ロジック
View
HTML生成
Model
業務ロジック
Webサーバ

8. 注
意
ブラウザ
View
クライアント(ブラウザ)側で
HTMLを生成するJavaScriptを
ModelとViewで分ける話です。
View
HTML
・o・
JSでHTML生成
Model
表示情報
XML/JSON
WebサービスAPI
Model
業務ロジック
Model
業務ロジック
Webサーバ

9. (
えっ、JavaScriptで分離？どうやってするの？

10. ModelとViewで分ける人気JSライブラリと言えば…
!
Angular.js （アンギュラージェイエス）
Knockout.js（ノックアウトジェイエス）
Backbone.js（バックボーンジェイエス）
!
この３つが有名です！

11. Googleトレンドで調べてみると…..
私は、Backbone.jsが推しなんですけど…
AngularJSが最近人気の急上昇みたいです。(ショック)
＼今日は Backbone.jsの説明します！／

12. (
JavaScriptでMV*ライブラリ？そんな大袈裟な…

13. では、Backbone.js導入前に起きた問題をご紹介します！

14. こういうWebアプリを作る事になりました。
連絡先一覧
阿部 辛抱
池面 太郎
池面 太郎
イケメン タロウ
イケメン タロウ
池面 太郎
島 次郎
○○○○○○○○○○○○○○○○
○○○○○○○○○○○○○○○○
○○○○○。
○○○○○○○○○○○○○○○○
○○○○○○○○○○○○○○○○
○○○○○。
蛇場 好尾
編集
登録
キャンセ
* 左の連絡先一覧を選ぶと右に詳細が表示される
* 編集ボタンで詳細編集可能

15. 3人のチームです。
A君とB君がフロントを担当で
もう一人(鯖君)がJSONを返却するAPIを担当します。
HTML
CSS
JavaScript
A君
B君
JSON
なんか
JSONを返す
WebAPIサーバ
君

16. A君とB君は仲良く役割を分担し、プロジェクト開始されました。
連絡先一覧
池面 太郎
阿部 辛抱
イケメン タロウ
池面 太郎
島 次郎
蛇場 好尾
A君
暗黒 美夢
サーバのJSONデータを
取得して表示するよ
○○○○○○○○○○○○○
○○○○○○○○○○○○○
○○○○○○○○○○○。
編集
B君
左で選んだ連絡先詳細表示と
内容を編集するよ

17. おっと！？開始そうそう二人の様子が！？
(╬⊙д⊙)
B君
Clickイベントが探しにくい！
A君
情報を編集しにくい！
えぇっ！
じゃぁどうすればいいのよ！
もう、仲良くしてよ〜 (ToT
君

18. B君はお怒りの様子…
では、A君のソースを見てみましょう！

19. 一覧を表示する為、Ajaxから取得したデータを描画してます。
描画情報
DOMイベント処理
DetailView#showメソッドを呼び出し
怒るような問題ないですよね。
でも、このままソースが長くなると…

20. あちこちにDOMイベントが点在すると
とっても探しにくくなりますね。

21. 他の人が書いたJSは、どこにDOMイベントが
書いているのか分かりにくいものですね。
ではどうすれば良いのでしょうか？
Backbone.jsを用いた解決方法を示します。

22. Backbone.jsでは DOMイベントとハンドラの組み合わせを
events という決まった位置に記載します。
どこにイベントが書いてあるか迷わないですね！ (^-^

23. Clickイベントが探しにくい！
情報を編集しにくいよ！(╬⊙д⊙)
次は情報について考えましょう！
B君

24. 現状の表示情報（データ）の取り扱い
イメージはこんな感じです。

25. 状
現
表示データ
＼AJaxで取得／
一覧表示
ListView
詳細表示
DetailView
DOM参照
DOM参照
A君
B君

26. 状
現
表示データ
一覧表示
＼DOMに反映！／ ListView
詳細表示
DetailView
DOM参照
DOM参照
A君
＼おっ出た！／
B君

27. 状
現
＼選択時にデータの参照を渡す！／
表示データ
表示データ
一覧表示
ListView
詳細表示
DetailView
DOM参照
DOM参照
A君
B君

28. 状
現
表示データ
表示データ
一覧表示
ListView
詳細表示
DetailView ＼DOMに反映！／
DOM参照
DOM参照
A君
B君 ＼お〜出た！／

29. 状
現
表示データ
表示データ
一覧表示
ListView
詳細表示
DetailView
DOM参照
DOM参照
A君
B君
＼編集！／

30. 状
現
表示データ
表示データ
一覧表示
ListView
詳細表示
DetailView
DOM参照
DOM参照
反映されない…
A君
B君
＼あれ？／

31. ではMV＊はどんな仕組みになるのでしょうか？
復習しましょう〜！ポイントは２つ。
Model(データ)と View(DOM描画)を分離する
ViewはModelの変更結果を反映する

32. V*
M
表示データ
＼AJaxで取得／
表示情報
DataModel
一覧表示
ListView
詳細表示
DetailView
DOM参照
DOM参照
A君
B君

33. V*
M
＼表示データ変更イベント発生！／
DataModel
＼データ変更に気づく！／
表示データ
＼データ変更に気づく！／
！
！
一覧表示
ListView
詳細表示
DetailView
DOM参照
DOM参照
A君
B君

34. V*
M
DataModel
表示データ
＼自動反映／
一覧表示
ListView
＼DOMに反映／
詳細表示
DetailView
DOM参照
DOM参照
＼DOMに反映／
A君
B君
＼お〜出た！／
＼お〜出た！／

35. V*
M
DataModel
表示データ
一覧表示
ListView
詳細表示
DetailView
DOM参照
DOM参照
A君
B君
＼編集／

36. V*
M
＼表示データ変更イベント発生！／
DataModel
＼データ変更に気づく！／
表示データ
＼データ変更に気づく！／
！
！
一覧表示
ListView
詳細表示
DetailView
DOM参照
DOM参照
A君
B君

37. V*
M
DataModel
表示データ
＼自動反映／
一覧表示
ListView
＼DOMに反映／
詳細表示
DetailView
DOM参照
DOM参照
A君
常に表示データが
反映される！
＼お〜出た！／
＼DOMに反映／
B君
＼お〜出た！／

38. V*
M
DataModel
表示データ
＼自動反映／
＼自動反映／
＼自動反映／
ListView
DetailView
HogeView
Fuga
DOM参照
DOM参照
DOM参照
DOM
何個VIewがあっても常に最新データが表示されるよ

39. Modelデータに連動するView(DOM表示)が増えるほど
MV*パターンは勝手に連動してくれて便利ですね！
Backbone.jsでは ModelデータとView(DOM描画)の
連動をどう書くのでしょうか？

40. イベント監視機能(listenTo)を使います。
this.list(Model)の監視とメソッド登録しています。
一覧情報モデル(this.listData)にて
reset発生時にcreateRenderメソッドが呼ばれます。
ここに一覧の描画処理を書きます。
一覧情報モデル(this.listData)にて
change発生時にupdateRenderメソッドが呼ばれます。
ここに一覧の描画処理を書きます。

41. A君
直したよ〜（どや！
B君
わぁ〜、読みやすくなったわ〜
お互いのJSに影響が少なくコーディング出来ます。
これで仲良しですね！めでたしめでたし。

42. まとめ！

43. !
!
Backbone.jsを導入してよかった点
=====================
!
DOM操作イベントの記述場所が決まってJSが読みやすい!
!
Modelイベント監視のlisetnToが便利！
!
やんわりとJSソースの構造にルールが出来る！
!
DOM操作がModelに無いのでテストが書きやすい！
!

44. !
!
Backbone.jsを導入で困っている点
=====================
!
JSコーディングが遅くなっちゃう
ModelとViewの設計が必要。鍛錬しないとサクサク書けません..
!
Modelデータ反映の記述は必要
でも、backbone.stickitというのを使うと出来るらしいですよ。
!
ルール違反して書けちゃう
→結局、JSを書く為には自分に厳しくなくちゃいけないです。

45. なんだかんだMV*ライブラリを使うとJSがきれいになります！
是非使ってみてくださいね！

46. 以上で私の発表は終わりです。ご清聴ありがとうございました！

47. HTML5@福岡のボス @akase244さん に交代します！