「どのグリッドを使うべきか？」は間違った問いです。正しい問いは「あなたが本当に作っているのは何か？」です。
JavaScript のグリッド空間には本気の選択肢が 3 つあります。AG Grid、Handsontable、そして（願わくは）ReoGrid Web。3 つとも表形式データを描画します。3 つとも React／Vue ラッパーを備えています。3 つとも実戦投入で鍛えられています。ただし、それぞれ異なる問題を解くために作られており、正しい選択はあなたが抱える問題によって完全に変わります。
これは ReoGrid チームによる比較です。他のライブラリが強い領域については正直に書きます。間違った道具を選んでしまうと、こちらのドキュメントがどれだけ良くてもあなたは幸せになれません。
TL;DR — ユースケース軸
| あなたが作っているのが… | 選ぶべきは |
|---|---|
| データグリッド — クエリ結果、ログビューア、管理画面の表 — 読み取り中心、サーバーページング、リッチなフィルタリング | AG Grid |
| スプレッドシート — インボイス、予算、レポートテンプレ、設定可能フォーム — 編集可能セル、数式、Excel ラウンドトリップ | ReoGrid Web または Handsontable |
| xlsx の忠実度が必要 — 実ファイルを入出力し、スタイルを保持する | ReoGrid Web |
| OSS／個人プロジェクト向けに 寛容なライセンスの無料ティアが欲しい | ReoGrid Web Lite または AG Grid Community |
| 最大規模のチームに支えられた最も成熟した DOM グリッドエコシステム が欲しい | AG Grid Enterprise |
最大の違いは最初の行にあります。AG Grid は データグリッド、Handsontable と ReoGrid は スプレッドシート です。ここで間違うと、機能比較表で何を見比べても救われません。
データグリッド vs スプレッドシート
データグリッド は結果セットを描画する手段です。セルは読み取り中心。重要な機能はフィルタリング、グルーピング、集計、サーバーサイドページング、仮想化、列ツールです。編集も可能ですが二次的です。AG Grid はこのカテゴリの中で頭一つ抜けた強さを持っています。
スプレッドシート はグリッドを ドキュメント として扱います。セルは読み書きが対等です。重要な機能は依存グラフ付きの数式、任意矩形にまたがる結合セル、セルごとのスタイルと罫線、条件付き書式、xlsx ラウンドトリップ、ウィンドウ枠固定、Excel ライクな編集 UX（数式参照、フィルハンドル、構造変更の undo／redo）です。ReoGrid Web と Handsontable はどちらもこのカテゴリを狙っています。
この区別が重要な理由: スプレッドシート API は値のセマンティクス、数式評価、ドキュメントのラウンドトリップをファーストクラスに扱う必要があります。データグリッド API はクエリ、フィルタ、列の固定をファーストクラスに扱う必要があります。両者のエルゴノミクスは逆方向に引っ張り合うので、どちらも兼ねようとすると両方で中途半端になります。
機能比較（率直に）
弊社が得意な領域、他社が得意な領域。誇張なし。
| ReoGrid Web | AG Grid | Handsontable | |
|---|---|---|---|
| 主要ユースケース | スプレッドシート | データグリッド | スプレッドシート |
| 描画方式 | Canvas（単一の <canvas>） | DOM（仮想化） | DOM（仮想化） |
| 1 行あたりの実用セル数 | 50〜500+ | 50〜1000+ | 50〜300 |
| 実用的な行数 | 10,000+（スイートスポットは 100〜50k） | サーバーサイド行モデルで 100,000+ | 10,000+ |
| xlsx インポート | ✅ Lite + Pro、スタイル／結合／数式を完全サポート | Enterprise アドオン、基本のみ | Community で SheetJS プラグイン経由 |
| xlsx エクスポート | ✅ Pro、スタイル保持 | Enterprise アドオン | Community で SheetJS プラグイン経由 |
| 数式エンジン | ✅ 109 個の組み込み関数、依存グラフ付き | ❌（用途外） | ✅ HyperFormula 経由（385 関数） |
| 結合セル | ✅ ファーストクラス | ✅ スパン経由 | ✅ |
| 条件付き書式 | ✅ ルールベース、xlsx ラウンドトリップ | ✅ valueFormatters / cellClassRules | ✅ |
| セル種別（チェックボックス、ドロップダウン、プログレス、スパークライン） | ✅ プラガブルなレジストリ、組み込み 8 種 | ✅ Enterprise + カスタムレンダラー | ✅ |
| ピボットテーブル | ❌ | ✅ Enterprise | ✅ |
| サーバーサイド／無限行モデル | ❌ | ✅ 看板機能 | ❌ |
| React ラッパー | ✅ 慣用的なイベント Props | ✅ 成熟 | ✅ |
| Vue ラッパー | ✅ 慣用的な emit | ✅ | ✅ |
| バンドルサイズ | 合計 < 300KB（数式＋xlsx 込み） | Enterprise で約 1.2MB | 約 500KB + HyperFormula |
| 無料ティア | Lite（100×26 上限、エクスポート不可） | Community（非常に寛容） | Community（13.x 以降、商用利用にはライセンス必須） |
| 商用ライセンス価格 | $599（Pro、3 ドメイン）／$1,100（Enterprise、30 ドメイン） | Enterprise は要見積り（年額 4 桁／開発者あたりが標準） | $1,400／開発者／年（買い切り + 1 年サポート） |
| ライセンス形態 | 買い切り | サブスク | 買い切り + 任意の更新 |
注釈をいくつか。
- AG Grid の無料ティアは本当に寛容です。 AG Grid Community は MIT ライセンスで、ほとんどのアプリが必要とする機能を備えています。読み取り中心のデータグリッド用途では、予算の有無にかかわらず正しい選択肢になることが多いでしょう。
- Handsontable のライセンスは 2022 年後半に変更されました。 バージョン 13 以上は商用利用に商用ライセンスが必要です。何年も前に Handsontable を採用した場合は、現在のバージョンを確認してください。
- バンドルサイズ列はオーダー感です。 実際のサイズはツリーシェイクされる機能セットに依存します。3 つともそれなりにツリーシェイクが効きますが、AG Grid Enterprise が最大なのは含む機能数のためです。
ReoGrid Web が向いているケース
ブラウザにスプレッドシート形状の UI が必要で、かつ以下のいずれかに該当する場合:
- 本物の Excel 互換性が必要。 ユーザーが
.xlsxをアップロードし、見た目どおりにレンダリングされることを期待する。ユーザーが.xlsxをダウンロードし、Excel で “読めない内容が見つかりました” の警告なしに開けることを期待する。表示形式の条件節、tint 付きテーマカラー、アウトライングルーピングのラウンドトリップ、Excel シリアル日付のオフバイワン問題など、地味なディテールに弊社は何年も投資してきました — 弊社の .NET 版は 10 年以上これを続けています。 - 仮想化 DOM ツリーではなく単一の Canvas が欲しい。 Canvas は、結合・ウィンドウ枠固定・条件付き書式を組み合わせたときに仮想化グリッドを噛みつくセルごとの DOM コストを回避します。詳しくは 昨日の 10,000 行 Canvas 描画の記事 を参照。
- サブスクではなく、買い切りで寛容なライセンスが欲しい。 Pro と Enterprise はいずれも買い切りで、3 ヶ月のサポートが付属します。Lite は 100×26 の上限内であれば商用利用も含めて完全無料です。
- フットプリントが小さい方が良い。 数式エンジン＋xlsx I/O＋Canvas レンダラー＋React／Vue ラッパーすべて込みで Pro のフルバンドルが 300KB 未満というのは、関連機能を有効にすると他選択肢より明確に小さいサイズです。
- .NET 版も必要。 弊社の .NET WinForms／WPF 版は NuGet で 180,000+ ダウンロードの実績があります。xlsx ファイルは両エディション間でロスレスにラウンドトリップします。デスクトップアプリと Web アプリの両方でスプレッドシートを共有する必要があるなら、これは珍しい組み合わせです。
ReoGrid Web が向いていないケース
正直に判断してください。
- 作っているのがスプレッドシートではなくデータグリッドの場合。 セルがクエリ結果で、フィルタリングが主要機能で、10 万行以上をサーバーからストリームするなら、AG Grid を使ってください。スプレッドシートのメタファーはその問題に対して間違った形状です。
- ピボットテーブルビルダーが必要な場合。 弊社にはありません。AG Grid Enterprise と Handsontable には両方とも存在します。
- 市場最大の数式ライブラリが必要な場合。 Handsontable の HyperFormula は 385 関数を備えています。弊社は 109 関数 — これは業務文書として Excel 互換に必要な実用フロアだと考えてサイジングしていますが、統計／金融系のロングテール関数が必要なら HyperFormula のカタログの方が大きいです。
- 無限／サーバーサイド行モデルが必要な場合。 AG Grid の Enterprise 行モデルが正解です。弊社はそこには参戦していません。
移行パターン
現在 Handsontable を使っていて、ライセンス変更にぶつかっているか、xlsx 忠実度を求めているなら、API 変換はかなり機械的です。
| Handsontable | ReoGrid Web |
|---|---|
new Handsontable(el, { data }) | createReogrid({ workspace: el }) |
hot.setDataAtCell(r, c, v) | worksheet.cell(r, c).setValue(v) |
hot.getDataAtCell(r, c) | worksheet.cell(r, c).value |
mergeCells: [...] | worksheet.range('A1:B2').merge() |
cells: (r, c) => ({ className }) | worksheet.cell(r, c).setStyle({ ... }) |
formulas: { engine: hf } | 組み込み — setCellInput(r, c, '=...') を使う |
実質スプレッドシート形状のもの（編集可能セル、数式、xlsx 入出力）に AG Grid を使っているなら、AG Grid のセルエディタや valueGetter／valueSetter の間接化を経由するよりも、スプレッドシート API の方がずっと素直に書けるはずです。
推奨
まずユースケースで選び、次にライセンス条件で選ぶ。機能リストは遠く 3 番目です — 3 つともすでに、ほとんどの「やりたいこと」は十分にこなせる成熟度に達しています。
- クエリ結果 UI を作る場合: まず AG Grid Community。サーバーサイド行モデルやピボットが必要なら AG Grid Enterprise。
- 編集可能なスプレッドシートドキュメント UI を作る場合: まず ReoGrid Web Lite（npm で無料）を試してみてください — 5 分でインストールできます。100×26 の上限が制約になるなら Pro でその制約を解除できます。385 個の数式関数やピボットテーブルが必須なら Handsontable を検討してください。
弊社は改善を続けます。現在地は v1.2 リリース記事 にまとめています。今後のロードマップには volatile 関数（INDIRECT、OFFSET）、追加のセル種別、そして皆様から送られてくる実ファイルに駆動された継続的な xlsx 忠実度の改善が含まれます。
これでローンチシリーズは終わりです。読んでいただきありがとうございました — 加えるべき比較観点や、貴社のユースケースに足りていない機能があれば、お知らせください。