# 備考

- Human documentation: [https://docs.univer.ai/ja-JP/guides/sheets/features/notes](https://docs.univer.ai/ja-JP/guides/sheets/features/notes)

- Agent Markdown: [https://docs.univer.ai/ja-JP/guides/sheets/features/notes.md](https://docs.univer.ai/ja-JP/guides/sheets/features/notes.md)

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.1.0`

- Source: [sheets/features/notes.ja-JP.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/features/notes.ja-JP.mdx)

---

#### Package metadata

```json
{
  "preset": [
    {
      "client": "@univerjs/preset-sheets-note",
      "locale": "@univerjs/preset-sheets-note/locales/ja-JP",
      "style": "@univerjs/preset-sheets-note/lib/index.css"
    }
  ],
  "plugins": [
    {
      "client": "@univerjs/sheets-note",
      "facade": "@univerjs/sheets-note/facade"
    },
    {
      "client": "@univerjs/sheets-note-ui",
      "locale": "@univerjs/sheets-note-ui/locale/ja-JP",
      "style": "@univerjs/sheets-note-ui/lib/index.css"
    }
  ],
  "server": false
}
```

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

> Interactive example: [Open the playground](/playground/sheets/notes)

## プラグインモード

### インストール

#### npm

```bash
npm install @univerjs/sheets-note @univerjs/sheets-note-ui
```

#### pnpm

```bash
pnpm add @univerjs/sheets-note @univerjs/sheets-note-ui
```

#### yarn

```bash
yarn add @univerjs/sheets-note @univerjs/sheets-note-ui
```

#### bun

```bash
bun add @univerjs/sheets-note @univerjs/sheets-note-ui
```

### 使い方

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverSheetsNotePlugin } from '@univerjs/sheets-note' // [!code ++]
import { UniverSheetsNoteUIPlugin } from '@univerjs/sheets-note-ui' // [!code ++]
import SheetsNoteUIJaJP from '@univerjs/sheets-note-ui/locale/ja-JP' // [!code ++]
import '@univerjs/sheets-note-ui/lib/index.css' // [!code ++]
import '@univerjs/sheets-note/facade' // [!code ++]

const univer = new Univer({
  locale: LocaleType.JA_JP,
  locales: {
    [LocaleType.JA_JP]: mergeLocales(
      SheetsNoteUIJaJP, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverSheetsNotePlugin) // [!code ++]
univer.registerPlugin(UniverSheetsNoteUIPlugin) // [!code ++]
```

## プリセットモード

### インストール

#### npm

```bash
npm install @univerjs/preset-sheets-note
```

#### pnpm

```bash
pnpm add @univerjs/preset-sheets-note
```

#### yarn

```bash
yarn add @univerjs/preset-sheets-note
```

#### bun

```bash
bun 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' // [!code ++]
import UniverPresetSheetsNoteJaJP from '@univerjs/preset-sheets-note/locales/ja-JP' // [!code ++]
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'
import '@univerjs/preset-sheets-core/lib/index.css'
import '@univerjs/preset-sheets-note/lib/index.css' // [!code ++]

const { univerAPI } = createUniver({
  locale: LocaleType.JA_JP,
  locales: {
    [LocaleType.JA_JP]: mergeLocales(
      UniverPresetSheetsCoreJaJP,
      UniverPresetSheetsNoteJaJP, // [!code ++]
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsNotePreset(), // [!code ++]
  ],
})
```

## Facade API

完全な Facade API の型定義は [FacadeAPI](https://docs.univer.ai/ja-JP/reference/facade.md) を参照してください。

### インポート

> [!INFO: プラグインモード注意]
> 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](https://docs.univer.ai/ja-JP/reference/facade/events.md) を参照してください。

| イベント名                   | 説明                   |
| ----------------------- | -------------------- |
| `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()` を使ってイベントリスナーを削除します
```