はじめに

Reactの開発現場で「React Query」という言葉を聞いたことがある人は多いと思います。データフェッチとキャッシュ管理の定番ライブラリです。

実はこのReact Query、今では TanStack Query という名前に変わっています。そしてQueryだけでなく、Router・Table・Form・Virtual・Start（フルスタックフレームワーク）まで、同一設計思想で作られたライブラリ群 「TanStack」 として大きなエコシステムを形成しています。

この記事では「TanStackとは結局何なのか」「なぜ注目されているのか」を、各ライブラリの役割と設計思想の観点から整理します。

TanStackとは

TanStackは、Tanner Linsley氏が中心となって開発する、Webアプリケーション向けのオープンソースライブラリ群の総称です。もともとReact Query・React TableといったReact向けライブラリから始まり、現在はReactに限らずSolid・Vue・Svelte・Angularにも対応するマルチフレームワーク構成になっています。

公式サイトのキャッチコピーが思想をよく表しています。

Headless, type-safe, composable tools for building modern web applications
（ヘッドレスで、型安全で、組み合わせ可能なツール群）

キーワードはこの3つです。

1. Headless（見た目を持たない）

TanStackのライブラリは UIを一切提供しません。ロジックと状態管理だけを提供し、見た目（マークアップ・CSS）はすべて開発者が書きます。

「それって不便なのでは？」と思うかもしれませんが、これが最大の強みでもあります。MUI・Chakra・Tailwind・独自デザインシステムなど、どんなUIとも衝突せず組み合わせられるため、デザインの自由度が完全に保たれます。

2. Type-safe（型安全）

TypeScriptでの型推論が極めて強力に設計されています。例えばTanStack Routerでは、URLのパスパラメータや検索パラメータ（?page=2&sort=name など）まで型付けされ、存在しないルートへの遷移はコンパイルエラーになります。

3. Composable（組み合わせ可能）

各ライブラリは独立して導入でき、必要なものだけを組み合わせられます。「Queryだけ使う」「RouterとTableだけ使う」といった部分的な採用が前提の設計です。

主要ライブラリの一覧

ライブラリ	役割	一言でいうと
TanStack Query	サーバー状態の管理	データフェッチ・キャッシュ・再検証の定番（旧React Query）
TanStack Router	ルーティング	型安全なルーター。検索パラメータまで型付く
TanStack Table	テーブル構築	ソート・フィルタ・ページネーション等のロジックを提供するヘッドレスな表エンジン
TanStack Form	フォーム管理	型安全なフォーム状態管理。スキーマバリデーション連携
TanStack Virtual	仮想化	巨大リストの効率的レンダリング
TanStack Start	フルスタックフレームワーク	Routerを中核に据えたフルスタックReactフレームワーク（Next.jsの対抗馬的位置づけ）

このほかにも、状態管理の TanStack Store などがあります。

それぞれをもう少し詳しく

TanStack Query —— エコシステムの原点

最も有名なライブラリで、いわゆる「サーバー状態」（APIから取得するデータ）の管理に特化しています。

const { data, isLoading, error } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUser(userId),
});

キャッシュ、バックグラウンド再取得、リトライ、楽観的更新など、データフェッチ周りで毎回書きがちな定型処理をまるごと引き受けてくれます。useState + useEffect でフェッチを書いていた頃と比べると、コード量とバグの発生率が大きく減ります。

TanStack Router —— 型安全の極致

ファイルベースルーティングに対応し、ルート定義から型が自動生成されます。

const Route = createFileRoute('/users/$userId')({
  component: UserPage,
});

function UserPage() {
  const { userId } = Route.useParams(); // userId は string 型で推論される
}

検索パラメータも validateSearch で型とバリデーションを定義でき、「URLをアプリケーションの状態として正しく扱う」ことを型レベルで強制してくれます。これはReact RouterやNext.jsのApp Routerにはない大きな特徴です。

TanStack Table —— 複雑な表の強い味方

管理画面などで避けて通れない「高機能なデータテーブル」。ソート、フィルタリング、ページネーション、グルーピング、列のリサイズ、行選択……これらのロジックをすべてヘッドレスに提供します。見た目は自分で書くため、既存のデザインシステムにそのまま馴染みます。

TanStack Form —— 型安全なフォーム

フォームの状態管理・バリデーションを担う比較的新しいライブラリです。Zodなどのスキーマバリデーションライブラリと連携でき、フィールド単位の型推論が効きます。

TanStack Start —— フルスタックへ

Routerを中核に据えたフルスタックReactフレームワークで、Next.jsやRemixと同じ領域をカバーします。主な特徴は以下の通りです（執筆時点ではRC＝リリース候補段階で、APIはほぼ安定とされています）。

フルドキュメントSSR・ストリーミング
Server Functions：クライアントから型安全に呼べるサーバー関数（型付きRPCのような感覚）
Vite / Rsbuildベースで、デプロイ先を選ばない
エンドツーエンドの型安全性

なぜ今TanStackなのか

背景にあるのは「フレームワークへの依存度を自分でコントロールしたい」という潮流です。

Next.jsのようなモノリシックなフレームワークは便利な一方、ルーティングやデータフェッチの作法がフレームワークに強く結びつき、乗り換えや部分的な改修が難しくなりがちです。TanStackのライブラリはそれぞれが独立しているため、既存プロジェクトにQueryだけ入れる、Routerだけ置き換えるといった漸進的な導入ができます。

また、100%オープンソースで維持されている点も、長期的な安心感につながっています。

向いているケース・向いていないケース

向いているケース

TypeScriptの型安全性を重視するプロジェクト
管理画面・ダッシュボードなど、複雑なテーブルやフォームが多いアプリ
既存のReactアプリに段階的に導入したい場合
デザインシステムが独自で、UIライブラリに縛られたくない場合

向いていないかもしれないケース

小規模なサイトで、フレームワーク任せにさっと作りたい場合
ヘッドレスゆえにUIを自分で書くコストをかけたくない場合
チームのTypeScript経験が浅く、型の恩恵を活かしきれない場合

まとめ

TanStackは単一のフレームワークではなく、「ヘッドレス・型安全・組み合わせ可能」という共通思想で作られたライブラリのエコシステムです。

まずは TanStack Query から入るのがおすすめ（導入効果が最も実感しやすい）
型安全なルーティングに興味があれば Router、管理画面なら Table と Form
フルスタックで統一したければ Start という選択肢

どれか1つからでも始められるので、既存プロジェクトの課題に合わせて試してみるとよいでしょう。

参考

もっと体系的に学びたい方向けに、TanStack Table・Router・Formを実際に手を動かしながら学べる講座をUdemyで公開しています。興味があればぜひ。

👉 TanStack実践入門：React Table / Router / Form（Udemy）