recursal/MDN huggingface dataset:
ConstantSourceNode.offset
=========================

`offset` は `ConstantSourceNode` インターフェイスの読み取り専用プロパティで、 `AudioParam` オブジェクトを返し、数値で a-rate 値を示します。これはソースから次のサンプルを取り出す際に常に返されます。

**メモ:** `offset` という名前の `AudioParam` は読み取り専用ですが、その中の `value` プロパティは読み取り専用ではありません。そのため、 `offset` の値は `ConstantSourceNode.offset.value` の値を設定することで変更することができます。


```js
myConstantSourceNode.offset.value = newValue;
```


値
-

このノードがサンプルごとに返す a-rate 値を示す `AudioParam` オブジェクトです。既定値は 1.0 です。

`offset` の現在の値にアクセスするには、上の構文ボックスで示したように、 `value` プロパティにアクセスしてください。

例
-

この例では、 `ConstantSourceNode` を設定して、その `offset` を `GainNode` のペアの入力として使用する方法を示します。この例は ConstantSourceNode による複数の引数の制御 (en-US) にある、完全な例を元にして作成されています。


```js
gainNode2 = context.createGain();
gainNode3 = context.createGain();
gainNode2.gain.value = gainNode3.gain.value = 0.5;

volumeSliderControl.value = gainNode2.gain.value;

constantSource = context.createConstantSource();
constantSource.connect(gainNode2.gain);
constantSource.connect(gainNode3.gain);
```


まず、ゲインノードを作成して設定し、スライダーコントロールの値を 2 つのノードのゲインと一致するように設定します。次に、新しい `ConstantSourceNode` を作成し、それを 2 つのゲインノードの `GainNode.gain` 値のソースとします。それらの値はそれぞれ`AudioParam`でもあります。

例えば、 2 つのゲインノードの値を変更して応答する必要のあるイベントハンドラー（この場合は `click` イベント用）があるとします。上記のリンクがあるところで、この単純なイベントハンドラーを使用して、それを行うことができます。


```js
function handleClickEvent(event) {
  constantSource.offset.value = volumeSliderControl.value;
}
```


この関数がしなければならないことは、ペアノードのゲインを制御するために使用しているスライダーコントロールの現在の値を取得して、その値を `ConstantSourceNode` の `offset` に格納することのみです。これは、その `AudioParam.value` プロパティの中身を変更することで行われます。 2 つのゲインノードはすばやく新しいボリュームレベルを採用します。

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-constantsourcenode-offset |

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

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

関連情報
----

* ウェブオーディオ API の使用
* `ConstantSourceNode`
* `AudioNode`
* `AudioParam`
HTMLMeterElement: labels プロパティ
==============================

**`HTMLMeterElement.labels`** は読み取り専用プロパティで、この `<meter>` 要素に関連付けられている `<label>` 要素の `NodeList` を返します。

値
-

`<meter>` 要素に結びつけられている `<label>` 要素の入った `NodeList` です。

例
-

### HTML


```html
<label id="label1" for="test">Label 1</label>
<meter id="test" min="0" max="100" value="70">70</meter>
<label id="label2" for="test">Label 2</label>
```

### JavaScript


```js
window.addEventListener("DOMContentLoaded", () => {
  const meter = document.getElementById("test");
  for (const label of meter.labels) {
    console.log(label.textContent); // "Label 1" and "Label 2"
  }
});
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-lfe-labels-dev |

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

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

**`HTMLTemplateElement.content`** プロパティは、`<template>` 要素のテンプレートの内容 (`DocumentFragment`) を返します。

値
-

`DocumentFragment` です。

例
-


```js
const templateElement = document.querySelector("#foo");
const documentFragment = templateElement.content.cloneNode(true);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-template-content-dev |

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

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

関連情報
----

* `HTMLTemplateElement`
CacheStorage: has() メソッド
========================

**`has()`** は `CacheStorage` インターフェイスのメソッドで、`Cache` オブジェクトが `cacheName` と一致する場合に `true` に解決される `Promise` を返します。

`CacheStorage` には、グローバルな `caches` プロパティを介してアクセスできます。

構文
--


```js
has(cacheName)
```

### 引数

`cacheName`

文字列で、 `CacheStorage` で探している `Cache` オブジェクトの名前を表します。

### 返値

`Promise` で、キャッシュが存在する場合は `true`、存在しない場合は `false` に解決されます。

例
-

次の例では、最初に 'v1' というキャッシュが存在するかどうかを確認します。 その場合、アセットのリストを追加します。 そうでない場合、何らかのキャッシュセットアップ関数を実行します。


```js
caches
  .has("v1")
  .then((hasCache) => {
    if (!hasCache) {
      someCacheSetupFunction();
    } else {
      caches.open("v1").then((cache) => cache.addAll(myAssets));
    }
  })
  .catch(() => {
    // ここで例外を処理します。
  });
```

仕様書
---

| Specification |
| --- |
| Service Workers # cache-storage-has |

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

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

関連情報
----

* サービスワーカーの使用
* `Cache`
* `caches`
CacheStorage: keys() メソッド
=========================

**`keys()`** は `CacheStorage` インターフェイスのメソッドで、`CacheStorage` オブジェクトによって追跡されるすべての名前付き `Cache` オブジェクトに対応する文字列をそれが作成された順番で含む配列で解決する `Promise` を返します。
 このメソッドを使用して、すべての `Cache` オブジェクトのリストを反復処理します。

`CacheStorage` には、グローバルな `caches` プロパティを介してアクセスできます。

構文
--


```js
keys()
```

### 引数

なし。

### 返値

`Promise` で、 `CacheStorage` オブジェクト内の `Cache` 名の配列で解決します。

例
-

このコードスニペットでは、`activate` イベントを待機してから、新しいサービスワーカーがアクティブ化される前に、古い未使用のキャッシュをクリアする `waitUntil()` ブロックを実行します。 ここに、保持したいキャッシュの名前を含む許可リスト（`cacheAllowlist`）があります。 `keys()` を使用して `CacheStorage` オブジェクトのキャッシュのキーを返し、各キーをチェックして許可リストにあるかどうかを確認します。 ない場合は、`CacheStorage.delete()` を使用して削除します。


```js
this.addEventListener("activate", (event) => {
  const cacheAllowlist = ["v2"];

  event.waitUntil(
    caches.keys().then((keyList) =>
      Promise.all(
        keyList.map((key) => {
          if (!cacheAllowlist.includes(key)) {
            return caches.delete(key);
          }
        }),
      ),
    ),
  );
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # cache-storage-keys |

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

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

関連情報
----

* サービスワーカーの使用
* `Cache`
* `caches`
CacheStorage: match() メソッド
==========================

**`match()`** は `CacheStorage` インターフェイスのメソッドで、所与の `Request` または URL 文字列が保存された `Response` のキーであるかどうかをチェックします。 このメソッドは、`Response` の `Promise`、または一致するものが見つからない場合に `undefined` に解決される `Promise` を返します。

`CacheStorage` には、グローバルな `caches` プロパティを介してアクセスできます。

`Cache` オブジェクトは作成順に検索されます。

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


構文
--


```js
match(request)
match(request, options)
```

### 引数

`request`

照合したい `Request`。 これは、`Request` オブジェクトまたは URL 文字列にすることができます。

`options` 省略可

`match` 操作での照合方法を制御するプロパティを持つオブジェクト。 利用可能なオプションは次のとおりです。

`ignoreSearch`

 論理値で、照合処理が URL のクエリー文字列を無視するかどうかを指定します。例えば、`true` に設定すると、 `http://foo.com/?value=bar` の `?value=bar` 部分は、照合するときに無視されます。
 既定値は `false` です。


`ignoreMethod`

論理値で、 `true` に設定すると、照合処理が `Request` の HTTP メソッドを検証しないようにします（通常は `GET` と `HEAD` のみが許可されます）。 既定値は `false` です。

`ignoreVary`

論理値で、 `true` に設定すると、 `VARY` ヘッダーの照合をしないように照合処理に支持します。 つまり、URL が一致する場合、`Response` オブジェクトに `VARY` ヘッダーがあるかどうかに関係なく一致します。 既定値は `false` です。

`cacheName`

文字列で、検索する特定のキャッシュを表します。


### 返値

`Promise` で、一致する `Response` に解決されます。 指定されたリクエストに対する一致するレスポンスが見つからない場合、このプロミスは `undefined` に解決されます。

例
-

 このコードスニペットは、MDN の単純なサービスワーカーの例からのものです（単純なサービスワーカーがライブで実行するのを見る）。
 ここで、 `FetchEvent` が発行されるのを待ちます。そして次のように独自のレスポンスを構築します。

1. `CacheStorage` で `CacheStorage.match()` を使用して、リクエストに一致するものがあるかどうかを確認します。もしあれば、それを提供します。
2. ない場合は、 `v1` キャッシュを `open()` で開き、 `Cache.put()` を使用して既定のネットワークリクエストをキャッシュに入れ、 `return response.clone()` を使用して既定値のネットワークリクエストのクローンを返します。 `put()` がレスポンスの本体を消費するため、最後に必要です。
3. 失敗した場合（例えば、ネットワークがダウンしているため）、フォールバックレスポンスを返します。


```js
self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      // caches.match() は常に解決します
      // ただし、成功の場合はレスポンスに値があります
      if (response !== undefined) {
        return response;
      } else {
        return fetch(event.request)
          .then((response) => {
            // レスポンスは 1 回のみ使用できます
            // クローンを保存して、 1 番目のコピーをキャッシュに入れ、
            // 2 番目のコピーを提供する必要があります
            let responseClone = response.clone();

            caches.open("v1").then((cache) => {
              cache.put(event.request, responseClone);
            });
            return response;
          })
          .catch(() => caches.match("/gallery/myLittleVader.jpg"));
      }
    }),
  );
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # cache-storage-match |

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

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

関連情報
----

* サービスワーカーの使用
* `Cache`
* `caches`
CacheStorage: open() メソッド
=========================

**`open()`** は `CacheStorage` インターフェイスのメソッドで、 `cacheName` に一致する `Cache` オブジェクトに解決される `Promise` を返します。

`CacheStorage` には、グローバルな `caches` プロパティを介してアクセスできます。

**メモ:** 指定した `Cache` が存在しない場合、その `cacheName` で新しいキャッシュを作成し、この新しい `Cache` オブジェクトに解決される `Promise` を返します。

構文
--


```js
open(cacheName)
```

### 引数

`cacheName`

開きたいキャッシュの名前。

### 返値

要求した `Cache` オブジェクトに解決される `Promise`。

例
-

 このコードスニペットは、MDN の単純なサービスワーカーの例からのものです（単純なサービスワーカーがライブで実行するのを見る）。
 ここでは、 `InstallEvent` が発生するのを待ち 、`waitUntil()` を実行してアプリのインストールプロセスを処理します。 これは、 `CacheStorage.open()` を呼び出して新しいキャッシュを作成し、`Cache.addAll()` を使用して一連のアセットを追加することで構成されます。


```js
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches
      .open("v1")
      .then((cache) =>
        cache.addAll([
          "/",
          "/index.html",
          "/style.css",
          "/app.js",
          "/image-list.js",
          "/star-wars-logo.jpg",
          "/gallery/bountyHunters.jpg",
          "/gallery/myLittleVader.jpg",
          "/gallery/snowTroopers.jpg",
        ]),
      ),
  );
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # cache-storage-open |

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

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

関連情報
----

* サービスワーカーの使用
* `Cache`
* `caches`
CacheStorage: delete() メソッド
===========================

**`delete()`** は `CacheStorage` インターフェイスのメソッドで、`cacheName` に一致する `Cache` オブジェクトを見つけ、見つかった場合は `Cache` オブジェクトを削除し、 `true` に解決される `Promise` を返します。
 `Cache` オブジェクトが見つからない場合は、`false` に解決されます。

`CacheStorage` には、グローバルな `caches` プロパティを介してアクセスできます。

構文
--


```js
delete(cacheName)
```

### 引数

`cacheName`

削除するキャッシュの名前。

### 返値

`Promise` で、 `Cache` オブジェクトが見つかって削除された場合は `true`、そうでない場合は `false` に解決されます。

例
-

このコードスニペットでは、`activate` イベントを待機してから、新しいサービスワーカーがアクティブになる前に、古い未使用のキャッシュをクリアする `waitUntil()` ブロックを実行します。 ここに、保持したいキャッシュ名の配列 (`cachesToKeep`) があります。 `CacheStorage` オブジェクトのキャッシュのキーを `CacheStorage.keys` を使用して返し、各キーをチェックしてその配列内にあるかどうかを確認します。 ない場合は、 `delete()` を使用して削除します。


```js
this.addEventListener("activate", (event) => {
  const cachesToKeep = ["v2"];

  event.waitUntil(
    caches.keys().then((keyList) =>
      Promise.all(
        keyList.map((key) => {
          if (!cachesToKeep.includes(key)) {
            return caches.delete(key);
          }
        }),
      ),
    ),
  );
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # cache-storage-delete |

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

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

関連情報
----

* サービスワーカーの使用
* `Cache`
* `caches`
CSSNamespaceRule.namespaceURI
=============================

**`namespaceURI`** は `CSSNamespaceRule` の読み取り専用プロパティで、この名前空間の URI のテキストを文字列で返します。

値
-

文字列で、 URI を持ちます。

例
-

このスタイルシートは、唯一のルールとして名前空間を含んでいます。したがって、最初に返される `CSSRule` は `CSSNamespaceRule` となります。 `namespaceURI` プロパティの値は `http://www.w3.org/1999/xhtml` となります。


```css
@namespace url(http://www.w3.org/1999/xhtml);
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].namespaceURI); //http://www.w3.org/1999/xhtml
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssnamespacerule-namespaceuri |

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

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

**`prefix`** は `CSSNamespaceRule` の読み取り専用プロパティで、この名前空間に関連付けられた名前を文字列で返します。そのような接頭辞がない場合は、空文字列を返します。

値
-

この名前空間に関連付けられている接頭辞が入った文字列。接頭辞がない場合は空文字列となります。

例
-

このスタイルシートには、名前空間ルールが 2 つ含まれています。最初のものは接頭辞がなく、 2 つ目は接頭辞 `svg` があります。 2 つの `CSSNamespaceRule` オブジェクトが返されます。最初の `prefix` プロパティの値は空文字列になり、 2 つ目は `svg` になります。


```css
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].namespaceURI); // 空文字列 ""
console.log(myRules[1].namespaceURI); // "svg"
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssnamespacerule-prefix |

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

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

**`toggle`** イベントは、 `<details>` 要素の `open`/`closed` の状態がトグル切り替えされたときに発生します。

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

**メモ:** `toggle` イベントは `HTMLElement` においても別な形で利用できます。こちらは、ポップオーバー要素が表示または非表示にされた直後に発行されます。詳しくは、`HTMLElement` の `toggle` イベントのページをご覧ください。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

この例は開かれた節をログ出力します。節が閉じられるとログから削除されます。

### HTML


```html
<aside id="log">
  <p>Open chapters:</p>
  <div data-id="ch1" hidden>I</div>
  <div data-id="ch2" hidden>II</div>
  <div data-id="ch3" hidden>III</div>
</aside>
<section id="summaries">
  <p>Chapter summaries:</p>
  <details id="ch1">
    <summary>Chapter I</summary>
    Philosophy reproves Boethius for the foolishness of his complaints against
    Fortune. Her very nature is caprice.
  </details>
  <details id="ch2">
    <summary>Chapter II</summary>
    Philosophy in Fortune's name replies to Boethius' reproaches, and proves
    that the gifts of Fortune are hers to give and to take away.
  </details>
  <details id="ch3">
    <summary>Chapter III</summary>
    Boethius falls back upon his present sense of misery. Philosophy reminds him
    of the brilliancy of his former fortunes.
  </details>
</section>
```

### CSS


```css
body {
  display: flex;
  flex-direction: row-reverse;
}

#log {
  flex-shrink: 0;
  padding-left: 3em;
}

#summaries {
  flex-grow: 1;
}
```

### JavaScript


```js
function logItem(e) {
  const item = document.querySelector(`[data-id=${e.target.id}]`);
  item.toggleAttribute("hidden");
}

const chapters = document.querySelectorAll("details");
chapters.forEach((chapter) => {
  chapter.addEventListener("toggle", logItem);
});
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # event-toggle |

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

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

**`open`** は `HTMLDetailsElement` インターフェイスのプロパティで、HTML の `open` 属性を反映するもので、`<details>` の中身（`<summary>` を除く）がユーザーに表示されているかを示す論理値です。

値
-

論理値です。

この論理値は HTML の `open` 属性の状態を表します。`true` の値は、概要と追加情報の両方がユーザーに示されている状態で設定されていることを意味します。`false` の値は設定されていないことを意味し、概要のみが表示されます。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-details-open |

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

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

関連情報
----

* `<details>` および `<summary>` 要素
Bluetooth: getDevices() メソッド
============================

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

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

Web Bluetooth API の `Bluetooth` インターフェイスの **`getDevices()`** メソッドは、オリジンがアクセスを許可されている Bluetooth デバイスを公開します。このメソッドは許可を要求するプロンプトを表示しません。

**メモ:** このメソッドは、圏外だったり電源が切られていたりするものを含め、オリジンが現在アクセスを許可されている各デバイスに対応する `BluetoothDevice` を返します。

構文
--


```js
getDevices()
```

### 引数

なし

### 返値

`BluetoothDevice` の配列で解決する `Promise` を返します。

例外
--

このメソッドは例外を投げません。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetooth-getdevices |

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

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

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

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

`Bluetooth` インターフェイスの **`Bluetooth.requestDevice()`** メソッドは、指定のオプションに合致する `BluetoothDevice` オブジェクトで解決する `Promise` を返します。選択用の UI が無い場合は、このメソッドは基準に合致する最初のデバイスを返します。

構文
--


```js
requestDevice()
requestDevice(options)
```

### 引数

`options` 省略可

デバイスの要求に関するオプションを設定するオブジェクトです。以下のオプションが利用可能です。

* `filters[]`
    + `BluetoothScanFilters` の配列です。このフィルタは、`BluetoothServiceUUID` の配列、`name` パラメーター、`namePrefix` パラメーターからなります。
* `optionalServices[]`
    + : `BluetoothServiceUUID` の配列です。
* `acceptAllDevices`
    + : 要求を出しているスクリプトがすべての Bluetooth デバイスを受け入れるかを表す `boolean` 値です。デフォルトは `false` です。

### 返値

`BluetoothDevice` オブジェクトで解決する `Promise` を返します。

### 例外

`TypeError`

 指定された `options` が意味をなさないとき投げられます。
 たとえば、`options.filters` が存在して、かつ `options.acceptAllDevices` が `true` に設定されている場合や、`options.filters` が存在せず、かつ `options.acceptAllDevices` が `false` に設定されている場合に投げられます。
 `options.filters` が `[]` に設定されている場合も投げられます。


`NotFoundError` `DOMException`

指定のオプションに合致する Bluetooth デバイスが存在しないとき投げられます。

`SecurityError` `DOMException`

安全でないオリジンで呼び出されたときなど、現在のコンテキストでセキュリティの懸念によりこの操作が許可されないとき投げられます。

例
-


```js
// 以下のアドバタイズをしているデバイスにマッチする検索オプションを使用します。
// ・標準の心拍数サービス
// ・16 ビットのサービス ID が 0x1802 と 0x1803
// ・プロプライエタリーの 128 ビット UUID c48e6067-5295-48d3-8d5c-0395f61792b1 を持つサービス
// ・名前 "ExampleName" を持つデバイス
// ・名前が "Prefix" で始まるデバイス
//
// そして、デバイスが該当のサービスをアドバタイズしていない場合でも、
// デバイスに存在すれば、バッテリーサービスへのアクセスを有効化します。
let options = {
  filters: [
    { services: ["heart\_rate"] },
    { services: [0x1802, 0x1803] },
    { services: ["c48e6067-5295-48d3-8d5c-0395f61792b1"] },
    { name: "ExampleName" },
    { namePrefix: "Prefix" },
  ],
  optionalServices: ["battery\_service"],
};

navigator.bluetooth
  .requestDevice(options)
  .then((device) => {
    console.log(`名前: ${device.name}`);
    // デバイスに何かをする
  })
  .catch((error) => console.error(`何かがうまくいきませんでした。 ${error}`));
```


詳細な例が仕様書にあります。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetooth-requestdevice |

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

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

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

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

`Bluetooth` インターフェイスの **`getAvailability()`** メソッドは、デバイスに Bluetooth アダプターがある場合は `true` を返し、そうでない場合は `false` を返します。(ユーザーがブラウザーを本当の値を公開しないよう設定した場合は除きます)

**メモ:** `getAvailability()` が `true` を返す場合でも、ユーザーが Web Bluetooth API の使用を許可しないかもしれません。
 (`navigator.bluetooth.requestDevice()` が `BluetoothDevice` で解決しないかもしれません)
 また、ユーザーはブラウザーを本当の値ではなく固定の値を返すよう設定する可能性があります。


構文
--


```js
getAvailability()
```

### 引数

なし

### 返値

`Boolean` で解決する `Promise` を返します。

例外
--

このメソッドは例外を投げません。

例
-

この断片は、Bluetooth に対応しているかを表すメッセージをコンソールに出力します。


```js
navigator.bluetooth.getAvailability().then((available) => {
  if (available) {
    console.log("このデバイスは Bluetooth に対応しています！");
  } else {
    console.log("残念！Bluetooth に対応していません");
  }
});
```

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetooth-getavailability |

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

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

`addtrack` イベントは、トラックが `VideoTrackList` に追加されたときに発生します。

構文
--

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


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

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

イベント型
-----

`TrackEvent` です。 `Event` から継承しています。

Event

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

*下記に挙げたプロパティに加えて、親インターフェイスである `Event` のプロパティも利用できます。*

`track` 読取専用 

イベントが参照している新しく追加された `VideoTrack`。

例
-

`addEventListener()` を使用する場合


```js
const videoElement = document.querySelector("video");

videoElement.videoTracks.addEventListener("addtrack", (event) => {
  console.log(`Video track: ${event.track.label} added`);
});
```


`onaddtrack` イベントハンドラープロパティを使用する場合


```js
const videoElement = document.querySelector("video");

videoElement.videoTracks.onaddtrack = (event) => {
  console.log(`Video track: ${event.track.label} added`);
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-addtrack |
| HTML Standard # handler-tracklist-onaddtrack |

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

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

関連情報
----

* 関連イベント: `removetrack`, `change`
* `AudioTrackList` を対象としたこのイベント: `addtrack`
* `MediaStream` を対象としたこのイベント: `addtrack`
* メディアキャプチャとストリーム API
* WebRTC
VideoTrackList.selectedIndex
============================

読み取り専用の **`VideoTrackList`** の **`selectedIndex`** プロパティは、現在選択されているトラックがある場合はその位置を返し、それ以外の場合は `-1` を返します。

値
-

現在選択されているトラックがある場合はその位置を示す数値、それ以外の場合は `-1`。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-videotracklist-selectedindex-dev |

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

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

**`VideoTrackList`** の **`getTrackById()`** メソッドは、指定された文字列と `id` が一致するトラックリストから最初の `VideoTrack` オブジェクトを返します。

ID 文字列がわかっていれば、これで特定のトラックを見つけることができます。

構文
--


```js
getTrackById(id)
```

### 引数

`id`

文字列で、トラックリスト内で検索するトラックの ID を指定します。

### 戻り値

指定された文字列に一致する `id` を持つ `VideoTrackList` 内で見つかった最初のトラックを示す `VideoTrack` オブジェクト。 一致するものが見つからない場合、このメソッドは `null` を返します。

トラックは自然な順序で検索されます。 つまり、メディアリソース自体によって定義された順序で、またはリソースが順序を定義していない場合は、メディアリソースによってトラックが宣言される相対的な順序です。

仕様
--

| Specification |
| --- |
| HTML Standard # dom-videotracklist-gettrackbyid-dev |

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

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

`removetrack` イベントは、トラックが `VideoTrackList` から取り除かれたときに発生します。

構文
--

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


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

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

イベント型
-----

`TrackEvent` です。 `Event` から継承しています。

Event

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

*下記に挙げたプロパティに加えて、親インターフェイスである `Event` のプロパティも利用できます。*

`track` 読取専用 

イベントが参照している新しく追加された `VideoTrack`。

例
-

`addEventListener()` を使用する場合


```js
const videoElement = document.querySelector("video");

videoElement.videoTracks.addEventListener("removetrack", (event) => {
  console.log(`Video track: ${event.track.label} removed`);
});
```


`onremovetrack` イベントハンドラープロパティを使用する場合


```js
const videoElement = document.querySelector("video");

videoElement.videoTracks.onremovetrack = (event) => {
  console.log(`Video track: ${event.track.label} removed`);
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-removetrack |
| HTML Standard # handler-tracklist-onremovetrack |

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

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

関連情報
----

* 関連イベント: `addtrack`, `change`
* `AudioTrackList` を対象としたこのイベント: `removetrack`
* `MediaStream` を対象としたこのイベント: `removetrack`
* メディアキャプチャとストリーム API
* WebRTC
VideoTrackList.length
=====================

読み取り専用の **`VideoTrackList`** の **`length`** プロパティは、`VideoTrackList` 内の項目数を返します。 各項目は、メディア要素内の 1 つの映像トラックを表す `VideoTrack` です。

値 0 は、メディアに映像トラックがないことを示します。

値
-

`VideoTrackList` に含まれる映像トラック数を示す数値。 `VideoTrackList` を `VideoTrack` 型のオブジェクトの配列として扱うことで、各トラックにアクセスできます。

例
-

このスニペットは、 DOM 内で見つかった最初の `<video>` 要素内の映像トラックの数を `querySelector()` によって取得します。


```js
const videoElem = document.querySelector("video");
let numVideoTracks = 0;

if (videoElem.videoTracks) {
  numVideoTracks = videoElem.videoTracks.length;
}
```


この例は、`VideoTrack` に対応していないブラウザーで落ちるのを避けるために、`HTMLMediaElement.videoTracks` が定義されていることを確認していることに注意してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-videotracklist-length-dev |

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

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