TanStack：ツールライブラリからフルスタックフレームワークへの進化

TanStack は、モダンな Web アプリケーションのために設計された高品質なオープンソースのツールスイートです。現在までに、各モジュールは GitHub 上で累計 10 万以上のスターと 9,500 人のフォロワーを獲得しています。最大の強みは、Web 開発において特に難易度の高い領域をモジュール化・標準化し、それらを本番環境で利用できる包括的なエコシステムへと昇華している点にあります。

TanStack の位置づけ

TanStack の目標は、単に便利なツールライブラリになることではありません。モダンなフルスタックアプリケーションに内在する、システムレベルの複雑性そのものを解決することを目指しています。

ルーティング、データ取得、SSR（サーバーサイドレンダリング）といった、これまで分散していたプロセスをシームレスに統合し、統一された一貫性のあるワークフローとして提供します。大規模なデータセットや複雑なフォームインタラクションを扱う場面では、TanStack が提供するのは単なる近道ではなく、岩盤のように堅牢な基盤であることが分かります。これにより、「高性能」と「高信頼性」は開発者が背負う負担ではなく、フレームワークの DNA として組み込まれていきます。

コアモジュール

TanStack は中核理念を実現し、Web 開発における根深い課題を解決するために、用途に特化した包括的なツール群（モジュール）を構築しています。

TanStack Query

TanStack Query は最も広く利用されているモジュールで、フルスタック開発における最重要課題の一つである「データフロー」を解決するために設計されています。象徴的な特長は「キャッシュ中心のデータフロー」で、データをさまざまなコンポーネント間でシームレスに再利用できるようにします。
「サーバー状態（server state）」の管理に焦点を当てることで、取得・キャッシュ・同期・無効化といった煩雑ながら頻出のタスクを、強力な宣言的機能へと変換します。

import { useQuery } from '@tanstack/react-query';

function UserProfile({ userId }) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', userId], 
    queryFn: () => fetch(`/api/users/${userId}`).then(res => res.json()),
  });

  if (isLoading) return <div>loading...</div>;
  if (error) return <div>error: {error.message}</div>;

  return <div>hello, {data.name}</div>;

必要なのは、宣言的な queryKeys を使ってデータ要件を定義することだけです。フレームワークが、リクエストの重複排除、キャッシュの無効化、自動リトライといった定型処理を抽象化し、ローディング状態やエラー状態を手動で管理する負担から解放してくれます。その結果、あなたは本当に重要なこと――ビジネスロジック――に集中できます。

代替案と比べた TanStack Query の中核的な強みは、「サーバー状態管理」を独立した領域として専門的に扱う点にあります。Redux のような汎用ライブラリが生みがちな煩雑なボイラープレートや手動の運用コストを排除しつつ、手書きの useEffect 実装でよく問題になる厄介な境界ケース――競合状態（race condition）、キャッシュ、リトライ――を体系的に解決します。その結果、導入直後から高い安定性と信頼性を得られます。

TanStack Router

TanStack Query がデータフローを高効率かつ安定的に処理する存在だとすれば、TanStack Router はその Query をより上位レイヤーで編成する“指揮者”のような役割を担います。ルーターはユーザーの遷移先（目的地）を把握しているため、loader フックを通じてナビゲーションの前または最中にデータ取得を指示できます。

従来の開発スタイルでは、ルーターはコンポーネントを切り替えるだけで、各コンポーネントが useEffect で Query を発火します。これがしばしば「ネットワークのウォーターフォール（瀑布）」を引き起こします。

一方 TanStack Router では、リンクにホバーするだけで Query のプリフェッチを走らせることができます。さらに、データの準備が整ってからページ全体を一度にレンダリングできるため、体感速度を大きく向上させられます。

// 1. Define Query options (reusable logic)
const userQueryOptions = (id) => ({
  queryKey: ['user', id],
  queryFn: () => fetchUser(id),
});

// 2. Configure the loader at the route level
const userRoute = createRoute({
  path: '/user/$userId',
  // Key: Prefetch data before the route transition starts and store it in the Query cache
  loader: ({ params }) => queryClient.ensureQueryData(userQueryOptions(params.userId)),
  component: UserComponent,
});

function UserComponent() {
  const { userId } = userRoute.useParams();
  // Since data is already in the cache, it's read synchronously. 
  // No waterfalls, no secondary loading spinners.
  const { data } = useSuspenseQuery(userQueryOptions(userId));
  return <div>{data.name}</div>;
}

強強連携：TanStack Virtual + TanStack Table

TanStack Table と TanStack Virtual の統合は、本質的に「データロジック」と「レンダリング性能」のあいだに生まれる強力なシナジーです。

基盤となるロジックエンジンとして、TanStack Table はヘッドレス設計を採用し、ソート、フィルタリング、グルーピング、ページネーションといった複雑なインタラクションロジックに専念します。一方で、特定の UI 実装に縛られません。

ただし、数千行規模のデータを扱う場合、ロジックだけでは DOM ノード過多によるパフォーマンス低下を解決できません。そこで性能アクセラレータとして登場するのが TanStack Virtual です。仮想化によって、ユーザーのビューポート内で“いま見えている”行やセルだけをレンダリングすることを保証します。

両者を組み合わせると、Table が正確な行モデルと状態管理を提供し、Virtual がそのデータを最も効率的な形でブラウザに供給します。この協調により、機能性をフルに保ったままレンダリングコストを最小化し、滑らかで高性能なユーザー体験を実現できます。

import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
import { useVirtualizer } from '@tanstack/react-virtual';

function VirtualTable({ columns, data }) {
  const parentRef = React.useRef();

  // 1. Table handles logic: processing data models, sorting, filtering, etc.
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  const { rows } = table.getRowModel();

  // 2. Virtual handles performance: calculating which rows should be rendered in the viewport
  const rowVirtualizer = useVirtualizer({
    count: rows.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 35, // Estimated row height
  });

  return (
    <div ref={parentRef} style={{ height: '500px', overflow: 'auto' }}>
      <div style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: 'relative' }}>
        {rowVirtualizer.getVirtualItems().map((virtualRow) => {
          const row = rows[virtualRow.index];
          return (
            <div
              key={row.id}
              style={{
                position: 'absolute',
                top: 0,
                transform: `translateY(${virtualRow.start}px)`,
              }}
            >
              {/* 3. Render Table's logical data into the container provided by Virtual */}
              {row.getVisibleCells().map(cell => (
                <span key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </span>
              ))}
            </div>
          );
        })}
      </div>
    </div>
  );
}

TanStack Start：フルスタックの最後のピース

TanStack Start の登場は、TanStack がユーティリティライブラリの集合体から、真のフルスタックソリューションへと進化したことを象徴しています。各モジュール間の境界を取り払い、ルート定義からデータ取得、SSR、そしてクライアントサイドのインタラクションまで、シームレスなパイプラインを提供します。

簡単に言えば、TanStack Router を基盤として構築されたフルスタックフレームワークです。Router の状態管理機能を深く活用することで、SSR、データローディング、ナビゲーションワークフローを標準化しています。開発者はもう様々なライブラリを「つなぎ合わせる」苦労から解放され、「Route as the Data Boundary（ルートをデータ境界とする）」という理念を実践できます。ストリーミング SSR やアイソモーフィックリクエストといった高度な機能も、すぐに利用可能です。

フレームワーク比較

TanStack モジュールの詳細については、TanStack GitHub リポジトリをご覧ください。

選定ガイド：ツールから統合へ

TanStack の最大の強みの一つは、段階的な採用モデルです。開発者は段階的な移行を通じて、ツールを増分的に統合できます：

• リクエストとキャッシュの管理：TanStack Query から始める。
• 複雑なテーブルがコアの課題：TanStack Table を導入（パフォーマンスがボトルネックになれば TanStack Virtual を追加）。
• ルーティングとデータローディングの拡張：プロジェクトが成熟し、ルーティングロジックが複雑になったら TanStack Router を検討。
• 新規プロジェクトと統一アーキテクチャ：TanStack Start に注目、または EdgeOne Pages の Start テンプレートで開発を素早く開始。

レガシープロジェクトにおいては、この「まず具体的な課題を解決し、後から統合する」戦略は、ハイリスクな「フレームワーク全体の置き換え」よりもはるかに安定しています。

EdgeOne Pages へのデプロイ

EdgeOne Pages は、TanStack Start フルスタックフレームワークに対して強力なエンドツーエンドのデプロイサポートを提供しています。深いレベルでの統合と最適化により、SSR 実装、ストリーミングレスポンス、ルート書き換えルールといった重要な技術課題を効果的に解決します。

事前設定された TanStack テンプレートを活用することで、開発者は EdgeOne Pages 上で「開発からデプロイまで」のシームレスに統合されたワークフローを素早く体験できます。

仕組み：アダプテーションの原理

EdgeOne Pages は、専用アダプター @edgeone/tanstack-start を通じて、TanStack Start のシームレスなプラットフォーム適応とデプロイを実現します。このアダプターは Vite プラグインで、TanStack Start アプリケーションを EdgeOne Pages プラットフォームにデプロイすることを目的としています。@edgeone/vite-core ライブラリをベースに構築され、宣言的な設定を通じて TanStack Start にフルフレームワークサポートを提供します。

コア機能

• 🔍 自動検出：TanStack Start プロジェクトを自動識別（React と SolidJS をサポート）。
• 📦 スマートバンドル：esbuild と NFT（Node File Trace）を組み合わせて、効率的な依存関係追跡とサーバーサイドコードのバンドリングを実現。
• 🛣️ ルート解析：TanStack Router からルーティング設定を直接自動解析。
• 🔌 グルーレイヤー適応：専用の Server Wrapper を使用して、フレームワークの出力を EdgeOne Function フォーマットにブリッジ。
• 🌐 エッジ最適化：EdgeOne プラットフォーム仕様に厳密に準拠したデプロイ成果物を生成。

アダプター実行ワークフロー

1. 静的アセットの移行：静的ファイル（HTML、CSS、JS など）を dist/client から .edgeone/assets/ ディレクトリにコピー。
2. サーバーサイドバンドル：esbuild を使用して、dist/server のサーバーサイドコードとその依存関係を単一の handler.js にバンドル。
3. グルーレイヤー生成：Server Wrapper コードを作成し、フレームワーク内部の fetch ハンドラーを EdgeOne Function フォーマットに適応。
4. ルート設定解析：routeTree.gen.ts またはルートディレクトリを分析して meta.json を生成し、プラットフォームがインテリジェントなルート配信に使用。

フレームワークガイドはいつでも参照可能で、選択したフレームワークに特化した最新の互換性情報と最適化のヒントが得られます。