ReoGrid ReoGrid Web

ReoGrid Web vs Luckysheet vs x-spreadsheet — JavaScript スプレッドシートの選び方

· unvell team
ReoGrid Web vs Luckysheet vs x-spreadsheet — JavaScript スプレッドシートの選び方

ブラウザで スプレッドシート を作るなら — データグリッドではなく、編集可能なセル・数式・Excel ラウンドトリップを備えたもの — JavaScript ライブラリの候補は多くありません。繰り返し名前が挙がるのは3つ。Luckysheetx-spreadsheet、そして ReoGrid Web です。(データグリッド — サーバーページングの結果セット、ログビューア、管理テーブル — については別記事 ReoGrid vs AG Grid vs Handsontable を参照してください。そこでは AG Grid の方が適しています。)

これは ReoGrid チームによる比較です。他が優れている点については公平に書きます。


要点(TL;DR)

こういう場合は…これを選ぶ
最初から機能が最も豊富で、MIT ライセンス、DOM ベースの大きなバンドルも許容できるLuckysheet
シンプルな編集可能グリッド向けに小さくて改造しやすいもので、足りない部分は自分で埋めるx-spreadsheet
高い xlsx 再現性、キャンバスの性能、メンテナンスされたライブラリ、商用サポート — そして無料ティアReoGrid Web

3つを一覧で

ReoGrid WebLuckysheetx-spreadsheet
描画キャンバスDOMキャンバス
ライセンスLite 無料/Pro 商用MITMIT
フレームワーク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 互換性を第一級の目標として扱います。セルスタイル・結合セル・罫線・表示形式・条件付き書式・画像が loadXlsxsaveAsXlsx のラウンドトリップを生き残ります。

上記2つとの違い:

  • 無料ティアを持つ商用製品です。 @reogrid/lite は無料(100 行 × 26 列、算術数式)。@reogrid/pro は制限を外し、組み込み関数・並べ替え/フィルター・ウィンドウ枠の固定・条件付き書式・xlsx エクスポートを追加します。これが活発なメンテナンスと商用サポートを支えます — OSS のみの選択肢が約束できないものです。
  • 公式の React・Vue ラッパーに加え、どこでも動くクリーンなバニラ API(Angular を含む)。
  • xlsx 再現性は看板機能であり、アドオンではありません。

率直なトレードオフ: Pro は有料です。プロジェクトが厳密に MIT/オープンソースで、商用依存を取れないなら、Luckysheet か x-spreadsheet が正解です。メンテされ、サポートされ、キャンバスで速く、本格的な Excel ラウンドトリップを備えたスプレッドシート — しかも開始用の無料ティア — が欲しいなら、ReoGrid Web が適します。


選び方

  1. 無料・MIT で、機能を最大化したい? → Luckysheet(まずメンテ状況を確認)。
  2. 小さく、自分で拡張する? → x-spreadsheet。
  3. xlsx 再現性・性能・メンテ・サポートが必要? → ReoGrid Web。

ライブデモでキャンバス描画と Excel ラウンドトリップを実際に確かめるか、はじめにガイドをご覧ください。ブラウザで xlsx を閲覧するだけなら、無料オンライン XLSX ビューアがあります。

ReoGrid Web を試してみる

React/Vue 向けの Canvas ベース Excel 互換スプレッドシートコンポーネント。 Lite は無料 — npm install 一発で始められます。

関連記事

ニュースレター

開発の最新情報をお届けします

新しいリリース・機能追加・お知らせをいち早く受け取るには、
メーリングリストにご登録ください。