Web SDK

条件付き書式

条件付き書式は、特定の条件に基づいてセルの書式を自動的に変更し、重要なデータや傾向を強調表示するための機能です。さまざまな条件や書式オプションをサポートしており、ユーザーがデータを直感的に理解できるようにします。

プラグインモード

インストール

Shell
pnpm add @univerjs/sheets-conditional-formatting @univerjs/sheets-conditional-formatting-ui

使い方

TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverSheetsConditionalFormattingPlugin } from '@univerjs/sheets-conditional-formatting'import { UniverSheetsConditionalFormattingUIPlugin } from '@univerjs/sheets-conditional-formatting-ui'import SheetsConditionalFormattingUIJaJP from '@univerjs/sheets-conditional-formatting-ui/locale/ja-JP'import '@univerjs/sheets-conditional-formatting-ui/lib/index.css'import '@univerjs/sheets-conditional-formatting/facade'const univer = new Univer({  locale: LocaleType.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(      SheetsConditionalFormattingUIJaJP,     ),  },})univer.registerPlugin(UniverSheetsConditionalFormattingPlugin)univer.registerPlugin(UniverSheetsConditionalFormattingUIPlugin)

モバイル対応

まずモバイルエディターを設定します。このページのプラグインモードの初期化コードで、以下のデスクトップ登録を同じパッケージのモバイル版に置き換え、文書を開く前に完了してください。モデル、スタイル、言語ファイル、Facade は維持し、両方を同時に登録しないでください。

パッケージデスクトップの登録モバイルの登録
@univerjs/sheets-conditional-formatting-uiUniverSheetsConditionalFormattingUIPluginUniverSheetsConditionalFormattingMobileUIPlugin

プリセットモード

インストール

Shell
pnpm add @univerjs/preset-sheets-conditional-formatting

使い方

TypeScript
import { UniverSheetsConditionalFormattingPreset } from '@univerjs/preset-sheets-conditional-formatting'import UniverPresetSheetsConditionalFormattingJaJP from '@univerjs/preset-sheets-conditional-formatting/locales/ja-JP'import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreJaJP from '@univerjs/preset-sheets-core/locales/ja-JP'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'import '@univerjs/preset-sheets-conditional-formatting/lib/index.css'const { univerAPI } = createUniver({  locale: LocaleType.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(      UniverPresetSheetsCoreJaJP,      UniverPresetSheetsConditionalFormattingJaJP,     ),  },  presets: [    UniverSheetsCorePreset(),    UniverSheetsConditionalFormattingPreset(),   ],})

Facade API

Facade API の完全な型定義は、FacadeAPI で確認できます。

インポート

プラグインモード注意

Facade パッケージの手動 import が必要なのはプラグインモードのみです。プリセットモードには対応する Facade パッケージが内蔵されているため、追加の import は不要です。

TypeScript
import '@univerjs/sheets-conditional-formatting/facade'

条件付き書式ルールの作成

FWorksheet.newConditionalFormattingRule() は条件付き書式ビルダーを生成し、FConditionalFormattingBuilder インスタンスを返します。返されたビルダーをメソッドチェーンで操作して条件付き書式ルールを作成できます。

以下は FConditionalFormattingBuilder のメソッドの一部です:

MethodDescription
build条件付き書式ルールを構築します
copy現在のビルダーを深くクローンします
createCfId条件付き書式 ID を作成します
getRanges現在の条件付き書式の範囲を取得します
setRanges条件付き書式ルールの対象範囲を設定します
setAverage平均値に基づく条件付き書式を設定します
setUniqueValues一意の値に対する条件付き書式を設定します
setDuplicateValues重複値に対する条件付き書式を設定します
setRankランキングに基づく条件付き書式を設定します
setIconSetアイコンセットの条件付き書式を設定します
setColorScaleカラースケールの条件付き書式を設定します
setDataBarデータバーの条件付き書式を設定します
setBackground条件付き書式の背景色を設定します
setBold条件付き書式のフォントを太字にするかを設定します
setFontColor条件付き書式のフォント色を設定します
setItalic条件付き書式のフォントを斜体にするかを設定します
setStrikethrough条件付き書式のフォントに取り消し線を設定するかを設定します
setUnderline条件付き書式のフォントに下線を設定するかを設定します
whenCellEmptyセルが空のときにトリガーする条件付き書式ルールを設定します
whenCellNotEmptyセルが空でないときにトリガーする条件付き書式ルールを設定します
whenDate日付が特定の期間内にあるときにトリガーする条件付き書式ルールを設定します
whenFormulaSatisfied数式の評価結果が真のときにトリガーする条件付き書式ルールを設定します
whenNumberBetween数値が指定した 2 つの値の間、またはそのいずれかと等しいときにトリガーする条件付き書式ルールを設定します
whenNumberEqualTo数値が指定した値と等しいときにトリガーする条件付き書式ルールを設定します
whenNumberGreaterThan数値が指定した値より大きいときにトリガーする条件付き書式ルールを設定します
whenNumberGreaterThanOrEqualTo数値が指定した値以上のときにトリガーする条件付き書式ルールを設定します
whenNumberLessThan数値が指定した値より小さいときにトリガーする条件付き書式ルールを設定します
whenNumberLessThanOrEqualTo数値が指定した値以下のときにトリガーする条件付き書式ルールを設定します
whenNumberNotBetween数値が指定した 2 つの値の間にない、かつどちらとも等しくないときにトリガーする条件付き書式ルールを設定します
whenNumberNotEqualTo数値が指定した値と等しくないときにトリガーする条件付き書式ルールを設定します
whenTextContainsテキストが指定した値を含むときにトリガーする条件付き書式ルールを設定します
whenTextDoesNotContainテキストが指定した値を含まないときにトリガーする条件付き書式ルールを設定します
whenTextEndsWithテキストが指定した値で終わるときにトリガーする条件付き書式ルールを設定します
whenTextEqualToテキストが指定した値と等しいときにトリガーする条件付き書式ルールを設定します
whenTextStartsWithテキストが指定した値で始まるときにトリガーする条件付き書式ルールを設定します
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// セルが空でない場合に、イタリック、赤背景、緑のフォント色を設定する条件付き書式ルールを作成します。const fRange = fWorksheet.getRange('A1:T100')const rule = fWorksheet.newConditionalFormattingRule()  .whenCellNotEmpty()  .setRanges([fRange.getRange()])  .setItalic(true)  .setBackground('red')  .setFontColor('green')  .build()fWorksheet.addConditionalFormattingRule(rule)

条件付き書式ルールの取得

  • FWorksheet.getConditionalFormattingRules() はワークシートのすべての条件付き書式ルールを取得します
  • FRange.getConditionalFormattingRules() は範囲のすべての条件付き書式ルールを取得します
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()// アクティブなワークシートのすべての条件付き書式ルールを取得しますconst fWorksheet = fWorkbook.getActiveSheet()const rulesOfSheet = fWorksheet.getConditionalFormattingRules()// 範囲 A1:T100 のすべての条件付き書式ルールを取得しますconst fRange = fWorksheet.getRange('A1:T100')const rulesOfRange = fRange.getConditionalFormattingRules()

条件付き書式ルールの削除

FWorksheet.deleteConditionalFormattingRule(cfId) は、ワークシートから条件付き書式ルールを削除します。cfId は条件付き書式ルールの ID です。

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const rules = fWorksheet.getConditionalFormattingRules()// 最初の条件付き書式ルールを削除しますfWorksheet.deleteConditionalFormattingRule(rules[0]?.cfId)

条件付き書式ルールの更新

FWorksheet.setConditionalFormattingRule(cfId, rule) は、ワークシート内の条件付き書式ルールを更新します。cfId は条件付き書式ルールの ID、rule は新しい条件付き書式ルールです。

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// セルが空でない場合に、イタリック、赤背景、緑のフォント色を設定する条件付き書式ルールを作成します。const fRange = fWorksheet.getRange('A1:T100')const rule = fWorksheet.newConditionalFormattingRule()  .whenCellNotEmpty()  .setRanges([fRange.getRange()])  .setItalic(true)  .setBackground('red')  .setFontColor('green')  .build()fWorksheet.addConditionalFormattingRule(rule)// 最初のルールを新しい範囲に適用するように変更しますconst rules = fWorksheet.getConditionalFormattingRules()const newRuleRange = fWorksheet.getRange('A1:D10')fWorksheet.setConditionalFormattingRule(rules[0]?.cfId, { ...rules[0], ranges: [newRuleRange.getRange()] })

条件付き書式ルールの優先度の変更

FWorksheet.moveConditionalFormattingRule(cfId, toCfId, type) は、ワークシート内の条件付き書式ルールの優先度を変更します。cfId は移動するルールの ID、toCfId は移動先のルール ID、type は移動タイプ（例: 'before'、'after'）を指定します。

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const rules = fWorksheet.getConditionalFormattingRules()// 3 番目のルールを 1 番目のルールの前に移動しますconst rule = rules[2]const targetRule = rules[0]fWorksheet.moveConditionalFormattingRule(rule?.cfId, targetRule?.cfId, 'before')

すべての条件付き書式ルールをクリア

  • FWorksheet.clearConditionalFormatRules() はワークシートのすべての条件付き書式ルールをクリアします。
  • FRange.clearConditionalFormatRules() は範囲のすべての条件付き書式ルールをクリアします。
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()// アクティブなワークシートのすべての条件付き書式ルールをクリアしますconst fWorksheet = fWorkbook.getActiveSheet()fWorksheet.clearConditionalFormatRules()// 範囲 A1:T100 のすべての条件付き書式ルールをクリアしますconst fRange = fWorksheet.getRange('A1:T100')fRange.clearConditionalFormatRules()

ルールの説明とプレビューを再利用する

独自のルール一覧では、@univerjs/sheets-conditional-formatting-ui の getRuleDescribe と ConditionalFormattingRulePreview を使用できます。getRuleDescribe(rule, localeService) にはルール全体を、プレビューには設定部分の rule.rule だけを渡します。プレビューは設定した外観を表示し、シートのセルを評価しません。Univer の React コンテキスト内で描画してください。

CF_PANEL_KEY は組み込みパネルのオーバーライド用キーです。IConditionFormattingPanelProps.onEditorExit は送信、キャンセル、シートのアクティブ化や削除に伴って編集が終了したときに呼ばれます。保存成功やサイドバーの終了を示すものではありません。

TSX
import type { IConditionFormattingRule } from '@univerjs/sheets-conditional-formatting'import { LocaleService } from '@univerjs/core'import { ConditionalFormattingRulePreview, getRuleDescribe } from '@univerjs/sheets-conditional-formatting-ui'import { useDependency } from '@univerjs/ui'interface IRuleSummaryProps {  rule: IConditionFormattingRule}function RuleSummary({ rule }: IRuleSummaryProps) {  const localeService = useDependency(LocaleService)  return (    <div>      <span>{getRuleDescribe(rule, localeService)}</span>      <ConditionalFormattingRulePreview rule={rule.rule} />    </div>  )}

このガイドはいかがですか？

© 2026 DreamNum Co., Ltd.