recursal/MDN huggingface dataset:
FetchEvent.respondWith()
========================

**`respondWith()`** は `FetchEvent` インターフェイスのメソッドで、ブラウザー既定の fetch 処理を抑止して、自分自身で `Response` 用のプロミスを提供できるようにします。

たいていの場合、受信者が理解できるどんなレスポンスでも提供できます。例えば、`<img>` がリクエストを開始した場合、レスポンス本体には画像データが必要です。セキュリティの理由から、グローバルルールが少しあります。

* `type` が "`opaque`" （不透明）の `Response` オブジェクトを返すことができるのは、 `fetchEvent.request` オブジェクトの `mode` が "`no-cors`" の場合だけです。これはプライベートなデータの漏洩を防ぎます。
* `type` が "`opaqueredirect`" （不透明なリダイレクト）の `Response` オブジェクトを返すことができるのは、`fetchEvent.request` オブジェクトの `mode` が "`manual`" の場合だけです。
* `fetchEvent.request` オブジェクトの `mode` が "`same-origin`" の場合、`type` が "`cors`" の `Response` オブジェクトを返すことはできません。
### リソースの最終 URL を指定する

Firefox 59 以降、サービスワーカーが `FetchEvent.respondWith()` に `Response` を提供すると、`Response.url` 値は最終的に解決された URL として、ネットワークリクエストに介入する際に伝搬されるようになりました。`Response.url` 値が空文字列の場合は、`FetchEvent.request.url` が最終的な URL として使用されます。

かつては `FetchEvent.request.url` がすべての場合に最終 URL として使われていました。与えられた `Response.url` は実際には無視されていました。

つまり、例えば、サービスワーカーがスタイルシートやワーカースクリプトに介入すると、与えられた `Response.url` が、サブリソースが読み込む相対的な `@import` や `importScripts()` の代わりに使われます (Firefox バグ 1222008)。

たいていのネットワークリクエストに対して、最終 URL を観測できないためこの変更は影響ありません。しかし、少しだけ関係する場合があります。

* `fetch()` が介入された場合、結果の `Response.url` で最終 URL を観測できます。
* ワーカースクリプトが介入された場合、最終 URL は `self.location` をセットするのに使われ、ワーカースクリプトの相対 URL の代わりのベース URL として使われます。
* スタイルシートが介入された場合、最終 URL は相対的な `@import` 読み込みの代わりのベース URL として使われます。

`Window` と `iframe` のナビゲーションリクエストはこの最終 URL を使わ「ない」ことに注意してください。HTML 仕様のナビゲーションのリダイレクトの処理方法では、`Window.location` のためにリクエスト URL を使います。これは、オフラインの時に、ユーザーに見える URL を変更することなくサイトが「代替の」ウェブページを提供できるということを意味します。

構文
--


```js
respondWith(response)
```

### 引数

`response`

`Response` または `Response` に解決される `Promise`。それ以外の場合は、ネットワークエラーがフェッチ元に返されます。

### 返値

なし (`undefined`)。

### 例外

`NetworkError` `DOMException`

上記の「グローバルルール」にヒントがあるように、ネットワークエラーは `FetchEvent.request.mode` と `Response.type` の値の組み合わせで起動されます。

`InvalidStateError` `DOMException`

イベントが配信されていないか、`respondWith()` が既に呼び出されています。

例
-

この fetch イベントはキャッシュ API からのレスポンスを返そうとし、ない場合にはネットワークにフォールバックします。


```js
addEventListener("fetch", (event) => {
  // 既定の動作を抑止し、リクエストを自分で処理します。
  event.respondWith(
    (async () => {
      // キャッシュからレスポンスを取得しようとします。
      const cachedResponse = await caches.match(event.request);
      // 見つかったらそれを返します。
      if (cachedResponse) return cachedResponse;
      // キャッシュ内に一致するものが見つからなかった場合は、ネットワークを使用します。
      return fetch(event.request);
    })(),
  );
});
```


**メモ:** `caches.match()` は便利なメソッドです。同等の機能は、`cache.match()` をそれぞれのキャッシュに対して（`caches.keys()` が返す順に）`Response` が返ってくるまで呼び出すことです。

仕様書
---

| Specification |
| --- |
| Service Workers # fetch-event-respondwith |

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

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

関連情報
----

* サービスワーカーの使用
* Is ServiceWorker ready?（英語）
* `Promise`
* フェッチ API
FetchEvent.clientId
===================

**`clientId`** は `FetchEvent` インターフェイスの読み取り専用プロパティで、現在のサービスワーカーが制御している `Client` の id を返します。

次に、`Clients.get()` メソッドに、この ID を渡して、関連するクライアントを取得できます。

### 値

クライアント ID を表す文字列です。

例
-


```js
self.addEventListener("fetch", (event) => {
  console.log(event.clientId);
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # fetch-event-clientid |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例（英語）
* Is ServiceWorker ready?（英語）
* `Promise`
* ウェブワーカーの使用
FetchEvent.request
==================

**`request`** は `FetchEvent` インターフェイスの読み取り専用プロパティで、イベントハンドラーを起動した `Request` を返します。

このプロパティは null 不可です（Firefox の場合、バージョン 46 以降）。 他の方法でリクエストが提供されない場合、コンストラクターの `options` オブジェクトにリクエストを設定する必要があります（`FetchEvent.FetchEvent()` を参照）。

### 値

`Request` オブジェクトです。

例
-

 このコードスニペットは、サービスワーカーのフェッチの例からのものです（フェッチの例をライブで実行）。 `onfetch` イベントハンドラーは、`fetch` イベントを待ち受けします。イベントが発生、`FetchEvent.respondWith()` に、制御されたページに戻すプロミスを渡します。
 このプロミスは、`Cache` オブジェクトで最初に一致した URL リクエストに解決されます。 一致が見つからない場合、コードはネットワークからレスポンスをフェッチします。

このコードは、`fetch()` 操作で発生した例外も処理します。 HTTP のエラーレスポンス（404 など）でも例外は発生しないことに注意してください。然るべきエラーコードが設定された通常のレスポンスオブジェクトを返します。


```js
self.addEventListener("fetch", (event) => {
  console.log("フェッチイベントの処理:", event.request.url);

  event.respondWith(
    caches.match(event.request).then((response) => {
      if (response) {
        console.log("キャッシュで見つかったレスポンス:", response);

        return response;
      }
      console.log(
        "キャッシュにレスポンスが見つかりません。 ネットワークから読み取ります...",
      );

      return fetch(event.request)
        .then((response) => {
          console.log("ネットワークからのレスポンス:", response);

          return response;
        })
        .catch((error) => {
          console.error("フェッチ失敗:", error);

          throw error;
        });
    }),
  );
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # fetch-event-request |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例（英語）
* Is ServiceWorker ready?（英語）
* `Promise`
* ウェブワーカーの使用
FetchEvent.preloadResponse
==========================

**`preloadResponse`** は `FetchEvent` インターフェイスの読み取り専用プロパティで、 `Promise` を返します。これは、ナビゲーション先読みが発生した場合はナビゲーション先読みの `Response` に解決し、れ以外の場合は `undefined` に解決します。

ナビゲーション先読みは、ナビゲーション先読みが有効 (en-US)であり、リクエストが `GET` リクエストであり、かつナビゲーションリクエスト（ページや iframe を読み込むときにブラウザーが生成）である場合に起動します。

サービスワーカーは、 fetch イベントハンドラーでこのプロミスを待機することで、サービスワーカーの起動中に行われた読み込みリクエストの完了を追跡することができます。

値
-

`Promise` で、 `Response` に解決するか、それ以外の場合は `undefined` に解決します。

例
-

このコードスニペットは、 Speed up Service Worker with Navigation Preloads （英語）からのものです。

`onfetch` イベントハンドラーは、`fetch` イベントを待ち受けします。
 起動したら、`FetchEvent.respondWith()` に、制御されたページに戻すプロミスを渡します。
 このプロミスは、リクエストされたリソースに解決します。

 もし `Cache` オブジェクトの中に一致する URL リクエストがあれば、コードはキャッシュからレスポンスを返すためのプロミスを返します。
 キャッシュに一致するものが見つからなかった場合、コードは `preloadResponse` にあるプロミスを返します。
 キャッシュや先読みされたレスポンスに一致するものがない場合、コードはネットワークからレスポンスをフェッチし、関連するプロミスを返します。


```js
addEventListener("fetch", (event) => {
  event.respondWith(
    (async () => {
      // 可能な場合はキャッシュから応答します
      const cachedResponse = await caches.match(event.request);
      if (cachedResponse) return cachedResponse;

      // それ以外の場合は、プリロード済みのレスポンスがあればそれを使用します
      const response = await event.preloadResponse;
      if (response) return response;

      // それ以外の場合は、ネットワークを試します。
      return fetch(event.request);
    })(),
  );
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # fetch-event-preloadresponse |

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

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

関連情報
----

* Speed up Service Worker with Navigation Preloads（英語）
* サービスワーカーの使用
* サービスワーカーの基本的なコード例（英語）
* Is ServiceWorker ready?（英語）
* `Promise`
* ウェブワーカーの使用
FetchEvent.replacesClientId
===========================

**`replacesClientId`** は `FetchEvent` インターフェイスの読み取り専用プロパティで、ページナビゲーション中に置き換えられるクライアントの `id` です。

例えば、ページ A からページ B に移動する場合、`replacesClientId` はページ A に関連するクライアントの ID です。 `about:blank` のクライアントは置き換えられるのではなく再利用されるため、`about:blank` から別のページに移動するときは、空文字列になることがあります。

さらに、フェッチがナビゲーションでない場合、 `replacesClientId` は空の文字列になります。 これは、ナビゲーションの直前に間もなく置き換えられるクライアントにアクセス/通信するために使用できます。

### 値

文字列です。

例
-


```js
self.addEventListener("fetch", (event) => {
  console.log(event.replacesClientId);
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # fetch-event-replacesClientId |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例（英語）
* Is ServiceWorker ready?（英語）
* `Promise`
* ウェブワーカーの使用
FetchEvent.resultingClientId
============================

**`resultingClientId`** は `FetchEvent` インターフェイスの読み取り専用プロパティで、ページナビゲーション中に前のクライアントを置き換えるクライアントの `id` です。

例えば、ページ A からページ B に移動する場合、`resultingClientId` はページ B に関連するクライアントの id です。

フェッチリクエストがサブリソースのリクエストであるか、リクエストの宛先 (`destination`) が `report` である場合、`resultingClientId` は空文字列になります。

### 値

文字列です。

例
-


```js
self.addEventListener("fetch", (event) => {
  console.log(event.resultingClientId);
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # fetch-event-resultingclientid |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例（英語）
* Is ServiceWorker ready?（英語）
* `Promise`
* ウェブワーカーの使用
FetchEvent.isReload
===================

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

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

**`isReload`** は `FetchEvent` インターフェイスの読み取り専用プロパティで、ユーザーがページを再読み込みしようとしてこのイベントが配信されたのであれば `true` を返し、それ以外ならば `false` を返します。
 更新ボタンを押すと再読み込みされますが、リンクをクリックしたり、戻るボタンを押したりしても再読み込みされません。

値
-

論理値です。

例
-


```js
self.addEventListener("fetch", (event) => {
  event.respondWith(async () => {
    if (event.isReload) {
      //Return something
    } else {
      //Return something else
    }
  })();
});
```

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例（英語）
* Is ServiceWorker ready?（英語）
* `Promise`
* ウェブワーカーの使用
FetchEvent()
============

**`FetchEvent()`** コンストラクターは、新しい `FetchEvent` オブジェクトを作成します。

構文
--


```js
new FetchEvent(type, options)
```

### 引数

`type`

 イベントの名前を表す文字列です。
 大文字小文字の区別があり、ブラウザーは常に `fetch` に設定します。


`options`

オブジェクトで、*`ExtendableEvent()` で定義されているプロパティに加えて*、以下のプロパティを持つ可能性があります。

`request`

起動されたイベントハンドラーに渡す `Request` オブジェクトです。

`preloadResponse`

事前にクライアントに読み込まれたレスポンスを返す `Promise` です。

`clientId` 省略可

現在のサービスワーカーを制御している `Client` です。既定では `""` です。

`isReload` 
非推奨
 省略可

 イベントが配信されたときに、ページが再読み込みされたかどうかを示す論理値。もしそうなら `true` を、そうでないなら `false` を返します。
 通常、ブラウザーで更新ボタンを押すと 再読み込みされますが、リンクをクリックしたり、戻るボタンを押したりすると再読み込みされません。存在しない場合は、 `false` が既定値として設定されます。


`replacesClientId` 省略可

文字列で、 `resultingClientId` で置き換えようとしているクライアントを識別します。既定値は `""` です。

`resultingClientId` 省略可

文字列で、ページ読み込みの結果、クライアントが変更された場合の新しい `clientId` を格納します。既定値は `""` です。


返値
--

新しい `FetchEvent` オブジェクトです。

仕様書
---

| Specification |
| --- |
| Service Workers # dom-fetchevent-fetchevent |

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

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

関連情報
----

* `Promise`
* フェッチ API
GPUAdapter: limits プロパティ
========================

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

`GPUAdapter` インターフェイスの読み取り専用プロパティ **`limits`** は、アダプターが対応している制限を表現する `GPUSupportedLimits` オブジェクトを返します。

ドライブバイフィンガープリンティングで利用できる一意な情報を減らすため、ブラウザーは各 GPU の正確な制限を報告するのではなく、それぞれの制限で異なる段階ごとの値を報告する可能性が高いです。たとえば、ある制限の段階は 2048、8192、32768 である可能性があります。GPU の実際の制限が 16384 である場合は、このブラウザーは 8192 として報告します。

異なるブラウザーは異なる扱いをする可能性があり、段階の値は時間の経過で変わる可能性があるため、正確な制限の値を予想するのは難しいです。徹底的にテストすることが推奨されます。

値
-

`GPUSupportedLimits` オブジェクトのインスタンスです。

例
-

以下のコードでは、`GPUAdapter.limits` の `maxBindGroups` の値を問い合わせ、6 以上であるかをチェックします。理論上のサンプルアプリケーションは理想的には 6 個のバインドグループを必要とするので、返された値が 6 以上の場合は `requiredLimits` オブジェクトに最大値 6 を追加適用し、`GPUAdapter.requestDevice()` を用いてこの制限の要件を満たすデバイスを要求します。


```js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU に対応していません。");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("WebGPU アダプターを要求できませんでした。");
  }

  const requiredLimits = {};

  // アプリケーションは理想的には 6 個のバインドグループを必要とするので、
  // アプリケーションが必要とする分の要求を試みる
  if (adapter.limits.maxBindGroups >= 6) {
    requiredLimits.maxBindGroups = 6;
  }

  const device = await adapter.requestDevice({
    requiredLimits,
  });

  // ...
}
```

仕様書
---

| Specification |
| --- |
| WebGPU # dom-gpuadapter-limits |

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

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

関連情報
----

* WebGPU API
GPUAdapter: isFallbackAdapter プロパティ
===================================

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

`GPUAdapter` インターフェイスの読み取り専用プロパティ **`isFallbackAdapter`** は、アダプターがフォールバックアダプターである場合は `true` を返し、そうでない場合は `false` を返します。

値
-

論理値です。

例
-


```js
async function init() {
  if (!navigator.gpu) {
    throw Error('WebGPU に対応していません。');
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error('WebGPU アダプターを要求できませんでした。');
  }

  const fallback = adapter.isFallbackAdapter;
  console.log(fallback);

  // ...
```

仕様書
---

| Specification |
| --- |
| WebGPU # dom-gpuadapter-isfallbackadapter |

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

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

関連情報
----

* WebGPU API
GPUAdapter: features プロパティ
==========================

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

`GPUAdapter` インターフェイスの読み取り専用プロパティ **`features`** は、アダプターが対応している追加の機能を表現する `GPUSupportedFeatures` オブジェクトを返します。

仮想のハードウェアで対応している機能であっても、対応するすべてのブラウザーの WebGPU ですべての機能が使用できるわけではないことに注意するべきです。これは、たとえば以下の場合など、仮想のシステム、ブラウザー、アダプターの制約によるものである可能性があります。

* 仮想のシステムがあるブラウザーと互換性がある方法で機能を利用可能にする保証ができないかもしれません。
* ブラウザーのベンダーが機能への対応を実装するセキュアな方法をまだ見つけられていないか、単に実装まで手が回っていないかもしれません。

WebGPU アプリケーションで特定の追加機能の恩恵を受けたい場合は、徹底的にテストすることが推奨されます。

値
-

`GPUSupportedFeatures` オブジェクトのインスタンスです。これは Set 風オブジェクトです。

例
-

以下のコードでは、`GPUAdapter` で `texture-compression-astc` 機能が利用可能かをチェックします。利用可能であれば、それを配列 `requiredFeatures` にプッシュし、`GPUAdapter.requestDevice()` でこの機能を要件としてデバイスを要求します。


```js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU に対応していません。");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("WebGPU アダプターを要求できませんでした。");
  }

  const requiredFeatures = [];

  if (adapter.features.has("texture-compression-astc")) {
    requiredFeatures.push("texture-compression-astc");
  }

  const device = await adapter.requestDevice({
    requiredFeatures,
  });

  // ...
}
```

仕様書
---

| Specification |
| --- |
| WebGPU # dom-gpuadapter-features |

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

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

関連情報
----

* WebGPU API
GPUAdapter: requestAdapterInfo() メソッド
=====================================

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

`GPUAdapter` インターフェイスの **`requestAdapterInfo()`** メソッドは、アダプターに関する特定用の情報が格納された `GPUAdapterInfo` オブジェクトで解決する `Promise` を返します。

このメソッドの背景の意図は、開発者がユーザーの GPU の特定の詳細を要求し、GPU に固有のバグの回避策を先手を取って適用したり、異なる GPU のアーキテクチャにより合う異なるコードパスを提供したりできるようにすることです。このような情報を提供すると、フィンガープリンティングに利用でき、セキュリティリスクが発生します。そのため、共有される情報は最小限にとどめられ、異なるブラウザーのベンダー間で情報の種類と粒度を共通化するでしょう。

**メモ:** 仕様書には `requestAdapterInfo()` 用の引数として、上記のセキュリティリスクを低減することを意図した `unmaskHints` が存在します。これに対応すれば、開発者は本当に知る必要がある値を指定することができるようになり、ユーザーはメソッドが呼び出されたとき情報を共有してよいかを尋ねる許可プロンプトを提示されるようになるでしょう。許可プロンプトで守られる場合、メソッドのフィンガープリンティングの対象としての有用度は下がるので、ブラウザーのベンダーはより有用な情報を共有するようになるでしょう。

構文
--


```js
requestAdapterInfo()
```

### 引数

なし

### 返値

`GPUAdapterInfo` オブジェクトのインスタンスで解決する `Promise` です。

例
-


```js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU に対応していません。");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("WebGPU アダプターを要求できませんでした。");
  }

  const adapterInfo = await adapter.requestAdapterInfo();
  console.log(adapterInfo.vendor);
  console.log(adapterInfo.architecture);

  // ...
}
```

仕様書
---

| Specification |
| --- |
| WebGPU # dom-gpuadapter-requestadapterinfo |

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

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

関連情報
----

* WebGPU API
MIDIAccess: statechange イベント
============================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`MIDIAccess` インターフェイスの **`statechange`** イベントは、新しい MIDI ポートが追加されるか、既存のポートの状態が変わると発火します。

構文
--

イベント名を `addEventListener()` のようなメソッドで用いるか、イベントハンドラープロパティを設定します。


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

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

イベント型
-----

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

Event

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

`MIDIConnectionEvent.port` 読取専用 

接続または切断されたポートを表す `MIDIPort` のインスタンスへの参照を返します。

例
-

`Navigator.requestMIDIAccess()` メソッドが `MIDIAccess` オブジェクトで解決する `Promise` を返します。ポートの状態が変わると、そのポートの情報をコンソールに出力します。


```js
navigator.requestMIDIAccess().then((access) => {
  access.onstatechange = (event) => {
    console.log(event.port.name, event.port.manufacturer, event.port.state);
  };
});
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-midiaccess-onstatechange |

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

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

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`MIDIAccess` の読み取り専用プロパティ **`inputs`** は、任意の利用可能な MIDI 入力ポートへのアクセスを提供します。

値
-

`MIDIInputMap` のインスタンスです。

例
-

`Navigator.requestMIDIAccess()` メソッドが `MIDIAccess` オブジェクトで解決する `Promise` を返します。`inputs` の値をコンソールに出力すると、`MIDIInputMap` が返ります。


```js
navigator.requestMIDIAccess().then((access) => {
  console.log(access.inputs);
});
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-midiaccess-inputs |

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

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

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`MIDIAccess` インターフェイスの読み取り専用プロパティ **`sysexEnabled`** は、現在の `MIDIAccess` インスタンスでシステムエクスクルーシブへの対応が有効かどうかを表します。

値
-

論理値です。

例
-

`Navigator.requestMIDIAccess()` メソッドが `MIDIAccess` オブジェクトで解決する `Promise` を返します。`sysexEnabled` の値をコンソールに出力すると論理値が返り、これはシステムエクスクルーシブへの対応が有効になっている場合は `true` になります。


```js
navigator.requestMIDIAccess().then((access) => {
  console.log(access.sysexEnabled);
});
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-midiaccess-sysexenabled |

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

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

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`MIDIAccess` インターフェイスの読み取り専用プロパティ **`outputs`** は、任意の利用可能な MIDI 出力ポートへのアクセスを提供します。

値
-

`MIDIOutputMap` のインスタンスです。

例
-

`Navigator.requestMIDIAccess()` メソッドが `MIDIAccess` オブジェクトで解決する `Promise` を返します。`outputs` の値をコンソールに出力すると、`MIDIOutputMap` が返ります。


```js
navigator.requestMIDIAccess().then((access) => {
  console.log(access.outputs);
});
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-midiaccess-outputs |

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

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

**`visible`** は `BarProp` インターフェイスの読み取り専用プロパティで、このオブジェクトが表すユーザーインターフェイス要素が可視であれば `true` を返します。

値
-

`Boolean` は最上位のウィンドウが `window.open` によって request a popup window.popup\_feature で開かれた場合に真になります。

**メモ:** 過去には、これは使用するインターフェイス要素が表示されているかどうかを表していました。しかし、プライバシーの観点から、これは各インターフェイス要素の実際の可視性を表すことはできなくなりました。

例
-

次の例はウィンドウがポップアップでない場合、コンソールに `true` を出力します。


```js
console.log(window.locationbar.visible);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-barprop-visible |

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

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

`delayTime` は `DelayNode` インターフェイスのプロパティで、適用する遅延量を表す a-rate の `AudioParam` です。

`delayTime` は秒単位で表し、その最小値は `0` です。最大値は作成時に、 `BaseAudioContext.createDelay` メソッドの `maxDelayTime` 引数で定義されます。

**メモ:** 返される `AudioParam` は読み取り専用ですが、表している値はそうではありません。

値
-

`AudioParam` です。

例
-

コード例については `BaseAudioContext.createDelay()` を参照してください。

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-delaynode-delaytime |

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

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

関連情報
----

* ウェブオーディオ API の使用
UserActivation.isActive
=======================

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

`UserActivation` インターフェイスの読み取り専用プロパティ **`isActive`** は、現在のウインドウでユーザーによる一時的な有効化がされているかを表します｡(一時的な有効化を参照してください)

値
-

`boolean` です｡

例
-

### 最近ユーザーによる操作が行われたかをチェックする

ユーザーが最近ページを操作したかをチェックするために `isActive` プロパティを使用します。


```js
if (navigator.userActivation.isActive) {
  // 例えば､メディアの再生の要求に進む
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-useractivation-isactive |

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

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

関連情報
----

* `UserActivation`
* `UserActivation.hasBeenActive`
* ユーザーによる有効化によって制御される機能
UserActivation.hasBeenActive
============================

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

`UserActivation` インターフェイスの読み取り専用プロパティ **`hasBeenActive`** は、現在のウインドウでユーザーによる粘着的な有効化がされているかを表します。(粘着的な有効化を参照してください)

値
-

`boolean` です。

例
-

### これまでにユーザーによる操作が行われたかをチェックする

ユーザーがこれまでにページを操作したかをチェックするために `hasBeenActive` を使用します。


```js
if (navigator.userActivation.hasBeenActive) {
  // 例えば､アニメーションの自動再生に進む
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-useractivation-hasbeenactive |

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

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

関連情報
----

* `UserActivation`
* `UserActivation.isActive`
* ユーザーによる有効化によって制御される機能
WritableStream: close() メソッド
============================

**`close()`** は `WritableStream` インターフェイスのメソッドで、関連付けられたストリームを閉じます。このメソッドが呼び出される前に書き込まれたチャンクはすべて、返されたプロミスが履行される前に送信されます。

これは `WritableStreamDefaultWriter` を `getWriter()` で取得し、 `close()` を呼び付けるのと同じです。

構文
--


```js
close()
```

### 引数

なし。

### 返値

`Promise` で、閉じる前に残りのチャンクがすべて正常に書き込まれた場合は `undefined` で履行され、処理中に問題が発生した場合はエラーで拒否されます。

### 例外

`TypeError`

閉じようとしているストリームがロックされています。

例
-

次の例は `WritableStream` のいくつかの機能を示しています。これはカスタムシンクと、 API が提供するキューイング戦略による `WritableStream` の作成を示しています。次に `sendMessage()` という関数を呼び出して、新しく作成したストリームと文字列を渡します。この関数の内部では、ストリームの `getWriter()` メソッドを呼び出して `WritableStreamDefaultWriter` のインスタンスを返します。 `forEach()` 呼び出しは、文字列の各チャンクをストリームに書き込むために使用されます。最後に、 `write()` と `close()` はチャンクとストリームの成功と失敗を処理するプロミスを返します。なお、ストリーム自体で `close()` を呼び出すには、 `defaultWriter.releaseLock();` を使用してライターを切断する必要があります。
```

<ul id="log"></ul>
```


```
const list = document.getElementById("log");
function log(message) {
  const listItem = document.createElement("li");
  listItem.textContent = message;
  list.appendChild(listItem);
}
```



```js
function sendMessage(message, writableStream) {
  // defaultWriter is of type WritableStreamDefaultWriter
  const defaultWriter = writableStream.getWriter();
  const encoder = new TextEncoder();
  const encoded = encoder.encode(message, { stream: true });
  encoded.forEach((chunk) => {
    defaultWriter.ready
      .then(() => {
        defaultWriter.write(chunk);
      })
      .catch((err) => {
        log("Chunk error:", err);
      });
  });

  // Call ready again to ensure that all chunks are written
  // before closing the writer.
  defaultWriter.ready
    .then(() => {
      defaultWriter.releaseLock();
      writableStream.close();
    })
    .then(() => {
      log("All chunks written / stream closed.");
    })
    .catch((err) => {
      log("Stream error:", err);
    });
}

const decoder = new TextDecoder("utf-8");
const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
let result = "";
const writableStream = new WritableStream(
  {
    // Implement the sink
    write(chunk) {
      return new Promise((resolve, reject) => {
        const buffer = new ArrayBuffer(1);
        const view = new Uint8Array(buffer);
        view[0] = chunk;
        const decoded = decoder.decode(view, { stream: true });
        const listItem = document.createElement("li");
        result += decoded;
        resolve();
      });
    },
    close() {
      const listItem = document.createElement("li");
      log(`[MESSAGE RECEIVED] ${result}`);
    },
    abort(err) {
      log("Sink error:", err);
    },
  },
  queuingStrategy,
);

log("Sending 'Hello, world.' message.");
sendMessage("Hello, world.", writableStream);
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-ws-close① |

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

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