React + Redux: Re-Architecture - Think ! FrontEnd by DMM

593e9ce5d83d5bf4d4c45d5c8f0e0aeb?s=47 isy
June 25, 2020

React + Redux: Re-Architecture - Think ! FrontEnd by DMM

Think ! FrontEnd by DMM #01の登壇資料です!!
https://dmm.connpass.com/event/177895/

593e9ce5d83d5bf4d4c45d5c8f0e0aeb?s=128

isy

June 25, 2020
Tweet

Transcript

  1. © DMM.com Think!FrontEnd #1 React + Redux: Re-Architecture Hironori Akaishi

    合同会社DMM.com オンラインサロン事業部
  2. © DMM.com Hironori Akaishi / クマチャン 合同会社DMM.com 19年新卒入社 フロントエンドエンジニア オンラインサロン事業部

    @isytter
  3. © DMM.com 会員制のクローズドなコミュニティであるオンライン サロンのプラットフォーム ・サロン管理、会員管理 ・専用コミュニティ

  4. © DMM.com 会員制のクローズドなコミュニティであるオンライン サロンのプラットフォーム ・サロン・会員管理 ・専用コミュニティ

  5. © DMM.com TypeScript・Hooks化 Agenda Reduxアーキテクチャの変更 Hooksでのユニットテスト パフォーマンス 今後のDMMオンラインサロン

  6. © DMM.com TypeScript・Hooks化

  7. © DMM.com Hooks is なに フック (hook) は React 16.8

    で追加された新機能です。state などの React の機能を、 クラスを書かずに使えるようになります。 公式ドキュメントより : https://ja.reactjs.org/docs/hooks-overview.html
  8. © DMM.com ・Classコンポーネント/recomposeの混在 ・フルJavaScript ・テストカバレッジ0% ・React + Redux + Redux-Saga

    ・moducks(ducks+Sagaを実現するユーティリティ) 配属時の構成・問題
  9. © DMM.com ・型が無い(ライブラリ側で型が用意されていない) ・saga v1.0.0-beta.1以上にあげられない ・case変換してActionTypeからActionが作られるので型定義を用意するのが難しい moducks

  10. © DMM.com JSからTSにするときにありがちなのが、どうしても型付けできず にanyが入りこんてしまう サロンの場合はReduxがModucksに完全に依存しているので Reduxが絡むとこは確実にanyになる TypeScript・Hooks化

  11. © DMM.com TypeScript・Hooks化 any型が入り込んだものを扱う型を定義 想定している型をGenericsに渡しておくことで 後々の修正が容易になる

  12. © DMM.com TypeScript・Hooks化 ATOMS Atomic Designの場合 MOLECULES PAGES・ORGANI SMS ・Hooksにしていく場合、部分的に変えていくことができない

    ・1コンポーネントを1度で修正しないといけない ・進め方を間違えるとリファクタが難しくなり、今までのコードをただ HooksやTypeScriptにするだけしかできなくなる ・いきなりページ単位でTypeScript・Hooks化していくのは難しい ・スクラム開発だと見積もりにブレが出やすい、想定してない変更が出てくる ・依存関係が少ないものを先にTypeScript・Hooksにしていく ・AtomicDesignだとAtoms→Molecules→ページごとにするとスムーズにいきやすい
  13. © DMM.com Reduxアーキテクチャの変更

  14. © DMM.com ・moducks配下に全てのロジック ・sendersにデータ更新、作成系 ・viewsにデータ取得系 いままでのアーキテクチャ

  15. © DMM.com ・ドメインロジックはEntities配下 ・各ドメインごとにaction、reducer、sagaファイル ・元々の構成がReduxで状態を持ちすぎていた →entities内にロジックを閉じ込める ・Redux-Sagaは、のちのちツライ.... ・副作用系がSagaに依存してしまうのでリファクタや今後の置 き換えが難しい 新しいアーキテクチャ

  16. © DMM.com ・カスタムhooksに副作用系を集める ・UI(Component)側に寄せつつ、UIにロジックを持ち込まない Hooksベースのアーキテクチャ

  17. © DMM.com Hooksのユニットテスト

  18. © DMM.com Hooksのユニットテスト enzyme ・Reactコンポーネントのユニットテストの定番 ・Shallow Rendering機能で子コンポーネントへ影響を気にせず、テストをコンポーネント内に制限する ことができる

  19. © DMM.com Hooksのユニットテスト enzyme ・Reactコンポーネントのユニットテストの定番 ・Shallow Rendering機能で子コンポーネントへ影響を気にせず、テストをコンポーネント内に制限する ことができる Hooksとの相性が悪い Shallow

    Rendering時にuseEffectを呼び出せないなど問題がある
  20. © DMM.com Hooksのユニットテスト React Testing Library(@testing-library/react) ・ユーザがコンポーネントを使用するようにテストが設計されreact-dom/test-utilsをラップしたライブラ リ ・jestのカスタムマッチャである@testing-library/jest-dom、Custom Hooks用のテストユーティリティ

    @testing-library/react-hooksと一緒に使うと便利 enzymeのように実装をテストするライブラリに比べるとシンプルに書くことができる
  21. © DMM.com https://kumaaaaa.com/react-testing/ React Hooks Testing - BLOG

  22. © DMM.com テスト方針 コンポーネントのユニットテストは頑張らない選択肢が大事 ・そもそもフロントエンドは変更が多い ・労力に対して、見返りが少ない テストの「選択と集中」を決める ・比較的変更が少ない、Atoms・Moleculesを中心にテストをする ・機能はe2e、UIはVRTで担保する

  23. © DMM.com パフォーマンス

  24. © DMM.com Reactのパフォーマンス最適化方法はいろいろ ・不要な再レンダリングを防ぐ ・code splitting ・cache ・service worker ・react-query

    ・prefetching ・Quicklink
  25. © DMM.com Reactのパフォーマンス最適化方法はいろいろ ・不要な再レンダリングを防ぐ ・code splitting ・cache ・service worker ・react-query

    ・prefetching ・Quicklink
  26. © DMM.com パフォーマンス useSelector React Redux v7.1.0から追加されたHook API connectを使ったHOCを使わずにRedux Storeか

    らデータを取得できる
  27. © DMM.com useSelector Actionがdispatchされると、Selectorの結果を以 前のものと比較して、再レンダリングする →不要な値をSelectorで返さないようにする connectとは違い、Propsが変わっていなくても親 の再レンダリングの影響をうける →React.memoでラップすることを意識する

  28. © DMM.com 今後のDMMオンラインサロン(宣伝)

  29. © DMM.com オンラインサロン市場の急成長、ビジネスニーズの拡大にレガシーシステムが要求に耐えづらくなりつつあ る... 今後のDMMオンラインサロン

  30. © DMM.com マイクロサービス化予定

  31. © DMM.com ・Next.js ・Go ・EKS or ECS Fargate etc…. 技術スタック(予定)

  32. © DMM.com Thanks Illustrated by Streamline Lab(https://lab.streamlineicons.com)