ReoGrid Web 1.3 リリース — マルチシートワークブックとクロスシート数式に対応

UNVELL株式会社は、Webアプリ向けExcelライクスプレッドシートライブラリ ReoGrid Web の最新版 1.3 をリリースしました。3月の正式リリース以降でもっとも構造的な目玉リリースです。1枚のグリッドが、複数のワークシートを束ねる「ワークブック」へ進化しました。公開APIに破壊的変更はなく、マルチシート機能は Lite／Pro 両エディションでご利用いただけます。

1.3 のハイライト

これまでの ReoGrid Web は「1インスタンス＝1シート」でした。1.3 では、各インスタンスが複数のワークシートを束ねる ワークブックコーディネーター を公開します。Excelと同じく下部にシートタブバーが表示され、各シートが独自のデータ・選択・固定・Undo履歴を保持します。

そして、複数シートを実際に役立たせる肝となる機能 ── 数式が他シートのセルを参照できる（=Sheet1!A1）ようになりました。

グリッドが「ワークブック」になった

すべてのインスタンスが 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.worksheet と grid.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 のインポートも高速化し、ファイルを 一度だけ パースして全シートで再利用します（従来はシートごとに再パース）。

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

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

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

インスタンスで利用可能なイベント: onSelectionChange、onCellValueChange、onBulkCellsChange、onScrollChange、onViewportSizeChange、onStructureChange、onContextMenu。

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

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

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

使い始める

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

Lite版はライセンスキー不要で、npmからすぐにお試しいただけます。

npm install @reogrid/lite

Pro版では109関数の数式ライブラリ、xlsxエクスポート、フルセットのセル種別などが利用可能になります。