社内 Web システムのフロントエンド技術刷新: React Router v7 vs. TanStack Router

イベント詳細: https://findy.connpass.com/event/353088/

Transcript

1. 社内 Web システム フロントエンド技術刷新 : React Router v7 vs. TanStack Router
2. About Me 株式会社エウレカ ❏ Web Front-end Team ❏ Pairs Web 版 開発 趣味 ❏ ゲーム (原神, 鳴潮), 筋トレ むささび びゅん太郎 | Shuntaro Murakami @musasabibyun
3. 発表 内容 社内 アドベントカレンダーで TanStack Router について書きました．
4. 発表 内容 TanStack 制作者に記事を発見されました．
5. 発表 ゴール TanStack Router けっこういい感じ
6. TanStack Router を触った背景 Web システム フロントエンド ❏ Vue 2.x + TypeScript で構築 ➔ Vue2 系 すでに End of Life 作 り 直 し た い！ 社内 Web システム フロントエンド技術刷新 技術刷新前と後 (予定) 技術スタック
7. TanStack Router を触った背景 Web システム フロントエンド ❏ Vue 2.x + TypeScript で構築 ➔ Vue2 系 すでに End of Life ❏ CSR (Client-Side Rendering) 前提 ➔ フルスタックフレームワーク 導入メリットが少ない ➔ ルーティング 選定にフォーカス ❏ File-Based Routing を使いたい ➔ 開発体験 向上・運用コスト削減 技術刷新前と後 (予定) 技術スタック 社内 Web システム フロントエンド技術刷新 PoC 段階です
8. React Router v7 ❏ Remix と統合 (2024 年 11 月)
9. React Router v7 ディレクトリ構造例 ❏ Remix と統合 (2024 年 11 月) ❏ File-Based Routing をサポート • routes ディレクトリ内にファイルが並列する → Dot Delimiters と呼 れる .tsx
10. React Router v7 ファイル名が長くなる 嫌だな コンポーネントディレクトリどこに置く？ テストファイル作りたいんだけど ... React Router まぢむりﾋﾟｴﾝ。。。 (´；ω；`) ディレクトリ構造例 ❏ Remix と統合 (2024 年 11 月) ❏ File-Based Routing をサポート • routes ディレクトリ内にファイルが並列する → Dot Delimiters と呼 れる
11. React Router v7 ❏ Remix と統合 (2024 年 11 月) ❏ File-Based Routing をサポート • routes ディレクトリ内にファイルが並列する → Dot Delimiters と呼 れる • remix-flat-routes を使用してネスト構造に ディレクトリ構造例 ライブラリを導入した ディレクトリ構造例 • 公式 ライブラリで ない で サポートが不安 • + や _ を使った特殊記法
12. TanStack Router ❏ 求めていた File-Based Routing ❏ 型安全な Routing が容易 ❏ 開発体験が最高
13. TanStack Router ❏ 求めていた File-Based Routing ❏ 型安全な Routing が容易 ❏ 開発体験が最高 React Router v7 (ライブラリ導入後) TanStack Router
14. TanStack Router ❏ 求めていた File-Based Routing ❏ 型安全な Routing が容易 ❏ 開発体験が最高 React Router TanStack Router useSearchParams() • URLSearchParamas Object を返す • Web 標準に準拠 UseSearch(), Link • Search Paramas を独自実装 • 常に string 型 • Flat な構造 • URL pathname を考慮する必要 • 多様な型 を扱いたい • ネストされた配列やオブジェクトなど 複雑なデータ型 を操作し たい • URL pathname に触れたくない Search Params ⇔ JSON 変換 Search Paramsを状態管理として 効率的に使用できる
15. TanStack Router ❏ 求めていた File-Based Routing ❏ 型安全な Routing が容易 ❏ 開発体験が最高 新しいルートつくるとき デモ path 自動補完
16. まとめ ❏ React Router v7 File-Based Routing に満足できなかった ❏ TanStack Router を試してみたら予想以上に好感触だった • 求めていた File-Based Routing • 型安全な Routing が容易 • 開発体験が最高
17. まとめ TanStack Router けっこういい感じ ですよね？
18. ご清聴ありがとうございました