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 ! FrontEnd by DMM
Search
isy
June 25, 2020
Programming
3
2.9k
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
92
Other Decks in Programming
See All in Programming
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
180
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
260
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
640
Goのエラースタックトレースの歴史と今後
sonatard
7
1.1k
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
250
What We Can Learn From OSS
inouehi
0
420
Ruby GitHub Packages
bkuhlmann
0
630
Hanami and htmx
bkuhlmann
0
200
Designing for tomorrow's programming workflows
honnibal
PRO
2
120
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
Elm 0.19.0 Changes
bkuhlmann
0
490
Featured
See All Featured
The Invisible Customer
myddelton
114
12k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
Designing Experiences People Love
moore
136
23k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
The Language of Interfaces
destraynor
151
23k
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
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)