recursal/MDN huggingface dataset:
PerformanceResourceTiming.initiatorType
=======================================

**`initiatorType`** は読み取り専用プロパティで、リソースの読み込みを開始したウェブプラットフォームの機能を表す文字列です。

**メモ:** このプロパティは、読み込まれるコンテンツの種類を表すものではありません。`.css` ファイルは `<link>` 要素を使用して読み込むことができ、 `initiatorType` が `link` となります。CSS ファイルで `background: url()` を使用して画像を読み込んだ場合、 `initiatorType` は `img` ではなく `css` になります。

値
-

`initatorType` プロパティは以下の値を取ることができ、どの条件にも一致しない場合は `other` を取ることができます。

`audio`

このリクエストが `<audio>` 要素の `src` 属性によって開始された場合。

`beacon`

このリクエストが `navigator.sendBeacon()` メソッドによって開始された場合。

`body`

このリクエストが `<body>` 要素の `background` 属性によって開始された場合。

`css`

このリクエストが CSS の `url()` 関数によって開始された場合。

`early-hint`

このリクエストが `103` の `Early Hint` レスポンスによって開始された場合。

`embed`

このリクエストが `<embed>` 要素の `src` 属性によって開始された場合。

`fetch`

このリクエストが `fetch()` メソッドによって開始された場合。

`frame`

このリクエストが `<frame>` 要素の読み込みによって開始された場合。

`iframe`

このリクエストが `<iframe>` 要素の `src` 属性によって開始された場合。

`icon` 
Non-standard

このリクエストがファビコンによって開始された場合。標準外であり、Safari でのみ報告されます。

`image`

このリクエストが `<image>` 要素によって開始された場合。

`img`

このリクエストが `<img>` 要素の `src` または `srcset` 属性によって開始された場合。

`input`

このリクエストが `<input>` 要素の `image` 型によって開始された場合。

`link`

このリクエストが `<link>` 要素によって開始された場合。

`navigation`

このリクエストがナビゲーションリクエストによって開始された場合。

`object`

このリクエストが `<object>` 要素によって開始された場合。

`ping`

このリクエストが `<a>` 要素の `ping` によって開始された場合。

`script`

このリクエストが `<script>` 要素によって開始された場合。

`track`

このリクエストが `<track>` 要素の `src` によって開始された場合。

`video`

このリクエストが `<video>` 要素の `poster` または `src` によって開始された場合。

`xmlhttprequest`

このリクエストが `XMLHttpRequest` によって開始された場合。

例
-

### リソースのフィルタリング

`initiatorType` プロパティを使用すると、特定のリソー スタイミング項目のみを取得することができます。例えば、`<script>` 要素によって開始されたものだけを取得することができます。

`PerformanceObserver` を使用した例です。このオブジェクトは、新しい `resource` パフォーマンス項目がブラウザーのパフォーマンスタイムラインに記録されると、それを通知します。オブザーバーが作成される前の項目にアクセスするために `buffered` オプションを使用します。


```js
const observer = new PerformanceObserver((list) => {
  const scripts = list.getEntries().filter((entry) => {
    return entry.initiatorType === "script";
  });
  console.log(scripts);
});

observer.observe({ type: "resource", buffered: true });
```


`Performance.getEntriesByType()` を使用した例です。このメソッドを呼び出した時点でブラウザー上のパフォーマンスタイムラインに存在する `resource` パフォーマンス項目のみを表示します。


```js
const scripts = performance.getEntriesByType("resource").filter((entry) => {
  return entry.initiatorType === "script";
});
console.log(scripts);
```

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-initiatortype |

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

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

**`requestStart`** は読み取り専用プロパティで、ブラウザーがサーバ、キャッシュ、またはローカルリソースにリソースのリクエストを開始する直前の `timestamp` を返します。トランスポート接続が失敗してブラウザーがリクエストを終了すると、返される値は再試行要求の開始になります。

`requestStart` には *end* プロパティはありません。リクエスト時間を計測するには、 `responseStart` - `requestStart` を計算してください（下記の例を参照してください）。

値
-

`requestStart` プロパティは以下の値を取ります。

* ブラウザーがサーバーからリソースのリクエストを始める直前の時刻を表す `DOMHighResTimeStamp` です。
* リソースがキャッシュから即座に取得された場合は `0` です。
* リソースがオリジン間リクエストで取得され、HTTP の `Timing-Allow-Origin` レスポンスヘッダーが使用されなかった場合は `0` となります。
例
-

### リクエスト時間の計測

`requestStart` と `responseStart` プロパティを使用して、、リクエストにかかる時間を測定することができます。


```js
const request = entry.responseStart - entry.requestStart;
```


`PerformanceObserver` を使用した例です。このオブジェクトは、新しい `resource` パフォーマンス項目がブラウザーのパフォーマンスタイムラインに記録されると、それを通知します。オブザーバーが作成される前の項目にアクセスするために `buffered` オプションを使用します。


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const request = entry.responseStart - entry.requestStart;
    if (request > 0) {
      console.log(`${entry.name}: Request time: ${request}ms`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });
```


`Performance.getEntriesByType()` を使用した例です。このメソッドを呼び出した時点でブラウザー上のパフォーマンスタイムラインに存在する `resource` パフォーマンス項目のみを表示します。


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const request = entry.responseStart - entry.requestStart;
  if (request > 0) {
    console.log(`${entry.name}: Request time: ${request}ms`);
  }
});
```

### オリジン間のタイミング情報

`requestStart` プロパティの値が `0` である場合、そのリソースはオリジン間リクエストである可能性があります。オリジン間のタイミング情報を見るためには、`Timing-Allow-Origin` HTTP レスポンスヘッダーを設定する必要があります。

例えば、`https://developer.mozilla.org` にタイミングリソースを見ることを許可するには、オリジン間リソースが送信する必要があります。


```http
Timing-Allow-Origin: https://developer.mozilla.org
```

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-requeststart |

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

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

関連情報
----

* `Timing-Allow-Origin`
PerformanceResourceTiming.connectStart
======================================

**`connectStart`** は読み取り専用プロパティで、リソースを取得するためにユーザーエージェントがサーバへの接続の確立を開始する直前の `timestamp` を返します。

値
-

`connectStart` プロパティは以下の値を取ります。

* ブラウザーがリソースを取得するためにサーバーとのコネクションを確立し始める直前の `DOMHighResTimeStamp`。
* リソースがキャッシュから即座に取得された場合は `0` です。
* リソースがオリジン間リクエストで取得され、HTTP の `Timing-Allow-Origin` レスポンスヘッダーが使用されなかった場合は `0` となります。
例
-

### TCP ハンドシェイク時間の計測

`connectStart` と `connectEnd` プロパティを使用して、 TCP ハンドシェイクが発生したときにどれくらいかかるかを計測することができます。


```js
const tcp = entry.connectEnd - entry.connectStart;
```


`PerformanceObserver` を使用した例です。このオブジェクトは、新しい `resource` パフォーマンス項目がブラウザーのパフォーマンスタイムラインに記録されると、それを通知します。オブザーバーが作成される前の項目にアクセスするために `buffered` オプションを使用します。


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const tcp = entry.connectEnd - entry.connectStart;
    if (tcp > 0) {
      console.log(`${entry.name}: TCP handshake duration: ${tcp}ms`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });
```


`Performance.getEntriesByType()` を使用した例です。このメソッドを呼び出した時点でブラウザー上のパフォーマンスタイムラインに存在する `resource` パフォーマンス項目のみを表示します。


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const tcp = entry.connectEnd - entry.connectStart;
  if (tcp > 0) {
    console.log(`${entry.name}: TCP handshake duration: ${tcp}ms`);
  }
});
```

### オリジン間のタイミング情報

`connectStart` プロパティの値が `0` である場合、そのリソースはオリジン間リクエストである可能性があります。オリジン間のタイミング情報を見るためには、HTTP の `Timing-Allow-Origin` レスポンスヘッダーを設定する必要があります。

例えば、`https://developer.mozilla.org` にタイミングリソースを見ることを許可するには、オリジン間リソースで次のものを送信する必要があります。


```http
Timing-Allow-Origin: https://developer.mozilla.org
```

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-connectstart |

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

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

関連情報
----

* `Timing-Allow-Origin`
PerformanceResourceTiming.connectEnd
====================================

**`connectEnd`** は読み取り専用プロパティで、ブラウザーがリソースを取得するためにサーバーへの接続を確立し終わった直後の `timestamp` を返します。このタイムスタンプ値には、トランスポート接続を確立するための時間、TLS ハンドシェイクや SOCKS 認証などの他の時間が含まれます。

値
-

`connectEnd` プロパティは以下の値を取ります。

* 接続が確立された後の時間を表す `DOMHighResTimeStamp`。
* リソースがキャッシュから即座に取得された場合は `0` です。
* リソースがオリジン間リクエストで取得され、HTTP の `Timing-Allow-Origin` レスポンスヘッダーが使用されなかった場合は `0` となります。
例
-

### TCP ハンドシェイク時間の計測

`connectEnd` と `connectStart` プロパティを使用して、 TCP ハンドシェイクが発生したときにどれくらいかかるかを計測することができます。


```js
const tcp = entry.connectEnd - entry.connectStart;
```


`PerformanceObserver` を使用した例です。このオブジェクトは、新しい `resource` パフォーマンス項目がブラウザーのパフォーマンスタイムラインに記録されると、それを通知します。オブザーバーが作成される前の項目にアクセスするために `buffered` オプションを使用します。


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const tcp = entry.connectEnd - entry.connectStart;
    if (tcp > 0) {
      console.log(`${entry.name}: TCP handshake duration: ${tcp}ms`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });
```


`Performance.getEntriesByType()` を使用した例です。このメソッドを呼び出した時点でブラウザー上のパフォーマンスタイムラインに存在する `resource` パフォーマンス項目のみを表示します。


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const tcp = entry.connectEnd - entry.connectStart;
  if (tcp > 0) {
    console.log(`${entry.name}: TCP handshake duration: ${tcp}ms`);
  }
});
```

### オリジン間のタイミング情報

`connectEnd` プロパティの値が `0` である場合、そのリソースはオリジン間リクエストである可能性があります。オリジン間のタイミング情報を見るためには、HTTP の `Timing-Allow-Origin` レスポンスヘッダーを設定する必要があります。

例えば、`https://developer.mozilla.org` にタイミングリソースを見ることを許可するには、オリジン間リソースで次のものを送信する必要があります。


```http
Timing-Allow-Origin: https://developer.mozilla.org
```

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-connectend |

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

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

関連情報
----

* `Timing-Allow-Origin`
PerformanceResourceTiming.serverTiming
======================================

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

**`serverTiming`** は読み取り専用プロパティで、サーバーのタイミング測定が入った `PerformanceServerTiming` (en-US) 項目の配列を返します。

サーバーのタイミング測定では、サーバーが次のような `Server-Timing` ヘッダーを送信する必要があります。


```http
Server-Timing: cache;desc="Cache Read";dur=23.2
```


`serverTiming` の項目は、 `navigation` と `resource` の項目で使用することができます。

値
-

`PerformanceServerTiming` (en-US) 項目の配列です。

例
-

### サーバータイミング項目のログ出力

`PerformanceObserver` を使用して、 `PerformanceServerTiming` (en-US) 項目を監視することができます。各サーバー項目の時間は、コンソールにログ出力されます。

ブラウザーに記録された新しい `resource` パフォーマンス項目を通知する `PerformanceObserver` を使用した例です。オブザーバーが作成される前の項目にアクセスするには `buffered` オプションを使用します。


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    entry.serverTiming.forEach((serverEntry) => {
      console.log(`${serverEntry.name} duration: ${serverEntry.duration}`);
    });
  });
});

["navigation", "resource"].forEach((type) =>
  observer.observe({ type, buffered: true }),
);
```


`Performance.getEntriesByType()` を使用した例です。このメソッドを呼び出した時点でブラウザー上のパフォーマンスタイムラインに存在する `resource` パフォーマンス項目のみを表示します。


```js
for (const entryType of ["navigation", "resource"]) {
  for (const { name: url, serverTiming } of performance.getEntriesByType(
    entryType,
  )) {
    if (serverTiming) {
      for (const { name, duration } of serverTiming) {
        console.log(`${url}: ${name} duration: ${duration}`);
      }
    }
  }
}
```

### オリジン外へのサーバータイミング情報の公開

サーバーのタイミング情報へのアクセスは、同じオリジン内に制限されます。オリジンをまたいでタイミング情報を公開するには、HTTP の `Timing-Allow-Origin` レスポンスヘッダーを設定する必要があります。

例えば、`https://developer.mozilla.org` にサーバーのタイミング情報を見ることを許可するには、cross-origin リソースを送信する必要があります。


```http
Timing-Allow-Origin: https://developer.mozilla.org
```

仕様書
---

| Specification |
| --- |
| Server Timing # servertiming-attribute |

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

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

関連情報
----

* `PerformanceServerTiming` (en-US)
* `Server-Timing`
PerformanceResourceTiming.nextHopProtocol
=========================================

**`nextHopProtocol`** は読み取り専用プロパティで、リソースを取得するために使用されるネットワークプロトコルを表す ALPN プロトコル ID (RFC7301) で識別される文字列です。

プロキシーが使用されている場合、トンネル接続が確立されていると、このプロパティはトンネリングプロトコルの ALPN プロトコル ID を返します。それ以外の場合、このプロパティはプロキシーへの最初のホップの ALPN プロトコル ID を返します。

値
-

`nextHopProtocol` プロパティは、以下の値を取ります。

* リソースを取得するために使用されるネットワークプロトコルを表す ALPN プロトコル ID (RFC7301) で識別される文字列。よくある値は次の通りです。
    + `"http/0.9"`
    + `"http/1.0"`
    + `"http/1.1"`
    + `"h2"`
    + `"h2c"`
    + `"h3"`
* リソースがオリジン間リクエストで、HTTP の `Timing-Allow-Origin` ヘッダーが使用されていない場合は空文字列。
例
-

### HTTP/2 も HTTP/3 も使用していないリソースを記録

`nextHopProtocol` プロパティを使用すると、HTTP/2 や HTTP/3 プロトコルを使用しないリソースを確認することができます。

`PerformanceObserver` を使用した例です。このオブジェクトは、新しい `resource` パフォーマンス項目がブラウザーのパフォーマンスタイムラインに記録されると、それを通知します。オブザーバーが作成される前の項目にアクセスするために `buffered` オプションを使用します。


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const protocol = entry.nextHopProtocol;
    if (protocol && !(protocol === "h2" || protocol === "h3")) {
      console.log(`${entry.name} uses ${protocol}.`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });
```


`Performance.getEntriesByType()` を使用した例です。このメソッドを呼び出した時点でブラウザー上のパフォーマンスタイムラインに存在する `resource` パフォーマンス項目のみを表示します。


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const protocol = entry.nextHopProtocol;
  if (protocol && !(protocol === "h2" || protocol === "h3")) {
    console.log(`${entry.name} uses ${protocol}.`);
  }
});
```

### オリジン間のネットワークプロトコル情報

`nextHopProtocol` プロパティの値が空文字列である場合、そのリソースはオリジン間リクエストである可能性があります。オリジン間のタイミング情報を見るためには、HTTP の `Timing-Allow-Origin` レスポンスヘッダーを設定する必要があります。

例えば、`https://developer.mozilla.org` にタイミングリソースを見ることを許可するには、オリジン間リソースで次のものを送信する必要があります。


```http
Timing-Allow-Origin: https://developer.mozilla.org
```

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-nexthopprotocol |

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

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

関連情報
----

* `Timing-Allow-Origin`
* HTTP/2
* HTTP/3
PerformanceResourceTiming.fetchStart
====================================

**`fetchStart`** は読み取り専用プロパティで、ブラウザーがリソースの取得を開始する直前の `timestamp` を表します。

HTTP リダイレクトがある場合、このプロパティは、ユーザーエージェントがリダイレクトの最後のリソースの取得を開始する直前の時間を返します。

他の多くの `PerformanceResourceTiming` プロパティとは異なり、 `fetchStart` プロパティは `Timing-Allow-Origin` がなくてもオリジン間リクエストで利用することができます。

値
-

ブラウザーがリソースの取得を開始する直前の `DOMHighResTimeStamp`。

例
-

### フェッチ時間の計測（リダイレクトを除く）

`fetchStart` と `responseEnd` プロパティを使用すると、（リダイレクトなしで）最終リソースを取得するのにかかった全体の時間を計測することができます。リダイレクトを含めるために、フェッチにかかった全体の時間は `duration` プロパティで提供されます。


```js
const timeToFetch = entry.responseEnd - entry.fetchStart;
```


`PerformanceObserver` を使用した例です。このオブジェクトは、新しい `resource` パフォーマンス項目がブラウザーのパフォーマンスタイムラインに記録されると、それを通知します。オブザーバーが作成される前の項目にアクセスするために `buffered` オプションを使用します。


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const timeToFetch = entry.responseEnd - entry.fetchStart;
    if (timeToFetch > 0) {
      console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });
```


`Performance.getEntriesByType()` を使用した例です。このメソッドを呼び出した時点でブラウザー上のパフォーマンスタイムラインに存在する `resource` パフォーマンス項目のみを表示します。


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const timeToFetch = entry.responseEnd - entry.fetchStart;
  if (timeToFetch > 0) {
    console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
  }
});
```

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-fetchstart |

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

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

**`workerStart`** は `PerformanceResourceTiming` インターフェイスの読み取り専用プロパティで、サービスワーカーのスレッドが既に実行されている場合は `FetchEvent` を送出する直前、またはサービスワーカーのスレッドがまだ実行されていない場合は、開始される直前に `DOMHighResTimeStamp` を返します。このリソースがサービスワーカーに介入されない場合、このプロパティは常に 0 を返します。

値
-

`workerStart` プロパティは以下の値を取ることがあります。

* `DOMHighResTimeStamp`
* サービスワーカーが使用されていない場合は `0`。
* リソースがオリジン間リクエストで、HTTP の `Timing-Allow-Origin` レスポンスヘッダーが使用されていない場合は `0`。
例
-

### サービスワーカーの処理時間の計測

`workerStart` および `fetchStart` プロパティを使用して、 `ServiceWorker` の処理時間を計測することができます。


```js
const workerProcessingTime = entry.fetchStart - entry.workerStart;
```


`PerformanceObserver` の使用例で、ブラウザーのパフォーマンスタイムラインに記録された新しい `resource` パフォーマンス項目を通知します。オブザーバーが作成される前の項目にアクセスするために `buffered` オプションを使用します。


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const workerProcessingTime = entry.fetchStart - entry.workerStart;
    if (workerProcessingTime > 0) {
      console.log(
        `${entry.name}: Worker processing time: ${workerProcessingTime}ms`,
      );
    }
  });
});

observer.observe({ type: "resource", buffered: true });
```


`Performance.getEntriesByType()` を使用した例です。このメソッドを呼び出した時点でブラウザー上のパフォーマンスタイムラインに存在する `resource` パフォーマンス項目のみを表示します。


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const workerProcessingTime = entry.fetchStart - entry.workerStart;
  if (workerProcessingTime > 0) {
    console.log(
      `${entry.name}: Worker processing time: ${workerProcessingTime}ms`,
    );
  }
});
```

### オリジン間のタイミング情報

`workerStart` プロパティの値が `0` である場合、そのリソースはオリジン間リクエストである可能性があります。オリジン間の時刻情報を見るためには、HTTP の `Timing-Allow-Origin` レスポンスヘッダーを設定する必要があります。

例えば、`https://developer.mozilla.org` に時刻リソースを見ることを許可するには、オリジン間リソースが送信する必要があります。


```http
Timing-Allow-Origin: https://developer.mozilla.org
```

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-workerstart |

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

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

関連情報
----

* `Timing-Allow-Origin`
MediaQueryList: change イベント
===========================

`MediaQueryList` インターフェイスの **`change`** イベントは、メディアクエリーの状態が変化した時に発生します。

構文
--

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


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

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

イベントタイプ
-------

`MediaQueryListEvent` (en-US) です。 `Event` から継承します。

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

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

`MediaQueryListEvent.matches`読取専用 

`Boolean`。 `document` が現在メディアクエリーのリストに一致していれば `true` を返し、そうでなければ `false` を返します。

`MediaQueryListEvent.media`読取専用 

`DOMString` で、シリアライズされたメディアクエリーを表します。

例
-


```js
var mql = window.matchMedia("(max-width: 600px)");

mql.onchange = (e) => {
  if (e.matches) {
    /\* ビューポートが 600 ピクセル幅以下 \*/
    console.log("This is a narrow screen — less than 600px wide.");
  } else {
    /\* ビューポートが 600 ピクセル幅より広い \*/
    console.log("This is a wide screen — more than 600px wide.");
  }
};
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-mediaquerylist-onchange |

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

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

関連情報
----

* メディアクエリー
* プログラムによるメディアクエリーの評価
* `window.matchMedia()`
* `MediaQueryList`
* `MediaQueryListEvent` (en-US)
MediaQueryList.media
====================

**`media`** は `MediaQueryList` インターフェイスの読取専用プロパティであり、 文字列で、シリアライズされたメディアクエリーを表します。

### 値

文字列で、シリアライズされたメディアクエリーを表します。

例
-

この例では、 `(max-width: 600px)` のメディアクエリーを実行し、 `MediaQueryList` の `media` プロパティの結果の値を `<span>` の中に表示します。

### JavaScript


```js
let mql = window.matchMedia("(max-width: 600px)");

document.querySelector(".mq-value").innerText = mql.media;
```


この JavaScript コードは一致させるメディアクエリーを単に `matchMedia()` に渡してコンパイルし、それから `<span>` の `innerText` に `media` プロパティの結果の値を設定します。

### HTML


```html
<span class="mq-value"></span>
```


シンプルな `<span>` は出力を受け取るためのものです。
```

.mq-value {
  font:
    18px arial,
    sans-serif;
  font-weight: bold;
  color: #88f;
  padding: 0.4em;
  border: 1px solid #dde;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-mediaquerylist-media |

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

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

関連情報
----

* メディアクエリー
* プログラムによるメディアクエリーの評価
* `window.matchMedia()`
* `MediaQueryList`
* `MediaQueryListEvent` (en-US)
MediaQueryList.matches
======================

**`matches`** は `MediaQueryList` インターフェイスの読み取り専用プロパティで、 `boolean` であり、文書が現在メディアクエリーリストと一致している場合は `true` を返し、一致していない場合は `false` を返します。

`matches` の値が変化した場合は、 `MediaQueryList` で発生する `change` イベントを監視することで通知を受けることができます。

### 値

boolean。 `document` が現在メディアクエリーのリストに一致していれば `true` を返し、そうでなければ `false` を返します。

例
-

この例では `orientation` メディア特性を使用したメディアクエリーを作成することにより、ビューポートの向きの変化を検出します。


```js
function addMQListener(mq, callback) {
  if (mq.addEventListener) {
    mq.addEventListener("change", callback);
  } else {
    mq.addListener(callback);
  }
}

addMQListener(window.matchMedia("(orientation:landscape)"), (event) => {
  if (event.matches) {
    /\* 横向きの画面になった \*/
  } else {
    /\* 縦向きの画面になった \*/
  }
});
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-mediaquerylist-matches |

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

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

関連情報
----

* メディアクエリー
* プログラムによるメディアクエリーの評価
* `window.matchMedia()`
* `MediaQueryList`
* `MediaQueryListEvent` (en-US)
USBDevice: isochronousTransferIn() メソッド
=======================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

`USBDevice` インターフェイスの **`isochronousTransferIn()`** メソッドは、時間が重要な情報の USB デバイスへの送信 (USB デバイスによる受信) が完了したら `USBIsochronousInTransferResult` で解決する `Promise` を返します。

構文
--


```js
isochronousTransferIn(endpointNumber, packetLengths)
```

### 引数

`endpointNumber`

デバイス固有のエンドポイント (バッファー) の番号です。

`packetLengths`

受信するパケットの長さの配列です。

### 返値

`USBIsochronousInTransferResult` で解決する `Promise` です。

仕様書
---

| Specification |
| --- |
| WebUSB API # ref-for-dom-usbdevice-isochronoustransferin |

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

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

`USBDevice` インターフェイスの **`isochronousTransferOut()`** メソッドは、時間が重要な情報の USB デバイスからの転送が完了したら `USBIsochronousOutTransferResult` で解決する `Promise` を返します。

構文
--


```js
isochronousTransferOut(endpointNumber, data, packetLengths)
```

### 引数

`endpointNumber`

デバイス固有のエンドポイント (バッファー) の番号です。

`data`

デバイスに送信するデータが格納された `TypedArray` です。

`packetLengths`

送信するパケットの長さの配列です。

### 返値

`USBIsochronousOutTransferResult` で解決する `Promise` です。

仕様書
---

| Specification |
| --- |
| WebUSB API # ref-for-dom-usbdevice-isochronoustransferout |

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

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

`USBDevice` インターフェイスの読み取り専用プロパティ **`configuration`** は、ペアリングした USB デバイスの現在選択されているインターフェイスを表す `USBConfiguration` オブジェクトを返します。

値
-

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

例
-

以下の例では、インターフェイスを要求する前にコンフィギュレーションを選択するため、`USBConfiguration` プロパティの存在を確認するためにこのプロパティを使用しています。


```js
async function connectDevice(usbDevice) {
  await usbDevice.open();
  if (usbDevice.configuration === null) await usbDevice.selectConfiguration(1);
  await usbDevice.claimInterface(0);
}
```

仕様書
---

| Specification |
| --- |
| WebUSB API # ref-for-dom-usbdevice-configuration① |

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

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

`USBDevice` インターフェイスの読み取り専用プロパティ **`vendorId`** は、usb.org で割り当てられた公式なベンダー ID です。

値
-

usb.org で割り当てられた公式なベンダー ID です。

仕様書
---

| Specification |
| --- |
| WebUSB API # ref-for-dom-usbdevice-vendorid |

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

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