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
96
Other Decks in Programming
See All in Programming
NPOでのDevinの活用
codeforeveryone
0
490
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
420
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
330
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
880
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
550
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.8k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
49
32k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
590
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
270
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
180
Is Xcode slowly dying out in 2025?
uetyo
1
240
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
Building an army of robots
kneath
306
45k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Git: the NoSQL Database
bkeepers
PRO
430
65k
For a Future-Friendly Web
brad_frost
179
9.8k
Documentation Writing (for coders)
carmenintech
72
4.9k
Making Projects Easy
brettharned
116
6.3k
KATA
mclloyd
30
14k
Optimizing for Happiness
mojombo
379
70k
Scaling GitHub
holman
459
140k
How STYLIGHT went responsive
nonsquared
100
5.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
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)