MessageEvent
============

**`MessageEvent`** インターフェースは対象のオブジェクトから受け取ったメッセージを表します。

次のメッセージを表すために使用されます。

* サーバー送信イベント （`EventSource.message_event` を参照）。
* ウェブソケット （WebSocket インターフェイスの `onmessage` プロパティを参照）。
* 文書間のメッセージ（`Window.postMessage()` および `Window.message_event` を参照）。
* チャンネルメッセージ （`MessagePort.postMessage()` および `MessagePort.message_event` を参照）。
* ワーカー／文書間メッセージ（上記 2 項目ほか、`Worker.postMessage()`, `Worker.message_event`, `ServiceWorkerGlobalScope.message_event` なども参照）。
* ブロードキャストチャンネル (`Broadcastchannel.postMessage()`) および `BroadcastChannel.message_event` を参照).

このイベントによって引き起こされる動作は、対応する `message` イベント（例えば、 上記の `onmessage` ハンドラーを使ったもの）のイベントハンドラーとして設定された関数の中で定義されています。

**注:** この機能は Web Worker 内で利用可能です

Event

MessageEventコンストラクター
--------

`MessageEvent()`

新しい `MessageEvent` を作成します。

インスタンスプロパティ
-----------

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

`MessageEvent.data` 読取専用 

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

`MessageEvent.origin` 読取専用 

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

`MessageEvent.lastEventId` 読取専用 

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

`MessageEvent.source` 読取専用 

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

`MessageEvent.ports` 読取専用 

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

インスタンスメソッド
----------

*このインターフェースは親である `Event` からメソッドを継承してします。*

`initMessageEvent()` 
非推奨

メッセージイベントを初期化します。**これ以上このメソッドを使用しないでください。代わりに、`MessageEvent()` コンストラクターを使用してください。**

例
-

基本的な共有ワーカーの例（共有ワーカーを実行）には 2 つの HTML ページがあり、それぞれのページが単純な計算をする JavaScript を実行しています。異なるスクリプトが計算を実行するために同一のワーカーファイルを使用しています。ページの異なるウィンドウ内で動作していても、どちらのスクリプトもワーカーファイルにアクセスできます。

次のコードスニペットは、 `SharedWorker` オブジェクトの作成を `SharedWorker()` コンストラクターを使用して行う様子を示しています。どちらのスクリプトもこれを含んでいます。


```js
const myWorker = new SharedWorker("worker.js");
```


次にどちらのスクリプトも `SharedWorker.port` プロパティで作成された `MessagePort` オブジェクトを通してワーカーにアクセスします。 onmessage イベントが addEventListener で装着されると、 `start()` メソッドでポートが手動で開きます。


```js
myWorker.port.start();
```


ポートが開くと、どちらのスクリプトもワーカーにメッセージを送信し、送信されたメッセージを `port.postMessage()` と `port.onmessage` でそれぞれ処理します。


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

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

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


ワーカーの内部では、 `onconnect` ハンドラーを使用して上記の同一のポートに接続しています。そのワーカーと関連付けられたポートは、`connect` イベントの `ports` プロパティで接続可能です。その後、ポートを開くために `MessagePort` の `start()` メソッドを、メインのスレッドから送信されたメッセージを処理するために `onmessage` ハンドラーを使用します。


```js
onconnect = (e) => {
  const port = e.ports[0];

  port.addEventListener("message", (e) => {
    const workerResult = `Result: ${e.data[0] \* e.data[1]}`;
    port.postMessage(workerResult);
  });

  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # the-messageevent-interface |

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

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

関連情報
----

* `ExtendableMessageEvent` — このインターフェイスに似ていますが、もっと柔軟性が必要なインターフェイスで使用されます。