ReoGrid ReoGrid Web

リリースノート

@reogrid/lite および @reogrid/pro の主な変更履歴。

フォーマットは Keep a Changelog に準拠し、 バージョニングは セマンティックバージョニング に従います。

v1.2.0

機能リリースです。数式関数を 32 個から 109 個へ大幅拡充、セルエディターに Excel 風の色分けされた数式参照編集（クリックでのセル挿入）を追加、選択範囲にドラッグオートフィル用のハンドルを実装、条件付き書式ルールでサイドごとの罫線オーバーライドが可能になりました。React / Vue ラッパーはワークシートイベントをコンポーネント props として公開します。公開 API に破壊的変更はありません。

✨ ハイライト

  • ▸ オートフィル（ドラッグでのフィルハンドル）。 選択範囲の右下に表示される小さな四角をドラッグして、値を下／上／左／右に拡張できます。単一セルのドラッグはタイル状にコピー、2 つ以上の数値セルは等差数列として外挿（1, 2 → 3, 4, 5）、日付書式の単一セルは 1 日ずつ加算、数式は $ 固定参照を保ちつつ Excel と同じように相対参照をシフトします。スタイル・数値書式・セルタイプも伝播し、undo で元に戻せます。
  • ▸ Excel 風の数式参照編集。 数式（= 始まりのセル）を編集中に他のセルをクリックすると、そのセル番地がキャレット位置に挿入され、ドラッグで範囲に拡張できます。式中のユニークな参照ごとに共通パレットから色が割り当てられ、グリッド上の参照範囲も同色の点線矩形で囲まれます。結合セルを含む参照は結合領域全体を囲うように展開されます。
  • ▸ Enter キーで編集開始。 Mac に優しいデフォルト動作 — Enter で編集モードに入る（キャレットは末尾）。Numbers や Excel for Mac と同じ挙動です。F2 も引き続き使えます。
  • ▸ 組み込み数式関数を 109 個に拡充（従来は 32 個）。追加：VLOOKUP / HLOOKUP / INDEX / MATCH / XLOOKUP / XMATCH / ADDRESS、SUMIFS / COUNTIFS / AVERAGEIFS / MAXIFS / MINIFS / SWITCH、日付系 TODAY / NOW / DATE / YEAR / MONTH / DAY / HOUR / MINUTE / SECOND / WEEKDAY / EDATE / EOMONTH / DAYS / DATEDIF、数学 SUMPRODUCT / CEILING / FLOOR / MROUND / MEDIAN / LARGE / SMALL / RANK / EXP / LN / LOG / LOG10 / SIGN / PI / RAND / RANDBETWEEN、三角関数 SIN / COS / TAN / ASIN / ACOS / ATAN / ATAN2、文字列 SEARCH / EXACT / PROPER / CHAR / CODE、情報 ROW / COLUMN / ROWS / COLUMNS。
  • ▸ 条件付き書式でのサイドごとの罫線オーバーライド。 CF ルールに border ペイロードを持たせ、一致セルに対して右・上・下・左の罫線を個別に上書きできます。xlsx の <dxf><border> ラウンドトリップにも対応。
  • ▸ React / Vue ラッパーがワークシートイベントを props として公開。 選択・セル値変更・一括セル変更・スクロール・ビューポートサイズ・構造変更などのイベントを、worksheet.on*() を手動で購読することなく props として渡せます。
  • ▸ reogrid-json I/O をパッケージのメインエントリから再エクスポート。 ReoGrid Studio などワークシートを永続化するホストが、writeReoGridJson / readReoGridJson / parseReoGridJson および ReoGridJsonDocument / JsonWorksheet / JsonCell 型に対して、深いパスを掘ることなく @reogrid/lite / @reogrid/pro から直接アクセスできます。

+ 追加

  • ▸ ReogridOptions.autoFill（デフォルト true）と Worksheet.setAutoFillEnabled() でフィルハンドルを切り替え可能に。
  • ▸ プログラムからオートフィルを利用するための AutoFillAction と computeAutoFillValues() を公開。
  • ▸ Worksheet.setFormulaRefHighlights() / CanvasWorksheet.setFormulaRefHighlights()、およびエディターとグリッドレンダラーで共有する THEME.formulaRefColors パレット。
  • ▸ 条件付き書式の border ペイロード（right / top / bottom / left ごとにスタイルと色を指定）。エンジン評価・レンダラー・xlsx ライターまで一貫対応。
  • ▸ React コンポーネントのイベント props：onSelectionChange、onCellValueChange、onBulkCellValueChange、onScroll、onViewportSizeChange、onStructureChange（onReady に加えて）。
  • ▸ Vue コンポーネントは同じイベントセットを型付きペイロードで emit します。
  • ▸ @reogrid/lite / @reogrid/pro のメインエントリから writeReoGridJson、readReoGridJson、parseReoGridJson、および ReoGridJsonDocument / JsonWorksheet / JsonCell の各ドキュメント型と ReoGridJsonReadOptions / ReoGridJsonWriteOptions のオプション型を再エクスポート。
  • ▸ 10 カテゴリ・109 個すべての組み込み関数を網羅した数式関数リファレンスドキュメント。

~ 変更

  • ▸ エディターの数式参照ハイライトは、参照セル／範囲が結合領域と重なる場合に結合領域全体を囲うように展開されます（Google Sheets ではなく Excel と同じ挙動）。

🐛 修正

  • ▸ オートフィルのホバーカーソルをスクロールコンテナにも適用。フィルハンドルのヒット領域全体で十字カーソルが確実に表示されるようになりました。
  • ▸ 描画キャッシュキーに埋め込まれていた NUL バイトを | に置き換え。まれに発生する計測キャッシュの衝突や文字列処理上の挙動を回避します。

⚡ パフォーマンス

  • ▸ フレーム単位の Canvas ステートキャッシュにより、Book1.xlsx スクロール時の冗長な API 呼び出しを削減：ctx.font= 129 → 34（-74%）、ctx.fillStyle= 179 → 46（-74%）、ctx.measureText() 126 → 35（-72%）、save() / restore() 122 → 85（-30%）。実ブラウザではセルあたりのコストは ctx.font 解析と measureText のシェイピングが支配的なため、大きなシートでのスクロールが目に見えて滑らかになります。
  • ▸ 折り返し／複数行セル向けに layoutPlainTextLines() の結果をフレーム単位でキャッシュ。wrap-text を多用するテキスト中心のシートでは、スクロール時のフレームあたり処理量が大幅に減少します。単一行・折り返しなしのテキストはキャッシュをバイパスする高速経路を通ります。

v1.1.0

xlsx I/O の再現性とロード性能の向上、および .NET 版と同等のアウトライン読み書きを目的としたメンテナンスリリースです。公開 API に破壊的変更はありません。

✨ ハイライト

  • ▸ 大きなファイルの xlsx インポートが約 40% 高速化。 1945×503・約 44 万セルのシートのロードが 6.2 秒から 3.7 秒に短縮。
  • ▸ チャンク非同期ロード（LoadXlsxOptions.chunked）に対応。大きなファイルでも UI が固まらず、初回描画は数秒のフリーズではなく約 40 ms。デフォルトは従来どおり同期。
  • ▸ xlsx アウトラインのラウンドトリップ。 アウトラインレベル・非表示・折りたたみ状態・サマリー方向（上下／左右）の読み書きが、.NET 版と同等に。
  • ▸ ReoGrid JSON ファイル形式。 セル・スタイル・数値書式・リッチテキスト・結合・罫線・サイズ／表示状態・固定・条件付き書式・アウトライン・フィルター・セルタイプ・保護・交互行を、すべて無損失でシリアライズ。
  • ▸ アウトラインサマリー方向。 setRowSummaryBelow / setColumnSummaryRight でトグルボタンをグループの先頭側に切り替え。Excel と同様、アウトラインパネルの最内側に「すべて展開」用のスロットを確保。

+ 追加

  • ▸ LoadXlsxOptions.chunked — false（デフォルト・同期）、true（既定バッチサイズでチャンク）、または { batchSize } でバッチサイズを指定。await ws.loadFromFile(file, { chunked: true })。
  • ▸ Worksheet.loadCellsAsync(cells, { batchSize }) — バッチ間で yield しながら段階的に描画するチャンク非同期版。デフォルトバッチサイズは 5000 セル。
  • ▸ ReoGrid JSON 形式の読み書き API（writer + reader）。
  • ▸ 行・列アウトラインの xlsx 読み書きに対応：レベル、非表示、折りたたみ、サマリー方向。
  • ▸ Worksheet に setRowSummaryBelow(value) / setColumnSummaryRight(value) を追加（undo/redo 対応）。
  • ▸ 「すべて展開」アウトラインレベルボタン（アウトラインパネルの最内側スロット）。
  • ▸ autoFitColumns、autoFitRows、RowHandle / ColumnHandle の autoFit({ mode }) に AutoFitMode（'fit' | 'expandOnly' | 'shrinkOnly'）を追加。デフォルトの 'fit' は従来動作を維持。
  • ▸ 条件付き書式 cellIs ルールで value を value1 のエイリアスとして受け付けるように。between / notBetween では引き続き value2 が必要。両方指定された場合は value1 が優先。
  • ▸ xlsx インポートで、セル塗りつぶしのテーマカラーと tint を解決。
  • ▸ xlsx インポートで、<fgColor> に加え <bgColor> で表現された dxf 塗りつぶしも読み取り可能に。Excel が書き出した条件付き書式の塗りつぶしが正しく反映されます。
  • ▸ Code Runner（コード実行）デモページを追加。

~ 変更

  • ▸ xlsx インポート時、アウトラインと条件付き書式を非同期セル読み込みより前に適用。初回描画から正しい折りたたみ状態で表示され、展開後にスナップする挙動を解消。
  • ▸ Canvas のフォント文字列に常に汎用 sans-serif フォールバックを付与。指定フォントが未インストール（Office 未導入端末で「Aptos Narrow」を参照する xlsx など）でも、italic / bold プレフィックスが失われなくなりました。

🐛 修正

  • ▸ 非表示の行・列に含まれるセルの罫線を描画しないように修正。アウトライングループで A〜J 列を折りたたんだ際に、A 列の左罫線が行ヘッダー境界に縦線として残る不具合を解消。.NET 版と同等の挙動に。
  • ▸ xlsx インポート：プレーン共有文字列に対して cellXf/font で指定された太字が正しく描画されるように。従来はすべてのプレーン共有文字列がリッチテキスト扱いとなり、セルレベルのスタイルが無視されていました。
  • ▸ 数値書式の条件セクション（[=0]、[<>N]、[<N]、[<=N]、[>N]、[>=N]）を値の型と独立して評価するように修正。[=0]"-";m/d/yy のような書式コードで常に先頭セクションが選ばれる不具合を解消。
  • ▸ Excel シリアル日付エポックの 1 日ずれを修正。シリアル 45658 が期待どおり 2025-01-01 に解決されます。
  • ▸ xlsx インポート時に、テーマカラー・tint・<bgColor> で表現された dxf 塗りつぶし（Excel 出力ファイルでは一般的）を解決するように。
  • ▸ プレーンテキスト描画経路で複数単語のフォントファミリー（例：「Aptos Narrow」）が二重引用符で囲まれなくなりました。これにより Canvas 2D が italic / bold プレフィックスを無言で破棄する不具合を解消。
  • ▸ 非表示列の列ヘッダーラベルをスキップするように修正。アウトライングループの折りたたみ時に、次の表示列上にヘッダー文字が二重描画されなくなりました。
  • ▸ 折りたたまれた親により非表示となったグループのアウトライントグルとブラケット線をスキップ。内側のトグルが外側のトグル行に重ね描きされる不具合を解消。
  • ▸ 部分的に重なるアウトライングループを追加した場合、明確なエラーをスローするように。アウトライングループは厳密なツリー構造を成す必要があり、従来は交差により表示されるがクリックできない内側トグルが生成されていました。
  • ▸ 行・列両方のアウトラインパネルがある場合の、コーナー領域レベルボタンの当たり判定をレンダラーと整合。
  • ▸ 不正な条件付き書式 cellIs ルール（value1 欠落）が描画ループをクラッシュさせなくなり、ルールは単に不一致を返すように。
  • ▸ プレイグラウンドデモ：初回クリックで xlsx ファイルを開けるように修正（再描画まで worksheet=null の古いクロージャをツールバーが保持していました）。

⚡ パフォーマンス

  • ▸ xlsx エンドツーエンドロード時間（1945×503・約 44 万セルのテストファイル）：node で 6.2 秒 → 3.9 秒（-37%）。改善はパーサー、セル抽出ウォーク、ワークシート一括ロード経路、数式エンジンの初期再構築に及びます。
  • ▸ インポート時の行オートフィットを遅延評価に変更：先行測定はビューポート内の行のみ、それ以外の行は初めてスクロール表示された時点で測定。Book1 規模のシートで約 100 万件の無駄なセル訪問をスキップ。
  • ▸ チャンクインジェスト（{ chunked: true }）により、ユーザーから見て「固まる」時間を、数秒のフリーズから 16〜30 ms スライスへと分割。

v1.0.0

初の安定版リリース。これ以降、公開 API は semver の下で凍結され、1.0.0 以降の破壊的変更にはメジャーバージョンアップが必要となります。

✨ ハイライト

  • ▸ ハンドルベースの公開 API。 構造・スタイル操作はすべて、フラットなトップレベルメソッドではなくチェーン可能なハンドル（worksheet.row(i)、worksheet.column('B')、worksheet.range('A1:C5').setBold()、worksheet.selection.range?.setStyle(...)）経由で行います。今後はこの API に対して実装してください。
  • ▸ 内部 Manager レイヤリング。 Worksheet はエントリポイントとなり、状態変更は StyleOperations、SizingManager、VisibilityManager、StructureManager に分離。
  • ▸ 数式エンジン。 Lexer → parser → evaluator → 依存グラフ + 32 個の組み込み関数。インポートした xlsx 数式は再評価されます。tests/formula.spec.ts と tests/formula-ext.spec.ts に 151 件の数式テスト。
  • ▸ プラガブルなセルタイプ。 CellTypeHandler レジストリと 8 種類の組み込みタイプ：チェックボックス、ドロップダウン、ボタン、プログレス、レーティング、スパークライン（折れ線・面）、ハイパーリンク。
  • ▸ 条件付き書式（Pro）。 addConditionalFormat、removeConditionalFormat、clearConditionalFormats、getConditionalFormats。
  • ▸ セルツールチップ（Pro）。 setCellTooltip、showCellTooltip、hideCellTooltip、clearCellTooltip。
  • ▸ ブラウザ印刷（Pro）。 スタンドアロン関数 printWorksheet(...)。Lite ではアップグレード促進用の console.warn スタブとして提供。
  • ▸ xlsx ラウンドトリップ。 ReoGrid .NET 版とのクロスバリデーション付きインポート／エクスポート。
  • ▸ Lite / Pro ティアガード。 Lite は 100 行 × 26 列の上限を強制し、Pro 限定メソッドを公開ハンドル層と内部 Manager チョークポイントの両方でスタブ化。
  • ▸ React / Vue ラッパー。 別エントリポイントとして公開：@reogrid/lite/react、@reogrid/lite/vue、@reogrid/pro/react、@reogrid/pro/vue。

+ 追加

  • ▸ worksheet.reset(options?) — ワークシートを破棄せず、その場で空の状態に戻します。値、スタイル、セルタイプ、ヘッダードロップダウン、条件付き書式、セル保護、罫線、結合、非表示の行／列、アウトライン、固定枠、カスタム行／列サイズ、スクロール、選択を消去し、showGridLines を true にリセット。options.rows / options.columns でグリッドサイズも変更可能。CanvasWorksheet はさらに画像、オートフィルター、ツールチップも消去します。xlsx インポーターはロード前リセットとしてこれを使用。
  • ▸ シングル軸サイズ変更用の worksheet.rows.setCount(count) / worksheet.columns.setCount(count)（RowCollection / ColumnCollection）。
  • ▸ @reogrid/lite から printWorksheet を console.warn スタブとして再エクスポート。PRO_METHODS と統一されたガード機構を提供。
  • ▸ PRO_MANAGER_METHODS + applyLiteWorksheetGuards により Manager の裏口（structureManager.insertRows、visibilityManager.setRowHidden 等）を閉鎖。各ハンドルのエントリポイントがティアガードを迂回できなくなりました。
  • ▸ yarn test:perf スクリプトと tests/**/*-benchmark.spec.ts 命名規約。日常の yarn test を高速に保ちつつ、ベンチマークはオプトインで実行。
  • ▸ ワークシートコンテナに ResizeObserver を設置。flex／サイドバー／パネルのレイアウト変更にキャンバスが追従。
  • ▸ requestAnimationFrame ベースの描画バッチング（Worksheet.scheduleRender）。
  • ▸ 大規模データセットを高速にバルクロードする bulkSetCells() API。
  • ▸ Excel 流のキーボード選択：anchor + focus モデル、Shift+クリックでの選択拡張、方向認識する結合ナビゲーション、キーボード／ドラッグ時のオートスクロール。
  • ▸ グリッドにスナップしてリサイズする自動拡張型セルエディター。
  • ▸ tsconfig.json の stripInternal: true により、@internal メンバーが公開 .d.ts に漏れなくなりました。

~ 変更

  • ▸ 破壊的変更： worksheet.setRowCount(n) と worksheet.setColumnCount(n) を削除。代わりに worksheet.rows.setCount(n) / worksheet.columns.setCount(n)、または両軸を一括変更する worksheet.setGridSize(rows, cols) を使用してください。
  • ▸ 破壊的変更： worksheet.rows / worksheet.columns は RowCollection / ColumnCollection ハンドルを指すようになりました。数値カウントは worksheet.rowCount / worksheet.columnCount に移動。
  • ▸ 破壊的変更： worksheet.selection は bounds / isEmpty / activeCell / range / moveTo のみを公開する薄い SelectionHandle に。現在の選択に対するスタイル・値操作は、ハンドル上の委譲メソッドではなく worksheet.selection.range?.setBold() 経由で行ってください。
  • ▸ 破壊的変更： フラットな setSelection*Bold/Italic/Style/... メソッドを削除。ハンドル API（worksheet.range(...).setBold()）に置き換え。
  • ▸ KeyboardController は window ではなくワークシートコンテナでリッスン。同一ページ上の複数グリッドインスタンス間でキーボードイベントが交差しなくなりました。
  • ▸ CellEditor のインラインテキストエリアが position: fixed ではなく、ワークシートコンテナ基準の position: absolute を使用するように。CSS transform を持つ祖先要素、モーダルダイアログ、iframe 内での位置ずれを解消。
  • ▸ 結合セル描画：結合アンカーがスクロールアウトしている場合、最も上・最も左にある表示中セルからコンテンツを描画するように。

🐛 修正

  • ▸ COUNT(1, 1/0, 2) のような直接引数中のエラーが正しく伝播するように（Excel と同等の挙動）。範囲引数内のエラーは従来どおり無視されます。
  • ▸ 行／列削除後の #REF! が正しくキャッシュされるように（評価器の name ノードで EXCEL_ERROR_LITERALS が参照されておらず、#NAME? として表面化していた問題）。
  • ▸ ビッグデータデモにおける bulkSetCells の初回描画経路。
  • ▸ エディターの背景がセルの backgroundColor を尊重するように。
  • ▸ ポインター／エディター操作におけるダブルクリックと編集コミットの各種エッジケース。

− 削除

  • ▸ レガシーなフラット setSelection* API（ハンドル API を使用してください）。
  • ▸ worksheet.setRowCount / setColumnCount（コレクションの setCount を使用してください）。

! 既知の問題

  • ▸ worksheet.columnWidths / rowHeights 配列は JS 配列インデックス経由で変更可能（readonly で強制されていません）。
  • ▸ React の <Reogrid> はマウント後の options prop 変更を無視します（強制リマウントには key を使用）。
  • ▸ オートフィットは列あたり O(rows)。
  • ▸ devicePixelRatio は resize() ごとに 1 度のみ読み取られ、モニター変更時には更新されません。

生のチェンジログや過去のリリース履歴は、npm の @reogrid/lite パッケージページをご覧ください。

ニュースレター

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

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