Tweet
Tweet

Slide 1

Slide 1 text

TanStack Routerで型安全かつ効率的なルーティングを実現 株式会社サイバーエージェント・安井大晟（ytaisei） TSKaigi（LT）

Slide 2

Slide 2 text

自己紹介 ● 新卒1年目 ● Webフロントエンド ● React、TypeScript ● TanStack関連の記事を よく書きます

Slide 3

Slide 3 text

Reactのルーティングどうしてますか？

Slide 4

Slide 4 text

Vite+Reactなら ● React Router Frameworkを使うなら ● Next.js ● Remix ● Remix SPA Mode ルーティングの選択肢

Slide 5

Slide 5 text

Vite+Reactなら ● React Router ● TanStack Router Frameworkを使うなら ● Next.js ● Remix ● Remix SPA Mode 今回紹介するのが 選択肢を増やしたい！

Slide 6

Slide 6 text

Search Params による状態管理 型安全で シンプルな ルーティング 02 File-Basedな ルート生成 01 バンドルサイズを 軽減する Code Splitting 03 04 紹介する4つの特徴

Slide 7

Slide 7 text

File-Basedなルート生成 01 参考：https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing

Slide 8

Slide 8 text

Code-Basedに ルーティングを 実装する必要がない 各ルートごとに ● Route Component ● Pending Component ● Error Component ● NotFount Component を定義することができる

Slide 9

Slide 9 text

型安全でシンプルなルーティング 02 参考：https://tanstack.com/router/latest/docs/framework/react/guide/type-safety

Slide 10

Slide 10 text

ルーティングパスだけでなく、 Search Paramsなども型安全に扱える

Slide 11

Slide 11 text

アプリケーション全体で型安全に実装

Slide 12

Slide 12 text

1. @tanstack/router-cliがFiled-Basedの ディレクトリ構成を解析して Route Treeを自動生成 2. createRouter APIでrouterの インスタンスを作成 3. インスタンスの型定義をGlobalに登録 アプリケーション全体で型安全に実装

Slide 13

Slide 13 text

バンドルサイズを軽減する Code Splitting 03 参考：https://tanstack.com/router/latest/docs/framework/react/guide/code-splitting

Slide 14

Slide 14 text

lazy.tsxとroute.tsxに 分割するだけで Code Splittingしてくれる 各RouteごとにCode Splitting

Slide 15

Slide 15 text

route.tsx Critical Route lazy.tsx Non-Critical/Lazy Route 初回ロード時に読み込まれるコード 遅延して読み込まれるコード

Slide 16

Slide 16 text

route.tsx Critical Route lazy.tsx Non-Critical/Lazy Route コンポーネントがLazy Routeの対象になる

Slide 17

Slide 17 text

Search Paramsによる状態管理 04 参考：https://tanstack.com/router/latest/docs/framework/react/guide/search-params

Slide 18

Slide 18 text

● 各Routeに必要なSearch Paramsを型定義 ● Zodと組み合わせ可能 ● JSON-Firstで複雑な構造が扱える ● 型安全に扱える ● Validation可能 TanStack Routerで扱うSearch Params

Slide 19

Slide 19 text

ユーザ目線 ● Search Paramsの状態を保ったままリンクを共有可能 開発者目線 ● JSON-Firstで複雑な構造が扱える上、Validationが可能なため、 1種の状態管理として採用することができる なぜSearch Paramsで状態管理する？

Slide 20

Slide 20 text

TanStack Router’s Summary ● 高いDX（Developer Experience）に配慮 ○ 型安全性 ○ File-Based Routing ○ Code Splitting ● Search Paramsで型安全な状態管理 ○ ユーザ体験・DX向上

Slide 21

Slide 21 text

ご清聴ありがとうございました！ https://twitter.com/ytaisei_ https://zenn.dev/taisei_13046