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

Transcript

1. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
   React/Reduxで
   秩序あるコードを書く
   BonfireFrontend #2
   ⽯井直⽮ @ヤフー株式会社
   

   View Slide

2. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
   ⾃⼰紹介
   • ⽯井 直⽮ @kaidempa
   • 2012新卒
   • ヤフーのスマホ版トップページ開発
   • 現在は新規開発をやってます。
   

   View Slide

3. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
   ⾃⼰紹介
   • Reactの本を書きました。
   

   View Slide

4. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
   今⽇話すこと
   • 秩序ある開発のために⾃分なりに気をつけていること
   • ここで⾔う秩序とは、複雑な要件や度重なる変更に対して柔軟
   に対応できる状態のこと。
   • 「あっちを修正したらこっちが変になった」を避けるということ。
   • 1箇所の修正によってあちこち修正しないといけない事態を避けること。
   

   View Slide

5. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
   今⽇話すこと
   • re-ducksを使う
   • データを主体としてstateを管理する
   • ComponentとContainerをしっかり使う
   

   View Slide

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が特徴的
   

   View Slide

7. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
   ducks
   • ducksの基本は、Redux公式サイトのようなディレクトリ構成
   ではなく、reducerとactionを同じ場所に置くこと。
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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を叩くといった
    ⼿続きを書いていい
    

    View Slide

12. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
    re-ducks
    • re-duck⾃体の話はここまで。
    • ここからは、re-ducksを使って破綻しないコードを書くには、
    という話
    • このようにしろと⾔ってるのではなくて、⾃分はこうしてなん
    とか秩序を保とうとしているという話
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
    データを主体としてstateを管理する
    • 「⾒た⽬切り」と「データ切り」がある。
    • おすすめは「データ切り」
    

    View Slide

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

    View Slide

19. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
    データを主体としてstateを管理する
    • データ切りすることで変更に強くなる。仕様変更があったとき
    に違和感なく修正できるようになる。
    • 開発中のエンジニアは「その時点の」仕様に詳しいので⾒た⽬
    切りしがち。
    

    View Slide

20. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
    ComponentとContainerをしっかり使う
    • コンポーネントはビジネスロジックを知りすぎてはいけない。
    • 知りすぎた命名やコードは混乱の元
    

    View Slide

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

    View Slide

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

    View Slide

23. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
    ComponentとContainerをしっかり使う
    • Containerをしっかりつかう。
    • ContainerはシンプルなmapStateToPropsとmapDispatchToPropsを
    コンポーネントにconnectするだけの場所ではない。
    

    View Slide

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

    View Slide

25. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
    オリジナルのコード
    https://redux.js.org/basics/usagewithreact
    

    View Slide

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

    View Slide

27. Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.
    ComponentとContainerをしっかり使う
    • mapStateToPropsではPropsにわたすべき値を計算することが
    できる。
    • これは実際にはselectorでやる。
    • コンポーネントに無駄なpropsを渡して知りすぎたロジックによる計算
    をさせるべきではない。
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide