TanStack Routerで型安全かつ効率的なルーティングを実現

TSKaigiにて使用した資料です。

https://tskaigi.org/talks/ytaisei_

Reactを用いたSPA開発においてフレームワークの採用は時にtoo muchになります。
しかし、Next.jsやRemixのFiled-Basedなルーティングは開発体験が良いです。

私たちはSPA開発においても型安全でFile-Basedなルーティングを求めています。

今回はそのような状況においてTanStack Routerが有力な候補になることを、その特徴とメリットに触れながら解説します。

次の特徴を紹介します。

- 型安全でシンプルなルーティング
- File-Basedなルート生成
- バンドルサイズを軽減するCode Splitting
- Search Paramsによる状態管理

Transcript

1. TanStack Routerで型安全かつ効率的なルーティングを実現 株式会社サイバーエージェント・安井大晟（ytaisei） TSKaigi（LT）
2. 自己紹介 • 新卒1年目 • Webフロントエンド • React、TypeScript • TanStack関連の記事を よく書きます
3. Reactのルーティングどうしてますか？
4. Vite+Reactなら • React Router Frameworkを使うなら • Next.js • Remix • Remix SPA Mode ルーティングの選択肢
5. Vite+Reactなら • React Router • TanStack Router Frameworkを使うなら • Next.js • Remix • Remix SPA Mode 今回紹介するのが 選択肢を増やしたい！
6. Search Params による状態管理 型安全で シンプルな ルーティング 02 File-Basedな ルート生成 01 バンドルサイズを 軽減する Code Splitting 03 04 紹介する4つの特徴
7. File-Basedなルート生成 01 参考：https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing
8. Code-Basedに ルーティングを 実装する必要がない 各ルートごとに • Route Component • Pending Component • Error Component • NotFount Component を定義することができる
9. 型安全でシンプルなルーティング 02 参考：https://tanstack.com/router/latest/docs/framework/react/guide/type-safety
10. ルーティングパスだけでなく、 Search Paramsなども型安全に扱える
11. アプリケーション全体で型安全に実装
12. 1. @tanstack/router-cliがFiled-Basedの ディレクトリ構成を解析して Route Treeを自動生成 2. createRouter APIでrouterの インスタンスを作成 3. インスタンスの型定義をGlobalに登録 アプリケーション全体で型安全に実装
13. バンドルサイズを軽減する Code Splitting 03 参考：https://tanstack.com/router/latest/docs/framework/react/guide/code-splitting
14. lazy.tsxとroute.tsxに 分割するだけで Code Splittingしてくれる 各RouteごとにCode Splitting
15. route.tsx Critical Route lazy.tsx Non-Critical/Lazy Route 初回ロード時に読み込まれるコード 遅延して読み込まれるコード
16. route.tsx Critical Route lazy.tsx Non-Critical/Lazy Route コンポーネントがLazy Routeの対象になる
17. Search Paramsによる状態管理 04 参考：https://tanstack.com/router/latest/docs/framework/react/guide/search-params
18. • 各Routeに必要なSearch Paramsを型定義 • Zodと組み合わせ可能 • JSON-Firstで複雑な構造が扱える • 型安全に扱える • Validation可能 TanStack Routerで扱うSearch Params
19. ユーザ目線 • Search Paramsの状態を保ったままリンクを共有可能 開発者目線 • JSON-Firstで複雑な構造が扱える上、Validationが可能なため、 1種の状態管理として採用することができる なぜSearch Paramsで状態管理する？
20. TanStack Router’s Summary • 高いDX（Developer Experience）に配慮 ◦ 型安全性 ◦ File-Based Routing ◦ Code Splitting • Search Paramsで型安全な状態管理 ◦ ユーザ体験・DX向上
21. ご清聴ありがとうございました！ https://twitter.com/ytaisei_ https://zenn.dev/taisei_13046