条件付き書式

条件付き書式を使うと、セルの値に応じてスタイルを自動的に適用できます。ルールを一度定義すれば、セルのデータが変更されるたびにグリッドが再評価します — 手動でのスタイル変更は不要です。

Note: 条件付き書式は Pro 版で利用可能です。

ルールタイプ

ReoGrid は 3 種類の条件付き書式ルールをサポートしています:

cellIs — 値の比較

最も一般的なルールタイプです。各セルの値を 1 つまたは 2 つの閾値と比較します。

// スコア 90 以上を緑でハイライト
worksheet.range('C2:C100').addConditionalFormat({
  type: 'cellIs',
  operator: 'greaterThanOrEqual',
  value1: 90,
  style: { backgroundColor: '#bbf7d0', color: '#14532d', bold: true },
})

// スコア 50 未満を赤でハイライト
worksheet.range('C2:C100').addConditionalFormat({
  type: 'cellIs',
  operator: 'lessThan',
  value1: 50,
  style: { backgroundColor: '#fecaca', color: '#7f1d1d', bold: true },
})

// 50〜70 の値を黄色でハイライト
worksheet.range('C2:C100').addConditionalFormat({
  type: 'cellIs',
  operator: 'between',
  value1: 50,
  value2: 70,
  style: { backgroundColor: '#fef3c7', color: '#92400e' },
})

演算子

expression — 数式ベースのルール

スプレッドシートの数式を使ってスタイル適用の判定を行います。相対セル参照は範囲内の各セルに対して自動的にオフセットされます。

// 実績（E列）が目標（C列）を超えた行をハイライト
// 数式は範囲の最初の行に対して記述 — ReoGrid が各行に自動オフセット
worksheet.range('E2:E100').addConditionalFormat({
  type: 'expression',
  formula: '=E2>C2',
  style: { backgroundColor: '#86efac', color: '#14532d', bold: true },
})

先頭の = は省略可能です — 'E2>C2' でも同じ動作になります。

containsText — 部分文字列マッチ

セルの値に含まれるテキストをマッチします。デフォルトでは大文字小文字を区別しません（Excel 互換）。

// 「キャンセル」を含むセルをハイライト
worksheet.range('D2:D100').addConditionalFormat({
  type: 'containsText',
  operator: 'contains',
  text: 'キャンセル',
  style: { backgroundColor: '#fee2e2', color: '#991b1b' },
})

テキスト演算子

caseSensitive: true を設定すると大文字小文字を区別したマッチングが有効になります。

優先度と stopIfTrue

同じセルに複数のルールが適用される場合、priority で評価順を制御します（小さい数値 = 先に評価）。stopIfTrue を使うと、優先度の高いルールがマッチした際に、それ以降のルール評価を停止できます。

// 信号パターン: 最初のマッチで確定
worksheet.range('C2:C100').addConditionalFormat({
  type: 'cellIs', operator: 'lessThan', value1: 30,
  priority: 1, stopIfTrue: true,
  style: { backgroundColor: '#fecaca' },  // 赤
})
worksheet.range('C2:C100').addConditionalFormat({
  type: 'cellIs', operator: 'lessThan', value1: 70,
  priority: 2, stopIfTrue: true,
  style: { backgroundColor: '#fef3c7' },  // 黄
})
worksheet.range('C2:C100').addConditionalFormat({
  type: 'cellIs', operator: 'greaterThanOrEqual', value1: 70,
  priority: 3,
  style: { backgroundColor: '#bbf7d0' },  // 緑
})

ルールの適用

Range API（推奨）

const id = worksheet.range('B2:B50').addConditionalFormat({
  type: 'cellIs',
  operator: 'greaterThan',
  value1: 1000,
  style: { bold: true, color: '#16a34a' },
})

Cell API

worksheet.cell('A1').addConditionalFormat({
  type: 'cellIs',
  operator: 'equal',
  value1: 'Done',
  style: { backgroundColor: '#dcfce7' },
})

Worksheet API

worksheet.addConditionalFormat(1, 1, 50, 3, {
  type: 'cellIs',
  operator: 'greaterThan',
  value1: 100,
  style: { backgroundColor: '#dbeafe' },
})

ルールの削除

// ID でルールを削除
worksheet.removeConditionalFormat(id)

// 範囲内のすべてのルールをクリア
worksheet.range('B2:B50').clearConditionalFormats()

// ワークシート上のすべてのルールをクリア
worksheet.clearConditionalFormats()

ルールの一覧取得

const rules = worksheet.getConditionalFormats()
rules.forEach(entry => {
  console.log(entry.id, entry.range, entry.rule.type)
})

対応するスタイルプロパティ

条件付き書式スタイルは以下のプロパティをサポートしています。これらは xlsx エクスポート/インポートでも保持されるプロパティです。

その他の CellStyle プロパティは実行時には受け付けますが、xlsx ファイルには保存されません。

xlsx ラウンドトリップ

条件付き書式ルールは .xlsx ファイルのインポート・エクスポート時に保持されます。ルールはワークシート XML 内の標準的な <conditionalFormatting> 要素として書き出され、スタイルは <dxfs> テーブルに格納されます — Excel と完全互換です。