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
130
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.5k
Reactのトランジションを覗いてみる
ytaisei
1
2.1k
Deep Dive Into React 〜React Fiber Architectureについて〜
ytaisei
1
210
React19で状態管理はどう変わるか
ytaisei
2
160
TanStackで効率的なルーティングとデータ取得を実現
ytaisei
9
1.9k
TanStack Routerで型安全かつ効率的なルーティングを実現
ytaisei
4
1.8k
BunがCommonJSをサポートする理由
ytaisei
2
370
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
Amazon Bedrock AgentCoreのフロントエンドを探す旅 (Next.js編)
kmiya84377
1
100
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
fujie
0
200
AI によるドキュメント処理を加速するためのOCR 結果の永続化と再利用戦略
tomoaki25
0
390
Jamf Connect ZTNAとMDMで実現! 金融ベンチャーにおける「デバイストラスト」実例と軌跡 / Kyash Device Trust
rela1470
0
110
20250807_Kiroと私の反省会
riz3f7
0
130
Google Agentspaceを実際に導入した効果と今後の展望
mixi_engineers
PRO
2
330
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
knt44kw
0
150
【CEDEC2025】現場を理解して実現!ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
cygames
PRO
0
720
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
sansan_randd
0
210
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
250
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
2
770
【CEDEC2025】『ウマ娘 プリティーダービー』における映像制作のさらなる高品質化へ!~ 豊富な素材出力と制作フローの改善を実現するツールについて~
cygames
PRO
0
230
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Bash Introduction
62gerente
614
210k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Code Reviewing Like a Champion
maltzj
524
40k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
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が改善 ◦ 不要なサーバ負荷をかけないバランスは重要