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
120
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
1.9k
Deep Dive Into React 〜React Fiber Architectureについて〜
ytaisei
1
190
React19で状態管理はどう変わるか
ytaisei
2
160
TanStackで効率的なルーティングとデータ取得を実現
ytaisei
9
1.8k
TanStack Routerで型安全かつ効率的なルーティングを実現
ytaisei
4
1.8k
BunがCommonJSをサポートする理由
ytaisei
2
360
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
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
cuebic9bic
2
170
AIでテストプロセス自動化に挑戦する
sakatakazunori
1
540
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.9k
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
400
ロールが細分化された組織でSREは何をするか?
tgidgd
1
430
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
280
AI エージェントと考え直すデータ基盤
na0
20
7.9k
CDK Toolkit Libraryにおけるテストの考え方
smt7174
1
550
本当にわかりやすいAIエージェント入門
segavvy
2
740
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
Figma Dev Mode MCP Serverを用いたUI開発
zoothezoo
0
230
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
5
3k
Featured
See All Featured
Navigating Team Friction
lara
187
15k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Gamification - CAS2011
davidbonilla
81
5.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Speed Design
sergeychernyshev
32
1k
Making Projects Easy
brettharned
116
6.3k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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が改善 ◦ 不要なサーバ負荷をかけないバランスは重要