2020/04/28 MixLeap Live Study #59 - Reactとその仲間たち での発表資料です https://yahoo-osaka.connpass.com/event/170013/

1. React/Reduxに
Selectorを導⼊したら
幸せになった話
MixLeap Study #59
ヤフー株式会社 松井 真⼦

2. ⾃⼰紹介
【名前】
松井 真⼦（まつい まこ）
【業務】
ヤフーに 2018年新卒⼊社
ショッピングの⼊稿ツール開発（React/Redux）
↓
PayPayモール Androidアプリ開発（Kotlin）
【趣味】
釣り、あつまれどうぶつの森 @makomsh

3. ⾃⼰紹介
【名前】
松井 真⼦（まつい まこ）
【業務】
ヤフーに 2018年新卒⼊社
ショッピングの⼊稿ツール開発（React/Redux）
↓
PayPayモール Androidアプリ開発（Kotlin）
【趣味】
釣り、あつまれどうぶつの森 @makomsh
このお話します

4. ⼊稿ツールの簡単なイメージ
簡単にいうとWordPressみたいなもの
⼊⼒データをもとにHTMLを⾃動で⽣成するシステムの⼊⼒部分
⼊稿データ
〇〇モジュールの⼊⼒フォーム
…
⼊稿ツール
⽣成されたページ
https://shopping.yahoo.co.jp/promotion/coupon/zorome/

5. 具体例 ‒画像モジュール‒
⼊稿ツール ユーザがアクセスしたWeb画⾯
画像モジュール
altタグ
画像URL
クーポン争奪戦
https://hogehoge
引⽤ : https://shopping.yahoo.co.jp/promotion/coupon/zorome/
⽣成されたHTML
<img src="https://hogehoge" alt="ゾロ⽬の⽇クーポン争奪戦">

6. ⼊稿ツールを開発する時に困ったこと
• コンポーネント間の依存関係が複雑になってしまった
• バリデーションの実装が複雑に
• データ構造が複雑＆ネストが深い
→ 各フォーム、モジュールのバリデーション結果も保持が原因の1つ

7. ⼊稿ツールを開発する時に困ったこと
• コンポーネント間の依存関係が複雑になってしまった
→ Atomic Designを導⼊して作り直し
• バリデーションの実装が複雑に
• データ構造が複雑＆ネストが深い
→ 各フォーム、モジュールのバリデーション結果も保持が原因の1つ

8. バリデーションのタイミングが難しい
propsが変更されるタイミングでバリデーションをする
• フォームに⼊⼒される時
• DBに保存されているデータをAPIで取得した時
ActionやReducerの中ではロジックを持たせたくない
→ライフサイクルメソッド（ ComponentDidUpdate ）の中で実装
個々のモジュールで全て実装しないといけない

9. そもそもバリデーションが多すぎる
• ⼊⼒フォーム単体
• モジュール単体（複数の⼊⼒フォームを統括）
• ページ全体として（全モジュールを統括）
→ ビジネス要件が絡んでくるところでより複雑になり、
バリデーションなのでしっかりテストしたいが、⼤変。

10. そんな時に助けてくれたのが
selector
(reduxjs/reselect)
https://github.com/reduxjs/reselect

11. Reselectを使うと？
Stateが渡された時に、関⼼のある値を返すことができる
＝ バリデーションを切り出して、結果をpropsとして渡せる
→ バリデーション結果を保持しなくて良い

12. Before / After
• コードがスッキリ！
• テストが書きやすい！
責務分けができたことで
品質が担保される
Before
After

13. まとめ
• Selectorの機能を使うと、余計なデータを保持しなくて良い
• バリデーションを切り分けることができたので、
コードもスッキリし、テストもしやすくなった
注意
他のライブラリを⽤いた実装での制約によりreselectを使いましたが、
Hooks APIの標準機能で同様のことができるようになっていそう
（公式でもUseSelectorとreselectを同時に使う例もあるので⽤途に合わせて使い分けを）