ReoGrid ReoGrid Web

ReoGrid Web v1.3 を発表 — マルチシートワークブックとクロスシート数式

· unvell team
ReoGrid Web v1.3 を発表 — マルチシートワークブックとクロスシート数式

ReoGrid Web は、Excel グレードの編集体験 — 数式エンジン、xlsx I/O、Canvas レンダラー — をすべて単一の依存ゼロパッケージにまとめた JavaScript/TypeScript 製スプレッドシートライブラリです。React/Vue 用のラッパーと無料の Lite ティアを npm で提供しています。

v1.3 はローンチ以来もっとも構造的な目玉リリースです:グリッドが N 枚のワークシートからなるワークブックになりました。標準のシートタブバーを備え、各シートが独自のデータ・選択・固定・Undo 履歴を保持し、ワークブック全体が単一の .xlsx を読み書きします。そして複数シートを実際に役立たせる肝 — 数式が他シートのセルを参照できるようになりました(=Sheet1!A1)。

すべて追加的な変更で、公開 API に破壊的変更はなく、マルチシートは Lite / Pro 両対応です。


グリッドはワークブックになった

すべてのインスタンスが workbook コーディネーターを公開します。最初のシートは自動生成され、追加は 1 行で済みます。

import { createReogrid } from '@reogrid/lite';

const grid = createReogrid({ workspace: '#app', initialSheetName: 'Sales' });

const expenses = grid.workbook.addSheet('Expenses').worksheet;
const summary  = grid.workbook.addSheet('Summary').worksheet;

grid.worksheet.cell('A1').setValue('Q1'); // grid.worksheet は常にアクティブシート

下部のタブバーは、追加・名前変更・ドラッグ並べ替え・表示/非表示・タブ色に対応します。同じ操作はプログラムからも実行できます:

const wb = grid.workbook;
wb.renameSheet(0, 'FY26 Sales');
wb.moveSheet(2, 0);
wb.setSheetTabColor(0, '#2563eb');
wb.setActiveSheet(1);

各シートは独自の Undo 履歴を持ち、Cmd/Ctrl+Z がシートをまたぐことはありません。grid.worksheetgrid.actionManager はアクティブシートに追従するゲッターになったため、既存のシングルシートコードはそのまま動作します。

シングルシート埋め込みでの見た目の変化が 1 点:デフォルトで高さ約 28px のシートタブバーが表示されます。非表示にするには createReogrid({ showSheetTabs: false }) を渡してください。


クロスシート数式参照

これがワークブックを「グリッドの寄せ集め」以上にする機能です。あるシートの数式が、別のシートのセルを読み取れます:

summary.cell('B2').value = "='Tokyo'!E6";        // 他シートの単一セル
summary.cell('B3').value = '=SUM(Osaka!B2:B5)';  // クロスシート範囲の集計
summary.cell('B4').value = '=VLOOKUP(A4, Master!A1:C100, 3)';
summary.cell('B5').value = '=シート1!A1';        // 非 ASCII 名は引用符不要

参照は大文字小文字を区別せず解決され、ライフサイクルは Excel 互換です:

  • シート名を変更すると、全シートの参照式が書き換わります。
  • シートを削除すると、その参照は #REF! になります。
  • あるシートで行・列を挿入/削除すると、他シートからの参照がシフトします。
  • クロスシートの循環参照は検出され、#CYCLE! として報告されます。

集計関数と LOOKUP 系一式がクロスシート範囲に対応するため、サマリーシートを =SUM(Region!...) の行だけで構築し、元シートを編集するたびにライブで更新させられます。


ワークブック全体の入出力

インスタンスの I/O メソッドは、シートを一括で扱うようになりました。

// ワークブック全体を 1 つの .xlsx へエクスポート
grid.saveAsXlsx({ filename: 'report.xlsx' });

// File / URL / ArrayBuffer から全シートを読み込み
await grid.loadFromFile(file);
await grid.loadFromUrl('/data/book.xlsx');

// ワークブック全体の JSON シリアライズ
const doc = grid.toJson();
grid.loadJson(doc);

ワークブックのビュー状態は xlsx を往復します:アクティブシート(<workbookView activeTab>)、シートごとの非表示状態(<sheet state="hidden">)、タブ色(<sheetPr><tabColor>)がエクスポート時に書き出され、読み込み時に復元されます。マルチシート xlsx インポートも高速化し、ファイルを一度だけパースして全シートで再利用します(従来はシートごとに再パース)。


一度購読すれば、アクティブシートに追従

従来は、選択や値の変更に反応するにはアクティブシートが変わるたびにリスナーを張り替える必要がありました。v1.3 では、アクティブシートのイベントを転送し、切り替え時に自動で張り替わるインスタンスレベルイベントを追加しました:

grid.onSelectionChange((range) => updateInspector(range));
grid.onCellValueChange(({ row, column, value }) => autosave(row, column, value));

インスタンスで利用可能:onSelectionChangeonCellValueChangeonBulkCellsChangeonScrollChangeonViewportSizeChangeonStructureChangeonContextMenu

React/Vue ラッパーはインスタンス経由でワークブックを公開し、シートイベントを追加しています:

// React
<Reogrid
  onReady={(grid) => grid.workbook.addSheet('Data')}
  onActiveSheetChange={(index) => console.log('active', index)}
  onSheetsChange={() => console.log('sheets changed')}
/>

Vue ラッパーは既存イベントに加えて active-sheet-changesheets-change を発行します。


試してみる

体感する最短ルートは マルチシートワークブックのデモ です:3 つの拠点シート(Tokyo・Osaka・Nagoya)と、クロスシート数式だけで構築したサマリーシート。どの拠点の数値を編集してサマリーに戻っても、合計がシートをまたいで再計算されます。

Lite は npm で公開、ライセンスキー不要です:

npm install @reogrid/lite

Pro は 109 関数の数式ライブラリ、xlsx エクスポート、全セルタイプ、ライセンスドメイン認証を追加します。v1.3 の完全な変更履歴はリリースノート、API 全体はマルチシートのドキュメント、ティア比較は料金表をご覧ください。

ReoGrid Web を試してみる

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

関連記事

ニュースレター

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

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