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
100
Other Decks in Programming
See All in Programming
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
CSC509 Lecture 05
javiergs
PRO
0
310
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
8
1.4k
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
320
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
790
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
240
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
350
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
150
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
6.1k
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
4.5k
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
280
Featured
See All Featured
How to Ace a Technical Interview
jacobian
280
24k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Embracing the Ebb and Flow
colly
88
4.9k
The Cult of Friendly URLs
andyhume
79
6.6k
Side Projects
sachag
455
43k
Context Engineering - Making Every Token Count
addyosmani
8
300
Navigating Team Friction
lara
190
15k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
A better future with KSS
kneath
239
18k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
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)