NDS in Niigata #8の資料です。

1. React + Flux
@_yukikayuki
NDS in Niigate #8 JavaScript Day!

2. • @_yukikayuki / Kaneda Takayuki
• ウォーターセル株式会社
• フロントエンドエンジニア

3. 皆さんフレームワーク
何使ってますか?

4. jQuery

5. 今でも現役

6. ホームページなら任せろ

7. シングルページアプリ
ケーションは?

8. 限りなくつらい

9. Backbone

10. バラバラの骨

11. 高度な設計スキルと経
験が無いと難しい

12. DOMとstateが混ざる

13. イベント地獄
class属性地獄

14. Marionette必須

15. AngularAngular

16. フルスタック
双方向バインディング

17. 当時はすげーと言いなが
らコーディングしていた

18. コンポーネントがstate
を持つのでつらい

19. 複雑になるとつらい

20. 皆の課題はstate管理

21. 大体DOMとstateが混
ざって爆発する

22. http://www.infoq.com/jp/news/2014/05/facebook-mvc-flux

23. まだstate管理で消耗
してるの?

24. そんな人におすすめなのが
React + Flux

25. React

26. Facebook謹製のUIライブラリ

27. 特徴
• JUST THE UI
• VIRTUAL DOM
• DATA FLOW

28. JUST THE UI

29. • Componentを作るためのUIライブラリ
• MVCのV
• V以外の場所は何を使ってもいい

30. VIRTUAL DOM

31. <ul>
<li>React</li>
<li>Backbone</li>
</ul>
↓
<ul>
<li>React</li>
<li>Marionette</li>
</ul>

32. 差分

33. <ul>
<li>React</li>
<li>Backbone</li>
</ul>
↓
<ul>
<li>React</li>
<li>Marionette</li>
</ul>

34. こんな時どんなアプロー
チをするか

35. 頑張って差分のみ書き
換える

36. シンプルに<ul>を毎回描
画するコードを書きたい

37. むしろ全部再描画したい

38. 初回描画された瞬間が
一番きれい

39. , -――- 、
/ ヽ
¦ ノ ー ¦ それってだめじゃね？
¦(・） （・） ¦ だってDOMすべて再描画って遅いじゃん
¦ （ ¦
ヽ Ｏ 人
＞ー-― ́ ￣￣＼
￣￣ヽ / ¦
メ） _ノ ¦ ¦ ¦ ¦ ¦
(／ ¦ ¦ / ¦ ¦ ¦
¦ ¦/ /¦ ¦ ¦
¦ ﾄ / ¦ ¦ ¦
ヽ＿_／ ¦ ¦ ¦

40. _,,;' '" '' ゛''" ゛' ';;,,
（rヽ,;''"""''゛゛゛'';, ﾉｒ）
,;'゛ i ＿ 、＿ iヽ゛';, お前それVirtual DOMの前でも同じ事言えんの？
,;'" ''¦ ヽ・〉 〈・ノ ¦ﾞ゛ `';,
,;'' "¦ ▼ ¦ﾞ゛ `';,
,;'' ヽ＿人＿ / ,;'_
／ｼ、 ヽ͡͡ / ﾘ ＼
¦ "ｒ,, ｀"'''ﾞ́ ,,ﾐ゛ ¦
¦ ﾘ、 ,ﾘ ¦
¦ i ゛ｒ、ﾉ,,ｒ" i _¦
¦ ｀ー――----┴ ́͡ ）
（ヽ ＿＿＿＿＿＿ ,, ＿́）
（_͡ ＿＿＿＿＿＿ ,, ィ
丁 ¦
¦ ¦

41. 差分だけ変更する
- Backbone
+ Marionette

42. これをやってくれる

43. 何がすごい

44. 毎回新しいDOMを
プッシュし続けられる

45. • △ 差分のみ更新で速い・すごい
• ⃝ 雑にダイナミックに書ける

46. DATA FLOW

47. 親から子へ一方通行

48. 親のみステートフル
this.state

49. 子はステートレス
this.props

50. https://html5experts.jp/hokaccha/13301/

51. その他に
• JSX
• ビルド
• リアルDOM

52. JSX

53. ＿人人人人人人人人＿
＞ JSの中にHTML ＜
￣Y^Y^Y^Y^Y^Y^Y￣

54. JavaScript XML

55. import React from react ;
import ReactDom from react-dom ;
class Hello extends React.Component {
render() {
return (
<div>
hello world
</div>
);
}
}
ReactDom.render(
<Hello/>,
document.getElemetById( root )
);

56. class Hello extends React.Component {
render() {
return (
<div>
hello world
</div>
);
}
}
これ

57. そのままだと実行できない

58. 変換が必要

59. class Hello extends React.Component {
render() {
return React.createElement(
"div",
null,
"hello world"
);
}
}

60. ただのメソッド呼び出
しになった

61. createElementだけで
頑張ることもできる

62. ビルド

63. Babel

64. ES6をES5へ変換するやつ
JSXもサポート

65. webpack

66. 静的ファイルを結合する奴

67. リアルDOM

68. まだDOM触ってるん
ですか？

69. そりゃ触りますよ

70. Read onlyで触るのが良い

71. return(
<input type= text
ref= name />
)

72. ReactDom.findDOMNode(this.refs.name);

73. Reactまとめ
• とても賢い
• 雑に使っても実用には問題ないくらい速い
• ステートレスな関数的使い方ができる
• Viewライブラリ

74. Flux

75. アーキテクチャ

76. オブザーバーパターン
に名前をつけた

77. 公式はリファレンスと
少しの実装

78. 様々なFlux実装
• Fluxxor
• Flumox
• Reflux
• RxFlux
• その他多数

79. どれを使えば良いんだ
orz

80. Redux

81. メジャーリリースv4.0で終わり
だ。代わりにReduxを使って
くれ。奴はやばい(いい意味で)
https://github.com/acdlite/flummox

82. React + Redux

83. https://facebook.github.io/flux/docs/
overview.html#content

84. https://github.com/facebook/flux/tree/master/
examples/flux-todomvc/

85. 一方通行

86. Views

87. Reactが担当

88. ユーザのイベントに応
じてActionを発行する

89. class Hello extends React.Component {
render() {
const {userActions} = this.props;
return (
<div onClick={userActions.hello}>
hello world
</div>
);
}
}
これ

90. ここでAPIとの通信を
行ったりする

91. Action

92. アプリケーションで何が起きた
のかとそれに付随するデータ

93. export const HELLO = 'HELLO';
export function hello() {
return {
type: HELLO
};
}
これ

94. Dispatcher

95. Actionをすべての
Storeへ配送する

96. フレームワークによって大体
隠 されるのであまり意識し
ない

97. Store

98. アプリケーションのすべ
てのデータを保有する
例外あり

99. export default function hello(state = , action) {
switch (action.type) {
case HELLO:
return 'hello';
default:
return state;
}
}
これ

100. Storeを変更するにはAction
を発行するしか無い

101. Actionを受け取り、自分
と関係ある場合のみ更新

102. Views

103. stateを受け取り、レ
ンダリング

104. 1周おわり

105. Viewは自分を更新したい場
合、Actionを投げて結果が
帰ってくるのをじっと待つ

106. Fluxまとめ
• 一方通行なので動作が推測しやすい
• 各パーツが独立するのでテストしやすい

107. 最後に

108. 導入するメリット
• 複雑な状態を管理しやすくなる
• テストしやすい

109. まずはReact日本語
チュートリアルから

110. おわり

111. 今日覚えて帰るキーワード
• React
• Flux
• Redux
• ES6(ES2015)
• ウォーターセル
• 求人あります
• Babel
• webpack