# Web Workers

- Human documentation: [https://docs.univer.ai/ja-JP/guides/docs/getting-started/worker](https://docs.univer.ai/ja-JP/guides/docs/getting-started/worker)

- Agent Markdown: [https://docs.univer.ai/ja-JP/guides/docs/getting-started/worker.md](https://docs.univer.ai/ja-JP/guides/docs/getting-started/worker.md)

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.1.0`

- Source: [docs/getting-started/worker.ja-JP.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/docs/getting-started/worker.ja-JP.mdx)

---

Docs は `UniverDocsLayoutWorkerPlugin` により文書のレイアウト処理を Web Worker[^web-worker] で実行できます。Docs コアプラグインの後に登録し、`workerFactory` でレイアウトサービス用の新しい Worker を作成します。

まず[インストールと基本的な使い方](https://docs.univer.ai/ja-JP/guides/docs/getting-started/installation.md)を完了してください。以下のコードは既存の設定に追加するものです。コンテンツの作成や読み込み前にプラグインを登録し、登録済みのプラグインは重複登録せず設定を変更してください。

## メインスレッド

```typescript title="main.ts"
import { UniverDocsLayoutWorkerPlugin } from '@univerjs/docs'

univer.registerPlugin(UniverDocsLayoutWorkerPlugin, {
  workerFactory: () => new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' }),
})
```

## Worker のエントリー

```typescript title="worker.ts"
import { startDocsLayoutWorker } from '@univerjs/docs'

startDocsLayoutWorker()
```

モジュール Worker と専用のエントリーファイルを使用します。Worker とメインスレッドのパッケージバージョンを揃えてください。描画とユーザー操作はメインスレッドで実行されます。

[^web-worker]: Web Worker はブラウザーのメインスレッド外で JavaScript を実行し、メッセージで通信します。ページの DOM には直接アクセスできません。計算を Worker に移しても、エディター UI は移動しません。