ReoGrid Web は、Excel グレードの編集体験 — 数式エンジン、xlsx I/O、Canvas レンダラー — をすべて単一の依存ゼロパッケージにまとめた JavaScript／TypeScript 製スプレッドシートライブラリです。React／Vue 用のラッパーと無料の Lite ティアを npm で提供しており、10 年以上磨き込まれてきた弊社 .NET 版と同じエンジンをブラウザ向けに作り直したものです。
v1.2 は正式リリース以降 3 度目の機能リリースで、数式まわりと編集 UX を「本当に Excel のように感じられる」水準に押し上げました。109 個の組み込み関数、数式テキスト内の色分け参照と、それに対応するグリッド上のハイライト、ハイライトのドラッグ移動・ドラッグサイズ変更、Excel スタイルのフィルハンドル。内部では、Canvas レンダラーがスクロール 1 フレームあたりに発行する描画 API 呼び出しを約 70% 削減しています。
この記事では v1.0 以降の変更点と新機能を一通り紹介します。
数式ライブラリ: 109 関数
Lite ティアには算術演算のみの数式エンジンが含まれます。v1.2 の Pro ティアでは、以下のカテゴリにわたる 109 個の Excel 互換組み込み関数 を利用できるようになり、インポートした .xlsx ファイル内の数式がそのまま動作します。
| カテゴリ | 関数の例 |
|---|---|
| 検索／参照 | VLOOKUP, HLOOKUP, INDEX, MATCH, XLOOKUP, XMATCH |
| 複数条件集計 | SUMIFS, COUNTIFS, AVERAGEIFS, SUMPRODUCT |
| 統計 | MEDIAN, LARGE, SMALL, RANK, CEILING, FLOOR, MROUND |
| 日付 | TODAY, NOW, YEAR, MONTH, DAY, WEEKDAY, EDATE, EOMONTH, DATEDIF |
| 数学／三角 | EXP, LN, LOG, SIN, COS, TAN, ASIN, ACOS, ATAN, ATAN2, RAND, RANDBETWEEN |
| 文字列 | SEARCH, EXACT, PROPER, CHAR, CODE |
| セル参照 | ROW, COLUMN, ROWS, COLUMNS, ADDRESS |
| 論理 | IF, IFS, SWITCH, AND, OR, NOT |
引数の順序は Excel に準拠しており、ハマりやすい挙動も Excel に合わせています。Excel の ATAN2(x, y) は JavaScript の Math.atan2(y, x) と引数順が逆ですが、本ライブラリは Excel に従います。EDATE は移動先の月の末日に丸めるため、EDATE("2026-01-31", 1) は正しく 2 月 28 日（うるう年なら 2 月 29 日）を返します。
関数の完全なリファレンスは 数式関数ドキュメント を参照してください。
Excel ライクな数式参照編集
v1.2 で最も力を入れた UX 改善は、数式エディタそのものです。セルに = を入力すると、次のような挙動になります。
- 入力するすべての参照（
A1、B2:D10など）が、共有の 8 色パレットから割り当てた色で数式テキスト内に インライン色分け されます。 - グリッド側でも、参照範囲を囲む 破線の矩形 が同色で描かれます。参照範囲が結合セルにかかる場合、ハイライトは結合範囲全体を含むように拡張されます。
- 別のセルをクリック すると、そのセルのアドレスがキャレット位置に挿入されます。ドラッグすれば範囲に拡張されます。マウスアップ後もポイントモードは維持され、2 回目のクリックで直前に挿入した参照を上書きできます — Excel と同じ挙動です。
- 破線をドラッグ すれば範囲を平行移動できます。コーナーグリップをドラッグ すればサイズを変更できます。数式テキスト中のすべての出現箇所がそれに合わせて書き換えられ、各トークンの絶対参照（
$）フラグも保持されます。サイズ変更ではセル中心が境界となり、ポインタがセルの中点を超えた瞬間に範囲への出入りが切り替わります — Excel および弊社 .NET 版と同じ挙動です。
これにより、=SUMIFS(D2:D100, B2:B100, "Active", C2:C100, ">100") のような数式の構築を、ほぼタイピングなしでマウス操作中心に行えるようになります。
オートフィル（フィルハンドル）
選択範囲の右下に表示される小さな四角をドラッグして、値を上下左右に拡張できるようになりました。
- 単一セル: 値をそのまま敷き詰めます。
- 2 つ以上の数値セル: 等差数列として外挿します（
1, 2→3, 4, 5）。 - 日付形式のセル 1 つ: 1 ステップごとに 1 日加算します。
- 数式セル: Excel と同じく相対参照をシフトします。絶対参照
$はそのまま保持されます。
スタイル、表示形式、セル種別はすべて新しい範囲に伝播します。すべての操作は undo／redo に対応しており、Cmd/Ctrl+Z で以前の値（フィル前に別の値が入っていたセルも含む）を完全に復元できます。
グローバルに無効化するには ReogridOptions.autoFill: false、インスタンス単位なら worksheet.setAutoFillEnabled(false) を使います。プログラム的に利用する場合は AutoFillAction と computeAutoFillValues() が公開されています。
React／Vue ラッパーの慣用的なイベント Props
これまでは、ワークシートのイベントをフックするにはグリッドの準備完了後に worksheet.on*() を命令的に呼ぶ必要がありました。v1.2 では、これらが React の Props および Vue の emit として正式に公開されます。
import { Reogrid } from '@reogrid/pro/react';
<Reogrid
onReady={({ worksheet }) => worksheet.cell('A1').setValue('Hello')}
onSelectionChange={(range) => console.log('selected', range)}
onCellValueChange={({ row, column, newValue }) => save(row, column, newValue)}
onBulkCellsChange={(cells) => bulkSave(cells)}
onScrollChange={({ x, y }) => syncMinimap(x, y)}
onViewportSizeChange={(size) => recomputeLayout(size)}
onStructureChange={() => invalidateRowIndex()}
style={{ width: '100%', height: 500 }}
/>コールバックは ref で保持されるため、親の再レンダリングをまたいでも購読は維持され、常に最新のクロージャが呼び出されます。Vue ラッパーには同等の emit があります: ready、selection-change、cell-value-change、bulk-cell-change、scroll-change、viewport-size-change、structure-change。
レンダラーのパフォーマンス: 1 フレームあたりの Canvas 呼び出しを約 70% 削減
Canvas 描画パスに、ctx.font・ctx.fillStyle・measureText のフレーム単位キャッシュと、折り返し／複数行テキストレイアウトのフレーム単位キャッシュを追加しました。1200×100 セルのシート上でスクロール中のフレーム単位の計測値です。
| API | Before | After | 差分 |
|---|---|---|---|
ctx.font= | 129 | 34 | −74% |
ctx.fillStyle= | 179 | 46 | −74% |
ctx.measureText() | 126 | 35 | −72% |
save() / restore() | 122 | 85 | −30% |
折り返しのない 1 行テキストはレイアウトキャッシュをまったく経由しない高速パスを通ります。ユーザー視点での効果としては、これまで密なシートで一時的に下がっていたスクロール時のフレームレートが 60fps に張り付くようになり、バックグラウンドタブにある場合の CPU 使用率も明確に下がりました。
初回描画のさらに深いパフォーマンスについては、v1.1 で追加されたチャンク式 xlsx ローダー（{ chunked: true }）が、大きなファイルでのユーザー視点のフリーズを数秒のブロックから 16〜30ms のスライスに縮めます。これについては明日の記事で詳しく扱います。
条件付き書式: 辺ごとの罫線オーバーライド
条件付き書式のルールに border ペイロードを持たせ、ルールに合致するセルで手動の罫線を辺単位で上書きできるようになりました。
worksheet.addConditionalFormat({
range: 'D2:D100',
rule: { type: 'cellIs', operator: 'greaterThan', value: 1000 },
style: { color: '#16a34a', bold: true },
border: { right: { style: 'solid', color: '#16a34a', width: 2 } },
});これらは xlsx の <dxf><border> 経由でラウンドトリップするため、Excel でロード→保存しても書式が維持されます。
ReoGrid JSON: ロスレスなネイティブ形式
v1.1 で導入され、v1.2 でトップレベルから再エクスポートされた writeReoGridJson / readReoGridJson は、ワークシートの状態を完全に — 値、スタイル、罫線、結合、条件付き書式、フィルタ、ウィンドウ枠固定、アウトライン、セル種別、保護、交互行などすべて — 自己記述的な JSON ドキュメントとして表現します。xlsx ほど重い形式が不要な場面、たとえばオートセーブ、テンプレート保存、バックエンド連携などに活用できます。
import { writeReoGridJson, readReoGridJson } from '@reogrid/pro';
const doc = writeReoGridJson(worksheet);
await fetch('/api/save', { method: 'POST', body: JSON.stringify(doc) });
// あとで…
const saved = await fetch('/api/load').then(r => r.json());
readReoGridJson(worksheet, saved);使い始める
Lite は npm から利用可能で、ライセンスキーは不要です。
npm install @reogrid/liteimport { Reogrid } from '@reogrid/lite/react';
export default function App() {
return <Reogrid style={{ width: '100%', height: 500 }} />;
}Pro では 109 関数の数式ライブラリ、xlsx エクスポート、フルセットのセル種別、ドメイン認証が追加されます。ティアごとの機能比較は 料金ページ を、ブラウザで上記の機能を試したい方は ライブデモ をご覧ください。
このリリースシリーズの残り 4 記事では、それぞれ個別の機能を掘り下げます。10,000 行の Canvas 描画、ブラウザ内での実際の Excel ファイル読み込み、編集可能な React 製インボイス、そして ReoGrid Web と他選択肢との比較です。