Download as PDF, PPTX
Uploaded byYahoo!デベロッパーネットワーク
React.js + Flux入門 #scripty02
2014/12/15の勉強会にて発表された資料です。 SCRIPTY#2 ～フロントエンド紳士・淑女のための勉強会～ http://scripty.connpass.com/event/10345/
More Related Content
![XPages Day 2013 [B-3] XPages開発を始める Notes技術者のためのWeb技術概論](https://cdn.slidesharecdn.com/ss_thumbnails/xpagesday2013-b3-131104200209-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DL輪読会]Opening the Black Box of Deep Neural Networks via Information](https://cdn.slidesharecdn.com/ss_thumbnails/dlhacks10161-171027055615-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DL輪読会]Energy-based generative adversarial networks](https://cdn.slidesharecdn.com/ss_thumbnails/energy-basedgenerativeadversarialnetworks-171030102253-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DL輪読会] Spectral Norm Regularization for Improving the Generalizability of De...](https://cdn.slidesharecdn.com/ss_thumbnails/dlhackspectralnorm1-170907072536-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DLHacks 実装]Network Dissection: Quantifying Interpretability of Deep Visual R...](https://cdn.slidesharecdn.com/ss_thumbnails/171030netdissectimple1-171030120240-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DL輪読会]Training RNNs as Fast as CNNs](https://cdn.slidesharecdn.com/ss_thumbnails/20171002dlhacks-171002105129-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DLHacks] DLHacks説明資料](https://cdn.slidesharecdn.com/ss_thumbnails/dlhacks-170919004557-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DLHacks 実装] DeepPose: Human Pose Estimation via Deep Neural Networks](https://cdn.slidesharecdn.com/ss_thumbnails/20170821onodeepposepresentation-170928100207-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DLHacks LT] PytorchのDataLoader -torchtextのソースコードを読んでみた-](https://cdn.slidesharecdn.com/ss_thumbnails/torchtextupload-170918235754-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DL輪読会] The Conditional Analogy GAN: Swapping Fashion Articles on People Images](https://cdn.slidesharecdn.com/ss_thumbnails/20170925gotodl-170925105116-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DLHacks 実装]Perceptual Adversarial Networks for Image-to-Image Transformation](https://cdn.slidesharecdn.com/ss_thumbnails/20171017dlhacks-171019082642-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DL輪読会] MoCoGAN: Decomposing Motion and Content for Video Generation](https://cdn.slidesharecdn.com/ss_thumbnails/0911mocogan-170911121936-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DL輪読会] Towards an Automatic Turing Test: Learning to Evaluate Dialogue Respo...](https://cdn.slidesharecdn.com/ss_thumbnails/170925dlhackstowardsanautomaticturingtest-170925104902-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DL輪読会] DeepNav: Learning to Navigate Large Cities](https://cdn.slidesharecdn.com/ss_thumbnails/dlhacks20170911yokota-170921075407-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DLHacks 実装] The statistical recurrent unit](https://cdn.slidesharecdn.com/ss_thumbnails/dlhackssru0828-170928101102-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DL輪読会]Parallel Multiscale Autoregressive Density Estimation](https://cdn.slidesharecdn.com/ss_thumbnails/2017-10-021-171002104912-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DLHacks 実装]Neural Machine Translation in Linear Time](https://cdn.slidesharecdn.com/ss_thumbnails/0925dlhacks-171005051158-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to React.js + Flux入門 #scripty02
React.js + Flux入門 #scripty02
- 1. React.js + Flux 入門 リッチラボ株式会社穴井宏幸 @pirosikick 2014/12/18(Mon) SCRIPTY#2
- 2. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 穴井 宏幸 リッチラボ株式会社 エンジニア @pirosikick (ぴろしきっく)
- 3. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 • 普段はスマフォのリッチ広告 を作ったりしています。
- 4.
- 5.
- 7. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 • Facebook製の • UI構築のためのライブラリ
- 8. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 http://facebook.github.io/react/
- 9. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 • JUST THE UI • VIRTUAL DOM • DATA FLOW
- 10.
- 11. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 • View専門のライブラリ • ルーティングやAPIリクエスト など、 • SPAを作るのに必須な機能は、 • 含まれていない
- 12. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 Hello! World
- 13. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 Hello! World !?!?
- 14. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 JSX • JSX →（コンパイル）→ JavaScript • JSの中でタグを書く • コンパイル方法 1. JSXTransformer.js 2. react-tools
- 15. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 JSXTransformer.js
- 16. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 react-tools # react-toolsをインストール $ npm i -g react-tools ! # jsx/にあるJSXを # コンパイルしてjs/に出力 $ jsx jsx/ js/
- 17. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 • Browserify → reactify • webpack → jsx-loader
- 18.
- 19.
- 20. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 なぜ仮想DOMという概念が俺達の魂を震えさせるのか http://qiita.com/mizchi/items/4d25bc26def1719d52e6
- 21. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 • 仮想のツリーを持つ • そこで差分を計算して、 • 本物のDOMに反映する • 高速、処理がシンプルに
- 22. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 Model View DOM 初期データ 追加 削除変更 初期レンダー 追加 削除変更 従来
- 23. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 View Model DOM 初期データ 追加 削除変更 初期レンダー 追加 削除変更 それぞれ処理が必要 従来
- 24. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 Store View DOM 最新の状態を参照 Virtual DOM 変更を通知 レンダー 古 新 差分 差分を反映 ←比較→ VDOM
- 25. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 Store View DOM Virtual DOM 変更を通知 レンダー 古 新 差分 差分を反映 ←比較→ シンプル！！！！ VDOM 最新の状態を参照
- 26. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 Store View DOM 最新の状態を参照 Virtual DOM 変更を通知 レンダー 古 新 差分 差分を反映 ←比較→ DOM操作は 賢くやってくれる VDOM
- 27.
- 28. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 親 子
- 29. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 親 子
- 30. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 親 子 属性経由でデータを渡す
- 31. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 • this.props • 親→子の一方通行 • 理解しやすい
- 32.
- 33. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 propsのValidation
- 34. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 propsのValidation
- 35. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 propsのValidation
- 36. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 this.state
- 37. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 this.state stateが更新されると再レンダーされる
- 38. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 イベント
- 39. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 イベント • Eventはラップされてる • ブラウザ差異は気にしなくてよい • stopPropergation, preventDefault も実行可能
- 40. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 ライフサイクル メソッド http://facebook.github.io/react/docs/component-specs.html
- 41. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 Mount イベントのadd, removeに よく使われる
- 42. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 shouldComponentUpdate 再レンダーのタイミングを制御できる
- 43. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止
- 44. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 Flux • Facebookが提唱しているアーキテクチャ • 特定のフレームワークの名前ではない • 「MVC」と同じレイヤーの話 • View, Store, Dispatcher • ViewはReact.js
- 45. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 https://github.com/facebook/flux
- 46. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 Dispatcher Views Store Callback() Action Creater() Web API dispatch() ActionChange Event User Interaction
- 47. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 Dispatcher Views Store ①クリックとか Callback() Action Creater() Web API dispatch() ActionChange Event User Interaction
- 48. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 Dispatcher Views Store ②ActionCreater 実行 Callback() Action Creater() Web API dispatch() ActionChange Event User Interaction
- 49. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 Dispatcher Views Store Callback() Action Creater() Web API dispatch() Action ③Actionを発行 Change Event User Interaction
- 50. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 Dispatcher Views Store Callback() ④Storeの Callbackを実行 Action Creater() Web API dispatch() ActionChange Event User Interaction
- 51. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 Dispatcher Views Store Callback() Action Creater() Web API dispatch() ActionChange Event ⑤内部の状態を 変更 User Interaction
- 52. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 Dispatcher Views Store Callback() Action Creater() Web API dispatch() Action ⑥変更を通知Change Event User Interaction
- 53. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 Dispatcher Views Store Callback() Action Creater() Web API dispatch() Action ⑦View更新 User Interaction Change Event
- 54. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 Dispatcher Views Store Callback() Action Creater() Web API dispatch() ActionChange Event User Interaction データの流れが 一方通行
- 55. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 例）Todoリスト
- 56. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 <Application /> <TodoItem/> <TodoItem/> <TodoItem/> <TodoItem/>
- 57. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 フレームワーク • 今回は「Fluxxor」を使う • http://fluxxor.com/ • シンプルで小さいので理解しやすい
- 58. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 Dispatcher作成
- 59. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 Action Creatorたち dispatcher.dispatch() を実行
- 60. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 TodoStore作成
- 61. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 TodoStore作成
- 62. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 TodoStore作成
- 63. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 <Application />
- 64. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 <Application />
- 65. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 <Application />
- 66. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 <Application />
- 67.
- 68.
- 69. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 Don't React http://staltz.com/dont-react/
- 70. ©2014 Rich LabCo., Ltd. All Rights Reserved. 無断利用・転載禁止 他の仮想DOM系も 追っていきたい • https://github.com/Matt-Esch/ virtual-dom • https://github.com/segmentio/deku
- 71.