TanStack エコシステム フィールドガイド

TanStack は、データフェッチ、ルーティング、テーブル、フォーム、仮想化、クライアント状態管理を担うヘッドレスかつ型安全なコンポーザブルライブラリのコレクションです。このエコシステムは React Query（現在は TanStack Query に改名） から発展しました。データおよび UI ライブラリは React、Vue、Solid、Svelte、Angular 向けのアダプターを提供しており、ルーターとフルスタックフレームワークは React と Solid を対象としています。TanStack 自体はフレームワークではなく、各コンポーネントはヘッドレスなコンポーザブルユーティリティとして位置づけられています。フルスタックフレームワークに該当するのは TanStack Start のみです。

すでに TanStack Query を使用しており、Router、Start、Table、Form、Store、DB、AI といった名前を目にする機会が増えてきた場合、実際に問題となるのは「それぞれが何をするのか」「どの程度成熟しているのか」「React のデフォルトスタック（Next.js、React Router、Redux/Zustand、React Hook Form、Apollo、AG Grid）の代わりにいつ採用すべきか」を把握することです。本ガイドはエコシステムをライブラリごとにマッピングし、それぞれの最小限のコードシグネチャを示し、バージョン番号で成熟度を示し、各ピースがどのように連携するかを解説します。これはチュートリアルではなく、マップです。セットアップ手順は、随所にリンクされている公式ドキュメントをご参照ください。

TanStack とは何か、そして「ヘッドレス」が重要な理由

TanStack は、ひとつの設計原則を共有する独立したライブラリの集合体です。その原則とは「ライブラリがロジックを担い、レンダリングはあなたが担う」というものです。すべての TanStack ライブラリは状態とマークアップを分離しています。ライブラリがステートマシンを実行し、コンポーネントがインターフェースの見た目を決定します。「ヘッドレス」とは実践的にはこういう意味です。オーバーライドすべき TanStack の CSS も、継承すべき TanStack のコンポーネントも、UI がどのように見えるべきかというベンダーの意見も存在しません。TanStack Query はこのブランドの起点です。エコシステムが成長した際に React Query から改名されました。ただし TanStack Table はリブランド以前から存在していたため、Query は「普及の起点」であり、文字通り最初のライブラリではありません。

共通の哲学は「フレームワークではなく、自分のコードを所有せよ」とよく表現されます。そこから三つの特性が導かれます。

• ヘッドレス: UI を持たないロジック。ライブラリの状態を、すでに使用しているマークアップ・デザインシステム・アクセシビリティレイヤーに接続します。
• フレームワーク非依存のコア: データおよび UI ライブラリ — Query、Table、Form、Virtual、Store — は React、Vue、Solid、Svelte、Angular 向けの公式アダプターを提供しています。ルーティングは例外で、TanStack Router と TanStack Start は React と Solid のみを対象としています。
• モノリスよりコンポーザビリティ: 各ライブラリは単独でも、組み合わせても機能します。Router を採用せずに Query だけを使うことも、Start を採用せずに Table だけを使うことも可能です。

ライブラリごとのマップ

以下では各ライブラリについて、何をするのか、何を置き換えるのか、2026年6月時点の成熟度、最小限のコードシグネチャを解説します。シグネチャは API のサーフェスを示すものであり、セットアップチュートリアルではありません。インストールと設定はリンク先の公式ドキュメントをご参照ください。

TanStack Query — サーバー状態管理

TanStack Query は非同期サーバー状態を管理します。フェッチ、キャッシュ、バックグラウンドでの再フェッチ、重複排除、楽観的更新を担います。多くの React アプリが最初に採用していた手動の fetch + useEffect パターンを置き換えます。安定版です。

// @tanstack/react-query v5.101.0
const { data: users, isLoading, error } = useQuery({
  queryKey: ['users'],
  queryFn: () => fetch('/api/users').then((res) => res.json()),
});

Query はエコシステムへの最も広く採用されているエントリーポイントであり、既存の React コードベースに対して最も高い ROI をもたらす変更です。ルーティングや UI レイヤーに手を加えることなく、手書きのローディング状態やエラー状態を排除できます。

TanStack Router — 型安全なルーティング

TanStack Router は React と Solid 向けの完全型安全なクライアントサイドルーターです。ルートパス、URL パラメーター、検索パラメーター、ルートコンテキスト、ローダーデータはすべてエンドツーエンドで型付けされており、誤ったパラメーター形状を持つリンクはランタイムではなくコンパイラが検出します。SPA における React Router の代替として機能し、安定版です。

// @tanstack/react-router v1.170.16
const Route = createFileRoute('/products')({
  validateSearch: (search) => ({
    category: (search.category as string) ?? 'all',
    page: Number(search.page ?? 1),
  }),
});

const { category, page } = Route.useSearch();

Router は URL 検索パラメーターを型付きかつバリデーション済みの状態として扱うため、フィルター・ソート順・ページネーションを URL 経由で共有したり、リフレッシュ時に復元したりすることが可能になります。これは特定の再現性のあるバグクラスを解消します。SPA ダッシュボードのセッションリプレイでは、状態がコンポーネントのメモリに保持されていた場合、リフレッシュやブラウザバック時にフィルター・ソート・ページネーションの状態が失われるユーザーが頻繁に観察されます。型付き検索パラメーターはまさにこの障害モードを排除します。

TanStack Table — ヘッドレスデータグリッド

TanStack Table はデータグリッドのロジック — カラム定義、ソート、フィルタリング、ページネーション、行選択、グルーピング、カラム表示切り替え — を担いながら、UI のすべてのピクセルをあなたに委ねます。React エコシステムにおけるヘッドレスパターンを確立したライブラリであり、マークアップを完全に制御したいチームにとって AG Grid や MUI DataGrid といった意見の強いグリッドライブラリの代替となります。安定版であり、現在 V9 ラインが開発中ですが、まだ公開 latest にはなっていません。

// @tanstack/react-table v8.21.3
const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
});

Table インスタンスが状態を管理し、マークアップはその状態が表すものをレンダリングします。サーバーサイドのページネーションとフィルタリングに Query と組み合わせることで、すべてをクライアントに読み込まずに大規模なデータセットを扱えます。

TanStack Form — 型付きフォーム

TanStack Form はフォームの状態とバリデーションを管理します。フィールドレベルおよびフォームレベルのエラー、同期・非同期バリデーション、送信状態を扱いますが、自身では何もレンダリングしません。React Hook Form のヘッドレスな後継であり、安定版（v1）です。

// @tanstack/react-form v1.33.0
const form = useForm({
  defaultValues: { email: '', password: '' },
  onSubmit: async ({ value }) => { await loginUser(value); },
});

フィールド値、バリデーションスキーマ、送信ペイロードはエンドツーエンドで型付けされており、非同期バリデーション（ユーザー名の重複チェックなど）はデバウンスとキャンセルをライブラリが処理するファーストクラスの機能として提供されています。

TanStack Virtual — リスト・グリッドの仮想化

TanStack Virtual は大規模なスクロール可能なリストやグリッドにおいて、現在ビューポートに表示されている行または列のみをレンダリングし、データセットが膨大であっても DOM を小さく保ちます。測定値とオフセットを提供し、マークアップのレンダリングはあなたが担います。手書きのウィンドウイングや react-window・react-virtualized といったライブラリの代替となります。安定版です。

// @tanstack/react-virtual v3.14.3
const virtualizer = useVirtualizer({
  count: items.length,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 48,
});

const rows = virtualizer.getVirtualItems();

useVirtualizer はビュー内の仮想アイテムと合計サイズを返し、各アイテムはオフセットに基づいて絶対位置に配置します。Table と組み合わせることで大規模なデータグリッドとの相性が抜群です。Table が行モデルを管理し、Virtual は表示中の行のみを DOM に保持するため、5,000行のリストもフルスピードでスクロールできます。

TanStack Store — クライアント状態管理

TanStack Store は細粒度のリアクティブストアであり、他の複数の TanStack ライブラリの内部を支え、スタンドアロンパッケージとしても公開されています。クライアント（非サーバー）状態の管理において Zustand や Redux の代替となります。スタンドアロンパッケージとしてはアルファ版（v0.11.0）であるため、「Zustand/Redux を置き換える」という表現はこの成熟度を念頭に置いて受け取ってください。

// @tanstack/store v0.11.0 + @tanstack/react-store
import { Store } from '@tanstack/store';
import { useStore } from '@tanstack/react-store';

const countStore = new Store(0);
// コンポーネント内で:
const count = useStore(countStore);

役割分担の考え方が有用なメンタルモデルです。Query がサーバー状態を担い、Store がクライアント状態を担います。ほとんどのアプリでは、Query に少量の Store（または既存のクライアント状態ツール）を組み合わせることで、状態管理の全領域をカバーできます。

TanStack Start — フルスタックフレームワーク

TanStack Start は TanStack Router を基盤に構築されたフルスタック React フレームワークです。ファイルベースのルーティング、サーバー関数、ストリーミング SSR、エンドツーエンドの TypeScript を提供しながら、基盤となる仕組みを可視化した状態に保ちます。Next.js や Remix に対抗するポジションです。Start はリリース候補（RC）段階（現在のリリースライン 1.168.x）であり、まだ安定版として宣言されておらず、React Server Components のサポートは実験的に利用可能ですが、本番環境のデフォルトではありません。

// @tanstack/react-start v1.168.26
import { createServerFn } from '@tanstack/react-start';

const getUser = createServerFn({ method: 'GET' })
  .validator((userId: string) => userId)
  .handler(async ({ data: userId }) => db.users.findById(userId));

サーバー関数は型付きかつコロケーションされた関数であり、サーバー上で実行されますが、クライアントコンポーネントから通常の非同期関数と同様に呼び出せます。型情報はデータソースからコンポーネントまで手動アノテーションなしで流れ、単純なフェッチのために別途 API レイヤーを維持する必要はありません。インポートパスは @tanstack/react-start であることに注意してください。@tanstack/start を示している古いガイドは時代遅れです。

TanStack DB — リアクティブクライアントストア

TanStack DB はコレクション、ライブクエリ、楽観的ミューテーションを備えたリアクティブなクライアントファーストストアです。コレクションを定義し、それに対してクエリを記述すると、クエリを監視しているコンポーネントは基礎データが変更されるたびに再レンダリングされます。変更はサーバー同期、ローカルミューテーション、楽観的更新のいずれから生じても同様です。自分のバックエンドや API の前段に配置するものであり、Firebase や Supabase のような BaaS（Backend as a Service）の代替ではありません。ベータ版（v0.6.9）です。

DB はフェッチとキャッシュを超えたギャップに対応します。リアルタイム更新、複雑なクライアントサイドフィルタリング、マルチユーザー状態を持つデータ集約型アプリのためのものです。「ヘッドレス Firebase」という比較はリアクティブクエリモデルのアナロジーであり、ホスト型インフラの代替を主張するものではありません。

TanStack AI — プロバイダー非依存の AI プリミティブ

TanStack AI は AI 機能のためのヘッドレスプリミティブを提供します。ストリーミングレスポンスの処理、会話状態の管理、複数のモデルプロバイダーにまたがる統一インターフェースを、特定の SDK やプロバイダーに縛られることなく実現します。TanStack ブログで発表されているとおり、ベータ版であり、アルファや実験的な段階ではありません。

ストリーミングレスポンス（トークンが逐次的に到着する）はネイティブに処理されるため、AI チャットや生成インターフェースがレスポンシブに感じられます。価値はアーキテクチャ的なものです。プロバイダー非依存のレイヤーにより、UI の状態を書き直すことなくモデルプロバイダーを切り替えることができます。

成熟度テーブル

エコシステム全体で成熟度は大きく異なり、エコシステムの概要説明において最も多い誤りは実験的なライブラリを成熟したものとして提示することです。本ガイドで取り上げた9つのライブラリのうち、2026年6月時点で安定版は Query・Router・Table・Form・Virtual の5つです。Start は React Server Components が実験的に利用可能なリリース候補段階、DB と AI はベータ版、Store はアルファ版です。以下のテーブルに各ライブラリの公開バージョンとステータスを記載します。

現在のリリースステータスはリンク先のドキュメントでご確認ください。

ピースの組み合わせ方

各ライブラリはコンポーズできるよう設計されており、中心的な統合は Router のローダーが Query データをプリフェッチすることで、コンポーネントがウォームキャッシュに対してレンダリングされるというものです。ルートローダーはコンポーネントのマウント前に queryClient.ensureQueryData を呼び出せます。レンダリング時点でデータはすでにキャッシュされています。Start がこのパイプラインに SSR を加えると、データはサーバーでプリロードされ脱水（dehydrate）されて、最初のリクエストで完全にレンダリングされた HTML として届きます。

// @tanstack/react-router v1.170.16 + @tanstack/react-query v5.101.0
const Route = createFileRoute('/users/$userId')({
  loader: ({ params }) =>
    queryClient.ensureQueryData({
      queryKey: ['user', params.userId],
      queryFn: () => fetchUser(params.userId),
    }),
  component: UserPage,
});

特筆すべき具体的な連携が3つあります。

1. Router → Query: ルートローダーが Query データをプリフェッチし、最初のレンダリング時のローディングフラッシュを排除します。
2. Start → Router: Start は Router の上に構築されているため、型付きルーティングとローダーモデルがそのままフルスタックフレームワークに引き継がれ、SSR と脱水が追加されます。
3. Table → Query: Table はサーバーサイドのページネーションのために Query からページネーション済みのフィルタリングされたデータを受け取るため、すべてをクライアントサイドに取り込まずに大規模なデータセットをグリッドで扱えます。

TanStack vs 既存ツールの選択

公開ページで検索エンジンにインデックスされ共有される必要があるページには TanStack Start を、SEO が不要でクライアントサイドのパフォーマンスが優先される認証済みダッシュボードには TanStack Router 単体を選択してください。このレンダリング戦略の決定はライブラリ選択よりも先に行うべきアーキテクチャ上の最初の選択であり、技術的な好みではなくプロダクトの意思決定です。

• 公開サイト（マーケティングページ、ブログ、コンテンツプロダクト）は SSR が必要です。クローラーは JavaScript を確実に実行しません。LCP・CLS・INP などのコアウェブバイタルは Google のランキングシグナルです。Open Graph メタデータはサーバーレスポンスから読み取られます。Start は最初のリクエストで完全にレンダリングされた HTML を提供します。
• 認証済みアプリ（ダッシュボード、社内ツール、カスタマーポータル）はそもそもクロールできず、セッションベースでステートフルであり、インタラクティブになるまでの時間を優先します。Start の SSR 機構なしに Router 単体で構築した SPA の方が、多くの場合より軽量です。

ライブラリ対既存ツールの比較については、エコシステムは React のデフォルトに明確に対応しています。

TanStack を使うべきでない場面

TanStack のヘッドレスかつ型安全なモデルは強力なデフォルト選択ですが、3つの状況では実際に足かせとなります。正直なマップはそれらを明記します。チームがすぐに使えるスタイル済みコンポーネントを必要とする場合、採用候補者が TanStack ではなく Redux や React Router に精通している場合、または現時点で本番環境で安定した React Server Components が必要な場合 — Start の RSC サポートはまだ実験的であるため、これらのケースでは Next.js と React Hook Form の方が現実的な選択肢です。

具体的には以下のとおりです。

• スタイル済みコンポーネントのニーズ: ヘッドレスとはあなたが UI を構築することを意味します。インストール直後に完成した見た目のグリッドやフォームが欲しい場合、AG Grid・MUI・コンポーネントキットの方が素早く実現できます。
• チームの習熟度と採用: Redux・React Router・Next.js を知っている開発者の方が多くいます。学習コストと採用候補者プールの狭さは、チームのスケーリングにおける実際のコストです。
• 本番環境での RSC 対応: Next.js は React Server Components において長年の本番環境での実績があります。Start の RSC サポートは 2026年6月時点で実験的です。
• 初期段階のライブラリ: Store（アルファ）・DB（ベータ）・AI（ベータ）はまだ本番環境のデフォルトではありません。その成熟度を念頭に置いて採用を検討し、リンク先のドキュメントでバージョンとステータスを確認してください。

本ガイドで取り上げたライブラリ以外にも、TanStack は Virtual・Pacer・Ranger・DevTools を含むユーティリティ層を維持しており、同じヘッドレスかつ型安全なパターンをより小さなスコープで適用しています。

どこから始めるか

まだ Query を使っていなければ、まず Query から始めてください。React コードベースに対して最も高い ROI をもたらす変更であり、他の何も採用する必要はありません。Router は既存アプリの移行ではなく、グリーンフィールドの SPA に採用してください。Start は SSR が必要な新しい公開サイトの選択肢として検討しつつ、RC ステータスを注視してください。初期段階のライブラリ — Store・DB・AI — については、エコシステムの話題性ではなく、この記事の成熟度テーブルとリンク先の公式ドキュメントを参考に、そのライブラリが想定する役割に対して準備ができているかどうかを判断してください。

よくある質問

TanStack Query と TanStack DB の違いは何ですか？

TanStack Query はフェッチ、キャッシュ、バックグラウンドでの再フェッチ、重複排除を通じて非同期サーバー状態を管理し、サーバーをクライアントがミラーリングする信頼の源泉として扱います。TanStack DB はコレクション、ライブクエリ、楽観的ミューテーションを備えたリアクティブなクライアントファーストストアであり、リアルタイム更新と複雑なクライアントサイドフィルタリングを持つデータ集約型アプリのために自分のバックエンドの前段に配置します。Query は安定版、DB は 2026年6月時点でベータ版です。

TanStack ライブラリを React の代わりに Vue、Svelte、Angular で使えますか？

データおよび UI ライブラリについては可能です。Query・Table・Form・Virtual・Store は React・Vue・Solid・Svelte・Angular 向けの公式アダプターを提供しています。ルーティングは例外です。TanStack Router と TanStack Start フルスタックフレームワークは React と Solid のみを対象としています。そのため Vue や Angular のチームは Query や Table を採用できますが、型安全なルーティングに TanStack Router を使うことはできません。

TanStack Start は Next.js の代替として本番環境で使えますか？

2026年6月時点では完全ではありません。TanStack Start は 1.168.x リリースラインのリリース候補（RC）段階であり、まだ安定版として宣言されておらず、React Server Components のサポートは本番環境のデフォルトではなく実験的にのみ利用可能です。現時点で本番環境で安定した RSC が必要な場合、Next.js はその機能において長年の実績があります。Start は実験的な RSC が許容できる新しい公開向け SSR サイトにとっては合理的な選択肢です。

TanStack エコシステム全体を採用しないと1つのライブラリを使えませんか？

いいえ。各 TanStack ライブラリは独立しておりコンポーザブルであるため、Router なしで Query だけを採用することも、Start なしで Table だけを採用することも可能です。ライブラリを組み合わせて使う場合は統合されます（例えばルートローダーで Query データをプリフェッチできます）が、他のライブラリを必要とするものはありません。Query はエコシステムへの最も一般的なエントリーポイントです。既存の React コードベースに対して最も高い ROI をもたらす変更であり、エコシステムの他のものを採用する必要はありません。