TanStack DB を使ったリアクティブ UI の始め方

リアクティブな UI を構築する際、パフォーマンスとシンプルさのどちらかを選ぶ必要はありません。しかし、現代の JavaScript アプリケーションでは、状態の更新ごとに連鎖的な再レンダリング、複雑なメモ化、そして大量のボイラープレートを伴う楽観的更新が発生します。TanStack DB は、この方程式を完全に変えます。

この記事では、TanStack DB を紹介します。これは、TanStack Query を拡張し、コレクション、ライブクエリ、そして差分データフローによってサブミリ秒の更新を実現するクライアントサイドのデータベース層です。Redux や手動キャッシングと比較して状態管理をどのように簡素化するか、そして既存プロジェクトに段階的に導入する方法を学びます。

注意: TanStack DB は現在ベータ版です(2025年後半時点)。API は進化する可能性がありますが、探索や重要でない機能への段階的な導入には十分安定しています。

TanStack DB とは?

TanStack DB は、TanStack Query の上に構築されたリアクティブなクライアントストアです。TanStack Query はサーバー状態の取得とキャッシングに優れていますが、各クエリ結果を独立したキャッシュエントリとして扱います。TanStack DB は、欠けていたリレーショナル層を追加し、データグラフ全体での結合、フィルタリング、リアクティブな更新を可能にします。

その魔法は差分データフローにあります。これは、実際に変更されたクエリの部分のみを再計算する技術です。つまり、100,000 アイテムのコレクション内の 1 行を更新するのに、M1 Pro 上でわずか 0.7ms しかかかりません—UI のカクつきを完全に排除できる速さです。

コア概念:コレクション、ライブクエリ、楽観的ミューテーション

コレクション:データの基盤

コレクションは、任意のソース(REST API、GraphQL、または ElectricSQL のような同期エンジン)から取得できる型付きオブジェクトのセットです。既存の useQuery 呼び出しをラップします:

const todoCollection = createCollection(
  queryCollectionOptions({
    queryKey: ['todos'],
    queryFn: async () => api.todos.getAll(),
    getKey: (item) => item.id,
    schema: todoSchema
  })
)

これは TanStack Query のパターンを基にしているため、見慣れたものです。違いは何でしょうか? コレクションはデータを正規化し、リレーションシップ間でのリアクティブなクエリを可能にします。

ライブクエリ:ボイラープレートなしのリアクティブ性

ライブクエリは、基礎となるデータが変更されたときに自動的に更新されます—手動のキャッシュ無効化も useMemo チェーンも不要です:

const { data: activeTodos } = useLiveQuery((query) =>
  query
    .from({ todos: todoCollection })
    .where(({ todos }) => eq(todos.completed, false))
)

任意の todo のステータスが変更されると、このクエリは 1ms 未満で更新されます。差分データフローエンジンは、データセット全体ではなく、影響を受けた行のみが再計算されることを保証します。

楽観的ミューテーション:即座の UI 更新

TanStack DB は楽観的更新を自動的に処理し、失敗時には組み込みのロールバックを提供します:

// 以前: TanStack Query での手動楽観的更新
const mutation = useMutation({
  mutationFn: createTodo,
  onMutate: async (newTodo) => {
    // 20行以上のボイラープレート...
  }
})

// 以後: TanStack DB
todoCollection.insert({
  id: uuid(),
  text: 'Ship faster',
  completed: false
})

ミューテーションは UI に即座に表示され、サーバーが拒否した場合は自動的にロールバックされます。ボイラープレートも手動の状態管理も不要です。

差分データフローがすべてを変える理由

従来の状態管理では、トレードオフを強いられます:多数の API 呼び出しを行う(ネットワークが遅い)か、大規模なデータセットをクライアント側でフィルタリングする(レンダリングが遅い)かです。差分データフローは第三の選択肢を可能にします:正規化されたデータを一度読み込み、ブラウザで超高速な増分結合を実行します。

Linear や Figma のような企業は、カスタムビルドの差分更新システムを通じて即座の UI を実現しています。TanStack DB はこのアプローチを民主化し、サブミリ秒のリアクティブ性をあらゆる JavaScript アプリケーションで利用可能にします。

ElectricSQL によるローカルファースト同期

TanStack DB は REST や GraphQL でも優れた動作をしますが、同期エンジンと組み合わせると真価を発揮します。例えば、ElectricSQL は Postgres の論理レプリケーションを使用して、変更をクライアントに直接ストリーミングします:

const todoCollection = createCollection(
  electricCollectionOptions({
    shapeOptions: {
      url: 'http://localhost:3003/v1/shape',
      params: { table: 'todos' }
    },
    getKey: (item) => item.id
  })
)

これで、Postgres データベースへの変更が、接続されているすべてのクライアントに即座に更新されます—WebSocket の配線も手動のブロードキャストも不要です。このローカルファーストの同期パターンは、ユーザーインタラクションからネットワークレイテンシを完全に排除します。

段階的な導入パス

TanStack DB は既存の TanStack Query セットアップの上に重ねられます。1つのコレクションから始めて、現在の API 呼び出しを維持し、段階的に移行します:

1. 既存のクエリをコレクションでラップ
2. フィルタリングされた配列をライブクエリに置き換え
3. 自動楽観的更新でミューテーションを簡素化
4. (オプション)ElectricSQL でリアルタイム同期を追加

各ステップでパフォーマンスが向上し、複雑さが軽減されます。大規模な書き直しは不要です。

まとめ

TanStack DB は差分データフローを JavaScript にもたらし、ミリ秒ではなくマイクロ秒で更新されるリアクティブな UI を可能にします。コレクションとライブクエリで TanStack Query を拡張することで、ネットワーク効率とレンダリングパフォーマンスの間の従来のトレードオフを排除します。

まだベータ版ですが、TanStack DB は探索と段階的な導入の準備ができています。重要でない機能で単一のコレクションから始めて、サブミリ秒の更新がアプリケーションの使用感にもたらす違いを体験してください。ユーザーも、そしてコードベースも、あなたに感謝するでしょう。

よくある質問

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.