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.

React.js + Flux入門 #scripty02

12,170 views

Published on

2014/12/15の勉強会にて発表された資料です。

SCRIPTY#2 ~フロントエンド紳士・淑女のための勉強会~
http://scripty.connpass.com/event/10345/

Published in: Technology
  • Be the first to comment

React.js + Flux入門 #scripty02

  1. 1. React.js + Flux 入門 リッチラボ株式会社 穴井宏幸 @pirosikick
 2014/12/18(Mon) SCRIPTY#2
  2. 2. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 穴井 宏幸 リッチラボ株式会社 エンジニア @pirosikick (ぴろしきっく)
  3. 3. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 • 普段はスマフォのリッチ広告 を作ったりしています。
  4. 4. JavaScript 好きです
  5. 5. よろしく お願い致します
  6. 6. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 • Facebook製の • UI構築のためのライブラリ
  7. 7. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 http://facebook.github.io/react/
  8. 8. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 • JUST THE UI • VIRTUAL DOM • DATA FLOW
  9. 9. JUST THE UI
  10. 10. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 • View専門のライブラリ • ルーティングやAPIリクエスト など、 • SPAを作るのに必須な機能は、 • 含まれていない
  11. 11. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 Hello! World
  12. 12. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 Hello! World !?!?
  13. 13. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 JSX • JSX →(コンパイル)→ JavaScript • JSの中でタグを書く • コンパイル方法 1. JSXTransformer.js 2. react-tools
  14. 14. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 JSXTransformer.js
  15. 15. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 react-tools # react-toolsをインストール $ npm i -g react-tools ! # jsx/にあるJSXを # コンパイルしてjs/に出力 $ jsx jsx/ js/
  16. 16. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 • Browserify → reactify • webpack → jsx-loader
  17. 17. Virtual DOM
  18. 18. Virtual DOM ⇓ 仮想DOM
  19. 19. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 なぜ仮想DOMという概念が俺達の魂を震えさせるのか http://qiita.com/mizchi/items/4d25bc26def1719d52e6
  20. 20. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 • 仮想のツリーを持つ • そこで差分を計算して、 • 本物のDOMに反映する • 高速、処理がシンプルに
  21. 21. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 Model View DOM 初期データ 追加 削除変更 初期レンダー 追加 削除変更 従来
  22. 22. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 View Model DOM 初期データ 追加 削除変更 初期レンダー 追加 削除変更 それぞれ処理が必要 従来
  23. 23. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 Store View DOM 最新の状態を参照 Virtual DOM 変更を通知 レンダー 古 新 差分 差分を反映 ←比較→ VDOM
  24. 24. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 Store View DOM Virtual DOM 変更を通知 レンダー 古 新 差分 差分を反映 ←比較→ シンプル!!!! VDOM 最新の状態を参照
  25. 25. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 Store View DOM 最新の状態を参照 Virtual DOM 変更を通知 レンダー 古 新 差分 差分を反映 ←比較→ DOM操作は 賢くやってくれる VDOM
  26. 26. DATA FLOW
  27. 27. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 親 子
  28. 28. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 親 子
  29. 29. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 親 子 属性経由でデータを渡す
  30. 30. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 • this.props • 親→子の一方通行 • 理解しやすい
  31. 31. その他 よく使う機能
  32. 32. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 propsのValidation
  33. 33. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 propsのValidation
  34. 34. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 propsのValidation
  35. 35. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 this.state
  36. 36. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 this.state stateが更新されると再レンダーされる
  37. 37. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 イベント
  38. 38. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 イベント • Eventはラップされてる • ブラウザ差異は気にしなくてよい • stopPropergation, preventDefault
 も実行可能
  39. 39. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 ライフサイクル
 メソッド http://facebook.github.io/react/docs/component-specs.html
  40. 40. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 Mount イベントのadd, removeに よく使われる
  41. 41. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 shouldComponentUpdate 再レンダーのタイミングを制御できる
  42. 42. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止
  43. 43. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 Flux • Facebookが提唱しているアーキテクチャ • 特定のフレームワークの名前ではない • 「MVC」と同じレイヤーの話 • View, Store, Dispatcher • ViewはReact.js
  44. 44. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 https://github.com/facebook/flux
  45. 45. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 Dispatcher Views Store Callback() Action Creater() Web API dispatch() ActionChange Event User Interaction
  46. 46. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 Dispatcher Views Store ①クリックとか Callback() Action Creater() Web API dispatch() ActionChange Event User Interaction
  47. 47. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 Dispatcher Views Store ②ActionCreater 実行 Callback() Action Creater() Web API dispatch() ActionChange Event User Interaction
  48. 48. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 Dispatcher Views Store Callback() Action Creater() Web API dispatch() Action ③Actionを発行 Change Event User Interaction
  49. 49. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 Dispatcher Views Store Callback() ④Storeの Callbackを実行 Action Creater() Web API dispatch() ActionChange Event User Interaction
  50. 50. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 Dispatcher Views Store Callback() Action Creater() Web API dispatch() ActionChange Event ⑤内部の状態を 変更 User Interaction
  51. 51. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 Dispatcher Views Store Callback() Action Creater() Web API dispatch() Action ⑥変更を通知Change Event User Interaction
  52. 52. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 Dispatcher Views Store Callback() Action Creater() Web API dispatch() Action ⑦View更新 User Interaction Change Event
  53. 53. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 Dispatcher Views Store Callback() Action Creater() Web API dispatch() ActionChange Event User Interaction データの流れが 一方通行
  54. 54. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 例)Todoリスト
  55. 55. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 <Application /> <TodoItem/> <TodoItem/> <TodoItem/> <TodoItem/>
  56. 56. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 フレームワーク • 今回は「Fluxxor」を使う • http://fluxxor.com/ • シンプルで小さいので理解しやすい
  57. 57. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 Dispatcher作成
  58. 58. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 Action Creatorたち dispatcher.dispatch() を実行
  59. 59. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 TodoStore作成
  60. 60. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 TodoStore作成
  61. 61. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 TodoStore作成
  62. 62. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 <Application />
  63. 63. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 <Application />
  64. 64. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 <Application />
  65. 65. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 <Application />
  66. 66. まとめ
  67. 67. シンプルでよい
  68. 68. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 Don't React http://staltz.com/dont-react/
  69. 69. ©2014 Rich Lab Co., Ltd. All Rights Reserved. 無断利用・転載禁止 他の仮想DOM系も 追っていきたい • https://github.com/Matt-Esch/ virtual-dom • https://github.com/segmentio/deku
  70. 70. Thank you:) @pirosikick (ぴろしきっく)

×