🔀
TanStack Router徹底活用！3社の事例から見る最新のルーティング事情 イベントレポート
はじめに ― “ルーティング再考” の昼休み
React Router v7、Next.js、あるいは Remix——フロントエンドのルーティングは選択肢が増え、特徴も二極化しつつあります。 そんな中、TanStack Router は「型安全」「ファイルベース」「プリフェッチ内蔵」という武器で存在感を高めてきました。 2025 年 5 月 13 日開催のオンラインイベント「TanStack Router徹底活用！3社の事例から見る最新のルーティング事情」には、導入を検討するエンジニアが多数参加。実運用中の 3 社が 採用の舞台裏と 1 年間の手触り を語り、質疑応答では「開発スピードと運用コストのバランス」が熱く議論されました。 以下ではセッションごとにポイントを整理し、最後に会全体を俯瞰して得られた示唆をまとめます。
セッション 1
社内 Web システム刷新記 ― React Router v7 からの“のりかえ”
登壇：むささび びゅんたろう（エウレカ）
背景
社内システムは Vue 2 + TypeScript。EOL を機に React への全面移行を決断。
CSR 前提の業務ツールのため Next.js などフルスタック枠は採用せず、「ルーティング体験」だけにフォーカス して比較へ。
React Router v7 で感じた壁
ドット・デミターズ 形式のファイル名が長くなりがち。
コンポーネント配置の自由度が低く、ディレクトリが肥大化。
フラットルーツ（@remix-run/flat-routes）併用で改善出来るものの「公式でない」不安。
TanStack Router 採用決め手
ディレクトリ階層をそのまま URL 化
サーチパラメータが JSON で型安全。
VS Code 補完が強力（リンク先のパス自動補完・新規ファイル生成時に型雛形を自動作成）。
「ルートファイルを保存した瞬間に型まで生成される。初見で魔法を見た気分でした」――登壇者コメント
セッション 2
TanStack Start 技術選定の裏側
登壇：池内 孝啓（Awarefy）
プロジェクト概要
AI メンタルケアアプリ Awarefy の Web 版をフルスクラッチ。
チームはモバイル・バックエンド兼務の“プロダクトエンジニア”が中心。学習コストは最小化必須。
TanStack Start とは？
TanStack Router を核に Server Functions / API Routes を組み込み、SSR や Edge のデプロイ先（Vercel, Netlify, Bun）を選ばない“薄い”メタフレームワーク。
まだ β だが、React 公式ドキュメントでも Next.js と並び紹介されるなどエコシステムが急拡大。
Server Functions の魅力
const putCookie = createServerFn({
input: z.object({ name: z.string(), value: z.string() })
}, ({ name, value }) => {
cookies().set(name, value)
});クライアント側は
await putCookie({ name, value })と呼ぶだけ。入出力が自動型生成され、tRPC 並みの DX を“素の React”で実現。
選定理由まとめ
要件 | TanStack Start が担保した点 |
|---|---|
CSR が主体、必要箇所だけ SSR | Server Functions で柔軟に切替 |
小規模チームで高速開発 | ファイルベース＋型生成で学習コスト低減 |
将来の AI 連携 | API Routes を外部連携口に活用 |
「AI コーディング時代こそ“情報量が多いフレームワーク”が有利。ただし 大は小を兼ねない。用途に合うミニマルさを選んだ」
セッション 3
新規 SaaS を 1 年間運用して見えた光と影
登壇：ytaisei（AI Shift）
プロダクト
法人向け AI エージェント構築プラットフォーム AI Worker。
UX 最重視：アプリ起動後の画面遷移で「ローディングを感じさせない」ことが KPI。
採用当時（2024 年 1 月）の判断軸
タイプセーフ DX
ファイルベースルーティングによるルート管理簡素化
Route Prefetch による体感速度向上
一年運用して分かったこと
項目 | 期待通りだった点 | 課題 |
|---|---|---|
ファイルベース | 破壊的変更を追うコストより、初期からコードベースをシンプルに保てた恩恵が大きい | 大規模化に備え ルーツ / フィーチャ でディレクトリを分離し、依存範囲を狭める工夫が必要 |
ルート Prefetch | 主要リンクを
で積極的に先読み => 遷移ローディングほぼ 0 | 無限スクロールなど “使われないルート” まで先読むと サーバ負荷が跳ね上がる |
DX 全般 | VS Code 補完・型生成で学習コスト低減 | まだエッジケースのバグ報告が少なく、自己解決力が求められる |
Q&A ハイライト
Q1 ：早期採用で破壊的変更が続いたとき、どう乗り切った？
ytaisei「ルーティング依存をルーツ配下に閉じ込めるディレクトリ設計で被害を最小化。週一の追従 PR は“投資”と割り切った」
Q2 ：TanStack Start と Next.js、決め手は？
池内「機能過多より“薄さ”を選択。AI サイドのロジックを Server Functions に閉じ込め、エッジでもローカルでも同じ DX を得た」
Q3 ：React Router v7 + Flat Routes では駄目？
むささび「サードパーティ製への依存は将来のアップグレード不安。TanStack Router は“ネイティブで欲しい挙動”が初めから揃っていた」
終わってみて ― “ルーティングは体験設計”
各社の話を通して浮かび上がったキーワードは 「バランス」 でした。
開発速度 vs. 将来の保守
ファイルベースでコードは減るが、破壊的変更追従の負荷は時期によって変動する。
プリフェッチによる UX 向上 vs. サーバー負荷
機能全開放より「ビジネス的にクリティカルなルートだけを積極先読み」。
フレームワークの巨大機能セット vs. ミニマルさ
Next.js の万能感を選ぶか、TanStack Start の必要十分を選ぶかは組織規模と役割分担で決まる。
TanStack Router は “ルーティング単体ライブラリ” の枠を超え、型安全・先読み・サーバ機能連携 まで含むエコシステムへ進化しています。 ただし導入効果を最大化するには、ディレクトリ設計で依存を閉じる、プリフェッチ対象を絞る など “自分たちのワークフロー” に合わせた運用設計が不可欠です。
「技術を選ぶ」のではなく、「技術が活きる開発・運用の回し方を選ぶ」。
今回の 3 事例は、そんな当たり前に立ち返るヒントを与えてくれる濃密な55分でした。
Yardでは、AI・テック領域に特化したスポットコンサル サービスを提供しています。
興味がある方は、初回の無料スポットコンサルをお申し込みください。
また、資料請求やお問い合わせもお待ちしております。テック領域の知見を獲得し、事業成長を一緒に実現していきましょう。
Read next
Loading recommendations...