recursal/MDN huggingface dataset:
Beacon API
==========

**`Beacon`** API はウェブサーバーに非同期でブロッキングしないリクエストを送るのに使用されます。リクエストのレスポンスは求めません。`XMLHttpRequest` や Fetch API により行われるリクエストとは違い、ブラウザーはビーコンのリクエストをページがアンロードされる前に開始し、完了するまで処理することを保証します。

Beacon API の主な用途は、クライアント側でのイベントやセッションデータなどの統計情報をサーバーに送ることです。これまでは、ウェブサイトはこの用途に `XMLHttpRequest` を用いていましたが、ブラウザーがこれらの非同期リクエストを送信する保証がない状況がありました。(たとえば、ページがアンロードされようとしているとき) これを打開するため、ウェブサイトはリクエストを同期的にするなどの様々なテクニックに頼っていましたが、これらはレスポンシブ性に悪い影響がありました。ビーコンのリクエストは非同期かつ送信されることが保証されるので、パフォーマンスにおけるよい性質と信頼性を兼ね備えます。

この API を使用する動機と使用法の詳細は、`navigator.sendBeacon()` メソッドのドキュメントを参照してください。

**メモ:** この API は Web Workers では *使用できません*。(`WorkerNavigator` 経由では公開されていません)

インターフェイス
--------

この API では、1 個のメソッド `navigator.sendBeacon()` が定義されています。

このメソッドは、URL とリクエストで送るデータの 2 個の引数をとります。データの引数は省略可能で、型は `TypedArray`、`DataView`、`Blob`、文字列リテラル、オブジェクト、`FormData` オブジェクトが使用できます。ブラウザーが正常にリクエストを送信用のキューに入れた場合は `true` を返し、そうでない場合は `false` を返します。

仕様書
---

| Specification |
| --- |
| Beacon # sendbeacon-method |

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

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

関連情報
----

* Beacon の仕様書
* Beacon CanIUse データ
* Intercepting beacons through service workers; Ehsan Akhgari; 2015-Apr-08
* https://webkit.org/blog/8821/link-click-analytics-and-privacy/
* Beaconing in Practice
PaymentRequestUpdateEvent
=========================

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

**`PaymentRequestUpdateEvent`** インターフェイスは、待機中の `PaymentRequest` インスタンスの配送関連情報に変更が加えられたときに `PaymentRequest` に送られるイベント用に使用します。それらのイベントは以下の通りです。

`shippingaddresschange` 安全なコンテキスト用

ユーザーが配送先を変更するたびに配信されます。

`shippingoptionchange` 安全なコンテキスト用

ユーザーが配送オプションを変更するたびに配信されます。

Event

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

`PaymentRequestUpdateEvent()` 安全なコンテキスト用

新しい `PaymentRequestUpdateEvent` オブジェクトを生成します。

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

*親インターフェイスである `Event` から継承されたプロパティのみを提供しています。*

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

*親インターフェイスである `Event` から継承されたプロパティに加え、`PaymentRequestUpdateEvent` は以下のメソッドを提供しています。*

`PaymentRequestUpdateEvent.updateWith()` 安全なコンテキスト用

イベントハンドラーは、決済リクエストに含める情報を変更する必要があると判断した場合、または新しい情報を追加する必要があると判断した場合、置換または追加する必要がある情報を指定して `updateWith()` を呼び出します。

仕様書
---

| Specification |
| --- |
| Payment Request API 1.1 # paymentrequestupdateevent-interface |

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

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

関連情報
----

* 決済リクエスト API の使用
AudioScheduledSourceNode
========================

`AudioScheduledSourceNode` インターフェイス（ウェブオーディオ API の一部）は、オーディオソースノード各種の親インターフェイスであり、必要に応じ、指定された時間で開始や停止を行う機能を持ちます。具体的には、このインターフェイスでは、`start()` や、`stop()` メソッドの他、`ended` イベントを定義しています。

**メモ:** `AudioScheduledSourceNode` オブジェクトは、直接作成することはできません。
 かわりに、`AudioBufferSourceNode` や、`OscillatorNode`、または `ConstantSourceNode` を使用してください。


特に明記しない限り、 `AudioScheduledSourceNode` をベースにしたノードは、再生されていない時（つまり、 `start()` の前や、 `stop()` の後）は、無音を出力します。無音は、値がゼロ (0) であるサンプルストリームを、常に流し続けることで表現されています。

EventTarget

AudioNode

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

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

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

*親インターフェイスである `AudioNode` からメソッドを継承しており、さらに以下のメソッドがあります。*

`start()`

指定した時刻に、ノードが特定の音を再生するようスケジュールします。時刻を指定しない場合、ノードはすぐに再生を開始します。

`stop()`

指定した時刻に、ノードの再生を停止するよう、スケジュールします。時刻を指定しない場合、ノードはすぐに停止します。

イベント
----

これらのイベントは `addEventListener()` を使用するか、このインターフェイス `onイベント名` プロパティにイベントリスナーを代入することで待ち受けすることができます。

`ended`

ソースノードが、所定の停止時間に達した、音声の全時間が演奏された、あるいはバッファの全体が演奏されたなどの理由で、再生を停止したときに発行されます。

仕様書
---

| Specification |
| --- |
| Web Audio API # AudioScheduledSourceNode |

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

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

関連情報
----

* ウェブオーディオ API の使用
* `AudioNode`
XMLHttpRequest API
==================

**注:** This feature is available in Web Workers, except for Service Workers

**XMLHttpRequest API** を使用すことで、ウェブアプリケーションがウェブサーバーに HTTP リクエストを行い、JavaScript を使用してプログラムでレスポンスを受け取ることができます。これによりウェブサイトは、新しいページに移動することなく、サーバーからのデータでページの一部だけを更新することができます。この方法は、 Ajax としても知られています。

フェッチ API は XMLHttpRequest API をより柔軟で強力に置き換えたものです。フェッチ API は、非同期レスポンスを処理するためにイベントの代わりにプロミスを使用し、サービスワーカーとうまく統合し、 CORS のような HTTP の高度な側面に対応しています。これらの理由から、現代のウェブアプリケーションでは、`XMLHttpRequest` の代わりにフェッチ API を使用するのが一般的です。

概念と使用方法
-------

XMLHttpRequest API の中心となるインターフェイスは `XMLHttpRequest` です。 HTTP リクエストを行うには、以下のようにします。

1. 新しい `XMLHttpRequest` のインスタンスを、コンストラクターを呼び出すことで作成します。
2. `XMLHttpRequest.open()` を呼び出して初期化します。この時点で、リクエストの URL、使用する HTTP メソッド、オプションでユーザ名ーとパスワードを提供します。
3. リクエストの結果を取得するイベントハンドラーを取り付けます。例えば、 `load` イベントはリクエストが完全に完了した時に発行され、 `error` イベントは様々なエラー状態の時に発行されます。
4. `XMLHttpRequest.send()` を呼び出してリクエストを送信します。

XMLHttpRequest API の詳細なガイドについては、 XMLHttpRequest の使用を参照してください。

インターフェイス
--------

`FormData`

`<form>` のフィールドとその値を表すオブジェクトで、 `XMLHttpRequest` または `fetch()` を用いてサーバーに送信することができます。

`ProgressEvent`

`Event` のサブクラスで `progress` に渡され、リクエストがどれだけ進行したかの情報を格納します。

`XMLHttpRequest`

単一の HTTP リクエストを表します。

`XMLHttpRequestEventTarget`

`XMLHttpRequest` および `XMLHttpRequestUpload` のスーパークラスで、どちらでも利用できるイベントを定義しています。

`XMLHttpRequestUpload`

HTTP アップロードのアップロード処理を表します。コードがアップロードの進捗を追跡できるようにするイベントを提供します。

例
-

### サーバーから JSON データを読み取り

この例では、 https://raw.githubusercontent.com/ から JSON ファイルを取得し、イベントの進捗状況を表示させるイベントリスナーを追加しています。

#### HTML


```html
<div class="controls">
  <button class="xhr" type="button">クリックすると XHR を開始</button>
</div>

<textarea readonly class="event-log"></textarea>
```


```
.event-log {
  width: 25rem;
  height: 5rem;
  border: 1px solid black;
  margin: 0.5rem;
  padding: 0.2rem;
}

button {
  width: 12rem;
  margin: 0.5rem;
}
```


#### JavaScript


```js
const xhrButton = document.querySelector(".xhr");
const log = document.querySelector(".event-log");
const url =
  "https://raw.githubusercontent.com/mdn/content/main/files/en-us/\_wikihistory.json";

function handleEvent(e) {
  log.textContent = `${log.textContent}${e.type}: ${e.loaded} バイト転送しました\n`;
}

function addListeners(xhr) {
  xhr.addEventListener("loadstart", handleEvent);
  xhr.addEventListener("load", handleEvent);
  xhr.addEventListener("loadend", handleEvent);
  xhr.addEventListener("progress", handleEvent);
  xhr.addEventListener("error", handleEvent);
  xhr.addEventListener("abort", handleEvent);
}

xhrButton.addEventListener("click", () => {
  log.textContent = "";

  const xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  addListeners(xhr);
  xhr.send();
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard  |

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

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

関連情報
----

* フェッチ API
BluetoothRemoteGATTService
==========================

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

Web Bluetooth API の `BluetoothRemoteGATTService` インターフェイスは、GATT サーバーにより提供されるサービスを表します。デバイス、参照されるサービス、このサービスのキャラクタリスティックのリストも含みます。

EventTarget

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

`BluetoothRemoteGATTService.device` 読取専用  
Experimental

`BluetoothDevice` のインスタンスを通じて、この Bluetooth デバイスの情報を返します。

`BluetoothRemoteGATTService.isPrimary` 読取専用  
Experimental

これがプライマリーサービスなのかセカンダリーサービスなのかを表す論理値を返します。

`BluetoothRemoteGATTService.uuid` 読取専用  
Experimental

このサービスの UUID を表す文字列を返します。

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

`BluetoothRemoteGATTService.getCharacteristic()` 
Experimental

指定の universally unique identifier (UUID) に対応する `BluetoothRemoteGATTCharacteristic` のインスタンスで解決する `Promise` を返します。

`BluetoothRemoteGATTService.getCharacteristics()` 
Experimental

省略可能な universally unique identifier (UUID) に対応する `BluetoothRemoteGATTCharacteristic` のインスタンスの `Array` で解決する `Promise` を返します。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # bluetoothgattservice-interface |

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

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

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

Permissions API の **`PermissionStatus`** インターフェイスは、オブジェクトの状態と、その状態への変更を監視するためのイベントハンドラを提供します。

プロパティ
-----

`PermissionStatus.state` 読取専用 

要求されたパーミッションの状態を返します。 `'granted'`（付与）、`'denied'`（拒否）、`'prompt'`（プロンプト）のいずれかです。

`PermissionStatus.status` (en-US)読取専用  
非推奨

要求されたパーミッションの状態を返します。 `'granted'`、`'denied'`、`'prompt'` のいずれかです。 仕様の今後のバージョンは、これを `PermissionStatus.state` に置き換えます。

### イベントハンドラ

`PermissionStatus.onchange`

`PermissionStatus.status` が変わるたびに呼び出されるイベント。

例
-


```js
navigator.permissions
  .query({ name: "geolocation" })
  .then(function (permissionStatus) {
    console.log(
      "位置情報のパーミッションの状態は " + permissionStatus.state + " です。",
    );
    permissionStatus.onchange = function () {
      console.log(
        "位置情報のパーミッションの状態が " +
          this.state +
          " に変更されました。",
      );
    };
  });
```

仕様
--

| Specification |
| --- |
| Permissions # permissionstatus-interface |

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

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

`XMLHttpRequestEventTarget` インターフェイスは、 `XMLHttpRequest` と `XMLHttpRequestUpload` で共有されるイベントハンドラーを示します。

`XMLHttpRequestEventTarget` を直接使用することはありません。サブクラスで操作してください。

`XMLHttpRequest` への継承
---------------------

EventTarget

XMLHttpRequestEventTarget

XMLHttpRequest
以下のイベントが `XMLHttpRequest` で利用できます。

* `abort`
* `error`
* `load`
* `loadend`
* `loadstart`
* `progress`
* `readystatechange`
* `timeout`
`XMLHttpRequestUpload` への継承
---------------------------

EventTarget

XMLHttpRequestEventTarget

XMLHttpRequestUpload
以下のイベントが `XMLHttpRequestUpload` で利用できます。

* `abort`
* `error`
* `load`
* `loadend`
* `loadstart`
* `progress`
* `timeout`
仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # xmlhttprequesteventtarget |

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

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

関連情報
----

* `XMLHttpRequest`
* `XMLHttpRequestUpload`
ResizeObserverEntry
===================

**`ResizeObserverEntry`** インターフェイスは、 `ResizeObserver()` コンストラクターのコールバック関数に渡されるオブジェクトを表します。これにより、監視対象の `Element` または `SVGElement` の新しい寸法にアクセスすることができます。

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

`ResizeObserverEntry.borderBoxSize` 読取専用 

コールバックが実行されたときに監視された要素の新しい境界ボックスサイズを含むオブジェクトの配列です。

`ResizeObserverEntry.contentBoxSize` 読取専用 

コールバックが実行されたときに監視された要素の新しいコンテンツボックスサイズを含むオブジェクトの配列です。

`ResizeObserverEntry.devicePixelContentBoxSize` 読取専用 

コールバック実行時に監視される要素の新しいコンテンツボックスサイズをデバイスピクセル単位で含むオブジェクトの配列です。

`ResizeObserverEntry.contentRect` 読取専用 

コールバックが実行されたときに監視された要素の新しいサイズを含む `DOMRectReadOnly` オブジェクトです。これは、上記の 2 つのプロパティよりも対応されていますが、リサイズオブザーバー API の以前の実装から残ったものであり、ウェブの互換性のために仕様に含まれているため、将来のバージョンで非推奨となる可能性があることに注意してください。

`ResizeObserverEntry.target` 読取専用 

監視対象の `Element` または `SVGElement` オブジェクト。


**メモ:** コンテンツボックスは、コンテンツを配置できるボックスで、境界ボックスからパディングと境界の幅を除いたものを意味します。境界ボックスは、コンテンツ、パディング、境界を包含します。さらなる説明はボックスモデルを参照してください。

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

なし。

例
-

以下のスニペットは resize-observer-text.html （ソースを参照）の例から取ったものです。

なお、このコードは 3 つの異なる互換性のケースに応じたものです。

* 古いブラウザーでは、 `contentRect` には対応していても、 `contentBoxSize` は対応していない場合があります。
* 古いバージョンの Firefox は `contentBoxSize` に対応していますが、誤って配列ではなく単一のオブジェクトとして実装していました。
* 現代のブラウザーは `contentBoxSize` をオブジェクトの配列として対応しており、断片化された要素（例えば複数段組みの場合）のボックスサイズを報告できるようになっています。


```js
const resizeObserver = new ResizeObserver((entries) => {
  for (let entry of entries) {
    if (entry.contentBoxSize) {
      // The standard makes contentBoxSize an array...
      if (entry.contentBoxSize[0]) {
        h1Elem.style.fontSize =
          Math.max(1.5, entry.contentBoxSize[0].inlineSize / 200) + "rem";
        pElem.style.fontSize =
          Math.max(1, entry.contentBoxSize[0].inlineSize / 600) + "rem";
      } else {
        // ...but old versions of Firefox treat it as a single item
        h1Elem.style.fontSize =
          Math.max(1.5, entry.contentBoxSize.inlineSize / 200) + "rem";
        pElem.style.fontSize =
          Math.max(1, entry.contentBoxSize.inlineSize / 600) + "rem";
      }
    } else {
      h1Elem.style.fontSize =
        Math.max(1.5, entry.contentRect.width / 200) + "rem";
      pElem.style.fontSize = Math.max(1, entry.contentRect.width / 600) + "rem";
    }
  }
  console.log("Size changed");
});

resizeObserver.observe(divElem);
```

仕様書
---

| Specification |
| --- |
| Resize Observer # resize-observer-entry-interface |

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

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

**`OscillatorNode`** インターフェイスは、正弦波などの周期的な波形を表します。これは、 `AudioScheduledSourceNode` 音声処理モジュールの一種で、指定された周波数の波を作成させ、実質的には一定の音になります。

EventTarget

AudioNode

AudioScheduledSourceNode

OscillatorNode

|  |  |
| --- | --- |
| 入力数 | `0` |
| 出力数 | `1` |
| チャンネルカウントモード | `max` |
| チャンネルカウント | `2` (デフォルトのカウントモードでは使用されません。) |
| チャンネルの解釈 | `speakers` |

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

`OscillatorNode()`

新しい `OscillatorNode` オブジェクトのインスタンスを作成します。オプションとして、ノードのプロパティに既定値を指定したオブジェクトを提供します。別の方法として、 `BaseAudioContext.createOscillator()` ファクトリーメソッドを使用することも可能です。AudioNode の作成を参照してください。

プロパティ
-----

*親インターフェイスである `AudioScheduledSourceNode` からプロパティを継承しており、さらに以下のプロパティがあります。*

`OscillatorNode.frequency`

a-rate の `AudioParam` であり、振動数・周波数をヘルツ（hertz、記号：Hz）で表わしたものです。（`AudioParam` は読み取り専用ですが、この値はそうではありません）。初期値は 440 Hz （中央 A （ラ）音）です。

`OscillatorNode.detune`

a-rate の `AudioParam` であり、発振音の離調をセント単位で表します（`AudioParam` は読み取り専用ですが、この値が表す値はそうでありません）。既定値は 0 です。

`OscillatorNode.type`

再生する波形の種類を指定する文字列です。いくつかの標準値の中から 1 つ、または、 `custom` で `PeriodicWave` を使用したカスタム波形を設定することができます。波形が異なれば、音色も異なります。標準的な値は `"sine"`, `"square"`, `"sawtooth"`, `"triangle"`, `"custom"` です。既定値は `"sine"` です。

### イベントハンドラー

`OscillatorNode.onended` (en-US)

音の再生が停止したときに発行される `ended` イベントに対するイベントハンドラーを設定します。

メソッド
----

*親インターフェイスである `AudioScheduledSourceNode` からメソッドを継承しており、さらに以下のメソッドがあります。*

`OscillatorNode.setPeriodicWave()`

標準的な波形の代わりに使用する、周期的な波形を記述した `PeriodicWave` を設定します。これを呼び出すと `type` は `custom` に設定されます。

`OscillatorNode.start()` (en-US)

音色の再生を開始する正確な時間を指定します。

`OscillatorNode.stop()` (en-US)

音色の再生を停止する時間を指定します。

例
-

以下の例は、 `AudioContext` を使用して発振器ノードを作成し、その上で音の再生を開始する基本的な使用方法を示しています。応用例としては、 Violent Theremin demo をご覧ください（関連するコードは app.js を参照してください）。


```js
// ウェブオーディオ API コンテキストの作成
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// Oscillator　ノードを作成します。
const oscillator = audioCtx.createOscillator();

oscillator.type = "square";
oscillator.frequency.setValueAtTime(440, audioCtx.currentTime); // ヘルツ単位の値
oscillator.connect(audioCtx.destination);
oscillator.start();
```

仕様書
---

| Specification |
| --- |
| Web Audio API # OscillatorNode |

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

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

関連情報
----

* ウェブオーディオ API の使用
WebUSB API
==========

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

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

**WebUSB API** は、USB をより安全かつ簡単に使えるように、標準でない Universal Serial Bus (USB) 対応のデバイスサービスをウェブから扱う方法を提供します。

概念と使用法
------

USB は、有線の周辺機器のデファクトスタンダードです。コンピューターに接続する USBデバイスは、通常キーボード、マウス、ビデオデバイスなどのいくつかのデバイスクラスに分類されます。これらのデバイスは、オペレーティングシステムのクラスドライバーによってサポートされます。これらのデバイスの多くは、ウェブからも `WebHID API` を用いてアクセスできます。

これらの標準化されたデバイスに加え、どのクラスにも当てはまらないデバイスも数多く存在します。これらにはカスタムドライバーが必要で、これらを生かすにはネイティブコードが必要なためウェブからはアクセスできません。これらのデバイスのインストールでは、多くの場合製造元のウェブサイトでドライバーを探すことが必要であり、別のコンピューターで同じデバイスを使いたければこの作業を繰り返すことになります。

WebUSB は、これらの標準化されていない USB デバイスサービスをウェブから扱う方法を提供します。すなわち、ハードウェアの製造元が独自の API を提供することなくデバイスにウェブからアクセスする方法を提供できるようになります。

新しい WebUSB 対応のデバイスを接続すると、ブラウザーは通知を表示し、製造元のウェブサイトへのリンクを提供します。そのサイトを開くと、ブラウザーはデバイスに接続する許可を求め、デバイスを使用する準備が整います。ドライバーをダウンロードしてインストールする必要はありません。

インターフェイス
--------

`USB`

ウェブページが USB デバイスを検出し、接続するためのプロパティとメソッドを提供します。

`USBConnectionEvent`

ユーザーエージェントが新しい USB デバイスのホストへの接続や切断を検出した時、`USB.onconnect` や `USB.ondisconnect` に渡されるイベント型です。

`USBDevice`

ペアリングした USB デバイスのメタデータと、制御用のメソッドを提供します。

`USBInTransferResult`

USB デバイスから USB ホストへのデータ転送要求の結果を表します。

`USBOutTransferResult`

USB ホストから USB デバイスへのデータ転送要求の結果を表します。

`USBIsochronousInTransferPacket`

アイソクロナス転送用のエンドポイントにおける USB デバイスから USB ホストへのデータ転送要求による個々のパケットの状態を表します。

`USBIsochronousInTransferResult`

USB デバイスから USB ホストへのデータ転送要求の結果を表します｡

`USBIsochronousOutTransferPacket`

アイソクロナス転送用のエンドポイントにおける USB ホストから USB デバイスへのデータ転送要求による個々のパケットの状態を表します｡

`USBIsochronousOutTransferResult`

USB ホストから USB デバイスへのデータ転送要求の結果を表します｡

`USBConfiguration`

USB デバイスの特定のコンフィグレーションに関する情報と、それがサポートするインターフェイスを提供します。

`USBInterface`

USB デバイスが提供するインターフェイスに関する情報を提供します。

`USBAlternateInterface`

USB デバイスが提供するインターフェイスの特定のコンフィグレーションに関する情報を提供します。

`USBEndPoint`

USB デバイスが提供するエンドポイントに関する情報を提供します。

例
-

### 接続されたデバイスにアクセスする

この例では、接続された Arduino デバイス (ベンダー ID `0x2341`) に `USB.requestDevice()` を用いてアクセスする方法を示します。


```js
navigator.usb
  .requestDevice({ filters: [{ vendorId: 0x2341 }] })
  .then((device) => {
    console.log(device.productName); // "Arduino Micro"
    console.log(device.manufacturerName); // "Arduino LLC"
  })
  .catch((error) => {
    console.error(error);
  });
```

### 接続された全てのデバイスを検出する

`USB.getDevices()` を用いることで、接続された全てのデバイスを検出できます。この例では、接続された Arduino デバイスの製品名と製造元名をコンソールに出力します。


```js
navigator.usb.getDevices().then((devices) => {
  devices.forEach((device) => {
    console.log(device.productName); // "Arduino Micro"
    console.log(device.manufacturerName); // "Arduino LLC"
  });
});
```

仕様書
---

| Specification |
| --- |
| WebUSB API  |

関連情報
----

* Access USB Devices on the Web
ByteLengthQueuingStrategy
=========================

**`ByteLengthQueuingStrategy`** はストリーム API のインターフェイスで、ストリームを構築するときに使用できる組み込みのバイト長キューイング戦略を提供します。

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

`ByteLengthQueuingStrategy()`

新しい `ByteLengthQueuingStrategy` オブジェクトのインスタンスを作成します。

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

`ByteLengthQueuingStrategy.highWaterMark` 読取専用 

背圧が適用される前に内部キューに格納することができるバイト数の合計。

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

`ByteLengthQueuingStrategy.size()`

指定されたチャンクの `byteLength` プロパティを返します。

例
-


```js
const queueingStrategy = new ByteLengthQueuingStrategy({ highWaterMark: 1024 });

const readableStream = new ReadableStream(
  {
    start(controller) {
      // …
    },
    pull(controller) {
      // …
    },
    cancel(err) {
      console.log("stream error:", err);
    },
  },
  queueingStrategy,
);

const size = queueingStrategy.size(chunk);
```

仕様書
---

| Specification |
| --- |
| Streams Standard # blqs-class |

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

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

関連情報
----

* ストリーム API
* 内部キューとキューイング戦略
* `ByteLengthQueuingStrategy()` コンストラクター
WakeLock
========

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

**`WakeLock`** は画面起動ロック API のインターフェイスで、アプリケーションが動作し続ける必要があるときに、端末の画面が暗くなったりロックされたりすることを防ぐためのものです。

システムの起動ロックはグローバルの `Navigator.wakeLock` プロパティで公開されています。

メソッド
----

``request``

`WakeLockSentinel` オブジェクトを要求し、 `WakeLockSentinel` オブジェクトで解決する `Promise` を返します。

例
-

以下の非同期関数は、 `WakeLockSentinel` オブジェクトを要求します。`WakeLock.request` メソッドはブラウザーが何らかの理由でリクエストを拒否した場合を想定して、 `try...catch` 文で囲まれています。


```js
try {
  const wakeLock = await navigator.wakeLock.request("screen");
} catch (err) {
  // 起動ロックの要求に失敗 - 通常は、バッテリー低下などシステムに起因する。
  console.log(`${err.name}, ${err.message}`);
}
```

仕様書
---

| Specification |
| --- |
| Screen Wake Lock API # the-wakelock-interface |

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

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

**`Range`** インターフェイスは、ノードやテキストノードの部品を含むことができる文書の範囲を表します。

範囲は `Document.createRange()` メソッドにより生成することができます。また、 `Selection` オブジェクトの `getRangeAt()` (en-US) メソッドや `Document` オブジェクトの `caretRangeFromPoint()` メソッドにより取得することもできます。

さらに、`Range()` コンストラクターも使用できます。

AbstractRange

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

*継承しているプロパティはありません。*

`Range.collapsed` 読取専用 

論理値で、範囲の始点と終点が同じ位置にあるか否かを示します。

`Range.commonAncestorContainer` 読取専用 

`startContainer` と `endContainer` をともに含む、最も深い `Node` を返します。

`Range.endContainer` 読取専用 

`Range` の終点を含む `Node` を返します。

`Range.endOffset` 読取専用 

`endContainer` の中での `Range` の終点の位置を示す数字を返します。

`Range.startContainer` 読取専用 

`Range` の始点を含む `Node` を返します。

`Range.startOffset` 読取専用 

`startContainer` の中での `Range` の始点の位置を示す数字を返します。

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

`Range()`

始点および終点がグローバルな `Document` である `Range` オブジェクトを返します。

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

*継承しているメソッドはありません。*

`Range.collapse()`

`Range` をその端点の一方へ折りたたみます。

`Range.compareBoundaryPoints()`

`Range` の端点を、他の `Range` の端点と比較します。

`Range.compareNode()` 
非推奨

Non-standard

`Node` が範囲の前、後、中、外のうちのいずれの場所にあるかを示す定数を返します。

`Range.comparePoint()`

この点が `Range` の前、中、後のうちのいずれの場所にあるかを示す -1、0、1 を返します。

`Range.cloneContents()`

`Range` の中身をコピーした `DocumentFragment` を返します。

`Range.cloneRange()`

元の `Range` と同じ端点を持つ複製された `Range` オブジェクトを返します。

`Range.createContextualFragment()`

渡されたコードの文字列から生成した `DocumentFragment` を返します。

`Range.deleteContents()`

`Range` の中身を `Document` から削除します。

`Range.detach()`

何もしません。互換性のために維持されています。

`Range.extractContents()`

`Range` の中身を文書ツリーから `DocumentFragment` へ移動します。

`Range.getBoundingClientRect()`

`Range` の内容の全体に結びつく `DOMRect` オブジェクトを返します。これは、 `range.getClientRects()` が返します。すべての長方形の集合体です。

`Range.getClientRects()`

`Range` 内のすべての要素について、`Element.getClientRects()` の結果をまとめた `DOMRect` オブジェクトのリストを返します。

`Range.isPointInRange()`

与えられた点が `Range` の中にあるか否かを示す論理値を返します。

`Range.insertNode()`

`Range` の始点に `Node` を挿入します。

`Range.intersectsNode()`

指定ノードの範囲が `Range` と交差するか否かを示す論理値を返します。

`Range.selectNode()`

`Range` を、ある `Node` とその内容を含むように設定します。

`Range.selectNodeContents()`

`Range` を、ある `Node` の内容を含むように設定します。

`Range.setEnd()`

`Range` の終点を設定します。

`Range.setStart()`

`Range` の始点を設定します。

`Range.setEndAfter()`

他の `Node` を基準に `Range` の終点を設定します。

`Range.setEndBefore()`

他の `Node` を基準に `Range` の終点を設定します。

`Range.setStartAfter()`

他の `Node` を基準に `Range` の始点を設定します。

`Range.setStartBefore()`

他の `Node` を基準に `Range` の始点を設定します。

`Range.surroundContents()`

`Range` の中身を新しい `Node` の中に移動します。

`Range.toString()`

`Range` の内容を文字列として返します。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-range |
| DOM Parsing and Serialization # extensions-to-the-range-interface |
| CSSOM View Module # extensions-to-the-range-interface |

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

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

関連情報
----

* DOM インターフェイスの索引
WheelEvent
==========

**`WheelEvent`** インターフェイスは、ユーザーがマウスホイールやそれに似た機器を動かしたときに発行されるイベントを表します。

**メモ:** これは標準のホイールイベントインターフェイスです。古いバージョンのブラウザーは、標準外でブラウザー間の互換性のない `MouseWheelEvent` および `MouseScrollEvent` インターフェイスを実装していました。これらを避けて、このインターフェイスを使用してください。

**メモ:** `wheel` イベントと `scroll` イベントを混同しないでください。 `wheel` イベントの既定のアクションは実装固有のものです。したがって、 `wheel` イベントは必ずしも `scroll` イベントを発行するわけではありません。その場合でも、 `wheel` イベントの `delta*` 値は必ずしもコンテンツのスクロール方向を反映しているとは限りません。したがって、スクロールの方向を取得するために、 `wheel` イベントの `delta*` プロパティに頼らないようにしてください。代わりに、 `scroll` イベント内のターゲットの `scrollLeft` や `scrollTop` の値の変化を検出するようにしてください。

Event

UIEvent

MouseEvent

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

`WheelEvent()`

`WheelEvent` オブジェクトを生成します。

プロパティ
-----

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

`WheelEvent.deltaX` 読取専用 

水平方向のスクロール量を表す `double` を返します。

`WheelEvent.deltaY` 読取専用 

垂直方向のスクロール量を表す `double` を返します。

`WheelEvent.deltaZ` 読取専用 

Z 軸方向のスクロール量を表す `double` を返します。

`WheelEvent.deltaMode` 読取専用 

スクロール量の差分値の単位を表す `unsigned long` を返します。許容値は以下のとおりです:

| 定数 | 値 | 説明 |
| --- | --- | --- |
| `DOM_DELTA_PIXEL` | `0x00` | `delta*` はピクセル数で指定されます。 |
| `DOM_DELTA_LINE` | `0x01` | `delta*` は行数で指定されます。マウスをクリックするたびに、コンテンツを 1 行スクロールします。行の高さを計算するために使用する方法は、ブラウザーに依存します。 |
| `DOM_DELTA_PAGE` | `0x02` | `delta*` はページ数で指定されます。マウスをクリックするたびに、コンテンツを 1 ページスクロールします。 |

`WheelEvent.wheelDelta` 読取専用  
非推奨

Non-standard

ピクセル単位の距離を表す整数（32 ビット）を返します。

`WheelEvent.wheelDeltaX` 読取専用  
非推奨

Non-standard

水平スクロール量を表す整数を返します。

`WheelEvent.wheelDeltaY` 読取専用  
非推奨

Non-standard

垂直スクロール量を表す整数を返します。


**メモ:** Element: mousewheel イベントには、非推奨の `wheelDelta`、`wheelDeltaX`、`wheelDeltaY` プロパティについての追加の文書があります。

メソッド
----

*このインターフェイスではメソッドが定義されていませんが、祖先である `MouseEvent`, `UIEvent`, `Event` のメソッドを継承しています。*

仕様書
---

| Specification |
| --- |
| UI Events # interface-wheelevent |

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

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

関連情報
----

* `wheel` イベント
* 置き換えたインターフェイス:
    + Gecko の古いマウスホイールイベントオブジェクト: `MouseScrollEvent`