TanStack Queryについて
TanStack Query（以前は “React Query” としても知られていた）は、サーバーから取得したデータ（サーバー・ステート）を扱うためのライブラリです。
■データ取得（fetching）・キャッシュ・自動リフェッチ・エラー処理・並列・依存・無限スクロールなどをサポート。
■「グローバル状態管理（Redux や Context など）ではなく、サーバーからのデータ取得・更新」を楽にすることが主目的。
■型推論や React 18 以降への対応も進んでいます。
どんな時に使うか
次のような状況で特に有用です：
■API からデータを取得し、その結果を UI に反映する必要がある（一覧表示・詳細表示など）
■同じデータを複数画面／複数コンポーネントで使い回したい（キャッシュしたい）
■データの取得中・エラー・再取得・バックグラウンド更新など “データ取得のライフサイクル” をちゃんと扱いたい
■無限スクロールやページング、依存クエリ（あるデータが取得できたら次のデータを取得）など複雑なパターン
// 例：ユーザー一覧を取得して表示するコンポーネント
import React from 'react';
import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
// QueryClient をアプリのルートで用意
const queryClient = new QueryClient();
function UsersList() {
const { data, isLoading, isError, error } = useQuery({
queryKey: ['users'],
queryFn: async () => {
const res = await fetch('/api/users');
if (!res.ok) {
throw new Error('Network response was not OK');
}
return res.json();
}
});
if (isLoading) {
return <div>読み込み中…</div>;
}
if (isError) {
return <div>エラー: { (error as Error).message }</div>;
}
return (
<ul>
{data.map((user: { id: number; name: string }) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
export function App() {
return (
<QueryClientProvider client={queryClient}>
<h1>ユーザー一覧</h1>
<UsersList />
</QueryClientProvider>
);
}
このように、データ取得・ローディング表示・エラー表示・表示までがスムーズに処理できます。
TanStack Formについて
TanStack Form は、フォーム（入力フォーム）の状態管理・バリデーション・送信などを効率よく扱うライブラリです。
■型安全（TypeScript で強く型付け）・フレームワーク非依存（React だけでなく他のフレームワークにも対応）という特徴があります。
■ヘッドレス（UI をあまり束縛せず、自分でコンポーネントを作れる自由度が高い）なアプローチ。
■入力値、エラー、バリデーション状況、ネストされたフィールドや配列フィールドも扱いやすく作られています。
どんな時に使うか
■フォームを扱う時に次のようなニーズがある場合に特に役立ちます：
■多くの入力フィールドがあって、状態管理・バリデーション・送信ロジックが煩雑になってきた
■型安全を重視していて、入力オブジェクトの形を TypeScript で明確にしたい
■UI ライブラリとの連携や、複数のフィールド・配列フィールド・動的フィールドがあるフォームを扱いたい
■自作コンポーネントでフォーム構築をしていて、ライブラリに依存しすぎず、自分で構造をコントロールしたい
import React from 'react';
import { useForm } from '@tanstack/react-form';
interface SignUpForm {
username: string;
email: string;
age: number;
}
export function SignUp() {
const form = useForm<SignUpForm>({
defaultValues: {
username: '',
email: '',
age: 0,
},
onSubmit: async ({ value }) => {
// 送信処理
console.log('送信データ:', value);
alert(`ようこそ、${value.username}さん！`);
},
});
return (
<form onSubmit={form.handleSubmit}>
<div>
<label>ユーザー名</label>
<input
value={form.values.username}
onChange={form.handlers.username}
/>
</div>
<div>
<label>メールアドレス</label>
<input
value={form.values.email}
onChange={form.handlers.email}
/>
</div>
<div>
<label>年齢</label>
<input
type="number"
value={form.values.age}
onChange={form.handlers.age}
/>
</div>
<button type="submit">送信</button>
</form>
);
}
比較・使い分けのポイント
■TanStack Query → データ取得・キャッシュ・更新（サーバーからのデータ管理）
■TanStack Form → フォームの入力・検証・送信（クライアント側のユーザー入力管理）
■両方使うケースも多いです：たとえば「フォーム送信 → API に送る」ようなとき、フォーム側に TanStack Form、結果取得・更新側に TanStack Query が入ることがあります。
ただし、何でも導入すればいいというわけではなく、小規模で入力が少ないフォームなら既存のシンプルな手法で十分な場合もあります。