react.js + flux入門 #scripty02
Post on 13-Jul-2015
3.286 Views
Preview:
TRANSCRIPT
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(ぴろしきっく)
top related