2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@takish(岸田 崇志)

ReactのExcel風グリッドライブラリ6つを比較してわかった用途別の最適解

2
Posted at

業務系Webアプリで「Excelっぽいの作って」という要件は頻出します。ただ、候補ライブラリの機能比較表を並べても「うちの用途にはどれ？」という判断に繋がらないことが多くあります。

この記事では、SpreadJS / AG Grid / Handsontable / TanStack Table / Glide Data Grid / react-data-grid の6ライブラリについて、2026年6月時点の最新情報と、6つの利用シーンから逆引きする選定ガイドをまとめます。機能の多さではなく「用途との適合度」で選ぶための判断材料を提供します。

本記事の前提環境: React 18/19、TypeScript 5.x、各ライブラリは2026年6月時点の最新安定版を想定しています。

Excel風グリッドライブラリ選定が難しい理由

機能比較表だけでは差が分からない

公式ドキュメントの機能表はどれも「ソート」「フィルタ」「編集」対応と書かれています。しかし実際の差は、次のようなところに表れます。

  • どの操作にどの程度の制約をかけられるか
  • 大量データでの挙動（1万行、10万行、100万行）
  • ライセンスコストの5年スパンの継続性
  • バージョンアップ時の破壊的変更の頻度

機能の有無だけを並べた比較表では、これらの「採用後に問題になる差」は見えません。

ライセンス形態がバラバラ

ライブラリごとにライセンス体系が大きく異なります。

ライブラリ ライセンス
TanStack Table OSS（MIT、全機能無料）
Glide Data Grid OSS（MIT）
react-data-grid OSS（MIT）
AG Grid Community（MIT）+ Enterprise（商用）
Handsontable 商用（Hobby無料、それ以外は有償）
SpreadJS 完全商用（開発者ごと個別見積）

「OSSだから無料」「商用だから高機能」という単純な対応関係ではない点に注意が必要です。

採用後に詰む「ミスマッチ」の4パターン

プロジェクトで起こりがちな失敗パターンを挙げます。

  • A: SpreadJSを入れたが数式機能はほぼ未使用で、ライセンス料だけ高くついた
  • B: Handsontableで自由入力にしたら、業務ユーザーが意図しない列にコピペしてデータ整合性が崩壊した
  • C: TanStack Tableで全部自作にしたら、セル編集・仮想スクロールの実装に3ヶ月かかった
  • D: react-data-grid v7ベータを採用したら、v6→v7でフィルタ機能が削除されて移行対応に追われた

これらを避けるには、選定前に利用シーンを言語化することが必要です。

主要6ライブラリの最新情報【2026年6月版】

SpreadJS（MESCIUS）— Excel完全再現

  • 最新: v19.1（2026年5月リリース）。v19.1ではWhat-If Analysis（Data Table・Goal Seek）、VS Code用スプレッドシートエディタ、PivotTableの日付グルーピング等を追加。v19系の新機能にはAI Assistant add-on、Collaboration Server、Angular 20対応も含まれます
  • 計算エンジン: C++/WASM、500以上の関数、.xlsx双方向
  • React対応: v16〜v19（v19以降のnpmパッケージは @mescius/spread-sheets。旧 @grapecity スコープはメンテ終了）
  • ライセンス: 開発者ごと個別見積（高価格帯）

本記事で比較した6ライブラリの中では、Excel互換の完成度が最も高いライブラリです（Infragistics Ignite UI や Syncfusion にも類似の製品はありますが、本記事では扱いません）。

AG Grid — 業務グリッドのデファクト

  • 最新: v35.3.0（2026年5月12日リリース）
  • 新機能（v35系）: Aggregation Editing、Formula Editor、BigInt Support、Named Date Ranges、Theme Builder。v35.3ではQuick Access Toolbar、Cell Notes、Server-Side Row Model向けGrand Total Rowを追加
  • Community版（MIT）: 仮想スクロール、列定義による厳密な型制御、基本フィルタ、ソート、編集まで無料で使えます
  • Enterprise版: $999/dev（永続ライセンス + 1年分のアップデート）。AG Charts Enterpriseを含むバンドルは$1,498/dev。Set Filter、Pivot、Tree Data、Server-Side Row Model 等
  • 日本語情報が豊富で学習コストが低めです

一言でいうと「迷ったらまずCommunity版で試せる選択肢」です。

Handsontable — Excel操作感に特化

  • 最新: v17.1.0（2026年5月リリース）
  • ライセンス: 商用 Standard が約$999/dev〜（Annual）、上位の Priority は約$1,299/dev〜。買い切り（Perpetual）もありますが近年はサブスクリプション主体です。Hobby（非商用）は無料
  • 特徴: コピペ、ドラッグフィル、右クリックメニュー、セル検証といったExcel操作感の完成度が高い（数式は HyperFormula プラグイン経由で提供）
  • 構成: Vanilla JS本体 + React/Angular/Vue ラッパー

一言でいうと「Excel操作感そのものを売りたい時の第一候補」です。

Handsontableのライセンスは開発に関わる開発者ごと（per-developer）にカウントされます。チーム規模が大きくなると予算が跳ねる点に注意してください。

TanStack Table — Headlessで完全制御

  • 最新: 安定版 v8.21.3（v8系が安定版）。v9 は2026年6月時点でベータ（9.0.0-beta）で、まだ正式リリースではありません
  • 哲学: Headless設計。ロジック（ソート・フィルタ・ページング等の状態管理）だけ提供し、UIは完全自作
  • ライセンス: OSS（全機能無料、Community/Enterprise分割なし）
  • バンドル: コア約15KB（gzip） + UI自作分 + 仮想化 = 実質約30KB
  • 対応: React、Vue、Solid、Svelte、Qwik、Angular、Lit、Vanilla JS

TanStack Table は他の5ライブラリとは性質が異なり、「Excel風の操作を提供する完成品」ではなく「テーブル用のフック集」です。セル編集、コピペ、ドラッグフィル等はすべて自前実装になります。グリッド選定時に候補として挙がることが多いため本記事の比較対象に含めていますが、用途は限られます。

一言でいうと「デザインシステムに完全統合したいチーム向け」です。

Glide Data Grid — Canvas描画の高速性

  • 最新: 安定版 v6.0.3（2024年2月リリース）。以降は安定版の更新が止まっており、メンテナンスは鈍化傾向です
  • 特徴: HTML5 Canvas に直接レンダリング。DOM仮想化のコストを排除することで、公式では数百万行（millions of rows）のスクロールでも60fpsを維持すると謳われています
  • ライセンス: OSS（MIT）
  • 注意: Canvas描画のため、DOMベースのカスタムセルエディタは別実装が必要です。安定版が2年以上更新されていない点も採用判断に含める必要があります

一言でいうと「超大量データ表示に振り切った選択肢」です。

react-data-grid(adazzle) — 軽量OSS

  • 最新: v7.0.0-beta.59（2026年6月時点もベータ継続中。beta番号は2025年12月の.59から進んでいません）
  • v7の変更点: css-in-js へ移行（linaria）、フィルタ機能が削除された、useRowSelection フック追加
  • ライセンス: OSS（MIT）

v7 はベータ期間が長期化しています。v6→v7 で破壊的変更（フィルタ削除等）があるため、プロダクション採用は慎重に判断してください。新規採用なら v6 安定版を選ぶか、他ライブラリを検討する方が無難です。

利用シーン別のベストライブラリ

6つの利用シーンを定義し、それぞれの第一候補と選定理由を示します。

シーンA: Excel帳票のWeb化

  • 第一候補: SpreadJS / 第二候補: Handsontable
  • 理由: 数式エンジン、条件付き書式、チャート、.xlsx入出力が必須要件
  • 判断基準: コスト許容なら SpreadJS、非商用や予算制約があるなら Handsontable
  • 具体例: 財務分析ダッシュボード、見積書エディタ、経営レポート

シーンB: マスタ管理系業務（厳密な型制御）

  • 第一候補: AG Grid / 第二候補: TanStack Table
  • 理由: 列定義で型・バリデーション・ドロップダウンを厳密に指定でき、仮想スクロールも堅牢
  • 判断基準: Community版で基本要件をカバー、大規模時のみ Enterprise を検討
  • 具体例: 商品マスタ、顧客マスタ、受発注一覧、在庫管理

シーンC: Excel操作感を活かした高速データ入力

  • 第一候補: Handsontable / 第二候補: SpreadJS
  • 理由: コピペ・ドラッグフィル・右クリックメニューのExcel操作感が強み
  • 判断基準: キーボードで毎日入力する業務に合う
  • 具体例: 日次売上入力、勤怠入力、予算入力シート

シーンD: 超大量データの可視化・探索

  • 第一候補: Glide Data Grid / 第二候補: AG Grid Enterprise
  • 理由: Canvas描画 or Server-Side Row Modelで100万行以上を処理可能
  • 判断基準: 編集よりも表示・フィルタが中心なら Glide Data Grid
  • 具体例: ログ解析、時系列データ閲覧、トランザクション一覧

シーンE: AI抽出結果のレビュー（HITL検証）

  • 第一候補: AG Grid / 第二候補: TanStack Table
  • 理由: 「許可した操作だけできる」設計が、HITLの「データ整合性を守りつつ人間が修正する」要件と相性が良い
  • 補足: 2025-2026年のトレンドは信頼度ベースルーティング(>95%自動承認、70-95%フラグ付きレビュー、<70%必須レビュー)。AG Gridの cellStyle で信頼度に応じた行の色分けを実装できます
  • 具体例: AI-OCRの検証画面、AIアノテーション結果の承認

シーンF: カスタムデザインの独自グリッド

  • 第一候補: TanStack Table / 第二候補: react-data-grid（v6安定版）
  • 理由: Headlessで完全制御、デザインシステムに完全に馴染みます
  • 判断基準: 実装工数は最大。専任デザインシステムチームがある場合のみ推奨
  • 具体例: SaaSプロダクトの独自テーブル、ダッシュボード埋め込みグリッド

ライブラリ別メリデメ早見表

ライブラリ メリット デメリット 最適シーン
SpreadJS Excel完全再現、WASM高速、.xlsx双方向、AI Assistant 高価格、機能過剰、バンドル大、自由度ゆえの整合性リスク A
AG Grid Community版が実用的、厳密制御、仮想スクロール堅牢、日本語情報豊富 Enterprise依存でロックイン、Enterprise料金が業務アプリだと重い B, E
Handsontable Excel操作感ネイティブ、財務・経理系と相性◎、日本語UI対応 商用ライセンス必須、自由度が高すぎる、バンドル大 A, C
TanStack Table 無料、Headless完全制御、全機能無料、バンドル最小 UI全自作、セル編集自前、小チームには実装コストが重い F
Glide Data Grid Canvas描画で圧倒的性能、TypeScript完全対応 Canvas描画のカスタム難、a11y自前、エコシステムが狭い D
react-data-grid OSS、軽量、Excel風編集、学習コスト低 v7ベータ長期化、破壊的変更、メンテ頻度は中程度 F(v6)

バンドルサイズの目安

主要ライブラリのバンドルサイズ(minified + gzip、概算)の比較です。正確な値は環境・バージョンで変動するため、目安としてご覧ください。

ライブラリ バンドルサイズ(概算) 備考
TanStack Table 約15KB コアのみ。UI・仮想化を足すと実質30KB程度
react-data-grid 約50KB CSS込み
AG Grid Community 約140KB モジュール分割でさらに削減可能
Glide Data Grid 約150KB Canvas描画関連一式
Handsontable 約280KB 本体のみ。HyperFormula追加でさらに増加
AG Grid Enterprise 約400KB+ Enterprise機能の使用範囲で変動
SpreadJS 約1MB以上 WASM計算エンジン込み

選定時に確認すべき10の落とし穴

採用後に詰まないための事前確認ポイントを10個挙げます。

  1. ライセンス継続性 — 商用ライセンスの更新コストを5年スパンで試算しましたか
  2. Community→Enterpriseのロックイン — AG Grid Community で開発し、途中から Enterprise 機能に依存すると移行コストが跳ねます
  3. バージョンの安定性 — ベータ版(react-data-grid v7等)をプロダクション投入していませんか
  4. ローカライズ — 日付・数値・通貨の日本語フォーマット対応は十分ですか
  5. アクセシビリティ — Canvas描画の Glide Data Grid は WCAG 対応を自前で補う必要があります
  6. 印刷・PDF出力 — 帳票出力要件があるなら SpreadJS 等の対応ライブラリが必要です
  7. エクスポート品質 — .xlsx/.csv 出力の書式保持・数式保持が要件を満たしますか
  8. 仮想スクロール — 1万行以上の想定があるなら必須機能です
  9. デザインシステム統合 — Tailwind や CSS-in-JS との相性は確認しましたか
  10. モバイル対応 — スマホ・タブレットでの操作性を検証しましたか

コード例で見るライブラリの制約設計

最後に、代表的な3ライブラリで「どう制約をかけるか」を具体的なコードで示します。

AG Grid — 列定義で「許可した操作」だけを許す

列ごとに cellEditor や valueSetter を指定することで、厳密なバリデーションを宣言的に記述できます。

columnDefs.ts
import type { ColDef } from 'ag-grid-community';

// マスタから選択肢を生成する想定（実際はAPIから取得）
const masterCustomers = ['山田商事', '鈴木工業', '田中建設'];

export const columnDefs: ColDef[] = [
  {
    field: 'customerName',
    headerName: '顧客名',
    cellEditor: 'agSelectCellEditor',
    cellEditorParams: { values: masterCustomers },
  },
  {
    field: 'amount',
    headerName: '金額',
    type: 'numericColumn',
    // 変換とバリデーションを valueSetter に集約
    valueSetter: (p) => {
      const num = Number(p.newValue);
      if (isNaN(num) || num < 0) return false;
      p.data.amount = num;
      return true;
    },
  },
  {
    field: 'confidence',
    headerName: '信頼度',
    editable: false,
    cellStyle: (p) => {
      if (p.value >= 0.95) return { backgroundColor: '#d4edda' };
      if (p.value >= 0.70) return { backgroundColor: '#fff3cd' };
      return { backgroundColor: '#f8d7da' };
    },
  },
];

valueSetter は false を返すと編集をキャンセルします。不正な入力を受け付けないようにする基本パターンです。valueParser と valueSetter の責務が重ならないよう、変換とバリデーションは valueSetter に寄せると見通しが良くなります。

Community版の agSelectCellEditor はネイティブの <select> 要素ベースのため、UXは素朴です。検索可能なリッチドロップダウンが必要な場合は Enterprise版の agRichSelectCellEditor が選択肢になります。

Handsontable — Excel操作感を活かす設定

contextMenu や fillHandle を有効化するだけで、Excelに近い操作感が手に入ります。

InvoiceGrid.tsx
import { HotTable } from '@handsontable/react';

type Row = {
  name: string;
  price: number;
  qty: number;
  total: number;
};

export function InvoiceGrid({ data }: { data: Row[] }) {
  return (
    <HotTable
      data={data}
      colHeaders={['商品', '単価', '数量', '合計']}
      columns={[
        { data: 'name', type: 'text' },
        { data: 'price', type: 'numeric', numericFormat: { pattern: '0,0' } },
        { data: 'qty', type: 'numeric' },
        { data: 'total', readOnly: true, type: 'numeric' },
      ]}
      contextMenu={true}
      fillHandle={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
}

licenseKey="non-commercial-and-evaluation" は非商用・評価目的でのみ使えます。商用利用では正式なライセンスキーが必要です。

TanStack Table — Headlessで独自UIを組む

UIは完全に自作する前提のため、自由度と実装コストのトレードオフが最大化されます。

DataTable.tsx
import {
  flexRender,
  getCoreRowModel,
  getSortedRowModel,
  useReactTable,
  type ColumnDef,
} from '@tanstack/react-table';

type Props<T> = {
  data: T[];
  columns: ColumnDef<T>[];
};

export function DataTable<T>({ data, columns }: Props<T>) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map((hg) => (
          <tr key={hg.id}>
            {hg.headers.map((h) => (
              <th key={h.id}>
                {flexRender(h.column.columnDef.header, h.getContext())}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      {/* tbody は完全自作 */}
    </table>
  );
}
Glide Data Grid の例(大量データ向け)
LogViewer.tsx
import {
  DataEditor,
  GridCellKind,
  type GridCell,
  type GridColumn,
  type Item,
} from '@glideapps/glide-data-grid';

const columns: GridColumn[] = [
  { title: 'Timestamp', width: 180 },
  { title: 'Level', width: 80 },
  { title: 'Message', width: 600 },
];

// getCellContent は (col, row) から該当セルのデータを返す関数
const getCellContent = ([col, row]: Item): GridCell => {
  const log = logs[row]; // 実際は遅延読み込み想定
  const value = [log.timestamp, log.level, log.message][col];
  return {
    kind: GridCellKind.Text,
    data: value,
    displayData: value,
    allowOverlay: false,
  };
};

export function LogViewer() {
  return (
    <DataEditor
      getCellContent={getCellContent}
      columns={columns}
      rows={10_000_000}
      smoothScrollX
      smoothScrollY
      rowMarkers="number"
    />
  );
}

Canvas描画で1000万行をスムーズにスクロールできます。カスタムセルエディタは別途 Canvas 前提で実装する必要があります。

まとめ

  • Excel風グリッドライブラリの選定は「機能の多さ」ではなく「利用シーンとの適合度」で決まります
  • 6つのシーン(帳票Web化 / マスタ管理 / 高速入力 / 大量データ / HITL検証 / 独自デザイン)にマッピングすれば、候補は自然に絞れます
  • 2026年6月時点では、AG Grid v35.3.0、SpreadJS v19.1、react-data-grid v7ベータの状況を踏まえた判断が必要です
  • 採用後に詰まないための10の落とし穴を事前にチェックしておくと、後戻りコストを大きく下げられます

迷ったらまず AG Grid Community で試すのが現実的な出発点です。Excel互換が本当に必要な時だけ SpreadJS、Excel操作感が売りなら Handsontable、という順で絞り込んでいけば、用途とのミスマッチを最小化できます。

本記事のスタンス: 本記事は各ライブラリの公式ドキュメント・リリースノート・価格表をもとにした調査ベースの比較です。すべてのライブラリを実プロジェクトで長期運用したうえでの評価ではない点をお断りしておきます。各ライブラリの販売元・開発元とは利害関係はありません。最終的な選定は、必ずご自身の要件で検証したうえでの判断をお願いします。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?