ReoGrid Web 1.2.1 リリース — 数式・編集機能を大幅に強化

UNVELL株式会社は、Webアプリ向けExcelライクスプレッドシートライブラリ ReoGrid Web の最新版 1.2.1 をリリースしました。3月の正式リリース以降に積み重ねてきた 1.2.x シリーズの機能強化により、数式まわりと編集UXが「本当にExcelのように感じられる」水準へと進化しています。公開APIに破壊的変更はありません。

1.2.1 のハイライト

1.2.1 では、数式編集時にグリッド上へ表示される 参照範囲ハイライトのドラッグ操作 を強化しました。

• 破線のドラッグで範囲を移動: 参照矩形の破線部分をドラッグすると、範囲全体を平行移動できます。
• コーナーグリップのドラッグでサイズ変更: 矩形の四隅のグリップをドラッグすると範囲をリサイズできます。セルの中心が境界となり、ポインタがセルの中点を超えた瞬間に範囲への出入りが切り替わります（Excelおよび弊社.NET版と同じ挙動）。
• 数式テキスト中に同じ参照が複数回現れる場合も、すべての出現箇所が連動して書き換えられ、各トークンの絶対参照（$）フラグも保持されます。
• ハイライトの四隅にはリサイズ用の小さな色付き四角を描画し、ホバー時には move / nwse-resize / nesw-resize カーソルを表示するため、操作箇所がひと目で分かります。

これにより、マウス操作だけで数式の参照範囲を直感的に調整できるようになりました。

1.2.x シリーズで強化した主な機能

1.2.1 に至る 1.2.x シリーズでは、以下の大型機能を追加しています。

数式ライブラリを109関数へ拡張

検索・参照、複数条件集計、日付、数学・三角、統計、文字列、セル参照など幅広いカテゴリにわたり、Excel互換の組み込み関数を109種類 サポートします。インポートした .xlsx ファイル内の数式もそのまま動作します。

引数の順序やハマりやすい挙動もExcelに準拠しています。たとえばExcelの ATAN2(x, y) はJavaScriptの Math.atan2(y, x) と引数順が逆ですが、本ライブラリはExcelに従います。

Excelライクな数式参照編集

セルに = を入力して数式を編集すると、入力したすべての参照（A1、B2:D10 など）が共有の8色パレットで インライン色分け され、グリッド側にも同色の 破線の矩形 が描かれます。別のセルをクリックするとそのアドレスがキャレット位置に挿入され、ドラッグで範囲に拡張できます。参照が結合セルにかかる場合、ハイライトは結合範囲全体を囲むように拡張されます。

オートフィル（フィルハンドル）

選択範囲の右下に表示される小さな四角をドラッグして、値を上下左右に拡張できます。

• 単一セル: 値をそのまま敷き詰めます。
• 2つ以上の数値セル: 等差数列として外挿します（1, 2 → 3, 4, 5）。
• 日付形式のセル: 1ステップごとに1日加算します。
• 数式セル: Excelと同じく相対参照をシフトし、絶対参照 $ は保持します。

スタイル・表示形式・セル種別も新しい範囲に伝播し、undo/redoにも完全対応しています。

React／Vue向けの慣用的なイベントProps

ワークシートのイベントを、Reactでは Props、Vueでは emit として直接受け取れるようになりました。onSelectionChange・onCellValueChange・onScrollChange などを宣言的に記述でき、worksheet.on*() を命令的に呼ぶ必要がありません。

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)}
  style={{ width: '100%', height: 500 }}
/>

条件付き書式の辺ごとの罫線オーバーライド

条件付き書式のルールに border ペイロードを持たせ、ルールに合致したセルの罫線を辺単位（右／上／下／左）で上書きできるようになりました。xlsx の <dxf><border> 経由でラウンドトリップするため、Excelでロード→保存しても書式が維持されます。

描画エンジンの高速化（Canvas呼び出しを約70%削減）

Canvas描画パスに ctx.font・ctx.fillStyle・measureText、および折り返し／複数行テキストレイアウトのフレーム単位キャッシュを追加し、テキストの多いシートでスクロール時のCanvas API呼び出しを 1フレームあたり約70%以上削減 しました。密なシートでもスクロール時のフレームレートが安定します。

使い始める

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

npm install @reogrid/lite

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

• 製品サイト（日本語）
• ライブデモギャラリー
• 資料請求・お問い合わせ
• npmパッケージ (@reogrid/lite)