ブラウザで スプレッドシート を作るなら — データグリッドではなく、編集可能なセル・数式・Excel ラウンドトリップを備えたもの — JavaScript ライブラリの候補は多くありません。繰り返し名前が挙がるのは3つ。Luckysheet、x-spreadsheet、そして ReoGrid Web です。(データグリッド — サーバーページングの結果セット、ログビューア、管理テーブル — については別記事 ReoGrid vs AG Grid vs Handsontable を参照してください。そこでは AG Grid の方が適しています。)
これは ReoGrid チームによる比較です。他が優れている点については公平に書きます。
要点(TL;DR)
| こういう場合は… | これを選ぶ |
|---|---|
| 最初から機能が最も豊富で、MIT ライセンス、DOM ベースの大きなバンドルも許容できる | Luckysheet |
| シンプルな編集可能グリッド向けに小さくて改造しやすいもので、足りない部分は自分で埋める | x-spreadsheet |
| 高い xlsx 再現性、キャンバスの性能、メンテナンスされたライブラリ、商用サポート — そして無料ティア | ReoGrid Web |
3つを一覧で
| ReoGrid Web | Luckysheet | x-spreadsheet | |
|---|---|---|---|
| 描画 | キャンバス | DOM | キャンバス |
| ライセンス | Lite 無料/Pro 商用 | MIT | MIT |
| フレームワーク | React, Vue, バニラ | バニラ(ラッパーはコミュニティ) | バニラ |
| 数式 | 組み込みエンジン(Pro) | 充実 | 基本のみ |
| xlsx 入出力 | 両方・高再現性(Pro) | インポート+エクスポート | 限定的/アドオン経由 |
| バンドルサイズ | 小(単一キャンバス) | 大 | 非常に小 |
| 商用サポート | あり | コミュニティのみ | コミュニティのみ |
| 活発なメンテ | あり | 鈍化(後述) | 鈍化 |
(機能やプロジェクトの活動状況は時とともに変わります。採用前に各プロジェクトの現状を確認してください。)
Luckysheet — 最も完成度が高いが、メンテに注意
Luckysheet は3つの中で最も機能が豊富です。見た目も挙動も Google スプレッドシートにかなり近く、深い数式ライブラリ、ピボットテーブル、グラフ、データ検証、リッチな xlsx 入出力を備えます。ほぼ完成形のオンラインスプレッドシートを差し込みたく、MIT 限定で良いなら魅力的です。
注意点が2つ。
- DOM ベースで大きい。 数千のセルを DOM ノードとして描画すると、単一キャンバスに比べてメモリとスクロール性能のコストがかかります。バンドルも重めです。
- 開発活動が鈍化している。 元のチームは、より新しい商用裏付けのあるエンジン(Univer)へ軸足を移しています。Luckysheet は今も動きますが、長期的な上流の修正が重要なら、採用前にリポジトリの最近の活動を確認してください。
Luckysheet が向くのは: 今日時点で機能を最大化したく、MIT 限定・コミュニティサポートで問題なく、あなたのデータ規模で DOM 性能が許容できる場合。
x-spreadsheet — 小さく、キャンバスベース、何でも自前で
x-spreadsheet は、非常に小さなパッケージのキャンバス描画スプレッドシートです。ReoGrid と同様に単一キャンバスへ描くため、スクロールは滑らかでフットプリントは最小。スプレッドシートを自分で所有したく、多くを必要としないなら良い出発点です。
トレードオフは範囲です。数式サポートは基本的、xlsx 再現性は限定的で、期待する多くの機能(リッチな表示形式、条件付き書式、堅牢な結合/罫線のラウンドトリップ)は結局自分で作ることになります。メンテナンスの活動も控えめです。
x-spreadsheet が向くのは: 最小限の編集可能グリッドが必要で、小さな依存を重視し、自分で拡張するのを厭わない場合。
ReoGrid Web — メンテされ、キャンバス、xlsx 忠実、無料ティアあり
ReoGrid Web は単一の <canvas> に描画します(だから数万行でも滑らかさを保てます — 60fps を実現した方法を参照)。そして Excel 互換性を第一級の目標として扱います。セルスタイル・結合セル・罫線・表示形式・条件付き書式・画像が loadXlsx → saveAsXlsx のラウンドトリップを生き残ります。
上記2つとの違い:
- 無料ティアを持つ商用製品です。
@reogrid/liteは無料(100 行 × 26 列、算術数式)。@reogrid/proは制限を外し、組み込み関数・並べ替え/フィルター・ウィンドウ枠の固定・条件付き書式・xlsx エクスポートを追加します。これが活発なメンテナンスと商用サポートを支えます — OSS のみの選択肢が約束できないものです。 - 公式の React・Vue ラッパーに加え、どこでも動くクリーンなバニラ API(Angular を含む)。
- xlsx 再現性は看板機能であり、アドオンではありません。
率直なトレードオフ: Pro は有料です。プロジェクトが厳密に MIT/オープンソースで、商用依存を取れないなら、Luckysheet か x-spreadsheet が正解です。メンテされ、サポートされ、キャンバスで速く、本格的な Excel ラウンドトリップを備えたスプレッドシート — しかも開始用の無料ティア — が欲しいなら、ReoGrid Web が適します。
選び方
- 無料・MIT で、機能を最大化したい? → Luckysheet(まずメンテ状況を確認)。
- 小さく、自分で拡張する? → x-spreadsheet。
- xlsx 再現性・性能・メンテ・サポートが必要? → ReoGrid Web。
ライブデモでキャンバス描画と Excel ラウンドトリップを実際に確かめるか、はじめにガイドをご覧ください。ブラウザで xlsx を閲覧するだけなら、無料オンライン XLSX ビューアがあります。