BACKBONE.JSによるWebアプリケーション開発について

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

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

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

( ところで、MV*って何？ View slide

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ！

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

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

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

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

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

http://javatechnology.net	483
http://pooledraft.com	408
http://dim0627.wordpress.com	248
http://toshi0607.com	72
https://twitter.com	32
https://www.chatwork.com	11
https://reader.aol.com	2
http://webcache.googleusercontent.com	1
https://kcw.kddi.ne.jp	1

BACKBONE.JSによるWebアプリケーション開発について

by Toshio Ehara , 技術・開発担当 at 株式会社キャム

on Nov 16, 2013

Statistics

Views

Actions

9 Embeds 1,258

Accessibility

Categories

Upload Details

Usage Rights

Report content