recursal/MDN huggingface dataset:
TextDecoder: ignoreBOM プロパティ
============================

**`ignoreBOM`** は `TextDecoder` インターフェイスの読み取り専用プロパティで、バイトオーダーマークが無視されるかどうかを示す論理値です。

値
-

`true` ならばバイトオーダーマークが無視されます。そうでなければ `false` になります。

仕様書
---

| Specification |
| --- |
| Encoding Standard # ref-for-dom-textdecoder-ignorebom① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TextDecoder: encoding プロパティ
===========================

**`TextDecoder.encoding`** は読み取り専用のプロパティで、特定のデコーダオブジェクトが使用するデコードアルゴリズムの名前が入った文字列を返します。

エンコーダーは コンストラクター の `label` 引数で設定し、既定値は `utf-8` となります。

値
-

小文字の ASCII 文字列で、以下のいずれかの値を取ります。

* ウェブで推奨されているエンコーディング: `'utf-8'`
* 古いシングルバイトのエンコーディング:
 'ibm866',
 'iso-8859-2',
 'iso-8859-3',
 'iso-8859-4',
 'iso-8859-5',
 'iso-8859-6',
 'iso-8859-7',
 'iso-8859-8''`,
 'iso-8859-8i',
 'iso-8859-10',
 'iso-8859-13',
 'iso-8859-14',
 'iso-8859-15',
 'iso-8859-16',
 'koi8-r',
 'koi8-u',
 'macintosh',
 'windows-874',
 'windows-1250',
 'windows-1251',
 'windows-1252',
 'windows-1253',
 'windows-1254',
 'windows-1255',
 'windows-1256',
 'windows-1257',
 'windows-1258',
 'x-mac-cyrillic'
* 中国語（簡体字）の古いマルチバイトエンコーディング:
 'gbk',
 'gb18030'
* 中国語（繁体字）の古いマルチバイトエンコーディング:
 'big5'
* 日本語の古いマルチバイトエンコーディング:
 'euc-jp',
 'iso-2022-jp',
 'shift-jis'
* 韓国語の古いマルチバイトエンコーディング:
 'euc-kr'
* 古いその他のエンコーディング:
 'utf-16be',
 'utf-16le',
 `'x-user-defined'`
* 特殊なエンコーディング、`'replacement'`
 これは、空の入力を空の出力に、他にも任意の長さの入力を単一の置換文字にデコードします。
 クライアントとサーバー間でエンコーダーを不一致にする攻撃に対する防御に用いられます。
 `ISO-2022-CN`, `ISO-2022-CN-ext`, 'iso-2022-kr', 'hz-gb-2312' のエンコーダーも、置換エンコーディングに割り当てられています。
仕様書
---

| Specification |
| --- |
| Encoding Standard # ref-for-dom-textdecoder-encoding① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 所属先の `TextDecoder` インターフェイス。
TextDecoder: fatal プロパティ
========================

**`fatal`** は `TextDecoder` インターフェイスの読み取り専用プロパティで、エラーモードが fatal であるかどうかを論理値で示します。

 このプロパティが `true` であった場合、デコーダーがデコード中に正しくない形のデータに遭遇した場合、`TypeError` が発生します。
 `false` であった場合、デコーダーは無効なデータを置換文字 `U+FFFD` (�) で置き換えます。
 このプロパティの値は `TextDecoder()` コンストラクターで設定されます。

値
-

 論理値で、エラーモードが `fatal` に設定されている場合は `true` となります。
 そうでない場合は `false` となり、エラーモードが `replacement` であることを示します。

仕様書
---

| Specification |
| --- |
| Encoding Standard # ref-for-dom-textdecoder-fatal① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TextDecoder: decode() メソッド
==========================

**`TextDecoder.decode()`** メソッドは、引数として渡されたバッファーからデコードしたテキストを含む文字列を返します。

 デコードするメソッドは、現在の `TextDecoder` オブジェクトで定義されます。
 これには、データの予想されるエンコードや、デコードエラーの処理方法などが含まれます。

構文
--


```js
decode()
decode(buffer)
decode(buffer, options)
```

### 引数

`buffer` 省略可

デコードするエンコードされたテキストが入っている、`ArrayBuffer`、`TypedArray`、`DataView` の何れかのオブジェクトです。

`options` 省略可

以下のプロパティを持つオブジェクトです。

`stream`

 論理値のフラグで、以後 `decode()` を呼び出す際に、追加データが続くかどうかを示します。
 データを塊で処理する場合は `true` に設定し、最後の塊、またはデータが塊でない場合は `false` に設定します。
 既定値は `false` です。



### 例外

`TypeError`

`TextDecoder.fatal` プロパティが `true` の場合、デコードエラーがあると発生します。

### 返値

文字列です。

例
-

この例では、ユーロ記号 € をエンコードし、デコードしています。

### HTML


```html
<p>Encoded value: <span id="encoded-value"></span></p>
<p>Decoded value: <span id="decoded-value"></span></p>
```

### JavaScript


```js
const encoder = new TextEncoder();
const array = encoder.encode("€"); // Uint8Array(3) [226, 130, 172]
document.getElementById("encoded-value").textContent = array;

const decoder = new TextDecoder();
const str = decoder.decode(array); // String "€"
document.getElementById("decoded-value").textContent = str;
```

### 結果

仕様書
---

| Specification |
| --- |
| Encoding Standard # ref-for-dom-textdecoder-decode① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 所属先の `TextDecoder` インターフェイス。
CSSImportRule: layerName プロパティ
==============================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`layerName`** は `CSSImportRule` インターフェイスの読み取り専用プロパティで、 `@import` アットルールで作成されたカスケードレイヤーの名前を返します。

作成したレイヤーが無名であった場合、文字列は空文字列 (`""`) となり、レイヤーが作成されていない場合は `null` オブジェクトとなります。

値
-

空文字列、または `null` オブジェクトです。

例
-

この文書の単一のスタイルシートには、 3 つの `@import` ルールが含まれています。最初の宣言は、スタイルシートを名前付きレイヤーにインポートします。 2 つ目の宣言は、スタイルシートを無名レイヤーにインポートします。 3 つ目の宣言は、レイヤー宣言なしでスタイルシートをインポートします。

`layerName` プロパティは、インポートされたスタイルシートに関連付けられているレイヤーの名前を返します。


```css
@import url("style1.css") layer(layer-1);
@import url("style2.css") layer;
@import url("style3.css");
```



```js
const myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].layerName); // `"layer-1"` を返す
console.log(myRules[1].layerName); // `""` (an anonymous layer) を返す
console.log(myRules[2].layerName); // `null` を返す
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssimportrule-layername |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 学習領域: カスケードレイヤー
* `@import` および `@layer`
CSSImportRule: stylesheet プロパティ
===============================

**`styleSheet`** は `CSSImportRule` インターフェイスの読み取り専用プロパティで、 `@import` アットルールによって指定された CSS スタイルシートを返します。これは `CSSStyleSheet` オブジェクトの形です。

`@import` アットルールには、常に関連付けられたスタイルシートがあります。

値
-

`CSSStyleSheet` です。

例
-

このスタイルシートは単一の `@import` ルールが記載されています。したがって、 CSS ルールのリストの最初の項目は `CSSImportRule` になります。 `styleSheet` プロパティはインポートされたスタイルシートを返します。


```css
@import url("style.css") screen;
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].styleSheet); // CSSStyleSheet オブジェクトを返す
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssimportrule-stylesheet |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSImportRule: href プロパティ
=========================

**`href`** は `CSSImportRule` インターフェイスの読み取り専用プロパティで、 `@import` アットルールで指定された URL を返します。

解決された URL は、関連づけられてたスタイルシートの `href` 属性となります。

値
-

文字列です。

例
-

このスタイルシートには単一の `@import` ルールだけが含まれています。したがって、 CSS ルールのリストの最初の項目は `CSSImportRule` になります。 `href` プロパティはインポートしたスタイルシートの URL を返します。


```css
@import url("style.css") screen;
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].href); // style.css を返す
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssimportrule-href |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSImportRule: supportsText プロパティ
=================================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`supportsText`** は `CSSImportRule` インターフェイスの読み取り専用プロパティで、 `@import` アットルールで指定された supports 条件を返します。

値
-

文字列、または `null` です。

例
-

この文書の単一のスタイルシートには 3 つの `@import` ルールが含まれています。最初の宣言は、 `display: flex` に対応している場合にスタイルシートをインポートします。 2 つ目の宣言は、 `:has` セレクターに対応している場合にスタイルシートをインポートします。 3 つ目の宣言は、対応条件なしにスタイルシートをインポートします。

The `supportsText` property returns the import conditions associated with the at-rule.


```css
@import url("style1.css") supports(display: flex);
@import url("style2.css") supports(selector(p:has(a)));
@import url("style3.css");
```



```js
const myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].supportsText); // `"display: flex"` を返す
console.log(myRules[1].supportsText); // `"selector(p:has(a))"` を返す
console.log(myRules[2].supportsText); // `null` を返す
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssimportrule-supportstext |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 機能クエリーの使用
* `@import` and `@supports`
CSSImportRule: media プロパティ
==========================

**`media`** は `CSSImportRule` インターフェイスの読み取り専用プロパティで、 `MediaList` オブジェクトを返します。ここには関連付けられたスタイルシートの `media` 属性の値が入っています。

値
-

`MediaList` オブジェクトを返します。

`media` の値は、 `media` 属性を格納した文字列（`"print"` など）を渡すことで設定することができます。

例
-

### メディアプロパティの取得

このスタイルシートには単一の `@import` ルールが記載されています。したがって、 CSS ルールのリストの最初の項目は `CSSImportRule` になります。 `media` プロパティは `MediaList` オブジェクトを返します。この中には `mediaText` プロパティの値 `screen` が含まれます。


```css
@import url("style.css") screen;
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].media); // MediaList を返す
```

### メディアプロパティの設定

関連するスタイルシートの `media` 属性を変更するには、 `media` の値に新しい値を格納した文字列を設定します。


```js
let myRules = document.styleSheets[0].cssRules;
myRules[0].media = "print";
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssimportrule-media |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ServiceWorkerContainer: error イベント
==================================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

`error` イベントは、サービスワーカーでエラーが発生したときに発生します。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("error", (event) => {});

onerror = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-


```js
navigator.serviceWorker.onerror = (errorevent) => {
  console.error(`受信したエラーメッセージ: ${errorevent.message}`);
};
```

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ServiceWorkerContainer.getRegistration()
========================================

**`getRegistration()`** は `ServiceWorkerContainer` インターフェイスのメソッドで、スコープ URL が指定された文書の URL と一致する `ServiceWorkerRegistration` オブジェクトを取得します。 このメソッドは、`ServiceWorkerRegistration` または `undefined` に解決される `Promise` を返します。

構文
--


```js
getRegistration()
getRegistration(clientURL)
```

### 引数

`clientURL` 省略可

この URL に照合するスコープを持つ登録が返されます。関連の URL は、現在のクライアントを基点として解決されます。この引数が指定されなかった場合、既定では現在のクライアントの URL が使用されます。

### 返値

`ServiceWorkerRegistration` オブジェクトまたは `undefined` に解決される `Promise` です。

例
-


```js
navigator.serviceWorker.getRegistration("/app").then((registration) => {
  if (registration) {
    document.querySelector("#status").textContent =
      "ServiceWorkerRegistration が見つかりました。";
  }
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # navigator-service-worker-getRegistration |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ServiceWorkerContainer.ready
============================

**`ready`** は `ServiceWorkerContainer` インターフェイスの読み取り専用プロパティは、サービスワーカーがアクティブになるまでコードの実行を遅らせる方法を提供します。 決して拒否しない `Promise` を返し、現在のページに関連する `ServiceWorkerRegistration` がアクティブ（`active`）ワーカーを持つまで無期限に待機します。 その条件が満たされると、`ServiceWorkerRegistration` で解決されます。

値
-

`Promise` で、決して拒否されず、最終的には `ServiceWorkerRegistration` で解決される可能性があります。

例
-


```js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.ready.then((registration) => {
    console.log("サービスワーカーがアクティブ:", registration.active);

    // この時点で、registration.pushManager.subscribe() などの
    // アクティブなサービスワーカーを必要とするメソッドを呼び出すことができます
  });
} else {
  console.error("サービスワーカーをサポートしていません。");
}
```

仕様書
---

| Specification |
| --- |
| Service Workers # navigator-service-worker-ready |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ServiceWorkerContainer.controller
=================================

**`controller`** は `ServiceWorkerContainer` インターフェイスの読み取り専用プロパティで、`ServiceWorker` オブジェクトの状態が `activating` または `activated` ならそれ (`ServiceWorkerRegistration.active` で返されるのと同じオブジェクト) を返します。このプロパティはリクエストが強制リフレッシュ（*Shift* + リフレッシュ）やアクティブワーカーがない場合は `null` を返します。

### 値

`ServiceWorker` オブジェクト。

例
-


```js
if ("serviceWorker" in navigator) {
  // 1 回限りのチェックを行って、サービスワーカーが制御しているかどうかを確認します。
  if (navigator.serviceWorker.controller) {
    console.log(
      `このページを現在制御しているもの: ${navigator.serviceWorker.controller}`,
    );
  } else {
    console.log("このページは現在サービスワーカーによって制御されていません。");
  }
} else {
  console.log("サービスワーカーをサポートしていません。");
}
```

仕様書
---

| Specification |
| --- |
| Service Workers # navigator-service-worker-controller |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ServiceWorkerContainer: controllerchange イベント
=============================================

**`controllerchange`** は `ServiceWorkerContainer` インターフェイスのイベントで、文書の関連する `ServiceWorkerRegistration` が新しいアクティブ (`active`) ワーカーを取得したときに発生します。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("controllerchange", (event) => {});

oncontrollerchange = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-


```js
// TBD
```

仕様書
---

| Specification |
| --- |
| Service Workers # dom-serviceworkercontainer-oncontrollerchange |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ServiceWorkerContainer: message イベント
====================================

**`message`** イベントは、サービスワーカーからメッセージを受信するために、サービスワーカーによって制御されるページで使用します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("message", (event) => {});

onmessage = (event) => {};
```

イベント型
-----

`MessageEvent` です。 `Event` を継承しています。

Event

MessageEventイベントプロパティ
---------

*このインターフェイスは親である `Event` からプロパティを継承しています。*

`MessageEvent.data` 読取専用 

メッセージ送信元によって送信されたデータです。

`MessageEvent.origin` 読取専用 

文字列で、メッセージ送信元のオリジンを表します。

`MessageEvent.lastEventId` 読取専用 

文字列で、このイベントの一意の ID を表します。

`MessageEvent.source` 読取専用 

`MessageEventSource` （`WindowProxy`、`MessagePort`、`ServiceWorker` の何れかのオブジェクト）で、メッセージの送信元を表します。

`MessageEvent.ports` 読取専用 

`MessagePort` オブジェクトの配列で、メッセージが送信されるチャンネルに関連するポートを表します（チャンネルメッセージングや、共有ワーカーにメッセージを送信する場合など、適切な場合）。

例
-

この例では、サービスワーカーは `fetch` イベントからクライアントの ID を取得し、`Client.postMessage` を使用してメッセージを送信します。


```js
// サービスワーカー内
async function messageClient(clientId) {
  const client = await clients.get(clientId);
  client.postMessage("こんにちはクライアント！");
}

addEventListener("fetch", (event) => {
  messageClient(event.clientId);
  event.respondWith(() => {
    // …
  });
});
```


クライアントは `message` イベントを待ち受けしてメッセージを受信できます。


```js
// main.js
navigator.serviceWorker.addEventListener("message", (message) => {
  console.log(message);
});
```


あるいは、クライアントは `onmessage` イベントハンドラーでメッセージを受信することもできます。


```js
// main.js
navigator.serviceWorker.onmessage = (message) => {
  console.log(message);
};
```

仕様書
---

| Specification |
| --- |
| Service Workers # dom-serviceworkercontainer-onmessage |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例
* ServiceWorker の準備はできていますか？（英語）
* ウェブワーカーの使用
ServiceWorkerContainer.startMessages()
======================================

**`startMessages()`** は `ServiceWorkerContainer` インターフェイスのメソッドで、サービスワーカーからその制御下にあるページに配信されるメッセージの流れを明示的に開始します（例えば、 `Client.postMessage()` を介して送信されます）。 これは、ページのコンテンツの読み込みが完了する前であっても、送信されたメッセージに早く反応するために使用できます。

説明
--

既定では、ページの読み込み中に、ページを制御するサービスワーカーから（`Client.postMessage()` を使用して）ページに送信されたすべてのメッセージはキューに入れられ、ページの HTML 文書が読み込まれて解析されると（つまり、 `DOMContentLoaded` イベント発生の後に）ディスパッチされます。 例えば、ページの読み込みが完了する前に `EventTarget.addEventListener()` を使用してメッセージハンドラーを呼び出したが、すぐにメッセージの処理を開始したい場合は、`ServiceWorkerContainer.startMessages()` を呼び出すことで、これらのメッセージの配信を開始できます。

**メモ:** `onmessage` を使用してハンドラーを直接設定すると、メッセージの送信が自動的に開始されます。 この場合、`startMessages()` は必要ありません。

構文
--


```js
startMessages()
```

### 引数

なし。

### 返値

`undefined` です。

例
-


```js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js").then(() => {
    console.log("サービスワーカーが登録された");
  });
}

// …

navigator.serviceWorker.addEventListener("message", (e) => {
  // …
});

navigator.serviceWorker.startMessages();
```

仕様書
---

| Specification |
| --- |
| Service Workers # navigator-service-worker-startMessages |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ServiceWorkerContainer.getRegistrations()
=========================================

**`getRegistrations()`** は `ServiceWorkerContainer` インターフェイスのメソッドで、この `ServiceWorkerContainer` に関するすべての `ServiceWorkerRegistration` を配列で取得します。 このメソッドは、 `ServiceWorkerRegistration` の配列に解決される `Promise` を返します。

構文
--


```js
getRegistrations()
```

### 引数

なし。

### 返値

`ServiceWorkerRegistration` オブジェクトの配列に解決される `Promise`。

例
-


```js
navigator.serviceWorker.getRegistrations().then((registrations) => {
  document.querySelector("#status").textContent =
    "ServiceWorkerRegistration が見つかりました。";
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # navigator-service-worker-getRegistrations |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
DedicatedWorkerGlobalScope: message イベント
========================================

`message` イベントは、ワーカーが親からメッセージを受け取ったとき（つまり、親が `Worker.postMessage()` を使用してメッセージを送信したとき） `DedicatedWorkerGlobalScope` オブジェクトで発生します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("message", (event) => {});

onmessage = (event) => {};
```

イベント型
-----

`MessageEvent` です。 `Event` を継承しています。

Event

MessageEventイベントプロパティ
---------

*このインターフェイスには、親である `Event` から継承したプロパティもあります。*

`MessageEvent.data` 読取専用 

メッセージ送信者から送信されたデータです。

`MessageEvent.origin` 読取専用 

文字列で、メッセージ送信者のオリジンを表します。

`MessageEvent.lastEventId` 読取専用 

文字列で、このイベントの固有の ID を表します。

`MessageEvent.source` 読取専用 

`MessageEventSource` （`Window`, `MessagePort`, `ServiceWorker` の何れかのオブジェクトがなれる）で、メッセージ送信者を表します。

`MessageEvent.ports` 読取専用 

`MessagePort` オブジェクトの配列で、メッセージが送信されるチャネルに関連するポートを表します（チャネルメッセージングや共有ワーカーにメッセージを送信する場合など、必要に応じて）。

例
-

以下のコードでは `Worker` オブジェクトを、 `Worker()` コンストラクターを用いて生成しています。フォームの入力欄 `first` 内の値が変更されると、メッセージがワーカーに渡されます。ワーカーから戻ってきたメッセージを処理するために、`onmessage` ハンドラーもあります。


```js
// main.js

const myWorker = new Worker("worker.js");

first.onchange = () => {
  myWorker.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

// worker.js

self.onmessage = (e) => {
  console.log("Message received from main script");
  const workerResult = `Result: ${e.data[0] \* e.data[1]}`;
  console.log("Posting message back to main script");
  postMessage(workerResult);
};
```


`main.js` スクリプトでは、ワーカースクリプトからのメッセージを処理するために `onmessage` ハンドラーを使用しています。


```js
// main.js

myWorker.onmessage = (e) => {
  result.textContent = e.data;
  console.log("Message received from worker");
};
```


他に、スクリプトで `addEventListener()` を使用してメッセージを待ち受けすることができます。


```js
// worker.js

self.addEventListener("message", (e) => {
  result.textContent = e.data;
  console.log("Message received from worker");
});
```


メインスクリプトでは `onmessage` を `myWorker` で呼び出す必要がありますが、ワーカススクリプトの内部では `onmessage` だけで済みます。ワーカーは事実上グローバルスコープ (`DedicatedWorkerGlobalScope`) になっているからです。

完全な例は、基本的な専用ワーカーの例を参照してください（専用ワーカーを実行）。

仕様書
---

| Specification |
| --- |
| HTML Standard # event-message |
| HTML Standard # handler-dedicatedworkerglobalscope-onmessage |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `DedicatedWorkerGlobalScope`
* `WorkerGlobalScope`
* 関連イベント: `messageerror`
* `Worker.postMessage()`
* チャンネルメッセージングの使用
DedicatedWorkerGlobalScope.postMessage()
========================================

**`postMessage()`** は `DedicatedWorkerGlobalScope` インターフェイスのメソッドで、それを生成したメインスレッドにメッセージを送信します。

これは data 引数を受け入れ、そこにワーカーからメインスレッドにコピーされるデータが入ります。 data は任意の値、または構造化複製アルゴリズムで処理される JavaScript オブジェクトであり、循環参照を含むことができます。

 このメソッドは、メインスレッドに*移譲*するための移譲可能オブジェクトの配列もオプションで受け入れます。
 data 引数とは異なり、移譲されたオブジェクトはワーカスレッドでは使えなくなります（可能であれば、オブジェクトは高性能なゼロコピー処理で移譲されます）。

ワーカーを生成したメインスコープは、`Worker.postMessage` メソッドを使用して、ワーカーを生成したスレッドに情報を送り返すことができます。

構文
--


```js
postMessage(aMessage, transferList)
```

### 引数

`aMessage`

 メインスレッドに配信するオブジェクト。これは `Worker.message_event` に配信されるイベント内の data フィールドに格納されます。
 これは、構造化複製アルゴリズムによって処理される任意の値または JavaScript オブジェクトであり、循環参照を含むことができます。


`transferList` 省略可

 所有権を移譲するための、移譲可能オブジェクトの配列（オプション）。
 オブジェクトの所有権が移譲された場合、そのオブジェクトは送信元のコンテキストでは使用できなくなり、 送信先のメインスレッドでのみ利用できるようになります。


移譲可能オブジェクトのみが移譲可能です。

### 返値

なし (`undefined`)。

例
-

 以下のコードでは `worker.js` を示しています。このコードでは `onmessage` ハンドラーを使用して、メイン スクリプトからのメッセージを処理しています。
 ハンドラーの内部で計算が行われ、そこから結果メッセージが作成されます。これは `postMessage(workerResult);` を使用してメインスレッドに返されます。


```js
onmessage = (e) => {
  console.log("Message received from main script");
  const workerResult = `Result: ${e.data[0] \* e.data[1]}`;
  console.log("Posting message back to main script");
  postMessage(workerResult);
};
```


メインスクリプトでは `onmessage` を `Worker` オブジェクトに対して呼び出す必要がありますが、ワーカススクリプトの内部では `onmessage` だけで済みます。ワーカーは事実上グローバルスコープ (`DedicatedWorkerGlobalScope`) になっているためです。

完全な例は、基本的な専用ワーカーの例を参照してください（専用ワーカーを実行）。

**メモ:** `postMessage()` は一度に単一のオブジェクトしか送ることができません。上で見たように、複数の値を渡したい場合は、配列を送ることができます。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-dedicatedworkerglobalscope-postmessage-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

所属先の `DedicatedWorkerGlobalScope` インターフェイス。
DedicatedWorkerGlobalScope.name
===============================

**`name`** は `DedicatedWorkerGlobalScope` インターフェイスの読み取り専用プロパティで、 `Worker` が作成された際に（オプションで）指定された名前を返すものです。これは `Worker()` コンストラクターが `DedicatedWorkerGlobalScope` への参照を取得するために渡すことができる名前になります。

値
-

文字列です。

例
-

もしワーカーが `name` オプションを持つコンストラクターで作成された場合、


```js
const myWorker = new Worker("worker.js", { name: "myWorker" });
```


これで `DedicatedWorkerGlobalScope` は "myWorker" という名前を持ち、ワーカー内から、


```js
self.name;
```


を実行すると返されます。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-dedicatedworkerglobalscope-name-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `DedicatedWorkerGlobalScope`
DedicatedWorkerGlobalScope: messageerror イベント
=============================================

`messageerror` イベントは `DedicatedWorkerGlobalScope` オブジェクトで、シリアライズ解除できないメッセージを受け取ったときに発生します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("messageerror", (event) => {});

onmessageerror = (event) => {};
```

イベント型
-----

`MessageEvent` です。 `Event` を継承しています。

Event

MessageEventイベントプロパティ
---------

*このインターフェイスには、親である `Event` から継承したプロパティもあります。*

`MessageEvent.data` 読取専用 

メッセージ送信者から送信されたデータです。

`MessageEvent.origin` 読取専用 

文字列で、メッセージ送信者のオリジンを表します。

`MessageEvent.lastEventId` 読取専用 

文字列で、このイベントの固有の ID を表します。

`MessageEvent.source` 読取専用 

`MessageEventSource` （`WindowProxy`, `MessagePort`, `ServiceWorker` の何れかのオブジェクトがなれる）で、メッセージ送信者を表します。

`MessageEvent.ports` 読取専用 

`MessagePort` オブジェクトの配列で、メッセージが送信されるチャネルに関連するポートを表します（チャネルメッセージングや共有ワーカーにメッセージを送信する場合など、必要に応じて）。

例
-

`messageerror` は `addEventListener()` を使用して待ち受けします。


```js
// worker.js

self.addEventListener("messageerror", (event) => {
  self.postMessage("Error receiving message");
  console.error(event);
});
```


同じですが、 `onmessageerror` イベントハンドラープロパティを使用しています。


```js
// worker.js

self.onmessageerror = (event) => {
  self.postMessage("Error receiving message");
  console.error(event);
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-messageerror |
| HTML Standard # handler-dedicatedworkerglobalscope-onmessageerror |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `DedicatedWorkerGlobalScope`
* `WorkerGlobalScope`
* 関連イベント: `message`
* `Worker.postMessage()`
* チャンネルメッセージングの使用