RailsでReact.jsを動かしてみた話
Your SlideShare is downloading.
×
Check these out next
More Related Content
Slideshows for you (20)
Viewers also liked (6)
Similar to BACKBONE.JSによるWebアプリケーション開発について (20)
More from Toshio Ehara (20)
BACKBONE.JSによるWebアプリケーション開発について
- 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さん に交代します！
