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.2k
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
99
Other Decks in Programming
See All in Programming
Honoアップデート 2025年夏
yusukebe
1
860
ソフトウェアテスト徹底指南書の紹介
goyoki
1
110
コンテキストエンジニアリング Cursor編
kinopeee
1
710
tool ディレクティブを導入してみた感想
sgash708
1
150
CSC305 Summer Lecture 12
javiergs
PRO
0
130
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
990
Namespace and Its Future
tagomoris
6
540
TanStack DB ~状態管理の新しい考え方~
bmthd
2
340
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
3
1.3k
AIエージェント開発、DevOps and LLMOps
ymd65536
1
350
Constant integer division faster than compiler-generated code
herumi
2
700
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
910
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
Unsuck your backbone
ammeep
671
58k
GitHub's CSS Performance
jonrohan
1031
460k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
480
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Side Projects
sachag
455
43k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
How STYLIGHT went responsive
nonsquared
100
5.7k
Balancing Empowerment & Direction
lara
2
590
Building Applications with DynamoDB
mza
96
6.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Code Review Best Practice
trishagee
70
19k
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)