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
TanStack Routerを新規プロダクトで1年間運用してみた結果
Search
ytaisei
May 13, 2025
Technology
1
150
TanStack Routerを 新規プロダクトで1年間運用してみた結果
TanStack Router徹底活用!3社の事例から見る最新のルーティング事情で使用したスライドです
https://findy.connpass.com/event/353088/
ytaisei
May 13, 2025
Tweet
Share
More Decks by ytaisei
See All by ytaisei
Reactを段階的に覗いてみる
ytaisei
3
1.7k
Reactのトランジションを覗いてみる
ytaisei
1
2.2k
Deep Dive Into React 〜React Fiber Architectureについて〜
ytaisei
2
290
React19で状態管理はどう変わるか
ytaisei
2
170
TanStackで効率的なルーティングとデータ取得を実現
ytaisei
9
2.1k
TanStack Routerで型安全かつ効率的なルーティングを実現
ytaisei
4
2.2k
BunがCommonJSをサポートする理由
ytaisei
2
390
TanStack Router SPA開発の選択肢になるか(+TanStack Query)
ytaisei
2
1.5k
【2023】SWR vs TanStack Query
ytaisei
1
2.1k
Other Decks in Technology
See All in Technology
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3.9k
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
0
150
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
150
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
160
スタートアップにおけるこれからの「データ整備」
shomaekawa
1
250
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
200
Where will it converge?
ibknadedeji
0
190
VCC 2025 Write-up
bata_24
0
180
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
500
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
220
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
2
130
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
150
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
27
2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
GitHub's CSS Performance
jonrohan
1032
460k
A Tale of Four Properties
chriscoyier
160
23k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Transcript
TanStack Routerを 新規プロダクトで1年間 運用してみた結果
Outline 目次 1. 自己紹介 2. 会社 / プロダクト紹介 3. TanStack
Routerに期待したポイント 4. 早期にFile-based Routing を採用してみて 5. Route Prefetchingによる パフォーマンス改善 6. まとめ
~Webフロントエンドエンジニア 安井大晟〜 自己紹介
• 株式会社サイバーエージェント2024年新卒 ◦ 株式会社AI ShiftにWebフロントとして配属 • AI WorkerというAIエージェント構築プラットフォームを開発 ◦ BtoB向けのSaaSアプリケーション
• WebフロントからサーバサイドTS、 AIエージェントのロジックまで幅広く開発 ◦ 直近はMastraというエージェントフレームワークを書いています! 自己紹介
会社 / プロダクト紹介 AI ShiftとAI Workerについて
AI Shiftについて
AI Workerについて 企業専用の AIエージェント 構築プラットフォーム • 企業ごとの業務ニーズやプロセスに合わせた AIエージェントの構築 • 直感的なインターフェースで構築可能
• ワークフロー型と自律型 AIエージェント を構築することが可能
AI Workerについて あらゆるAIエージェントを 1つのプラットフォームで管理 • 営業支援、マーケティング分析、顧客対応など 様々なAIエージェントを 1つのプラットフォームで 効率的に管理・運用
TanStack Routerに期待したポイント 概要と期待したポイント
TanStack Routerについて • 100% inferred TypeScript support ◦ なんといっても圧倒的な型安全性 •
File-based Route Generation ◦ File-BasedなルーティングでCode-BasedなRouteの管理が不要 • Typesafe JSON-first Search Params state management APIs ◦ Search Paramsを型安全に管理 • Automatic route prefetching ◦ routeごとのprefetchによるパフォーマンス改善
TanStack Routerの何に期待をしたか 前提 • AI WorkerはBtoBのSaaSのため、SEOや初期描画への意識は低い • 一方、アプリ起動後のユーザ体験はエンドユーザのUXに直結する • また、生成AIの事業変化に対応するための開発者体験は必須
期待したポイント • Type-Safeな開発者体験 • File-based Routingによる効率的なRoute管理 • Route prefetchingによるパフォーマンス改善
早期にFile-based Routingを採用 変更耐性を考慮した設計
File-based Routingについて • ディレクトリ名、ファイル名でパスを設計 • ファイルを作成すると ボイラープレートが自動生成される
2024年1月当時 • 早期にFile-based Routingの機能を採用 • 当時unstableだったcode splittingの機能も活用 • 毎週変わる破壊的変更を追い続け、 約二ヶ月間ほどバージョン更新の修正PRを出す日々
TanStack Router V1 2023年12月 AI Worker開発JOIN 2024年1月 code splittingがstable 2024年3月ごろ 現在
2024年1月当時 • 早期にFile-based Routingの機能を採用 • 当時unstableだったcode splittingの機能も活用 • 毎週変わる破壊的変更を追い続け、 約二ヶ月間ほどバージョン更新の修正PRを出す
それでも採用する メリットはあったか?
早期に採用したFile-based Routing 個人的にはメリットがあったと感じる • ルーティングはフロントエンドのディレクトリ設計の前提になる • Code Basedに管理をするコストと 一時的な変更追従のコストとのトレードオフ
早期に採用したFile-based Routing 個人的にはメリットがあったと感じる • ルーティングはフロントエンドのディレクトリ設計の大きな前提になる • Code Basedに管理をするコストと 一時的な変更追従のコストとのトレードオフ 2025年現在は破壊的変更もなく、
変更追従コストも低いためその恩恵を受けられている
変更耐性を考慮した設計 とはいえ、採用当初は破壊的変更による追従コストは大きかった そのため、なるべくルーティングに依存する対象を減らしたい TanStack RouterのAPIを使用するの はroutesの中に限定 featuresで使用する場合は引数で注入
変更耐性を考慮した設計 とはいえ、採用当初は破壊的変更による追従コストは大きかった そのため、なるべくルーティングに依存する対象を減らしたい ライブラリの変更による 影響範囲をroutesの中で 閉じる意識
脱線:個人的にTanStack RouterのFile-Basedが好きなポイント 暗黙的なFile-based Routingではなく、 File-based Route Generationな点 • @tanstack/router-cli(or 対象のbundler)によって
file-basedなディレクトリから TanStack RouterのRouteを自動生成 • 自動生成された型を使用できる • File-based Routingの挙動は 自動生成されたファイルを見ればわかる
Route Prefetchingによるパフォーマンス改善 サーバー負荷とのトレードオフ
再掲:TanStack Routerの何に期待をしたか 前提 • AI WorkerはBtoBのSaaSのため、SEOや初期描画への意識は低い • 一方、アプリ起動後のユーザ体験はエンドユーザのUXに直結する • また、生成AIの事業変化に対応するための開発者体験は必須
期待したポイント • Type-Safeな開発者体験 • File-based Route Generationによる効率的なRoute管理 • Route prefetchingによるパフォーマンス改善
再掲:TanStack Routerの何に期待をしたか 前提 • AI WorkerはBtoBのSaaSのため、SEOや初期描画への意識は低い • 一方、アプリ起動後のユーザ体験はエンドユーザのUXに直結する • また、生成AIの事業変化に対応するための開発者体験は必須
ユーザが画面遷移する際のLoadingを限りなく0にしたい
Route prefetching
Route prefetching 「ユーザが対象のRouteに遷移する前に必要なデータを用意しておく」 3種類のPreloading Strategies • Intent ◦ Linkがhoverされたタイミング •
Viewport ◦ Intersection Observerによって Linkがviewport内にあると判定された時 • Render ◦ LinkがDOMにレンダリングされた時
Route prefetching 目標:ユーザが画面遷移する際のLoadingを限りなく0にしたい • 積極的なPreload戦略で、 ユーザがRouteに到達する前にデータを用意する • 全てのLinkがDOMに描画されたら対象のデータをPreloadする
Route prefetching 目標:ユーザが画面遷移する際のLoadingを限りなく0にしたい • 積極的なPreload戦略で、 ユーザがRouteに到達する前にデータを用意する • 全てのLinkがDOMに描画されたら対象のデータをPreloadする この戦略は一概に正しいのか?
過度なPreloadによるサーバ負荷 e.g. 無限スクロールするスレッドの一覧は Preloadの効率が悪い ≒ 事前取得しても使われない可能性が高い
過度なPreloadによるサーバ負荷 ユーザにとってクリティカルなRouteを 選別してPreloadすることで 無駄なサーバ負荷を抑えつつ UXを向上させる
過度なPreloadによるサーバ負荷 • そもそもSPAにおけるPreloadはキャッシュ効率がよくない ◦ in-memory cacheのケースが多いためリロードをすると破棄される • 不要なPreloadはサーバの負荷を増加させてしまう
過度なPreloadによるサーバ負荷 • そもそもSPAにおけるPreloadはキャッシュ効率がよくない ◦ in-memory cacheのケースが多いためリロードをすると破棄される • 不要なPreloadはサーバの負荷を増加させてしまう 適切な対象に対して 適切なPreload戦略を
考える必要がある
まとめ
まとめ • TanStack Routerの導入で開発者がビジネスに集中できる体験が得られた • 早期のFile-based Routing導入によって 不要なCode-basedなRoute管理から解放され開発生産性が向上 • Route
prefetchingによってアプリ起動後のUXが改善 ◦ 不要なサーバ負荷をかけないバランスは重要