2018/05/25のNextremer Tech Meetup@高知で発表した資料です。 ほぼReact + Reduxのプロジェクト構成の説明です。

1. REACT + REDUX で作る対話AI

2. 自己紹介
Name: 多田 健太郎(ただ けんたろう)
Job: Webエンジニア @Nextremer.inc
Age: 32
From: Tokushima, Japan
twitter: @shuntxxxeve
Favorites:
javascript(es7): React/Redux, koa
ruby: Ruby on rails

3. アジェンダ
 フロントエンドを構成する技術について
• 現状
• これから

4. フレームワーク&ライブラリ
 React
 Redux
 redux-saga
 Moducks
 Reselect

5. フレームワーク&ライブラリ
 React
 Redux
 redux-saga
 Moducks
 Reselect

6. React

7. React
 Facebook謹製のUI構築用ライブラリ
• Viewのみ。MとかCとかの機能は持たない。
 仮想DOM
• DOMの描画処理をいい感じに最適化してくれる。速い。
 コンポーネントベース
• 画面をパーツ毎に管理する。再利用性高い。

8. フレームワーク&ライブラリ
 React
 Redux
 redux-saga
 Moducks
 Reselect

9. フレームワーク&ライブラリ
 React
 Redux... その前に
 redux-saga
 Moducks
 Reselect

10. フレームワーク&ライブラリ
 React
 Redux... その前に Flux
 redux-saga
 Moducks
 Reselect

11. Flux
 フロントエンドのアプリケーションアーキテクチャ
 Facebook謹製
 一方向データフロー
• スパゲティになりづらい
 実はMVCのベストプラクティス版という意見も・・・

12. Flux

13. フレームワーク&ライブラリ
 React
 Redux
 redux-saga
 Moducks
 Reselect

14. Redux
 Fluxアーキテクチャを実装したFWの１つ
• Flux勢で多分一番使われてる
 基本的な概念は超シンプル
• 1つの大きなStoreと、それを更新するpure functionであるreducer
• 純reduxだけだと非同期処理に弱いのでその辺はMiddlewareをつかう
 Reactとの親和性高い
• react-reduxという神ライブラリのおかげ

15. Redux
Thanks to André “Staltz” Medeiros @andresaltz
Flux Redux

16. フレームワーク&ライブラリ
 React
 Redux
 redux-saga
 Moducks
 Reselect
ベースはこの２つ

17. フレームワーク&ライブラリ
 React
 Redux
 redux-saga
 Moducks
 Reselect

18. redux-saga
 Reduxのmiddlewareの1つ
 非同期処理をタスクベースで定義出来る
• 何かしらのActionを受けて、何かしらの処理をして、何かしらのAction
を投げる
 学習コストは高いが効果も高い
• 中〜大規模なアプリケーションに適する
• よく比べられるredux-thunkやredux-promiseと比べて可読性は高くな
る（当社比

19. フレームワーク&ライブラリ
 React
 Redux
 redux-saga
 Moducks
 Reselect

20. Moducks
 Reduxのducksパターンを実装するためのライブラリ
• ducksパターン＝action, actionCreator, reducer, sagaを1ファイルに
まとめる（モジュールと呼んだりする
• このライブラリ使うとモジュールを超シンプルに記述できる
 神

21. Moducks
before after

22. フレームワーク&ライブラリ
 React
 Redux
 redux-saga
 Moducks
 Reselect

23. Reselect
 Viewで使用するデータをReduxから抽出＆加工するた
めのライブラリ
• ReactとReduxの間にSelectorという概念を追加する
• Reduxでは純粋なデータを管理したいけど、Viewで表示する際は加工し
て表示したいとか。そういう要望を満たすためのライブラリ
• リストを特定の条件でソートしたりだとか、複数のstateの値を組み合わ
せて表示したりだとか

24. アーキテクチャ

25. その他に。。。
 ビルド
• Webpack
• Babel
• PostCSS
 テスト
• ESLint（Airbnb アセット）& StyleLint
• Prettier
• Jest

26. minaraiのこれから
 ReComposeの導入
• Reactの弱点：Component数が増えると描画が途端に重くなる
• 無駄な再描画が走りまくっていることが原因
• SFC + 必要に応じてLifecycleを導入
• ReComposeのPure Componentを利用
 React Storybookの導入
• デザイナとの分業
 Enzymeの導入
• Viewのテスト

27. 今日話した内容はほぼQiitaに書いてます
Nextremer Advent Calendar 2017 2日目
「最近のReact/Redux周り晒す」
https://qiita.com/k_tada/items/ee4f552e17ea7731447a
最後に