---
title: React.js + Flux入門 #scripty02
tags:  #scripty02  
author: [Yahoo!デベロッパーネットワーク](https://convert.docswell.com/user/ydnjp)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/3JKGXZ947D.jpg?width=480
description: 2014/12/15の勉強会にて発表された資料です。  SCRIPTY#2　～フロントエンド紳士・淑女のための勉強会～ http://scripty.connpass.com/event/10345/
published: December 18, 14
canonical: https://convert.docswell.com/s/ydnjp/ZJVXEZ-2014-12-18-123719
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/3JKGXZ947D.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/LE3N5DWDE5.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/8EDWDPK27G.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/V7P9XNKLJ8.jpg)

JavaScript
好きです


# Page. 5

![Page Image](https://bcdn.docswell.com/page/2JVMLKV6JQ.jpg)

よろしく
お願い致します


# Page. 6

![Page Image](https://bcdn.docswell.com/page/5EGGXQL2EL.jpg)



# Page. 7

![Page Image](https://bcdn.docswell.com/page/4JQX8KY9EP.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/K7462PZRE1.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/LJ1VM9RVEG.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/GJWL3Q13E2.jpg)

JUST THE UI


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4EZMVWPGJ3.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/Y76N5GMQ7V.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/G755YVZ274.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/9J2NG3R1ER.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/DEYPV1D4EM.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/VJN5M26678.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/YE9YN1LRJ3.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/GE86K4XG7D.jpg)

Virtual DOM


# Page. 19

![Page Image](https://bcdn.docswell.com/page/LEL9Z68XJR.jpg)

Virtual DOM
⇓
仮想DOM


# Page. 20

![Page Image](https://bcdn.docswell.com/page/4JMZV563EW.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/PJR623PR79.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/PEXMD43Y7X.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/3EKGXZY4JD.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/L73N5D9D75.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/87DWDPG2JG.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/VJP9XN3LE8.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/2EVMLK46EQ.jpg)

DATA FLOW


# Page. 28

![Page Image](https://bcdn.docswell.com/page/57GGXQ127L.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/4EQX8KD97P.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/KJ462PGR71.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/LE1VM9DV7G.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/GEWL3QY372.jpg)

その他
よく使う機能


# Page. 33

![Page Image](https://bcdn.docswell.com/page/47ZMVWXGE3.jpg)

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


# Page. 34

![Page Image](https://bcdn.docswell.com/page/YJ6N5G4QJV.jpg)

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


# Page. 35

![Page Image](https://bcdn.docswell.com/page/GJ55YVQ2J4.jpg)

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


# Page. 36

![Page Image](https://bcdn.docswell.com/page/LE3N5DV1E5.jpg)

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


# Page. 37

![Page Image](https://bcdn.docswell.com/page/8EDWDP8K7G.jpg)

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


# Page. 38

![Page Image](https://bcdn.docswell.com/page/V7P9XN83J8.jpg)

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


# Page. 39

![Page Image](https://bcdn.docswell.com/page/2JVMLKNNJQ.jpg)

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


# Page. 40

![Page Image](https://bcdn.docswell.com/page/5EGGXQK5EL.jpg)

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


# Page. 41

![Page Image](https://bcdn.docswell.com/page/4JQX8KNLEP.jpg)

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


# Page. 42

![Page Image](https://bcdn.docswell.com/page/K7462PG5E1.jpg)

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


# Page. 43

![Page Image](https://bcdn.docswell.com/page/LJ1VM9D2EG.jpg)

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


# Page. 44

![Page Image](https://bcdn.docswell.com/page/GJWL3QY2E2.jpg)

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


# Page. 45

![Page Image](https://bcdn.docswell.com/page/4EZMVWX4J3.jpg)

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


# Page. 46

![Page Image](https://bcdn.docswell.com/page/Y76N5G4G7V.jpg)

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


# Page. 47

![Page Image](https://bcdn.docswell.com/page/G755YVQX74.jpg)

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


# Page. 48

![Page Image](https://bcdn.docswell.com/page/9J2NG3PQER.jpg)

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


# Page. 49

![Page Image](https://bcdn.docswell.com/page/DEYPV15YEM.jpg)

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


# Page. 50

![Page Image](https://bcdn.docswell.com/page/VJN5M2NR78.jpg)

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


# Page. 51

![Page Image](https://bcdn.docswell.com/page/YE9YN1RZJ3.jpg)

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


# Page. 52

![Page Image](https://bcdn.docswell.com/page/GE86K4GY7D.jpg)

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


# Page. 53

![Page Image](https://bcdn.docswell.com/page/LEL9Z6G9JR.jpg)

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


# Page. 54

![Page Image](https://bcdn.docswell.com/page/4JMZV5QVEW.jpg)

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


# Page. 55

![Page Image](https://bcdn.docswell.com/page/PJR6238W79.jpg)

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


# Page. 56

![Page Image](https://bcdn.docswell.com/page/PEXMD48V7X.jpg)

&lt;Application /&gt;
&lt;TodoItem/&gt;
&lt;TodoItem/&gt;
&lt;TodoItem/&gt;
&lt;TodoItem/&gt;
©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止


# Page. 57

![Page Image](https://bcdn.docswell.com/page/3EKGXZK5JD.jpg)

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


# Page. 58

![Page Image](https://bcdn.docswell.com/page/L73N5DZ175.jpg)

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


# Page. 59

![Page Image](https://bcdn.docswell.com/page/87DWDPRKJG.jpg)

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


# Page. 60

![Page Image](https://bcdn.docswell.com/page/VJP9XNW3E8.jpg)

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


# Page. 61

![Page Image](https://bcdn.docswell.com/page/2EVMLK8NEQ.jpg)

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


# Page. 62

![Page Image](https://bcdn.docswell.com/page/57GGXQ557L.jpg)

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


# Page. 63

![Page Image](https://bcdn.docswell.com/page/4EQX8KZL7P.jpg)

&lt;Application /&gt;
©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止


# Page. 64

![Page Image](https://bcdn.docswell.com/page/KJ462P3571.jpg)

&lt;Application /&gt;
©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止


# Page. 65

![Page Image](https://bcdn.docswell.com/page/LE1VM9127G.jpg)

&lt;Application /&gt;
©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止


# Page. 66

![Page Image](https://bcdn.docswell.com/page/GEWL3Q8272.jpg)

&lt;Application /&gt;
©2014 Rich Lab Co., Ltd. All Rights Reserved.
無断利用・転載禁止


# Page. 67

![Page Image](https://bcdn.docswell.com/page/47ZMVW84E3.jpg)

まとめ


# Page. 68

![Page Image](https://bcdn.docswell.com/page/YJ6N5GPGJV.jpg)

シンプルでよい


# Page. 69

![Page Image](https://bcdn.docswell.com/page/GJ55YVKXJ4.jpg)

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


# Page. 70

![Page Image](https://bcdn.docswell.com/page/9E2NG3WQ7R.jpg)

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


# Page. 71

![Page Image](https://bcdn.docswell.com/page/D7YPV1LY7M.jpg)

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


