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
110
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
2
1.4k
Reactのトランジションを覗いてみる
ytaisei
1
1.8k
Deep Dive Into React 〜React Fiber Architectureについて〜
ytaisei
1
170
React19で状態管理はどう変わるか
ytaisei
2
150
TanStackで効率的なルーティングとデータ取得を実現
ytaisei
9
1.8k
TanStack Routerで型安全かつ効率的なルーティングを実現
ytaisei
4
1.8k
BunがCommonJSをサポートする理由
ytaisei
2
340
TanStack Router SPA開発の選択肢になるか(+TanStack Query)
ytaisei
2
1.4k
【2023】SWR vs TanStack Query
ytaisei
1
2.1k
Other Decks in Technology
See All in Technology
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
17k
原則から考える保守しやすいComposable関数設計
moriatsushi
3
440
比起獨自升級 我更喜歡 DevOps 文化 <3
line_developers_tw
PRO
0
220
Agentic DevOps時代の生存戦略
kkamegawa
0
400
開発効率と信頼性を両立する Ubieのプラットフォームエンジニアリング
teru0x1
0
140
(非公式) AWS Summit Japan と 海浜幕張 の歩き方 2025年版
coosuke
PRO
1
270
Tensix Core アーキテクチャ解説
tenstorrent_japan
0
360
技術職じゃない私がVibe Codingで感じた、AGIが身近になる未来
blueb
0
130
「どこにある?」の解決。生成AI(RAG)で効率化するガバメントクラウド運用
toru_kubota
2
430
Nonaka Sensei
kawaguti
PRO
4
710
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
7.4k
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
2
390
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
KATA
mclloyd
29
14k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Building Adaptive Systems
keathley
43
2.6k
Done Done
chrislema
184
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Fireside Chat
paigeccino
37
3.5k
Git: the NoSQL Database
bkeepers
PRO
430
65k
It's Worth the Effort
3n
184
28k
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が改善 ◦ 不要なサーバ負荷をかけないバランスは重要