大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~

by Ibuki Kaji

Slide 1

Slide 1 text

大規模Reactアプリのリアーキテクチャ 8万行のTanStack Query移行の軌跡株式会社WinTicket 鍛冶維吹 2024/04/18 Muddy Web #8

Slide 2

Slide 2 text

鍛冶維吹 - k a j i , i b u k i e 2022年株式会社サイバーエージェント新卒入B e 株式会社 WinTicket 所a e ~2024/03：web フロンW e 2024/04~：バックエンF e 「筋トレは歯磨き」自己紹介 @kj4555 @kj455

Slide 3

Slide 3 text

01 WINTICKET について 02 TanStack Query への移行背景 03 移行結果 04 アーキテクチャ紹介 05 移行を通じての学び 06 終わりに目次

Slide 4

Slide 4 text

01 WINTICKET について 02 TanStack Query への移行背景 03 移行結果 04 アーキテクチャ紹介 05 移行を通じての学び 06 終わりに目次

Slide 5

Slide 5 text

WINTICKET について E 公営競技ネット投票サービ' E 競輪/オートレー' E 2019年4月リリー' E 市場シェアNo.1 #React #Fastly #Go #Kubernetes #Flutter #Cloud Run #Google Cloud #TypeScript #TanStack Query

Slide 6

Slide 6 text

01 WINTICKET について 02 TanStack Query への移行背景 03 移行結果 04 アーキテクチャ紹介 05 移行を通じての学び 06 終わりに目次

Slide 7

Slide 7 text

TanStack Query への移行背景 WINTICKET Web の旧状態管理アーキテクチャ 3種類[1]のうち2種類の管理を Redux が担っていた [1] Zenn. “「3種類」で管理するReactのState戦略”. https://zenn.dev/knowledgework/articles/607ec0c9b0408d 2024/04/14 サーバーレスポンスのキャッシュ管理場所ステート種類 Redux Redux コンポーネントグローバルステート管理ローカルステートローカルステート

Slide 8

Slide 8 text

TanStack Query への移行背景 Redux の辛み「サーバーデータのキャッシュ」用途では面倒なポイントが多p g 非同期処理を扱うにはプラグインが必W g Redux Thunk (or Redux Saga6 g サーバーからのデータ取得に特化したものではない → 自前で色々と書く必要がある

Slide 9

Slide 9 text

Redux での処理の一例

Slide 10

Slide 10 text

Redux での処理の一例

Slide 11

Slide 11 text

Redux での処理の一例

Slide 12

Slide 12 text

Redux での処理の一例

Slide 13

Slide 13 text

これに加えデータの正規É クエリ引数ごとのデータ保À ... Redux での処理の一例

Slide 14

Slide 14 text

これに加えデータの正規É クエリ引数ごとのデータ保À ... Redux での処理の一例

Slide 15

Slide 15 text

TanStack Query への移行背景 TanStack Query の導入サーバーレスポンスのキャッシュ Before ステート種類 Redux Redux TanStack Query Redux コンポーネントコンポーネント After グローバルステート管理ローカルステートローカルステート

Slide 16

Slide 16 text

01 WINTICKET について 02 TanStack Query への移行背景 03 移行結果 04 アーキテクチャ紹介 05 移行を通じての学び 06 終わりに目次

Slide 17

Slide 17 text

移行結果定量比較：状態管理周りのコード量

Slide 18

Slide 18 text

移行結果定量比較：状態管理周りのコード量 Before 77438 (行)

Slide 19

Slide 19 text

移行結果定量比較：状態管理周りのコード量 Before After 77438 (行) (行) 50215 -27223(35%)

Slide 20

Slide 20 text

移行結果移行を経て得られた定性的なメリット 10 データフローが簡潔に 70 レポジトリオーナーシップ向上[2] m クエリの呼び出しだけでデータを取得可 m データの正規化を廃 m 将来 TanStack Query を剥がすことになっても比較的楽にマイグレーション可能 m アプリケーション基盤への理 m 様々なドメインのコードの読み書v m レビューによる知見の共有 [2]. Speaker Deck. 「リアーキテクトと開発生産性について」. https://speakerdeck.com/yosuke_furukawa/riakitekutotokai-fa-sheng-chan-xing-nituite. 2024-04-14

Slide 21

Slide 21 text

01 WINTICKET について 02 TanStack Query への移行背景 03 移行結果 04 アーキテクチャ紹介 05 移行を通じての学び 06 終わりに目次

Slide 22

Slide 22 text

アーキテクチャ紹介実際の使用例：Query 定義

Slide 23

Slide 23 text

アーキテクチャ紹介実際の使用例：Query 定義独自のクエリファクトリ関数による Query 定義 Query 定義

Slide 24

Slide 24 text

アーキテクチャ紹介実際の使用例：Query 利用 Query 定義

Slide 25

Slide 25 text

アーキテクチャ紹介実際の使用例：Query 利用 useQuery Query 定義 fetchQuery

Slide 26

Slide 26 text

アーキテクチャ紹介実際の使用例：Query 利用 useQuery Query 定義 fetchQuery ①

Slide 27

Slide 27 text

アーキテクチャ紹介実際の使用例：Query 利用 useQuery Query 定義 fetchQuery ① ②

Slide 28

Slide 28 text

アーキテクチャ紹介実際の使用例：Query 利用 useQuery Query 定義 fetchQuery ① ②

Slide 29

Slide 29 text

アーキテクチャ紹介 1. Query ファクトリ関数 useQuery 実行時の流れを追ってみる

Slide 30

Slide 30 text

アーキテクチャ紹介 1. Query ファクトリ関数 useQuery 実行時の流れを追ってみる

Slide 31

Slide 31 text

アーキテクチャ紹介 1. Query ファクトリ関数 useQuery 実行時の流れを追ってみる

Slide 32

Slide 32 text

アーキテクチャ紹介 1. Query ファクトリ関数 useQuery 実行時の流れを追ってみる

Slide 33

Slide 33 text

アーキテクチャ紹介 1. Query ファクトリ関数 useQuery 実行時の流れを追ってみる

Slide 34

Slide 34 text

アーキテクチャ紹介 1. Query ファクトリ関数 useQuery 実行時の流れを追ってみる

Slide 35

Slide 35 text

アーキテクチャ紹介 1. Query ファクトリ関数 ① ② .options()：クエリオプションの生B 8h クエリ引数の queryKey への自動反T 9h queryKey, queryFn の一括管理

Slide 36

Slide 36 text

アーキテクチャ紹介 1. Query ファクトリ関数 ① ② TanStack Query V5 で導入された queryOptions API と同じ思想 .options()：クエリオプションの生 ym クエリ引数の queryKey への自動反 m queryKey, queryFn の一括管理

Slide 37

Slide 37 text

アーキテクチャ紹介 1. Query ファクトリ関数 ① ② TanStack Query V5 で導入された queryOptions API と同じ思想実は一点危ないポイントが...！ .options()：クエリオプションの生 { クエリ引数の queryKey への自動反m { queryKey, queryFn の一括管理

Slide 38

Slide 38 text

余剰プロパティを含むオブジェクトを引数に渡す例：

Slide 39

Slide 39 text

余剰プロパティを含むオブジェクトを引数に渡す例：型エラー

Slide 40

Slide 40 text

余剰プロパティを含むオブジェクトを引数に渡す例：型エラー型エラーなし関数引数に余剰プロパティが含まれていても型エラーにならない場合がある

Slide 41

Slide 41 text

アーキテクチャ紹介 QueryOptions 生成関数引数の型の厳格化 TypeScript は余剰プロパティチェックをオブジェクトリテラルに対してのみ行う（実用性観点） QueryOptions 生成関数においては  この挙動が問題になりうる型エラーにならない余剰プロパティを含むオブジェクトを引数に渡す例：

Slide 42

Slide 42 text

アーキテクチャ紹介 QueryOptions 生成関数引数の型の厳格化 S オプション生成時の引数は  そのまま queryKey に格納されQ S TanStack Query は  queryKey が異なると別クエリとして扱う

Slide 43

Slide 43 text

アーキテクチャ紹介 QueryOptions 生成関数引数の型の厳格化 S オプション生成時の引数は  そのまま queryKey に格納されQ S TanStack Query は  queryKey が異なると別クエリとして扱う引数オブジェクトが余剰プロパティを含む = クエリが別物として扱われる

Slide 44

Slide 44 text

アーキテクチャ紹介 QueryOptions 生成関数引数の型の厳格化 Todo 更新処理（UpdateTodo） 1 2 3 以下のようなケースで問題になb da Todo取i Ta Todo更v Ya 最新の Todo 取得

Slide 45

Slide 45 text

アーキテクチャ紹介 QueryOptions 生成関数引数の型の厳格化 Todo 更新処理（UpdateTodo） QueryKey 1 2 3 ≠

Slide 46

Slide 46 text

アーキテクチャ紹介 QueryOptions 生成関数引数の型の厳格化 Todo 更新処理（UpdateTodo） QueryKey 1 2 3 ≠ →最新のTodoが再取得されない...！！ ×

Slide 47

Slide 47 text

アーキテクチャ紹介 QueryOptions 生成関数引数の型の厳格化常に余剰プロパティを含まないような型制約（`Exact`）をかけることで防ぐ type-fest の `Exact` 型を利簡単なものであれば自作可能型エラーになる

Slide 48

Slide 48 text

アーキテクチャ紹介（再掲）実際の使用例：Query 利用 useQuery Query 定義 fetchQuery ① ②

Slide 49

Slide 49 text

アーキテクチャ紹介 2. DI 層としての QueryFunctionContext 実現したいこと： Query をテスタブルにする → を外部から注入する依存

Slide 50

Slide 50 text

アーキテクチャ紹介 2. DI 層としての QueryFunctionContext 実現したいこと： Query をテスタブルにする → を外部から注入する依存 QueryFunctionContext

Slide 51

Slide 51 text

アーキテクチャ紹介 2. DI 層としての QueryFunctionContext QueryFunctionContextG B metc B queryKeV B signa5 B pageParam ←任意の値を入れられる Query の defaultOptions で meta に依存を注入可能

Slide 52

Slide 52 text

アーキテクチャ紹介 2. DI 層としての QueryFunctionContext t QueryClient 生成時の defaultOptions で  meta に依存を注h t テスト時はモックに差し替える

Slide 53

Slide 53 text

アーキテクチャ紹介 2. DI 層としての QueryFunctionContext t QueryClient 生成時の defaultOptions で  meta に依存を注h t テスト時はモックに差し替える →この方針には一点だけ問題がある...

Slide 54

Slide 54 text

アーキテクチャ紹介 2. DI 層としての QueryFunctionContext WINTICKET では他の要件のために meta を活用している... あくまでデフォルト値なので meta に他の値を指定すると上書きされて依存が消えてしまう

Slide 55

Slide 55 text

アーキテクチャ紹介 2. DI 層としての QueryFunctionContext useQuery をラップし meta のマージ処理を行うことで解決（時間の都合上話せないが）他の要件で既に useQuery を独自にラップする必要があった

Slide 56

Slide 56 text

01 WINTICKET について 02 TanStack Query への移行背景 03 移行結果 04 アーキテクチャ紹介 05 移行を通じての学び 06 終わりに目次

Slide 57

Slide 57 text

移行を通じての学びメンバー全員の理解/同意を得るリアーキテクチャは将来の開発スタイルに関わる大きな意思決定なのでメンバー全員の理解/同意が必要アーキテクチャ自体への納得y q 移行リードへの信頼感

Slide 58

Slide 58 text

移行を通じての学びメンバー全員の理解/同意を得る t アーキテクチャ自体への納得感「良い設計をする e Docsを読み漁q e ベストプラクティスを知q e 作者の X をフォローすq e 作者のブログを読4 e アプリケーション要件に応じてカスタマイズする移行リードへの信頼感「徹底的なコミット e メンバーからどんな質問が来ても自分の意見で答えられる状態にすq e 何か起きても自責でどうにかする

Slide 59

Slide 59 text

移行を通じての学び「最適な設計」にこだわりすぎない手戻りを恐れて、手を動かす前に机上で考えてしまいがちただ、結局手を動かさないとわからないことが多くある何かあったら気合いでリファクタする覚悟さえあれば前に進んで良い進み始めて後悔したことは一回もないインクリメンタルに進む方が早く良いものが出来上がる

Slide 60

Slide 60 text

移行を通じての学び移行戦略の重要性移行に取り組む順番への戦略S W 足元の進捗だけで見ると、影響少ないかつ剥がしやすい箇所ばかり進めてしま4 W 結局複雑なコアロジックが最後まで残ってしまいがち影響/依存の小さい箇所既存アーキテクチャとの共存書き心地コアロジック複雑な要件へ耐えうる  アーキテクチャかどうかの確認残り設計の妥当性は確認済みあとは移行するだけ初期中期後期

Slide 61

Slide 61 text

01 WINTICKET について 02 TanStack Query への移行背景 03 移行結果 04 アーキテクチャ紹介 05 移行を通じての学び 06 終わりに目次

Slide 62

Slide 62 text

終わりに思い残していること V TanStack Query V5 にアップデートできていなd V そもそも React 18 にあげないと..# V Server Component 全盛時代が来たら TanStack Query も要らなくなる？

Slide 63

Slide 63 text

終わりに最後に p 8万行を半年で、かつ、手作業で書き直すのは途方の見えない戦いだっ6 p チームメンバーの皆さん本当にお疲れ様でし6 p 大規模リアーキテクチャには技術力に加えて気合いも必要

Slide 64

Slide 64 text

終わりに We are HIRING !!! WINTICKET Web で働いてくれる人を募集していますW 圧倒的若手チーム（全員20代3 Web っぽいことだけに閉じずに CI/CD やインフラ周りを触る機会もアリ

Slide 65

Slide 65 text

Thank you for listening!!!