React/Reduxで 秩序あるコードを書く

Transcript

1. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. React/Reduxで

   秩序あるコードを書く BonfireFrontend #2 ⽯井直⽮ @ヤフー株式会社

2. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ⾃⼰紹介

   • ⽯井 直⽮ @kaidempa • 2012新卒 • ヤフーのスマホ版トップページ開発 • 現在は新規開発をやってます。

3. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ⾃⼰紹介

   • Reactの本を書きました。

4. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. 今⽇話すこと

   • 秩序ある開発のために⾃分なりに気をつけていること • ここで⾔う秩序とは、複雑な要件や度重なる変更に対して柔軟 に対応できる状態のこと。 • 「あっちを修正したらこっちが変になった」を避けるということ。 • 1箇所の修正によってあちこち修正しないといけない事態を避けること。

5. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. 今⽇話すこと

   • re-ducksを使う • データを主体としてstateを管理する • ComponentとContainerをしっかり使う

6. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. re-ducksの基本

   • re-ducksとは • https://github.com/alexnm/re-ducks • ducksというパターンを踏襲 • https://github.com/erikras/ducks-modular-redux • OperationsとSelectorsが特徴的

7. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ducks

   • ducksの基本は、Redux公式サイトのようなディレクトリ構成 ではなく、reducerとactionを同じ場所に置くこと。

8. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. •

   Ducksはファイルはスッキリするが、複雑になってくると1 ファイルが⼤きくなってくる。 • 使う側からのインターフェースを変えずにディレクトリにすることも できる。 • redux-thunkなどを使って⾮同期を扱うようになるとまたさら に複雑になる。 ducksの使いづらいところ

9. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. re-ducks

   • re-ducks • 使う側からの呼び⽅はducksと同じ感じ • action, reducerはほとんど定義するだけ • selector, operationという新キャラが登場 • 1層増やすことによって、 action, reducerが本来やるべきことに 集中できるようになる。

10. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. Selector

    • Selectorのルール 1. (state) => return 欲しい値 というインターフェース 2. Stateから算出できる値はstateに 保存しないでselectorから得る （同じデータを複数のstateで持 たない） 3. 別のディレクトリのselectorから 値を取得しても良い 4. reselectを使う

11. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. Operation

    • Operationのルール 1. redux-thunkを使って良い 2. 値が欲しいときはselectorを経由 して取得する 3. 同じディレクトリのactionは参照 して良い。 4. 別のディレクトリのactionは直接 参照せず、operationを経由して使 う 5. A→Bの順にactionを叩くといった ⼿続きを書いていい

12. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. re-ducks

    • re-duck⾃体の話はここまで。 • ここからは、re-ducksを使って破綻しないコードを書くには、 という話 • このようにしろと⾔ってるのではなくて、⾃分はこうしてなん とか秩序を保とうとしているという話

13. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. re-ducks

    • re-ducksを適切に使うことで、かなり秩序を得ることができる。 • 単にstateを操作するだけのaction/reducerと、 複雑な操作を扱うoperation/selectorを明⽰的に分ける • reactらしさ・reduxらしさを損なうことなく複雑さに⽴ち向か うことができる

14. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. re-ducks

    • アプリケーションの本質は「状態(state)」 • Reactの良さは状態(state)→表⽰を定義するだけで良いこと。 • 状態管理とアプリケーションの複雑さは切り離されているべき であり、operation, selectorを使うことで切り離すことができ る。 • ある状態を変更するルートが複数ある場合でも混乱しなくなるってこ と。 • stateと実際に表⽰上必要な値や使いやすい形はかならずしも⼀致して いないので、selectorで1クッションさせて変更に柔軟にする。

15. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. re-ducks

    • アプリケーションの本質である「状態」と複雑さを持つユーザ 操作や⼿続きを分けて考えることができる。 • ⼿続きの例として、「ログイン済みならコンテンツに遷移して、ログ インしてないならログイン画⾯に遷移」など。「コンテンツに遷移」 と「ログイン画⾯に遷移」は別々のaction(もしくはoperation)で、 別々の状態を操作するはず。 • それぞれはシンプルに作っておいて、operation, selectorで分岐する条 件を取得して必要なactionを順番に叩く。

16. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

17. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. データを主体としてstateを管理する

    • 「⾒た⽬切り」と「データ切り」がある。 • おすすめは「データ切り」

18. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

19. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. データを主体としてstateを管理する

    • データ切りすることで変更に強くなる。仕様変更があったとき に違和感なく修正できるようになる。 • 開発中のエンジニアは「その時点の」仕様に詳しいので⾒た⽬ 切りしがち。

20. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ComponentとContainerをしっかり使う

    • コンポーネントはビジネスロジックを知りすぎてはいけない。 • 知りすぎた命名やコードは混乱の元

21. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ComponentとContainerをしっかり使う

    • Componentが知りすぎた命名の例 • slottledGetHogehoge(ボタンにバインドされた関数) • スロットルされてるかは知らなくていい • Hogehogeをとってることも知らなくていい • ボタンはクリックされたら関数を呼ぶだけでよくて、何をするかは知らなくてい い。 • confirmAndLogin(ボタンの名前) • ログインはいいかもだけど、その前に確認を出すことは知らなくていい • 仕様が変わった時コンポーネントも修正しないといけなくなる

22. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ComponentとContainerをしっかり使う

    • 知りすぎたロジック • よくあるif(xxx < 10)など。10ってなんだ。 • マジックナンバーが良くないは当然なので定数にする。 • この数字の理由が表⽰上の理由でコンポーネントにあるのか、ロジッ クの理由でここにあるのか考える必要がある • ロジックにあるならselectorを使って判定し、真偽値で渡す。

23. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ComponentとContainerをしっかり使う

    • Containerをしっかりつかう。 • ContainerはシンプルなmapStateToPropsとmapDispatchToPropsを コンポーネントにconnectするだけの場所ではない。

24. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. Redux公式サイトの例を改悪させたコード

25. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. オリジナルのコード

    https://redux.js.org/basics/usagewithreact

26. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ここがいいところ

27. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ComponentとContainerをしっかり使う

    • mapStateToPropsではPropsにわたすべき値を計算することが できる。 • これは実際にはselectorでやる。 • コンポーネントに無駄なpropsを渡して知りすぎたロジックによる計算 をさせるべきではない。

28. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ComponentとContainerをしっかり使う

    • mapDispatchToPropsで予めAction(re-ducksではOperation)に どんな値を渡すかを定義しておける。 • コンポーネントでは単に引数無しで実⾏するだけにできる • mapDispatchToPropsではActionのアグリゲート（おまとめ） ができる。 • ⼀つのユーザー操作に複数の別々の処理を紐づけたい時。「遷移する &⾳を鳴らす」とか。(どんなときだｗ) ※ 先程の「ログイン済みならコンテンツに遷移して、ログインしてない ならログイン画⾯に遷移」なんかは⼀連の⼿続きなのでOperationで書 いておく。

29. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ComponentとContainerをしっかり使う

    • mergePropsを使う • mapDispatchToPropsではmapStateToPropsで得た値を知ることはで きない。 • stateの値もactionもコンポーネントに渡してセットで使う、をやりが ち • ユーザー操作によって引数に渡す値が変わらないのなら、mergeProps で「stateの値を引数に取るoperationを叩く関数」を作ってpropsとし て渡し、コンポーネントでは単に引数無しで実⾏するだけ、という形 にするとコンポーネントが知りすぎなくてよい。

30. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. mergeProps使ってみた

31. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. まとめ

    • アプリケーションは複雑であることを認めて、向き合う。 • どこが複雑になるか、どこをシンプルにするかを意識する。 • Reducer, action, operation, selector, component, containerそ れぞれの責任を理解し、その範囲を超えすぎないことを気をつ ける。 • 開発中のエンジニアはすべてを知りすぎた状態なので、それぞ れの気持ちになってコーディングする。

32. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ありがとうございました！