React.js + Flux入門 #scripty02

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 (ぴろしきっく)