2014/12/15の勉強会にて発表された資料です。 SCRIPTY#2　～フロントエンド紳士・淑女のための勉強会～ http://scripty.connpass.com/event/10345/

1. React.js + Flux
入門
リッチラボ株式会社 穴井宏幸
@pirosikick
2014/12/18(Mon) SCRIPTY#2

2. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
穴井 宏幸
リッチラボ株式会社 エンジニア
@pirosikick
(ぴろしきっく)

3. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
• 普段はスマフォのリッチ広告
を作ったりしています。

4. JavaScript
好きです

5. よろしく
お願い致します

7. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
• Facebook製の
• UI構築のためのライブラリ

8. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
http://facebook.github.io/react/

9. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
• JUST THE UI
• VIRTUAL DOM
• DATA FLOW

10. JUST THE UI

11. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
• View専門のライブラリ
• ルーティングやAPIリクエスト
など、
• SPAを作るのに必須な機能は、
• 含まれていない

12. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
Hello! World

13. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
Hello! World
!?!?

14. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
JSX
• JSX →（コンパイル）→ JavaScript
• JSの中でタグを書く
• コンパイル方法
1. JSXTransformer.js
2. react-tools

15. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
JSXTransformer.js

16. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
react-tools
# react-toolsをインストール
$ npm i -g react-tools
!
# jsx/にあるJSXを
# コンパイルしてjs/に出力
$ jsx jsx/ js/

17. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
• Browserify → reactify
• webpack → jsx-loader

18. Virtual DOM

19. Virtual DOM
⇓
仮想DOM

20. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
なぜ仮想DOMという概念が俺達の魂を震えさせるのか
http://qiita.com/mizchi/items/4d25bc26def1719d52e6

21. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
• 仮想のツリーを持つ
• そこで差分を計算して、
• 本物のDOMに反映する
• 高速、処理がシンプルに

22. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
Model
View
DOM
初期データ 追加 削除変更
初期レンダー 追加 削除変更
従来

23. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
View
Model
DOM
初期データ 追加 削除変更
初期レンダー 追加 削除変更
それぞれ処理が必要
従来

24. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
Store
View
DOM
最新の状態を参照
Virtual DOM
変更を通知
レンダー
古 新 差分
差分を反映
←比較→
VDOM

25. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
Store
View
DOM
Virtual DOM
変更を通知
レンダー
古 新 差分
差分を反映
←比較→
シンプル！！！！
VDOM
最新の状態を参照

26. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
Store
View
DOM
最新の状態を参照
Virtual DOM
変更を通知
レンダー
古 新 差分
差分を反映
←比較→
DOM操作は
賢くやってくれる
VDOM

27. DATA FLOW

28. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
親
子

29. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
親
子

30. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
親
子
属性経由でデータを渡す

31. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
• this.props
• 親→子の一方通行
• 理解しやすい

32. その他
よく使う機能

33. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
propsのValidation

34. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
propsのValidation

35. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
propsのValidation

36. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
this.state

37. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
this.state
stateが更新されると再レンダーされる

38. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
イベント

39. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
イベント
• Eventはラップされてる
• ブラウザ差異は気にしなくてよい
• stopPropergation, preventDefault
も実行可能

40. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
ライフサイクル
メソッド
http://facebook.github.io/react/docs/component-specs.html

41. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
Mount
イベントのadd, removeに
よく使われる

42. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
shouldComponentUpdate
再レンダーのタイミングを制御できる

43. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止

44. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
Flux
• Facebookが提唱しているアーキテクチャ
• 特定のフレームワークの名前ではない
• 「MVC」と同じレイヤーの話
• View, Store, Dispatcher
• ViewはReact.js

45. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
https://github.com/facebook/flux

46. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
Dispatcher
Views
Store Callback()
Action
Creater()
Web
API
dispatch()
ActionChange
Event
User
Interaction

47. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
Dispatcher
Views
Store
①クリックとか
Callback()
Action
Creater()
Web
API
dispatch()
ActionChange
Event
User
Interaction

48. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
Dispatcher
Views
Store
②ActionCreater
実行
Callback()
Action
Creater()
Web
API
dispatch()
ActionChange
Event
User
Interaction

49. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
Dispatcher
Views
Store Callback()
Action
Creater()
Web
API
dispatch()
Action
③Actionを発行
Change
Event
User
Interaction

50. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
Dispatcher
Views
Store Callback()
④Storeの
Callbackを実行
Action
Creater()
Web
API
dispatch()
ActionChange
Event
User
Interaction

51. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
Dispatcher
Views
Store Callback()
Action
Creater()
Web
API
dispatch()
ActionChange
Event
⑤内部の状態を
変更
User
Interaction

52. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
Dispatcher
Views
Store Callback()
Action
Creater()
Web
API
dispatch()
Action
⑥変更を通知Change
Event
User
Interaction

53. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
Dispatcher
Views
Store Callback()
Action
Creater()
Web
API
dispatch()
Action
⑦View更新
User
Interaction
Change
Event

54. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
Dispatcher
Views
Store Callback()
Action
Creater()
Web
API
dispatch()
ActionChange
Event
User
Interaction
データの流れが
一方通行

55. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
例）Todoリスト

56. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
<Application />
<TodoItem/>
<TodoItem/>
<TodoItem/>
<TodoItem/>

57. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
フレームワーク
• 今回は「Fluxxor」を使う
• http://fluxxor.com/
• シンプルで小さいので理解しやすい

58. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
Dispatcher作成

59. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
Action Creatorたち
dispatcher.dispatch()
を実行

60. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
TodoStore作成

61. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
TodoStore作成

62. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
TodoStore作成

63. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
<Application />

64. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
<Application />

65. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
<Application />

66. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
<Application />

67. まとめ

68. シンプルでよい

69. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
Don't React
http://staltz.com/dont-react/

70. ©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止
他の仮想DOM系も
追っていきたい
• https://github.com/Matt-Esch/
virtual-dom
• https://github.com/segmentio/deku

71. Thank you:)
@pirosikick
(ぴろしきっく)