React.js + Flux入門 #scripty02

React.js + Flux 入門

リッチラボ株式会社 穴井宏幸 @pirosikick

2014/12/18(Mon) SCRIPTY#2

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

穴井 宏幸 リッチラボ株式会社 エンジニア

@pirosikick(ぴろしきっく)

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

• 普段はスマフォのリッチ広告を作ったりしています。

JavaScript 好きです

よろしく お願い致します

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

• Facebook製の

• UI構築のためのライブラリ

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

http://facebook.github.io/react/

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

• JUST THE UI

• VIRTUAL DOM

• DATA FLOW

JUST THE UI

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

• View専門のライブラリ

•ルーティングやAPIリクエストなど、

• SPAを作るのに必須な機能は、

•含まれていない

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

Hello! World

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

Hello! World

!?!?

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

JSX

• JSX →（コンパイル）→ JavaScript

• JSの中でタグを書く

• コンパイル方法

1. JSXTransformer.js

2. react-tools

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

JSXTransformer.js

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

react-tools

# react-toolsをインストール $ npm i -g react-tools !

# jsx/にあるJSXを # コンパイルしてjs/に出力 $ jsx jsx/ js/

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

• Browserify → reactify

• webpack → jsx-loader

Virtual DOM

Virtual DOM ⇓

仮想DOM

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

なぜ仮想DOMという概念が俺達の魂を震えさせるのか http://qiita.com/mizchi/items/4d25bc26def1719d52e6

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

• 仮想のツリーを持つ

•そこで差分を計算して、

•本物のDOMに反映する

•高速、処理がシンプルに

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

Model

View

DOM

初期データ 追加 削除変更

初期レンダー 追加 削除変更

従来

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

View

Model

DOM

初期データ 追加 削除変更

初期レンダー 追加 削除変更

それぞれ処理が必要

従来

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

Store

View

DOM

最新の状態を参照

Virtual DOM

変更を通知

レンダー

古 新 差分

差分を反映

←比較→

VDOM

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

Store

View

DOM

Virtual DOM

変更を通知

レンダー

古 新 差分

差分を反映

←比較→シンプル！！！！

VDOM

最新の状態を参照

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

Store

View

DOM

最新の状態を参照

Virtual DOM

変更を通知

レンダー

古 新 差分

差分を反映

←比較→

DOM操作は 賢くやってくれる

VDOM

DATA FLOW

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

親

子

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

親

子

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

親

子

属性経由でデータを渡す

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

• this.props

•親→子の一方通行

•理解しやすい

その他 よく使う機能

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

propsのValidation

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

propsのValidation

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

propsのValidation

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

this.state

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

this.state

stateが更新されると再レンダーされる

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

イベント

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

イベント

• Eventはラップされてる

• ブラウザ差異は気にしなくてよい

• stopPropergation, preventDefaultも実行可能

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

ライフサイクルメソッド

http://facebook.github.io/react/docs/component-specs.html

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

Mount

イベントのadd, removeに よく使われる

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

shouldComponentUpdate

再レンダーのタイミングを制御できる

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

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

Flux

• Facebookが提唱しているアーキテクチャ

• 特定のフレームワークの名前ではない

• 「MVC」と同じレイヤーの話

• View, Store, Dispatcher

• ViewはReact.js

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

https://github.com/facebook/flux

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

Dispatcher

Views

Store Callback()

Action Creater()

Web API

dispatch()

ActionChange Event

User Interaction

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

Dispatcher

Views

Store

①クリックとか

Callback()

Action Creater()

Web API

dispatch()

ActionChange Event

User Interaction

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

Dispatcher

Views

Store

②ActionCreater 実行

Callback()

Action Creater()

Web API

dispatch()

ActionChange Event

User Interaction

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

Dispatcher

Views

Store Callback()

Action Creater()

Web API

dispatch()

Action

③Actionを発行

Change Event

User Interaction

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

Dispatcher

Views

Store Callback()

④Storeの Callbackを実行

Action Creater()

Web API

dispatch()

ActionChange Event

User Interaction

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

Dispatcher

Views

Store Callback()

Action Creater()

Web API

dispatch()

ActionChange Event

⑤内部の状態を 変更

User Interaction

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

Dispatcher

Views

Store Callback()

Action Creater()

Web API

dispatch()

Action⑥変更を通知Change Event

User Interaction

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

Dispatcher

Views

Store Callback()

Action Creater()

Web API

dispatch()

Action

⑦View更新

User Interaction

Change Event

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

Dispatcher

Views

Store Callback()

Action Creater()

Web API

dispatch()

ActionChange Event

User Interaction

データの流れが 一方通行

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

例）Todoリスト

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

<Application /><TodoItem/><TodoItem/><TodoItem/><TodoItem/>

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

フレームワーク

• 今回は「Fluxxor」を使う

• http://fluxxor.com/

• シンプルで小さいので理解しやすい

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

Dispatcher作成

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

Action Creatorたち

dispatcher.dispatch() を実行

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

TodoStore作成

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

TodoStore作成

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

TodoStore作成

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

<Application />

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

<Application />

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

<Application />

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

<Application />

まとめ

シンプルでよい

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

Don't React http://staltz.com/dont-react/

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

他の仮想DOM系も 追っていきたい

• https://github.com/Matt-Esch/virtual-dom

• https://github.com/segmentio/deku

Thank you:)

@pirosikick(ぴろしきっく)