2024/03/06 時点の英語版に基づき更新

files/ja/web/api/messagechannel/index.md

@@ -1,59 +1,68 @@
 ---
 title: MessageChannel
 slug: Web/API/MessageChannel
+l10n:
+  sourceCommit: e4c0939929e1b3e1fa3fd3da82b827fca3ed4c79
 ---
 
-{{APIRef("HTML DOM")}}
+{{APIRef("Channel Messaging API")}} {{AvailableInWorkers}}
 
-[Channel Messaging API](/ja/docs/Web/API/Channel_Messaging_API) の **`MessageChannel`** インターフェースは、新しいメッセージチャンネルを作成し、2 つの {{domxref("MessagePort")}} プロパティを通して、その間でデータを送信できます。
+**`MessageChannel`** は[チャンネルメッセージング API](/ja/docs/Web/API/Channel_Messaging_API) のインターフェイスで、新しいメッセージチャンネルを作成し、2 つの {{domxref("MessagePort")}} プロパティを通して、その間でデータを送信できます。
 
-{{AvailableInWorkers}}
+## コンストラクター
+
+- {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}}
+  - : 2 つの新しい {{domxref("MessagePort")}} オブジェクトを持つ新しい `MessageChannel` オブジェクトを返します。
 
 ## プロパティ
 
-- {{domxref("MessageChannel.port1")}} {{readonlyInline}}
+- {{domxref("MessageChannel.port1")}} {{ReadOnlyInline}}
   - : チャンネルの port1 を返します。
-- {{domxref("MessageChannel.port2")}} {{readonlyInline}}
+- {{domxref("MessageChannel.port2")}} {{ReadOnlyInline}}
   - : チャンネルの port2 を返します。
 
-## コンストラクタ
+## 例
 
-- {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}}
-  - : 2 つの新しい {{domxref("MessagePort")}} オブジェクトを持つ 新しい `MessageChannel` オブジェクトを返します。
+次の例では、{{domxref("MessageChannel.MessageChannel", "MessageChannel()")}} コンストラクターを使用して新しいチャンネルを作成する様子を見ることができます。
 
-## 例
+iframe が読み込まれると、{{domxref("MessagePort/message_event","onmessage")}} ハンドラーを {{domxref("MessageChannel.port1")}} に登録し、{{domxref("MessageChannel.port2")}} を {{domxref("window.postMessage")}} メソッドを使用して iframe へ転送します。
 
-次のコードブロックでは、{{domxref("MessageChannel()", "MessageChannel.MessageChannel")}} コンストラクタを使用して作成された新しいチャンネルを知ることができます。{{HTMLElement("iframe")}} が読み込まれると、{{domxref("MessagePort.postMessage")}} にメッセージを添えて {{domxref("MessageChannel.port2")}} を {{HTMLElement("iframe")}} へ渡します。すると、`handleMessage` ハンドラが {{HTMLElement("iframe")}} から返送されたメッセージに ({{domxref("MessagePort.onmessage")}} を使用して) 返答し、これを段落に挿入します。
+IFrame からメッセージが返送されると、`onMessage` 関数はそのメッセージを段落に出力します。
 
 ```js
-var channel = new MessageChannel();
-var para = document.querySelector("p");
+const channel = new MessageChannel();
+const output = document.querySelector(".output");
+const iframe = document.querySelector("iframe");
 
-var ifr = document.querySelector("iframe");
-var otherWindow = ifr.contentWindow;
+// iframe が読み込まれるのを待つ
+iframe.addEventListener("load", onLoad);
 
-ifr.addEventListener("load", iframeLoaded, false);
+function onLoad() {
+  // port1 のメッセージを待ち受けする
+  channel.port1.onmessage = onMessage;
 
-function iframeLoaded() {
-  otherWindow.postMessage("Hello from the main page!", "*", [channel.port2]);
+  // port2 を iframe へ転送する
+  iframe.contentWindow.postMessage("メインページからこんにちは！", "*", [
+    channel.port2,
+  ]);
 }
 
-channel.port1.onmessage = handleMessage;
-function handleMessage(e) {
-  para.innerHTML = e.data;
+// port1 で受け取ったメッセージを処理する
+function onMessage(e) {
+  output.innerHTML = e.data;
 }
 ```
 
-完全に動作する例は、Github 上の [channel messaging basic demo](https://github.com/mdn/channel-messaging-basic-demo) を参照してください ([実際のデモも実行できます](http://mdn.github.io/channel-messaging-basic-demo/))。
+完全に動作する例は、Github 上の [channel messaging basic demo](https://github.com/mdn/dom-examples/tree/main/channel-messaging-basic) を参照してください ([実際のデモも実行できます](https://mdn.github.io/dom-examples/channel-messaging-basic/))。
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
-## ブラウザの実装状況
+## ブラウザーの互換性
 
 {{Compat}}
 
 ## 関連情報
 
-- [Using channel messaging](/ja/docs/Web/API/Channel_Messaging_API/Using_channel_messaging)
+- [チャンネルメッセージングの使用](/ja/docs/Web/API/Channel_Messaging_API/Using_channel_messaging)

files/ja/web/api/messagechannel/messagechannel/index.md

@@ -1,34 +1,42 @@
 ---
-title: MessageChannel()
+title: "MessageChannel: MessageChannel() コンストラクター"
+short-title: MessageChannel()
 slug: Web/API/MessageChannel/MessageChannel
+l10n:
+  sourceCommit: e4c0939929e1b3e1fa3fd3da82b827fca3ed4c79
 ---
 
-{{APIRef("HTML DOM")}}
+{{APIRef("Channel Messaging API")}} {{AvailableInWorkers}}
 
-{{domxref("MessageChannel")}} インターフェースの `MessageChannel()` コンストラクタは、2 つの新しい {{domxref("MessagePort")}} オブジェクトを持つ新しい {{domxref("MessageChannel")}} オブジェクトを返します。
-
-{{AvailableInWorkers}}
+**`MessageChannel()`** は {{domxref("MessageChannel")}} インターフェイスのコンストラクターで、2 つの新しい {{domxref("MessagePort")}} オブジェクトを持つ新しい {{domxref("MessageChannel")}} オブジェクトを返します。
 
 ## 構文
 
+```js-nolint
+new MessageChannel()
 ```
-var channel = new MessageChannel();
-```
 
-### 戻り値
+### 引数
+
+なし ({{jsxref("undefined")}})。
+
+### 返値
 
-新たに作成された {{domxref("MessageChannel")}} オブジェクト。
+新しい {{domxref("MessageChannel")}} オブジェクト。
 
 ## 例
 
-次のコードブロックでは、{{domxref("MessageChannel()", "MessageChannel.MessageChannel")}} コンストラクタを使用して作成された新しいチャンネルを知ることができます。{{HTMLElement("iframe")}} が読み込まれると、{{domxref("MessagePort.postMessage")}} にメッセージを添えて {{domxref("MessageChannel.port2")}} を {{HTMLElement("iframe")}} へ渡します。すると、`handleMessage` ハンドラが {{HTMLElement("iframe")}} から返送されたメッセージに ({{domxref("MessagePort.onmessage")}} を使用して) 返答し、これを段落に挿入します。
+次のコードブロックでは、`MessageChannel()` コンストラクターを使用して作成された新しいチャンネルを知ることができます。
+{{HTMLElement("iframe")}} が読み込まれると、{{domxref("MessagePort.postMessage")}} にメッセージを添えて {{domxref("MessageChannel.port2")}} を `<iframe>` へ渡します。
+すると、`handleMessage` ハンドラーが `<iframe>` から返送されたメッセージに ({{domxref("MessagePort.message_event")}} を使用して) 返答し、これを段落に挿入します。
+{{domxref("MessageChannel.port1", "port1")}} は、いつメッセージが到着しているかどうかをチェックするために待ち受けされます。
 
 ```js
-var channel = new MessageChannel();
-var para = document.querySelector("p");
+const channel = new MessageChannel();
+const para = document.querySelector("p");
 
-var ifr = document.querySelector("iframe");
-var otherWindow = ifr.contentWindow;
+const ifr = document.querySelector("iframe");
+const otherWindow = ifr.contentWindow;
 
 ifr.addEventListener("load", iframeLoaded, false);
 
@@ -42,16 +50,16 @@ function handleMessage(e) {
 }
 ```
 
-完全に動作する例は、Github 上の [channel messaging basic demo](https://github.com/mdn/channel-messaging-basic-demo) を参照してください ([実際のデモも実行できます](http://mdn.github.io/channel-messaging-basic-demo/))。
+完全に動作する例は、Github 上の [channel messaging basic demo](https://github.com/mdn/channel-messaging-basic-demo) を参照してください ([実際のデモも実行できます](https://mdn.github.io/channel-messaging-basic-demo/))。
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
-## ブラウザの実装状況
+## ブラウザーの互換性
 
 {{Compat}}
 
 ## 関連情報
 
-- [Using channel messaging](/ja/docs/Web/API/Channel_Messaging_API/Using_channel_messaging)
+- [チャンネルメッセージングの使用](/ja/docs/Web/API/Channel_Messaging_API/Using_channel_messaging)

files/ja/web/api/messagechannel/port1/index.md

@@ -1,34 +1,29 @@
 ---
-title: MessageChannel.port1
+title: "MessageChannel: port1 プロパティ"
+short-title: port1
 slug: Web/API/MessageChannel/port1
+l10n:
+  sourceCommit: e4c0939929e1b3e1fa3fd3da82b827fca3ed4c79
 ---
 
-{{APIRef("HTML DOM")}}
+{{APIRef("Channel Messaging API")}} {{AvailableInWorkers}}
 
-**`port1`** は {{domxref("MessageChannel")}} インターフェースの読み取り専用プロパティで、メッセージチャンネルの最初のポートを返します。このポートは、チャンネルの元となるコンテキストに付属します。
+**`port1`** は {{domxref("MessageChannel")}} インターフェイスの読み取り専用プロパティで、メッセージチャンネルの第 1 ポートを返します。このポートは、チャンネルの元となるコンテキストに付属します。
 
-{{AvailableInWorkers}}
+## 値
 
-## 構文
-
-```
-channel.port1;
-```
-
-### 値
-
-チャンネルの最初のポートを表す {{domxref("MessagePort")}} オブジェクト。これはチャンネルの元となるコンテキストに付属するポートです。
+チャンネルの第 1 ポートを表す {{domxref("MessagePort")}} オブジェクト。これはチャンネルの元となるコンテキストに付属するポートです。
 
 ## 例
 
-次のコードブロックでは、 {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}} コンストラクターを使用して作成された新しいチャンネルが見られます。 {{HTMLElement("iframe")}} が読み込まれると、 {{domxref("MessageChannel.port2")}} を {{HTMLElement("iframe")}} へ、メッセージを通して {{domxref("MessagePort.postMessage")}} を使用して渡します。すると、 `handleMessage` ハンドラーが `<iframe>` から返送されたメッセージに ({{domxref("MessagePort.onmessage")}} を使用して) 返答し、これを段落に挿入します。メッセージが到着したとき、 `handleMessage` メソッドが `port1` に関連付けられて待ち受けします。
+次のコードブロックでは、 {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}} コンストラクターを使用して作成された新しいチャンネルが見られます。 {{HTMLElement("iframe")}} が読み込まれると、 {{domxref("MessageChannel.port2")}} を {{HTMLElement("iframe")}} へ、メッセージを通して {{domxref("MessagePort.postMessage")}} を使用して渡します。すると、 `handleMessage` ハンドラーが `<iframe>` から返送されたメッセージに（{{domxref("MessagePort.message_event")}} を使用して）返答し、これを段落に挿入します。メッセージが到着したとき、 `handleMessage` メソッドが `port1` に関連付けられて待ち受けします。
 
 ```js
-var channel = new MessageChannel();
-var para = document.querySelector("p");
+const channel = new MessageChannel();
+const para = document.querySelector("p");
 
-var ifr = document.querySelector("iframe");
-var otherWindow = ifr.contentWindow;
+const ifr = document.querySelector("iframe");
+const otherWindow = ifr.contentWindow;
 
 ifr.addEventListener("load", iframeLoaded, false);
 
@@ -46,10 +41,10 @@ function handleMessage(e) {
 
 {{Specifications}}
 
-## ブラウザーの対応
+## ブラウザーの互換性
 
 {{Compat}}
 
 ## 関連情報
 
-- [Using channel messaging](/ja/docs/Web/API/Channel_Messaging_API/Using_channel_messaging)
+- [チャンネルメッセージングの使用](/ja/docs/Web/API/Channel_Messaging_API/Using_channel_messaging)

files/ja/web/api/messagechannel/port2/index.md

@@ -1,34 +1,30 @@
 ---
-title: MessageChannel.port2
+title: "MessageChannel: port2 プロパティ"
+short-title: port2
 slug: Web/API/MessageChannel/port2
+l10n:
+  sourceCommit: e4c0939929e1b3e1fa3fd3da82b827fca3ed4c79
 ---
 
-{{APIRef("HTML DOM")}}
+{{APIRef("Channel Messaging API")}} {{AvailableInWorkers}}
 
-{{domxref("MessageChannel")}} インターフェースの **`port2`** 読み取り専用プロパティは、メッセージチャンネルの第 2 ポートを返します。このポートは、チャンネルの元となるコンテキストに付属します。
+**`port2`** は {{domxref("MessageChannel")}} インターフェイスの読み取り専用プロパティで、メッセージチャンネルの第 2 ポートを返します。このポートは、チャンネルのもう一方の端のコンテキストに接続されたポートで、メッセージが最初に送信される先です。
 
-{{AvailableInWorkers}}
+## 値
 
-## 構文
-
-```
-channel.port2;
-```
-
-### 値
-
-チャンネルの第 2 ポートを表す {{domxref("MessagePort")}} オブジェクト。これはチャンネルの元となるコンテキストに付属するポートです。
+チャンネルの第 2 ポートを表す {{domxref("MessagePort")}} オブジェクト。これはチャネルのもう一方の端のコンテキストに接続されたポートです。
 
 ## 例
 
-次のコードブロックでは、{{domxref("MessageChannel()", "MessageChannel.MessageChannel")}} コンストラクタを使用して作成された新しいチャンネルを知ることができます。{{HTMLElement("iframe")}} が読み込まれると、{{domxref("MessagePort.postMessage")}} にメッセージを添えて {{domxref("MessageChannel.port2")}} を {{HTMLElement("iframe")}} へ渡します。すると、`handleMessage` ハンドラが {{HTMLElement("iframe")}} から返送されたメッセージに ({{domxref("MessagePort.onmessage")}} を使用して) 返答し、これを段落に挿入します。
+次のコードブロックでは、 {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}} コンストラクターを使用して作成された新しいチャンネルが見られます。iframe が読み込まれると、`port2` を iframe へ、メッセージを通して {{domxref("MessagePort.postMessage")}} を使用して渡します。すると、 `handleMessage` ハンドラーが `<iframe>` から返送されたメッセージに（{{domxref("MessagePort.message_event")}} を使用して）返答し、これを段落に挿入します。
+メッセージが到着したタイミングを調べるために、{{domxref("MessageChannel.port1", "port1")}} が待ち受けされています。
 
 ```js
-var channel = new MessageChannel();
-var para = document.querySelector("p");
+const channel = new MessageChannel();
+const para = document.querySelector("p");
 
-var ifr = document.querySelector("iframe");
-var otherWindow = ifr.contentWindow;
+const ifr = document.querySelector("iframe");
+const otherWindow = ifr.contentWindow;
 
 ifr.addEventListener("load", iframeLoaded, false);
 
@@ -42,16 +38,16 @@ function handleMessage(e) {
 }
 ```
 
-完全に動作する例は、Github 上の [channel messaging basic demo](https://github.com/mdn/channel-messaging-basic-demo) を参照してください ([実際のデモも実行できます](http://mdn.github.io/channel-messaging-basic-demo/))。
+完全に動作する例は、Github 上の [channel messaging basic demo](https://github.com/mdn/channel-messaging-basic-demo) を参照してください ([実際のデモも実行できます](https://mdn.github.io/channel-messaging-basic-demo/))。
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
-## ブラウザの実装状況
+## ブラウザーの互換性
 
 {{Compat}}
 
 ## 関連情報
 
-- [Using channel messaging](/ja/docs/Web/API/Channel_Messaging_API/Using_channel_messaging)
+- [チャンネルメッセージングの使用](/ja/docs/Web/API/Channel_Messaging_API/Using_channel_messaging)