Web SDK

備考

備考機能は、スプレッドシートのセルにコメントを追加して追加情報を記録したり、コンテキストを提供したりすることを可能にします。さまざまなコメントスタイルと操作をサポートし、ユーザーがデータをよりよく理解し、共同作業できるようにします。

プラグインモード

インストール

Shell
pnpm add @univerjs/sheets-note @univerjs/sheets-note-ui

使い方

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

プリセットモード

インストール

Shell
pnpm add @univerjs/preset-sheets-note

使い方

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

Facade API

完全な Facade API の型定義は FacadeAPI を参照してください。

インポート

プラグインモード注意

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

TypeScript
import '@univerjs/sheets-note/facade'

備考の取得

ワークシート内のすべての備考を取得するには、FWorksheet.getNotes を使用します。

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const notes = fWorksheet.getNotes()notes.forEach((item) => {  const { row, col, note } = item  console.log(`Cell ${fWorksheet.getRange(row, col).getA1Notation()} has note: ${note}`)})

範囲の左上のセルの備考を取得するには、FRange.getNote を使用します。

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('A1:D10')const note = fRange.getNote()

備考の追加または更新

範囲の左上のセルの備考を作成または更新するには、FRange.createOrUpdateNote を使用します。

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('A1')fRange.createOrUpdateNote({  note: 'This is an annotation',  width: 160,  height: 100,  show: true,})

備考の削除

範囲の左上のセルの備考を削除するには、FRange.deleteNote を使用します。

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const notes = fWorksheet.getNotes()if (notes.length > 0) {  // ワークシート内の最初の備考を削除する  const { row, col } = notes[0]  fWorksheet.getRange(row, col).deleteNote()}// セル C1 の備考を削除するconst fRange = fWorksheet.getRange('C1')fRange.deleteNote()

イベントリスナー

完全なイベント型定義は Events を参照してください。

イベント名説明
SheetNoteAdd備考を追加した後にトリガーされた
SheetNoteDelete備考を削除した後にトリガーされた
SheetNoteUpdate備考を更新した後にトリガーされた
SheetNoteShow備考が表示されたときにトリガーされた
SheetNoteHide備考が非表示になったときにトリガーされた
BeforeSheetNoteAdd備考を追加する前にトリガーされた
BeforeSheetNoteDelete備考を削除する前にトリガーされた
BeforeSheetNoteUpdate備考を更新する前にトリガーされた
BeforeSheetNoteShow備考を表示する前にトリガーされた
BeforeSheetNoteHide備考を非表示にする前にトリガーされた
イベントリスナーの例
TypeScript
// 備考を追加した後にトリガーされるconst disposable = univerAPI.addEvent(univerAPI.Event.SheetNoteAdd, (params) => {  const { workbook, worksheet, row, col, note } = params})// `disposable.dispose()` を使ってイベントリスナーを削除します
TypeScript
// 備考を削除する前にトリガーされ、キャンセル可能ですconst disposable = univerAPI.addEvent(univerAPI.Event.BeforeSheetNoteDelete, (params) => {  const { workbook, worksheet, row, col, oldNote } = params  // 備考の削除操作をキャンセルする  params.cancel = true})// `disposable.dispose()` を使ってイベントリスナーを削除します

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

© 2026 DreamNum Co., Ltd.