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
SRE新規立ち上げ! Hubbleインフラのこれまでと展望
katsuya0515
0
160
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
250
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
1.1k
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
3
1.1k
恐怖!テストコードなき夜
tsukuboshi
2
110
2025-07-31: GitHub Copilot Agent mode at Vibe Coding Cafe (15min)
chomado
2
370
【Λ(らむだ)】最近のアプデ情報 / RPALT20250729
lambda
0
230
専門分化が進む分業下でもユーザーが本当に欲しかったものを追求するプロダクトマネジメント/Focus on real user needs despite deep specialization and division of labor
moriyuya
0
970
2時間で300+テーブルをデータ基盤に連携するためのAI活用 / FukuokaDataEngineer
sansan_randd
0
130
バクラクによるコーポレート業務の自動運転 #BetAIDay
layerx
PRO
1
830
ロールが細分化された組織でSREと協働するインフラエンジニアは何をするか? / SRE Lounge #18
kossykinto
0
110
마라톤 끝의 단거리 스퍼트: 2025년의 AI
inureyes
PRO
1
670
Featured
See All Featured
It's Worth the Effort
3n
185
28k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
How STYLIGHT went responsive
nonsquared
100
5.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Into the Great Unknown - MozCon
thekraken
40
2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
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が改善 ◦ 不要なサーバ負荷をかけないバランスは重要