Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React + Redux: Re-Architecture - Think ! FrontE...
Search
isy
June 25, 2020
Programming
3
3.1k
React + Redux: Re-Architecture - Think ! FrontEnd by DMM
Think ! FrontEnd by DMM #01の登壇資料です!!
https://dmm.connpass.com/event/177895/
isy
June 25, 2020
Tweet
Share
More Decks by isy
See All by isy
PWAとネイティヴアプリ
isy
0
96
Other Decks in Programming
See All in Programming
爆速スッキリ! Rspack 移行の成果と道のり - Muddy Web #11
dora1998
1
150
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
3
1.2k
PHPer's Guide to Daemon Crafting Taming and Summoning
uzulla
2
1.1k
ローコードサービスの進化のためのモノレポ移行
taro28
1
330
Devinのメモリ活用の学びを自社サービスにどう組み込むか?
itarutomy
0
1.7k
Going Structural with Named Tuples
bishabosha
0
170
バックエンドNode.js × フロントエンドDeno で開発して得られた知見
ayame113
5
1.3k
複数ドメインに散らばってしまった画像…! 運用中のPHPアプリに後からCDNを導入する…!
suguruooki
0
430
AtCoder Heuristic First-step Vol.1 講義スライド
terryu16
2
1k
ステートソーシング型イベント駆動の視点で捉えるCQRS+ES
shinnosuke0522
1
320
Kubernetesで実現できるPlatform Engineering の現在地
nwiizo
2
1.7k
SLI/SLOの設定を進めるその前に アラート品質の改善に取り組んだ話
tanden
2
730
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Facilitating Awesome Meetings
lara
53
6.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
177
52k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
28
2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Become a Pro
speakerdeck
PRO
27
5.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
12
1.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Transcript
© DMM.com Think!FrontEnd #1 React + Redux: Re-Architecture Hironori Akaishi
合同会社DMM.com オンラインサロン事業部
© DMM.com Hironori Akaishi / クマチャン 合同会社DMM.com 19年新卒入社 フロントエンドエンジニア オンラインサロン事業部
@isytter
© DMM.com 会員制のクローズドなコミュニティであるオンライン サロンのプラットフォーム ・サロン管理、会員管理 ・専用コミュニティ
© DMM.com 会員制のクローズドなコミュニティであるオンライン サロンのプラットフォーム ・サロン・会員管理 ・専用コミュニティ
© DMM.com TypeScript・Hooks化 Agenda Reduxアーキテクチャの変更 Hooksでのユニットテスト パフォーマンス 今後のDMMオンラインサロン
© DMM.com TypeScript・Hooks化
© DMM.com Hooks is なに フック (hook) は React 16.8
で追加された新機能です。state などの React の機能を、 クラスを書かずに使えるようになります。 公式ドキュメントより : https://ja.reactjs.org/docs/hooks-overview.html
© DMM.com ・Classコンポーネント/recomposeの混在 ・フルJavaScript ・テストカバレッジ0% ・React + Redux + Redux-Saga
・moducks(ducks+Sagaを実現するユーティリティ) 配属時の構成・問題
© DMM.com ・型が無い(ライブラリ側で型が用意されていない) ・saga v1.0.0-beta.1以上にあげられない ・case変換してActionTypeからActionが作られるので型定義を用意するのが難しい moducks
© DMM.com JSからTSにするときにありがちなのが、どうしても型付けできず にanyが入りこんてしまう サロンの場合はReduxがModucksに完全に依存しているので Reduxが絡むとこは確実にanyになる TypeScript・Hooks化
© DMM.com TypeScript・Hooks化 any型が入り込んだものを扱う型を定義 想定している型をGenericsに渡しておくことで 後々の修正が容易になる
© DMM.com TypeScript・Hooks化 ATOMS Atomic Designの場合 MOLECULES PAGES・ORGANI SMS ・Hooksにしていく場合、部分的に変えていくことができない
・1コンポーネントを1度で修正しないといけない ・進め方を間違えるとリファクタが難しくなり、今までのコードをただ HooksやTypeScriptにするだけしかできなくなる ・いきなりページ単位でTypeScript・Hooks化していくのは難しい ・スクラム開発だと見積もりにブレが出やすい、想定してない変更が出てくる ・依存関係が少ないものを先にTypeScript・Hooksにしていく ・AtomicDesignだとAtoms→Molecules→ページごとにするとスムーズにいきやすい
© DMM.com Reduxアーキテクチャの変更
© DMM.com ・moducks配下に全てのロジック ・sendersにデータ更新、作成系 ・viewsにデータ取得系 いままでのアーキテクチャ
© DMM.com ・ドメインロジックはEntities配下 ・各ドメインごとにaction、reducer、sagaファイル ・元々の構成がReduxで状態を持ちすぎていた →entities内にロジックを閉じ込める ・Redux-Sagaは、のちのちツライ.... ・副作用系がSagaに依存してしまうのでリファクタや今後の置 き換えが難しい 新しいアーキテクチャ
© DMM.com ・カスタムhooksに副作用系を集める ・UI(Component)側に寄せつつ、UIにロジックを持ち込まない Hooksベースのアーキテクチャ
© DMM.com Hooksのユニットテスト
© DMM.com Hooksのユニットテスト enzyme ・Reactコンポーネントのユニットテストの定番 ・Shallow Rendering機能で子コンポーネントへ影響を気にせず、テストをコンポーネント内に制限する ことができる
© DMM.com Hooksのユニットテスト enzyme ・Reactコンポーネントのユニットテストの定番 ・Shallow Rendering機能で子コンポーネントへ影響を気にせず、テストをコンポーネント内に制限する ことができる Hooksとの相性が悪い Shallow
Rendering時にuseEffectを呼び出せないなど問題がある
© 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のように実装をテストするライブラリに比べるとシンプルに書くことができる
© DMM.com https://kumaaaaa.com/react-testing/ React Hooks Testing - BLOG
© DMM.com テスト方針 コンポーネントのユニットテストは頑張らない選択肢が大事 ・そもそもフロントエンドは変更が多い ・労力に対して、見返りが少ない テストの「選択と集中」を決める ・比較的変更が少ない、Atoms・Moleculesを中心にテストをする ・機能はe2e、UIはVRTで担保する
© DMM.com パフォーマンス
© DMM.com Reactのパフォーマンス最適化方法はいろいろ ・不要な再レンダリングを防ぐ ・code splitting ・cache ・service worker ・react-query
・prefetching ・Quicklink
© DMM.com Reactのパフォーマンス最適化方法はいろいろ ・不要な再レンダリングを防ぐ ・code splitting ・cache ・service worker ・react-query
・prefetching ・Quicklink
© DMM.com パフォーマンス useSelector React Redux v7.1.0から追加されたHook API connectを使ったHOCを使わずにRedux Storeか
らデータを取得できる
© DMM.com useSelector Actionがdispatchされると、Selectorの結果を以 前のものと比較して、再レンダリングする →不要な値をSelectorで返さないようにする connectとは違い、Propsが変わっていなくても親 の再レンダリングの影響をうける →React.memoでラップすることを意識する
© DMM.com 今後のDMMオンラインサロン(宣伝)
© DMM.com オンラインサロン市場の急成長、ビジネスニーズの拡大にレガシーシステムが要求に耐えづらくなりつつあ る... 今後のDMMオンラインサロン
© DMM.com マイクロサービス化予定
© DMM.com ・Next.js ・Go ・EKS or ECS Fargate etc…. 技術スタック(予定)
© DMM.com Thanks Illustrated by Streamline Lab(https://lab.streamlineicons.com)