React.js + Flux入門 #scripty02

211 Views

December 18, 14

#scripty02 #React.js #Flux #JavaScript #仮想DOM #UI開発

スライド概要

2014/12/15の勉強会にて発表された資料です。

SCRIPTY#2　～フロントエンド紳士・淑女のための勉強会～
http://scripty.connpass.com/event/10345/

profile-image
スライド一覧

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

（ダウンロード不可）

関連スライド

slide-thumbnail

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで
user-img Yahoo!デベロッパーネットワーク 159.9K
slide-thumbnail

ゼロから始める転移学習
user-img Yahoo!デベロッパーネットワーク 85.4K
slide-thumbnail

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon
idcon fidcon
user-img Yahoo!デベロッパーネットワーク 72.6K
slide-thumbnail

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo
openid openid_tokyo
user-img Yahoo!デベロッパーネットワーク 57.4K
slide-thumbnail

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤
devsumi
user-img Yahoo!デベロッパーネットワーク 34.8K
slide-thumbnail

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes
ml_kubernetes
user-img Yahoo!デベロッパーネットワーク 28.9K
各ページのテキスト
1.

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

2.

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

3.

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

4.

JavaScript 好きです

5.

よろしく お願い致します

6.

7.

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

8.

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

9.

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

10.

JUST THE UI

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

Virtual DOM

19.

Virtual DOM ⇓ 仮想DOM

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

DATA FLOW

28.

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

29.

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

30.

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

31.

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

32.

その他 よく使う機能

33.

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

34.

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

35.

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

36.

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

37.

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

38.

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

39.

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

40.

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

41.

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

42.

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

43.

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

44.

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

45.

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

46.

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

47.

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

48.

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

49.

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

50.

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

51.

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

52.

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

53.

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

54.

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

55.

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

56.

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

57.

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

58.

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

59.

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

60.

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

61.

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

62.

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

63.

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

64.

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

65.

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

66.

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

67.

まとめ

68.

シンプルでよい

69.

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

70.

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

71.

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