React.js を利用した感想です。

1. Shumpei Hozumi
穂積 俊平
しくみ製作所 福島支部
“React.js” と戯れてみた

2. 1. React.js とは？
2. 競合
3. 競合の問題点
4. ３つの特徴
5. 記述方法
6. 使ってみた感想
7. 参考サイト
2
目次
Shumpei Hozumi

3. 1. Facebook が開発している JavaScript ライブラリ
MVC の V(View) を開発するためのライブラリ
2. 導入実績
1. Facebook
2. Instagram
3. Yahoo
4. AirBnB
3
React.js とは？
Shumpei Hozumi

4. 1. 特徴
1. フルスタックな MVW (Whatever) フレームワーク
2. 双方向データバインディング（dirty checking 方式）
3. テンプレートとしてのHTML
2. 本家サンプル
https://angularjs.org/
4
競合（AngularJS）
Shumpei Hozumi

5. 1. フルスタックゆえに学習コスト高い
勉強すべき概念が多い
2. 大規模な場合、再描画速度が問題になることが多い
dirty checking は、バインドしている全ての変数について、特定
のタイミングで値の変更がないか確認を行うため、変数が増え
るにつれ遅くなる
3. 双方向バインディングでは処理の流れが追いにくい
内部の処理が完全に隠蔽化されているので、デバッグが難しい
5
AngularJS の問題点
Shumpei Hozumi

6. 1. View に特化（Model もちょっとサポート）
学習コストが低いのでとっつきやすい
2. 仮想 DOM という概念を導入
仮想DOMの比較により、再描画の範囲を最小限にし、高速化
3. 一方向のデータフロー
常に一方向に流れるので処理が追いやすい
6
React.js の３つの特徴
Shumpei Hozumi

7. 1. HTMLインスタンスと1対1で対応する単純な構造体
2. 再描画範囲の特定のために用いられる
1. 状態変更前後の仮想DOMの差分を計算
2. 差分を元にDOMの変更パッチを作成
3. HTMLインスタンスにパッチを反映
7
仮想DOM
Shumpei Hozumi
State A:<div class=‘hoge’>AAA</div>
State B:<div class=‘hoge’>BBB</div>
作られる差分:hoge の text に -AAA+BBB
変更パッチ:node.querySelector(‘.hoge’).innerHTML =‘BBB’
大雑把な例

8. 1. Model から View へのデータフローのみ提供
1. 処理を明示的に書く必要がある
明示的に書かれているので混乱しにくい
明示的に書く必要があるのでやや冗長に感じる
8
一方向のデータフロー
Shumpei Hozumi
Model View

9. 1. Flux というアーキテクチャで構成すると良い
1. Facebook が提唱しているデータフローアーキテクチャ
2. Flux を構成する基礎的な機能を React.js が提供
1. 正直ほとんど提供されていない…
9
一方向のデータフロー
Shumpei Hozumi
Action Dispatcher Store View
Action

10. 1. JSX という独自文法を備える
1. HTML をそのまま js ファイル中に書ける
2. 拡張子に .jsx を付け、コンパイルする必要あり
3. CoffeeScript で書く場合はバッククォートで囲む必要あり
10
記述方法（JSX）
Shumpei Hozumi
CalendarHeaderTitle = React.createClass
render: ->
`<h2> カレンダー</h2>`
CalendarHeaderBtn = React.createClass
render: ->
`<p className="schedules-btn">
<a className="button-white" href="#">
予定を追加する
</a>
</p>`
記述例 : calendar.js.jsx.coffee

11. 1. JSX という独自文法を備える
1. 階層化が直感的に書ける
2. class は className と書く必要あり。js の予約語のため。
11
記述方法（JSX）
Shumpei Hozumi
CalendarHeader = React.createClass
render: ->
`<div className="schedules-heading">
<CalendarHeaderTitle />
<CalendarHeaderBtn />
</div>`
階層化の記述例

12. 1. JSX という独自文法を備える
1. 繰り返しをサポートする文法がある
2. でも、繰り返しの記述は辛い…
12
記述方法（JSX）
Shumpei Hozumi
CalendarContentWeek = React.createClass
render: ->
days = []
_.each this.props.week, (day)->
days.push `<CalendarContentDay day={day}/>`
`<tr>{days}</tr>`
繰り返しの記述例

13. 1. props と state で管理
1. props は親コンポーネントから渡される状態
2. state はコンポーネント自身が保持する状態
13
状態管理
Shumpei Hozumi
CalendarContentWeek = React.createClass
render: ->
days = []
_.each this.props.week, (day)->
days.push `<CalendarContentDay day={day}/>`
`<tr>{days}</tr>`
CalendarContentDay = React.createClass
render: ->
`<td>
<div>{this.props.day.date}</div>
</td>`
props の利用例

14. 1. props と state で管理
1. props は親コンポーネントから渡される状態
2. state はコンポーネント自身が保持する状態
14
状態管理
Shumpei Hozumi
CalendarContentDay = React.createClass
getInitialState: ->
{ clicked:false }
render: ->
clazz = “”
if this.state.clicked
clazz = “active”
`<td className={clazz}>
<div>{this.props.day.date}</div>
</td>`
state の利用例

15. 1. props と state で管理する際の注意点
1. なるべく props を活用するようにする（状態数を少なくする）
2. state はなるべく下層に持たせる（stateが影響する範囲を小さく）
15
状態管理の注意点
Shumpei Hozumi

16. 1. onClick などの属性を利用して書く必要がある
ピュアな HTML + JavaScript と変わらない…
2. setState を使って状態を更新することで状態変化が伝播する
16
状態の変化の伝播
Shumpei Hozumi
CalendarContentDay = React.createClass
makeActive: ->
this.setState({clicked:true})
render: ->
clazz = “”
if this.state.clicked
clazz = “active”
`<td className={clazz} onClick=“this.makeActive”>
<div>{this.props.day.date}</div>
</td>`
記述例

17. 1. 利点
1. 再描画が高速らしい… 重い処理させてないから実感はない
2. データフローを明確に書くのでデバッグしやすい
3. 学習コストが低く、とっつきやすい。
2. 欠点
1. 全体的に書き心地がよくない
JSX が使いにくい
View に関するコードが散在する
→ react-jade に期待。本家 jade が製造。
2. 機能的に色々足りていない気がする
→ Flux フレームワークが色々出てきてる。
Qiita の中の人が Arda というフレームワークを作ってる
17
React.js を使ってみた感想
Shumpei Hozumi

18. 1. 本家
https://facebook.github.io/react/index.html
Docs の Thinking in React が概念を学ぶのに良いのでおすすめ
2. 仮想DOMに魂が震えている人（Qiitaの中の人）
http://qiita.com/mizchi/items/4d25bc26def1719d52e6
React.js の根幹である仮想DOMについてよくわかるのでおすすめ
18
参考になったサイト
Shumpei Hozumi