EventSource - Web API

EventSource
===========

**`EventSource`** インターフェイスは、サーバー送信イベントのウェブコンテンツのインターフェイスです。

`EventSource` インターフェイスは、 HTTP サーバーとの間で永続的なコネクションを開き、イベントを `text/event-stream` の形式で受け取ります。コネクションは `EventSource.close()` を呼び出して閉じられるまで開いたままになります。

EventTarget

EventSource
コネクションが開かれた後、サーバーからの着信メッセージは、イベントという形式でコードに配信されます。着信メッセージにイベントフィールドがある場合、発生するイベント は、イベントフィールドの値と同じになります。イベントフィールドが存在しない場合、一般的な `message` イベントが発行されます。

WebSocket とは異なり、サーバー送信イベントは単一方向です。つまり、データメッセージはサーバーからクライアント（ユーザーのウェブブラウザーなど）に向けて、一方向に配信されます。これは、メッセージの形でクライアントからサーバーにデータを送る必要がない場合には良い選択です。例えば、 `EventSource` はソーシャルメディアの近況アップデートやニュースフィードのようなものを扱ったり、クライアント側ストレージ（IndexedDB や web storage など）の仕組みにデータを配信したりするアプローチに有用です。

**警告:** **HTTP/2 上で使用されていない**場合、 SSE は開いている接続の最大数に制限を受けます。この制限はブラウザーごとにあり、とても低い数 (6) に設定されているため、さまざまなタブを開くために特別な痛みを伴うことがあります。この問題は、Chrome と Firefox で「修正予定なし」と表示されています。この制限はブラウザー＋ドメインごとなので、 `www.example1.com` への SSE 接続をすべてのタブで 6 つ、`www.example2.com.` への SSE 接続をさらに 6 つ開くことができることを意味しています（Stackoverflow より）。 HTTP/2 を使用している場合、同時の *HTTP ストリーム* の最大数はサーバーとクライアントの間で交渉されます（既定値は 100）。

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

`EventSource()`

指定した URL からサーバーが（オプションで資格情報モードで）送信するイベントを処理するための `EventSource` を新規に作成します。

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

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

`EventSource.readyState` 読取専用

数値で、コネクションの状態を表します。取りうる値は `CONNECTING` (`0`)、`OPEN` (`1`)、`CLOSED` (`2`) です。

`EventSource.url` 読取専用

文字列で、ソースの URL を表します。

`EventSource.withCredentials` 読取専用

論理値で、 `EventSource` オブジェクトがオリジン間 (CORS) 資格情報を設定してインスタンス化されたか (`true`)、設定されずにインスタンス化されたか (`false`、既定値) を示します。

メソッド
----

*このインターフェイスは、親である `EventTarget` からメソッドを継承しています。*

`EventSource.close()`

コネクションを切断して、 `readyState` 属性を `CLOSED` に設定します。すでに切断されている場合は何も行いません。

イベント
----

`error`

イベントソースへのコネクションを開くことに失敗したときに発生します。

`message`

イベントソースからデータを受信したときに発生します。

`open`

イベントソースへのコネクションが開かれたときに発生します。

さらに、イベントソース自身がイベントフィールドを持つメッセージを送信し、その値をキーにしたアドホックイベントを作成することもできます。

例
-

この基本的な例では、 `EventSource` を生成してサーバーからイベントを受け取ります。 `sse.php` という名前のページがイベントを生成する責任を負います。

```js
const evtSource = new EventSource("sse.php");
const eventList = document.querySelector("ul");

evtSource.onmessage = (e) => {
  const newElement = document.createElement("li");

  newElement.textContent = `message: ${e.data}`;
  eventList.appendChild(newElement);
};
```

受信されたそれぞれのイベントは、 `EventSource` オブジェクトの `onmessage` イベントハンドラーを実行させます。ここでは、新しい `<li>` 要素を生成してその中にメッセージのデータを書き込み、この要素を文書の中にある既存のリスト要素に追加します。

**メモ:** この例の全容が GitHub にあります。Simple SSE demo using PHP をご覧ください。

名前付きのイベントを待ち受けするには、送信されるイベントの種類ごとにリスナーが必要になります。

```js
const sse = new EventSource("/api/v1/sse");

/\*
 \* これは以下のようなイベントのみを待ち受けします。
 \*
 \* event: notice
 \* data: useful data
 \* id: someid
 \*/
sse.addEventListener("notice", (e) => {
  console.log(e.data);
});

/\*
 \* 同様に、これは `event: update` というフィールドを持つ
 \* イベントを待ち受けます。
 \*/
sse.addEventListener("update", (e) => {
  console.log(e.data);
});

/\*
 \* "message" というイベントは特別なケースで、
 \* イベントフィールドを持たないイベントや、特定の型である
 \* `event: message` を持つイベントを捕捉します。それは、
 \* 他のイベント型では発生しません。
 \*/
sse.addEventListener("message", (e) => {
  console.log(e.data);
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # the-eventsource-interface |

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

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

関連情報
----

* サーバー送信イベント
* サーバー送信イベントの使用


DOMTokenList - Web API

DOMTokenList
============

**`DOMTokenList`** インターフェイスは、スペースで区切られたトークンのセットを表します。こうしたセットは `Element.classList` や `HTMLLinkElement.relList` など、数多くのものから返されるものです。

`DOMTokenList` の添字は JavaScript の `Array` オブジェクトのように `0` から始まります。 `DOMTokenList` は常に大文字と小文字を区別します。

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

`DOMTokenList.length` 読取専用

整数で、このオブジェクトに格納されているオブジェクトの数を表します。

`DOMTokenList.value`

文字列化プロパティであり、リストの値を文字列で返します。

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

`DOMTokenList.item()`

そのリスト内で指定された位置の項目を返します。指定された位置がそのリストの `length` 以上であれば `null` を返します。

`DOMTokenList.contains()`

指定されたトークンがリストに含まれていれば `true` を返し、そうでなければ `false`を返します。

`DOMTokenList.add()`

指定されたトークンをリストに追加します。

`DOMTokenList.remove()`

指定されたトークンをリストから削除します。

`DOMTokenList.replace()`

そのトークンを別なトークンで置き換えます。

`DOMTokenList.supports()`

指定されたトークンが、関連付けられた属性で対応しているトークンであれば `true` を返します。

`DOMTokenList.toggle()`

もしそのトークンが存在すればリストから削除し、存在しなければそのトークンをリストに追加します。操作後にリスト内にそのトークンが存在するかどうかを論理値で返します。

`DOMTokenList.entries()`

このオブジェクト内に含まれるすべてのキーと値のペアを反復処理することができるイテレーターを返します。

`DOMTokenList.forEach()`

`DOMTokenList` オブジェクトの各要素に対して 1 回ずつ、指定したコールバック関数を実行します。

`DOMTokenList.keys()`

このオブジェクト内に含まれるすべてのキーと値のペアのうち、キーを反復処理することができるイテレーターを返します。

`DOMTokenList.values()`

このオブジェクト内に含まれるすべてのキーと値のペアのうち、値を反復処理することができるイテレーターを返します。

例
-

以下の簡単な例では、 `<p>` 要素のクラスのリストを `Element.classList` を使用して `DOMTokenList` として受け取り、 `DOMTokenList.add()` を使用してクラスを 1 つ追加し、最後に `<p>` の `Node.textContent` が `DOMTokenList` と等しくなるように更新します。

まず、 HTML は以下のとおりです。

```html
<p class="a b c"></p>
```

そして JavaScript です。

```js
let para = document.querySelector("p");
let classes = para.classList;
para.classList.add("d");
para.textContent = `段落の classList は "${classes}"`;
```

出力結果はこのようになります。

ホワイトスペースのトリミングと重複の削除
--------------------

`DOMTokenList` を編集するメソッド (`DOMTokenList.add()` など) は、自動的にそのリストから余分なホワイトスペースをトリミングし、重複した値を削除します。例えば次のようになります。

```html
<span class=" d d e f"></span>
```

```js
let span = document.querySelector("span");
let classes = span.classList;
span.classList.add("x");
span.textContent = `span の classList は "${classes}"`;
```

出力結果はこのようになります。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-domtokenlist |

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

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


FileSystemFileHandle - Web API

FileSystemFileHandle
====================

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

File System Access API の **`FileSystemFileHandle`** インターフェイスは、ファイルシステムのエントリーのハンドルを表します。このインターフェイスには、`window.showOpenFilePicker()` メソッドを通じてアクセスします。

注意するべき点として、読み書きの操作にはファイルアクセスの許可が必要ですが、この許可は同じオリジンの他のタブが開かれていない場合、ページを再読み込みすると消滅します。`FileSystemHandle` インターフェイスの `queryPermission` メソッドを用いると、ファイルにアクセスする前に許可の状態を確かめることができます。

FileSystemHandle

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

*親の `FileSystemHandle` からプロパティを継承します。*

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

*親の `FileSystemHandle` からメソッドを継承します。*

`getFile()`

ハンドルが表すエントリーのディスク上での状態を表す `File` オブジェクトで解決する `Promise` を返します。

`createSyncAccessHandle()`

 ファイルを同期式で読み書きすることができる `FileSystemSyncAccessHandle` オブジェクトで解決する `Promise` を返します。
 このメソッドは同期式であるという性質によりパフォーマンス上有利ですが、それ用の Web Workers の中でしか用いることができません。

`createWritable()`

ファイルに書き込むことができる新しく作成された `FileSystemWritableFileStream` オブジェクトで解決する `Promise` を返します。

例
-

### ファイルを読み込む

以下の非同期関数は、ファイルピッカーを表示し、ファイルが選択されると `getFile()` メソッドを用いて内容を取得します。

```js
async function getTheFile() {
  const pickerOpts = {
    types: [
      {
        description: "Images",
        accept: {
          "image/\*": [".png", ".gif", ".jpeg", ".jpg"],
        },
      },
    ],
    excludeAcceptAllOption: true,
    multiple: false,
  };

  // ファイルピッカーを開く
  const [fileHandle] = await window.showOpenFilePicker(pickerOpts);
  // ファイルの内容を得る
  const fileData = await fileHandle.getFile();
  return fileData;
}
```

### ファイルに書き込む

以下の非同期関数は、与えられた内容をファイルハンドルに書き込むことにより、ディスクに書き込みます。

```js
async function writeFile(fileHandle, contents) {
  // 書き込み先の FileSystemWritableFileStream を作成する
  const writable = await fileHandle.createWritable();

  // ファイルの内容をストリームに書き込む
  await writable.write(contents);

  // ファイルを閉じ、内容をディスクに書き込む
  await writable.close();
}
```

### 同期式でファイルを読み書きする

以下の非同期のイベントハンドラーは、Web Worker 内にあります。メインスレッドからのメッセージを受信すると、以下の動作をします。

* 同期式のファイルアクセスハンドルを作成します。
* ファイルのサイズを取得し、格納用の `ArrayBuffer` を作成します。
* ファイルの内容をそのバッファに読み込みます。
* メッセージをエンコードし、ファイルの終端に書き込みます。
* 変更をディスクに保存し、アクセスハンドルを閉じます。

```js
onmessage = async (e) => {
  // メインスレッドからの処理対象のメッセージを取得する
  const message = e.data;

  // draft ファイルへのハンドルを取得する
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // 同期式のアクセスハンドルを取得する
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // ファイルのサイズを取得する
  const fileSize = accessHandle.getSize();
  // ファイルの内容をバッファに読み込む
  const buffer = new DataView(new ArrayBuffer(fileSize));
  const readBuffer = accessHandle.read(buffer, { at: 0 });

  // メッセージをファイルの終端に書き込む
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);
  const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });

  // 変更をディスクに保存する
  accessHandle.flush();

  // 完了したら、いつも FileSystemSyncAccessHandle を閉じる
  accessHandle.close();
};
```

**メモ:** 仕様書の以前のバージョンでは、`close()`・`flush()`・`getSize()`・`truncate()` は誤って非同期メソッドとされていました。これは現在では修正されていますが、まだ非同期バージョンをサポートしているブラウザーもあります。

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemfilehandle |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files


AudioWorkletGlobalScope - Web API

AudioWorkletGlobalScope
=======================

ウェブオーディオ API の **`AudioWorkletGlobalScope`** インターフェイスは、独自の `AudioWorkletProcessor` の派生クラスを定義するユーザーコードのグローバル実行コンテキストを表します。

それぞれの `BaseAudioContext` は `audioWorklet` プロパティに 1 個の `AudioWorklet` を持ち、これがコードを 1 個の `AudioWorkletGlobalScope` で実行します。

グローバル実行コンテキストは現在の `BaseAudioContext` で共通なので、`AudioWorkletProcessor` の派生クラスを定義するだけでなく、他の変数を定義するなど、ワークレットでできることはなんでもできます。

WorkletGlobalScope

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

*このインターフェイスは、親インターフェイスの `WorkletGlobalScope` で定義されたプロパティも継承します。*

`currentFrame` 読取専用

処理されている音声ブロックの現在のサンプルフレームを表す、単調増加の整数を返します。この値は、各音声ブロックを処理するごとに 128 (render quantum のサイズ) 増えます。

`currentTime` 読取専用

処理中の音声ブロックのコンテキスト時刻を表す単調増加の `double` 値を返します。ワークレットが属している `BaseAudioContext` の `currentTime` プロパティと同じ値です。

`sampleRate` 読取専用

属している `BaseAudioContext` のサンプルレートを表す `float` 値を返します。

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

*このインターフェイスは、親インターフェイスの `WorkletGlobalScope` からもメソッドを継承します。*

`registerProcessor()`

`AudioWorkletProcessor` インターフェイスの派生クラスを登録します。これにより、登録したクラスが登録した名前を指定することで `AudioWorkletNode` の生成に使用できるようになります。

例
-

この例では、独自の `AudioWorkletProcessor` のコンストラクターで、すべてのグローバルプロパティをコンソールに出力します。

まず、処理器を定義して登録する必要があります。これは別のファイルで行うことに注意してください。

```js
// test-processor.js で定義された AudioWorkletProcessor
class TestProcessor extends AudioWorkletProcessor {
  constructor() {
    super();

    // 生成時のサンプルフレームと時刻を記録する。
    // これらの値には AudioWorkletGlobalScope からアクセスできる。
    console.log(currentFrame);
    console.log(currentTime);
  }

  // process メソッドは必須である。
  // (最初から入っている) 無音を出力する。
  process(inputs, outputs, parameters) {
    return true;
  }
}

// サンプルレートを記録する。
// これは BaseAudioContext の読み取り専用プロパティであり、
// 生成時にのみ設定されるので、変化しない。
console.log(sampleRate);

// 任意の変数を宣言し、処理器で利用できる。
// たとえば、波形テーブルが入った ArrayBuffer を宣言できる。
const usefulVariable = 42;
console.log(usefulVariable);

registerProcessor("test-processor", TestProcessor);
```

次に、メインスクリプトファイルで処理器をロードし、処理器の名前を渡して `AudioWorkletNode` のインスタンスを生成し、生成したノードを音声グラフに接続します。コンソールに `console.log()` の呼び出しによる出力が出るはずです。

```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("test-processor.js");
const testNode = new AudioWorkletNode(audioContext, "test-processor");
testNode.connect(audioContext.destination);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # AudioWorkletGlobalScope |

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

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

関連情報
----

* ウェブオーディオ API
* Web Audio API の使用
* AudioWorklet の使用 (en-US)


DOMHighResTimeStamp - Web API

DOMHighResTimeStamp
===================

**`DOMHighResTimeStamp`** 型は `double` であり、時間の値を保存するために使用します。この値は別々の時点や、2 つの別々の時点の間の時間を表すことができます。単位はミリ秒であり、精度は 5 µs (マイクロ秒) であるべきです。ただし、ブラウザーが 5 マイクロ秒精度の時間の値を提供できない場合 (例えば、ハードウェアやソフトウェアの制約により) は、1 ミリ秒精度の時間として表すことができます。

**メモ:** ユーザーエージェントを実行するデバイスやオペレーティングシステムがマイクロ秒レベルのクロックを持たない場合は、ミリ秒精度に制限されます。

プロパティ
-----

*この*型*はプロパティがありません。これは倍精度浮動小数点数です。*

### 値

`DOMHighResTimeStamp` の値は、2 つの時点の間で経過した時間をミリ秒単位 (デバイスがサポートすれば 5 マイクロ秒以内の精度で) で表した倍精度浮動小数点数です。開始時間はサイトやアプリのスクリプトで指定した特定の時刻か、**time origin** にすることができます。

#### time origin

**time origin** は、現在のドキュメントの存続期間の開始時点であると考えられる標準時刻です。これは以下のように算出します:

* スクリプトの グローバルオブジェクト が `Window` であれば、time origin を以下のように決定します:
    + 現在の `Document` が `Window` で最初に読み込まれたものであれば、ブラウザーコンテキストが生成された時刻を time origin にします。
    + window に以前読み込まれたドキュメントをアンロードする処理の間に、以前のページから去るかをユーザーに確認させるダイアログを表示した場合は、新しいページに移動することを受諾するとユーザーが確認した時刻を time origin にします。
    + 前述のどちらでも time origin が決まらない場合は、window の現在の `Document` を生成する原因であるナビゲーションが発生した時刻を time origin にします。
* スクリプトのグローバルオブジェクトが `WorkerGlobalScope` である (すなわち、スクリプトを web worker として実行している) 場合は、worker が生成された瞬間を time origin にします。
* その他の場合はすべて、time origin が未定義です。
メソッド
----

*この*型*はメソッドがありません。*

仕様
--

#### No specification found

No specification data found for `api.DOMHighResTimestamp`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

ブラウザー実装状況
---------

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

関連情報
----

* Navigation Timing API (en-US)
* performance.now()


CaretPosition - Web API

CaretPosition
=============

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

`CaretPosition` インターフェイスは、テキスト挿入ポイントのインジケーターであるキャレット位置を表します。 `Document.caretPositionFromPoint()` メソッドを使用して `CaretPosition` を取得できます。

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

*このインターフェイスはプロパティを継承していません。*

`CaretPosition.offsetNode` 読取専用
Experimental

キャレットの位置で見つかったノードを含む `Node` を返します。

`CaretPosition.offset` 読取専用
Experimental

キャレット位置ノードの文字オフセットを表す `long` を返します。

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

`CaretPosition.getClientRect`
Experimental

キャレット範囲のクライアント長方形を返します。

仕様書
---

| Specification |
| --- |
| CSSOM View Module # caret-position |

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

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

関連情報
----

* `Document.caretPositionFromPoint()`
* `Range`
* `Node`


History - Web API

History
=======

**`History`** インターフェイスで、ブラウザーの*セッション履歴*、つまり現在のページが読み込まれたタブまたはフレームで訪問したページを操作することができます。

`history` のインスタンスは 1 つしかなく（シングルトンです）、グローバルオブジェクト `history` を通してアクセスできます。

**メモ:** このインターフェイスはメインスレッド (`Window`) でのみ利用できます。 `Worker` または `Worklet` コンテキストではアクセスできません。

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

*`History` インターフェイスは何もプロパティを継承していません。*

`length` 読取専用

現在読み込まれているページを含むセッション履歴の要素数を表す `Integer` を返します。たとえば、新しいタブで読み込まれたページのこのプロパティは `1` を返します。

`scrollRestoration`

ウェブアプリケーションが履歴の操作で既定のスクロール位置の復元を明示的に設定できるようにします。このプロパティは `auto` または `manual` を指定することができます。

`state` 読取専用

履歴スタックの最上位にある状態を表す `any` の値を返します。これは `popstate` イベントを待たずに状態を確認する方法です。

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

*`History` インターフェイスは何もメソッドを継承していません。*

`back()`

これは非同期メソッドであり、ユーザーがブラウザーの`戻る`ボタンをクリックしたときと同じく、セッション履歴の一つ前のページへ移動します。 `history.go(-1)` と同等です。

このメソッドを呼び出して、セッション履歴の最初のページを超えて戻っても何の効果もなく、例外が発生することもありません。

`forward()`

これは非同期メソッドであり、ユーザーがブラウザーの`次へ`ボタンをクリックしたときと同じく、セッション履歴の一つ次のページへ移動します。これは `history.go(1)` と同等です。

このメソッドを呼び出して、セッション履歴の直近のページを超えて進んでも何の効果もなく、例外が発生することもありません。

`go()`

セッション履歴上で、現在のページからの相対位置で識別されるページを非同期に読み出します。たとえば、 `-1` は前のページで `1` は次のページです。範囲外の値を指定した場合 (例えば、セッション履歴に以前訪問したページがないときに `-1` を指定した場合)、このメソッドは暗黙に何もしません。 `go()` を引数なし、または `0` の値で呼び出すと、現在のページを再読み込みします。

`pushState()`

指定されたデータを指定されたタイトル（および、指定されていれば URL）でセッション履歴に追加します。このデータは DOM においては透過的でないものとして扱われます。シリアライズ可能な JavaScript を指定することができます。詳しくは、履歴 API での作業を参照してください。

`replaceState()`

履歴スタックの最新の項目が、指定したデータ、タイトル、指定されていれば URL になるよう更新します。データは DOM では透過的でないものとして扱われます。シリアライズ可能な JavaScript を指定することができます。なお、 Safari 以外のすべてのブラウザーが今のところ *title* 引数を無視することに注意してください。詳しくは、 履歴 API での作業を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # the-history-interface |

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

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

関連情報
----

* `history` グローバルオブジェクト


WebGLBuffer - Web API

WebGLBuffer
===========

**WebGLBuffer** インターフェイスは WebGL API の一部で、頂点や色などのデータを格納する不透明なバッファーオブジェクトを表します。

WebGLObject

WebGLBuffer解説
--

`WebGLBuffer` オブジェクトはそれ自身のメソッドやプロパティを定義しておらず、その内容には直接アクセスできません。 `WebGLBuffer` オブジェクトを扱う場合、 `WebGLRenderingContext` の以下のメソッドが役に立ちます。

* `WebGLRenderingContext.bindBuffer()`
* `WebGLRenderingContext.createBuffer()`
* `WebGLRenderingContext.deleteBuffer()` (en-US)
* `WebGLRenderingContext.isBuffer()` (en-US)
例
-

### バッファーの作成

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const buffer = gl.createBuffer();
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.4 |

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

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

関連情報
----

* `WebGLRenderingContext.bindBuffer()`
* `WebGLRenderingContext.createBuffer()`
* `WebGLRenderingContext.deleteBuffer()` (en-US)
* `WebGLRenderingContext.isBuffer()` (en-US)
* その他のバッファー: `WebGLFramebuffer`, `WebGLRenderbuffer`


HTMLDataElement - Web API

HTMLDataElement
===============

**`HTMLDataElement`** インターフェイスは、（継承によって利用できる通常の `HTMLElement` のものの他に）`<data>` 要素を操作するための特殊なプロパティを提供します。

EventTarget

Node

Element

HTMLElement

HTMLDataElement属性
--

*親である `HTMLElement` から継承しているプロパティがあります。*

`HTMLDataElement.value`

HTML の `value` 属性を反映する、要素の機械可読な値が入った文字列です。

メソッド
----

*固有のメソッドはありません。親である `HTMLElement` から継承しているメソッドがあります。*

仕様書
---

| Specification |
| --- |
| HTML Standard # htmldataelement |

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

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

関連情報
----

* 本インターフェースを実装する HTML 要素: `<data>`.


Window.performance - Web API

Window.performance
==================

`Window` インタフェースのパフォーマンスプロパティは、現在のドキュメントに関するパフォーマンス情報を収集するために使用できる `Performance` オブジェクトを返します。これはパフォーマンスタイムライン API、高解像度時間 API、ナビゲーションタイミング API、ユーザータイミング API (en-US) およびリソースタイミング API の公開ポイントとして機能します。

構文
--
```

performanceData = window.performance;
```

### 値

それが公開する API によって提供されるパフォーマンスおよびタイミング関連情報へのアクセスを提供する `Performance` オブジェクト。

仕様
--

| Specification |
| --- |
| High Resolution Time # the-performance-attribute |

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

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


setInterval() - Web API

setInterval()
=============

**`setInterval()`** メソッドは `Window` および `Worker` メソッドで提供され、一定の遅延間隔を置いて関数やコードスニペットを繰り返し呼び出します。

このメソッド、インターバルを一意に識別するインターバル ID を返します。よって `clearInterval()` を呼び出して、後でインターバルを削除できます。

構文
--

```js
setInterval(code)
setInterval(code, delay)

setInterval(func)
setInterval(func, delay)
setInterval(func, delay, arg0)
setInterval(func, delay, arg0, arg1)
setInterval(func, delay, arg0, arg1, /\* … ,\*/ argN)
```

### 引数

`func`

`delay` ミリ秒が経過するたびに実行する`関数`です。最初の実行は `delay` ミリ秒後に行われます。

`code`

関数の代わりに文字列を含める構文も許容されており、 `delay` ミリ秒が経過するたびに文字列をコンパイルして実行します。 `eval()` の使用にリスクがあるのと同じ理由で、この構文は**推奨しません**。

`delay` 省略可

指定した関数またはコードを実行する前にタイマーが待つべき時間をミリ秒 (1/1000 秒) 単位で指定します。引数が 10 より小さい場合は、10 を使用します。実際の遅延が長くなることがあります。例えば遅延の制約をご覧ください。

`arg0, …, argN` 省略可

タイマーが満了したときに、 *func* で指定した関数に渡す追加の引数です。

### 返値

返値 `intervalID` は 0 ではない正の整数値で、 `setInterval()` を呼び出して作成したタイマーを識別します。この値を `clearInterval()` へ渡せば、インターバルを取り消すことができます。

`setInterval()` と `setTimeout()` は同じ ID プールを共有しており、 `clearInterval()` と `clearTimeout()` は技術的に入れ替えて使用できることを意識すると役に立つでしょう。ただし明快さのために、コードを整備するときは混乱を避けるため、常に一致させるようにするべきです。

**メモ:** 引数 `delay` は、符号付き 32 ビット整数に変換されます。 IDL における符号付き整数の定義によって、`delay` は事実上 2147483647ms に制限されます。

例
-

### 例 1: 基本的な構文

以下の例は、 `setInterval()` の基本的な構文を示します。

```js
const intervalID = setInterval(myCallback, 500, "Parameter 1", "Parameter 2");

function myCallback(a, b) {
  // ここにコードを記述します。
  // 引数は完全に省略可能です。
  console.log(a);
  console.log(b);
}
```

### 例 2: 2 つの色を切り替える

以下の例は停止ボタンを押すまで、1 秒おきに `flashtext()` 関数を呼び出します。

#### HTML

```html
<div id="my\_box">
  <h3>Hello World</h3>
</div>
<button id="start">Start</button>
<button id="stop">Stop</button>
```

#### CSS

```css
.go {
  color: green;
}
.stop {
  color: red;
}
```

#### JavaScript

```js
// intervalID を格納する変数
let nIntervId;

function changeColor() {
  // 既にインターバルがセットアップされているかどうかを検査
  if (!nIntervId) {
    nIntervId = setInterval(flashText, 1000);
  }
}

function flashText() {
  const oElem = document.getElementById("my\_box");
  oElem.className = oElem.className === "go" ? "stop" : "go";
}

function stopTextColor() {
  clearInterval(nIntervId);
  // 変数から intervalID を解放
  nIntervId = null;
}

document.getElementById("start").addEventListener("click", changeColor);
document.getElementById("stop").addEventListener("click", stopTextColor);
```

#### 結果

`clearInterval()` も参照してください。

"this" 問題
---------

`setInterval()` に（もっと言うと他のどんな関数でも）メソッドを渡すと、間違った `this` の値で呼び出されることがあります。この問題は JavaScript リファレンスで詳しく説明しています。

### 解説

`setInterval()` によって実行されるコードは、呼び出し元とは別の実行コンテキスト内で実行されます。その結果、呼び出された関数の `this` キーワードは `window` （または `global`）オブジェクトに設定されます。これは `setTimeout` を呼び出した関数とは `this` の値が異なります。以下の例をご覧ください（ここでは `setInterval()` ではなく `setTimeout()` を使用していますが、どちらのタイマーでも問題は同じです）。

```js
myArray = ["zero", "one", "two"];

myArray.myMethod = function (sProperty) {
  alert(arguments.length > 0 ? this[sProperty] : this);
};

myArray.myMethod(); // "zero,one,two" と表示
myArray.myMethod(1); // "one" と表示
setTimeout(myArray.myMethod, 1000); // "[object Window]" と 1 秒後に表示
setTimeout(myArray.myMethod, 1500, "1"); // "undefined" と 1.5 秒後に表示
// passing the 'this' object with .call won't work
// because this will change the value of this inside setTimeout itself
// while we want to change the value of this inside myArray.myMethod
// in fact, it will be an error because setTimeout code expects this to be the window object:
setTimeout.call(myArray, myArray.myMethod, 2000); // エラー: "NS\_ERROR\_XPC\_BAD\_OP\_ON\_WN\_PROTO: Illegal operation on WrappedNative prototype object"
setTimeout.call(myArray, myArray.myMethod, 2500, 2); // 同じエラー
```

この例でわかるとおり、旧来の JavaScript でコールバック関数に `this` オブジェクトを渡す方法はありません。

### 取りうる解決策

最近の JavaScript ランタイムはすべて（ブラウザーとそそれ以外を含め）、アロー関数と `this` 表記と組み合わせると、 `myArray` メソッドの内部にいる場合は `setInterval(() => this.myMethod())` と記述することが可能です。

IE に対応する必要がある場合は、`Function.prototype.bind()` メソッドを使用すると、与えられた関数へのすべての呼び出しに対して `this` として使用する値を指定することができます。これにより、関数が呼び出されたときのコンテキストによって `this` が何であるかが不明確な問題を簡単に回避することができます。

使用上のメモ
------

`setInterval()` 関数は一般に、アニメーションのように何度も実行される関数に遅延をセットするのに使われます。 `clearInterval()` を使ってインターバルを取り消すことができます。

指定時間後に*一度*だけ関数を呼び出したい場合には、　`setTimeout()` を使用してください。

### 遅延の制約

`setInterval()` のコールバックは順番に `setInterval()` を呼び出し、最初のインターバルがまだ進行中であっても、別のインターバルを開始させることができます。このことがパフォーマンスに与える潜在的な影響を軽減するために、インターバルが 5 レベルを超えてネストされると、ブラウザーは自動的にインターバルの最小値として 4 ミリ秒を強制するようになります。深くネストされた `setInterval()` の呼び出しで 4ms 未満の値を指定しようとすると、 4ms に固定されます。

ブラウザーは、状況によってはさらに厳しい最小間隔値を強制するかもしれませんが、これは一般的なことではありません。また、コールバックの呼び出しの間に経過する実際の時間は、与えられた `delay` よりも長いかもしれないことに注意してください。例については遅延が指定値より長い理由を参照してください。

### 実行時間をインターバルより確実に短くする

ロジックの実行時間がインターバル時間より長くなる可能性がある場合は、`setTimeout()` を使用して名前付き関数を再帰的に呼び出すことを推奨します。例えば 5 秒おきにリモートサーバーへ接続するために `setInterval()` を使用する場合、ネットワークの遅延やサーバーの応答がないなどさまざまな問題で、割り当てられた時間内にリクエストが完了しない可能性があります。そのため、必ずしも順番どおりには返らない XHR リクエストがキュー内にあることに気づくかもしれません。

この場合は、再帰的な `setTimeout()` のパターンを推奨します。

```js
(function loop() {
  setTimeout(() => {
    // Your logic here

    loop();
  }, delay);
})();
```

このコードスニペットでは、名前付き関数 `loop()` を宣言して直ちに実行します。`loop()` はロジックが完全に実行された後に、内部の `setTimeout()` によって再帰呼び出しされます。このパターンは一定の間隔で呼び出すことが保証されませんが、再帰呼び出しの前に前の実行が完了することが保証されます。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-setinterval-dev |

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

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

関連情報
----

* core-js にある `setInterval` のポリフィルで、コールバックに引数を渡すことができるもの
* `setTimeout`
* `clearTimeout`
* `clearInterval`
* `window.requestAnimationFrame`


WritableStream - Web API

WritableStream
==============

**`WritableStream`** はストリーム API のインターフェイスで、ストリーミングデータをシンクと呼ばれる宛先に書き込むための標準的な抽象化を提供します。 このオブジェクトには、背圧とキューイングが組み込まれています。

`WritableStream` は移譲可能オブジェクトです。

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

`WritableStream()`

新しい `WritableStream` オブジェクトを作成します。

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

`WritableStream.locked` 読取専用

論理値で、 `WritableStream` がライターにロックされているかどうかを示します。

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

`WritableStream.abort()`

ストリームを中止し、プロデューサーがストリームに正常に書き込むことができなくなり、キューに入れられた書き込みが破棄されてすぐにエラー状態に移行することを通知します。

`WritableStream.close()`

ストリームを閉じます。

`WritableStream.getWriter()`

`WritableStreamDefaultWriter` の新しいインスタンスを返し、そのインスタンスにストリームをロックします。 ストリームがロックされている間、このライターが開放されるまで他のライターを取得することはできません。

例
-

次の例は、このインターフェイスのいくつかの機能を示しています。 カスタムのシンクと API 提供のキューイング戦略を使用した `WritableStream` の作成を示しています。 次に、`sendMessage()` という関数を呼び出し、新しく作成したストリームと文字列を渡します。 この関数内で、`WritableStreamDefaultWriter` のインスタンスを返すストリームの `getWriter()` メソッドを呼び出します。 `forEach()` 呼び出しを使用して、文字列の各チャンクをストリームに書き込みます。 最後に、`write()` および `close()` は、チャンクとストリームの成功または失敗に対処するためのプロミスを返します。

```js
const list = document.querySelector("ul");

function sendMessage(message, writableStream) {
  // defaultWriter は 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))
      .then(() => {
        console.log("Chunk written to sink.");
      })
      .catch((err) => {
        console.log("Chunk error:", err);
      });
  });
  // ライターを閉じる前にすべてのチャンクが
  // 確実に書き込まれるように、ready を再度呼び出します。
  defaultWriter.ready
    .then(() => {
      defaultWriter.close();
    })
    .then(() => {
      console.log("All chunks written");
    })
    .catch((err) => {
      console.log("Stream error:", err);
    });
}

const decoder = new TextDecoder("utf-8");
const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
let result = "";
const writableStream = new WritableStream(
  {
    // シンクの実装
    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");
        listItem.textContent = `Chunk decoded: ${decoded}`;
        list.appendChild(listItem);
        result += decoded;
        resolve();
      });
    },
    close() {
      const listItem = document.createElement("li");
      listItem.textContent = `[MESSAGE RECEIVED] ${result}`;
      list.appendChild(listItem);
    },
    abort(err) {
      console.log("Sink error:", err);
    },
  },
  queuingStrategy,
);

sendMessage("Hello, world.", writableStream);
```

完全なコードは、単純なライターの例にあります。

### 背圧

背圧が API でどのように対応しているかによるため、コードでの実装はあまり明白ではないかもしれません。
 背圧がどのように実装されているかを確認するためには、次の 3 つのことを確認してください。

* カウント戦略の作成時に設定される `highWaterMark` プロパティ（35 行目）は、`WritableStream` インスタンスが 1 回の `write()` 操作で処理するデータの最大量を設定します。 この例では、`defaultWriter.write()` に送信できるデータの最大量です（11 行目）。
* `defaultWriter.ready` プロパティは、シンク（`WritableStream` コンストラクターの最初のプロパティ）がデータの書き込みを完了すると解決するプロミスを返します。 データソースは、さらにデータを書き込む（11 行目）か、 `close()` （24 行目）を呼び出すことができます。 `close()` の呼び出しが早すぎると、データの書き込みが妨げられる可能性があります。 このため、この例では `defaultWriter.ready` を 2 回呼び出しています（9 行目と 22 行目）。
* シンクの `write()` メソッドによって返される `Promise`（40 行目）は、`WritableStream` とそのライターに、いつ `defaultWriter.ready` を解決するかを伝えます。
仕様書
---

| Specification |
| --- |
| Streams Standard # ws-class |

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

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

関連情報
----

* WHATWG Stream Visualiser: 読み取り可能なストリーム、書き込み可能なストリーム、および変換ストリームの基本的な視覚化。


AudioContext - Web API

AudioContext
============

`AudioContext` インターフェイスは `AudioNode` によって表現され、互いにリンクする音声モジュールから作られた音声処理グラフを表します。

音声コンテキストは、それが格納するノードの作成と、音声処理（デコード）の実行の両方を制御します。何らかの処理を行う前に `AudioContext` を作成する必要があります。毎回新しいものを初期化するのではなく、 1 つの AudioContext を作成し、それを再利用することを推奨します。また、 1 つの `AudioContext` を複数の異なるオーディオソースに使用し、同時にパイプラインを使用しても問題ありません。

EventTarget

BaseAudioContext

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

`AudioContext()`

`AudioContext` オブジェクトを新しく作成し、返します。

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

*親インターフェイスである `BaseAudioContext` から継承したプロパティもあります。*

`AudioContext.baseLatency` 読取専用

`AudioContext` が `AudioDestinationNode` から音声サブシステムに音声を渡す際に発生する処理遅延の秒数を返します。

`AudioContext.outputLatency` 読取専用

現在の音声コンテキストの出力レイテンシーの見積を返します。

`AudioContext.sinkId` 読取専用
Experimental

現在の出力音声機器のシンク ID を返します。

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

*親インターフェイスである `BaseAudioContext` から継承したメソッドもあります。*

`AudioContext.close()`

任意のシステム音声リソースをリリースするために、音声コンテキストを閉じます。

`AudioContext.createMediaElementSource()`

`HTMLMediaElement` と関連付けられた `MediaElementAudioSourceNode` を生成します。これは `<video>` 要素もしくは `<audio>` 要素からの再生や操作をするために使うことができます。

`AudioContext.createMediaStreamSource()`

ローカルのコンピューターのマイクもしくは他のソースから来る音声ストリームを表現している `MediaStream` と関連付けられた `MediaStreamAudioSourceNode` を生成します。

`AudioContext.createMediaStreamDestination()`

ローカルファイルに保存されたものかその他のコンピューターに送信された音声ストリームを表す `MediaStream` と関連付けられた `MediaStreamAudioDestinationNode` を生成します。

`AudioContext.createMediaStreamTrackSource()`

メディアストリームトラックを表す `MediaStream` と関連づけられた `MediaStreamTrackAudioSourceNode` を生成します。

`AudioContext.getOutputTimestamp()`

2 つの関連づけられたコンテキストの音声ストリームの位置の値を含む新しい `AudioTimestamp` オブジェクトを返します。

`AudioContext.resume()`

前回中断/一時停止した音声コンテキストの時間の進行を再開します。

`AudioContext.setSinkId()`
Experimental

この `AudioContext` 用の出力音声機器を設定します。

`AudioContext.suspend()`

一時的に音声ハードウェアアクセスを停止し、プロセスの CPU/バッテリー使用を減らすために、音声コンテキストの時間の進行を中断します。

イベント
----

`sinkchange`
Experimental

出力音声デバイスが変更された (そしてその結果 `AudioContext.sinkId` が変更された) 時発火します。

例
-

基本的な音声コンテキストの作成方法です。

```js
const audioCtx = new AudioContext();

const oscillatorNode = audioCtx.createOscillator();
const gainNode = audioCtx.createGain();
const finish = audioCtx.destination;
// etc.
```

仕様
--

| Specification |
| --- |
| Web Audio API # AudioContext |

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

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

参考
--

* ウェブオーディオ API の使用
* `OfflineAudioContext`


HTMLTableCaptionElement - Web API

HTMLTableCaptionElement
=======================

**`HTMLTableCaptionElement`** インターフェイスは（通常の `HTMLElement` インターフェイス経由で継承によって利用できるものに加えて）表のキャプション要素を操作する特別なプロパティを提供します。

EventTarget

Node

Element

HTMLElement

HTMLTableCaptionElementプロパティ
-----

*親である `HTMLElement` から継承したプロパティがあります。*

`HTMLTableCaptionElement.align`
非推奨

文字列で、表に対するキャプションの配置を示す列挙型の属性を表します。

メソッド
----

*固有のメソッドはありません。親である `HTMLElement` から継承したメソッドがあります。*

仕様書
---

| Specification |
| --- |
| HTML Standard # htmltablecaptionelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<caption>`


WritableStreamDefaultController - Web API

WritableStreamDefaultController
===============================

**`WritableStreamDefaultController`** はストリーム API のインターフェイスで、`WritableStream` の状態を制御できるコントローラーを表します。 `WritableStream` を構築する場合、基になるシンクには、操作のために対応する `WritableStreamDefaultController` インスタンスが与えられます。

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

なし。 `WritableStreamDefaultController` インスタンスは、`WritableStream` の構築中に自動的に作成されます。

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

`WritableStreamDefaultController.signal` 読取専用

このコントローラーに関連付けられた `AbortSignal` です。

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

`WritableStreamDefaultController.error()`

関連するストリームとの今後のやり取りでエラーが発生します。

例
-

```js
const writableStream = new WritableStream({
  start(controller) {
    // コントローラーで何かをする

    // 必要に応じてストリームをエラーにする
    controller.error("My stream is broken");
  },
  write(chunk, controller) {
    // ...
  },
  close(controller) {
    // ...
  },
  abort(err) {
    // ...
  },
});
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ws-default-controller-class |

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

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


USBIsochronousInTransferPacket - Web API

USBIsochronousInTransferPacket
==============================

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

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

WebUSB API の `USBIsochronousInTransferPacket` インターフェイスは、`USBDevice` インターフェイスの `isochronousTransferIn()` メソッドの呼び出しに対する応答の一部です。これは、アイソクロナスエンドポイントによる USB デバイスから USB ホストへのデータ転送の要求における個別のパケットの状態を表します。

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

`USBIsochronousInTransferPacket()`
Experimental

指定の `status` および `data` フィールドを持つ新しい `USBIsochronousInTransferPacket` オブジェクトを生成します。

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

`USBIsochronousInTransferPacket.data` 読取専用  読取専用
Experimental

あれば、USB デバイスからこのパケットで受信したデータが格納された `DataView` オブジェクトを返します。

`USBIsochronousInTransferPacket.status` 読取専用  読取専用
Experimental

転送要求の状態を返します。以下のいずれかです。

* `"ok"` — 転送は成功しました。
* `"stall"` — デバイスはエンドポイントでストール状態を発生させ、エラーを示しました。アイソクロナスエンドポイントでのストールをクリアする必要はありません。
* `"babble"` — デバイスは想定より多くのデータで応答しました。

仕様書
---

| Specification |
| --- |
| WebUSB API # usbisochronousintransferpacket |

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

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


HTML ドラッグ & ドロップ API - Web API

HTML ドラッグ & ドロップ API
====================

**HTML ドラッグ & ドロップ**インターフェイスにより、アプリケーションはブラウザーでドラッグ & ドロップ機能を使用することができます。

ユーザーはマウスで*ドラッグ可能*な要素を選択し、その要素を*ドロップ可能*な要素へドラッグし、マウスボタンを離すことでドロップすることができます。ドラッグ操作の間、*ドラッグ可能な*要素の半透明の表示がマウスポインターに続きます。

*ドラッグ可能*にできる要素の種類、*ドラッグ可能な*要素が生成するフィードバックの種類、および*ドロップ可能な*要素はカスタマイズできます。

この HTML ドラッグ & ドロップの概要では、インターフェイスの説明、アプリケーションにドラッグ & ドロップのサポートを追加するための基本的なステップ、およびインターフェイスの相互運用性の要約があります。

ドラッグイベント
--------

HTML ドラッグ & ドロップ では DOM イベントモデル と マウスイベント を継承した *ドラッグイベント* を使います。典型的な*ドラッグ操作*は、ユーザーが*ドラッグ可能な*要素を選択したときに始まり、ユーザーが*ドロップ可能な*要素に要素をドラッグしたときに継続し、ユーザーがドラッグ可能な要素を離したときに終わります。

ドラッグ操作のあいだ、いくつかのイベント種類が発生し、そのうちいくつかは `drag` や `dragover` イベントのように、複数発生することもあります。

それぞれのドラッグイベントの種類には、関連したイベントハンドラーがあります。

| イベント | 発生する条件… |
| --- | --- |
| `drag` | …ドラッグ項目（要素や選択テキスト）がドラッグされた場合 |
| `dragend` | …ドラッグ操作の終了（マウスボタンを離したり、Esc キーを押したりした場合。詳しくはドラッグの終了を参照。） |
| `dragenter` | …ドラッグ項目が有効なドロップ対象に入った場合（ドラッグターゲットの特定を参照） |
| `dragleave` | …ドラッグ項目が有効なドロップ対象を離れた場合 |
| `dragover` | …ドラッグ項目が有効なドロップ対象にドラッグされた場合、数百ミリ秒ごとに |
| `dragstart` | …ユーザーが項目をドラッグ開始した場合（ドラッグ操作の開始 を参照） |
| `drop` | …項目が有効なドロップ対象にドロップされた場合（ドロップの実行 を参照） |

**メモ:** `dragstart` と `dragend` イベントは、どちらも OS からブラウザーにファイルをドラッグしたときには発生しません。

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

HTML ドラッグ & ドロップのインターフェイスは `DragEvent`、`DataTransfer`、`DataTransferItem`、`DataTransferItemList` です。

`DragEvent` インターフェイスには、コンストラクターと `dataTransfer` プロパティ一つがあり、これは `DataTransfer` オブジェクトです。

`DataTransfer` オブジェクトはドラッグイベントの状態、例えば (`copy` や `move` のような) ドラッグの種類や、ドラッグのデータ (1 つ以上の項目)や、各*ドラッグ項目*の MIME タイプのようなものを含んでいます。`DataTransfer` オブジェクトにはドラッグデータを追加・削除するメソッドもあります。

`DragEvent` と `DataTransfer` インターフェイスは、アプリケーションに HTML ドラッグ & ドロップ機能を追加するために必要な唯一のものです。 (Firefox では Gecko 独自拡張を `DataTransfer` オブジェクトへ施していますが、この拡張機能は Firefox でのみ動作します。)

それぞれの `DataTransfer` オブジェクトには `items` プロパティがあり、これは `DataTransferItem` オブジェクトの `list` です。 `DataTransferItem` オブジェクトは単一の*ドラッグ項目*を表し、それぞれが `kind` プロパティ (`string` か `file` の値を取る) と項目の MIME タイプを表す `type` プロパティを持ちます。`DataTransferItem` オブジェクトにはドラッグ項目のデータを取得するメソッドもあります。

`DataTransferItemList` オブジェクトは `DataTransferItem` オブジェクトのリストです。このリストオブジェクトはリストにドラッグ項目を追加したり、リストからドラッグ項目を削除したり、ドラッグ項目のリストをクリアするメソッドを持ちます。

`DataTransfer` と`DataTransferItem` インターフェイスの主な違いは、前者が同期の `getData()` メソッドを使ってドラッグ項目のデータにアクセスするのに対し、後者は代わりに非同期の`getAsString()` メソッドを使うことです。.

**メモ:** `DragEvent` と `DataTransfer` はデスクトップブラウザーでは広く対応していますが、 `DataTransferItem` と `DataTransferItemList` インターフェイスのブラウザーの対応は限られています。相互運用性について、より詳しくは相互運用性を見てください。

基本
--

この節は、アプリにドラッグ & ドロップ機能を追加する基本手順のまとめです。

### ドラッグ可能なものを特定

要素を*ドラッグ可能*とするには、以下のコードのように `draggable` 属性と `ondragstart` のイベントハンドラーを追加することが求められます。

```html
<script>
 function dragstart\_handler(ev) {
 // Add the target element's id to the data transfer object
 ev.dataTransfer.setData("text/plain", ev.target.id);
 }

 window.addEventListener("DOMContentLoaded", () => {
 // Get the element by id
 const element = document.getElementById("p1");
 // Add the ondragstart event listener
 element.addEventListener("dragstart", dragstart\_handler);
 });
</script>

<p id="p1" draggable="true">この要素はドラッグできます。</p>
```

詳しくは、以下の記事を参照してください。

* draggable 属性リファレンス
* ドラッグ操作ガイド
### ドラッグするデータの定義

アプリケーションは、ドラッグ操作にいくつでもデータ項目を含めることが自由にできます。各データ項目は特定の `type` の文字列、よくあるのは `text/html` のような MIME タイプです。

各`ドラッグイベント`はイベントのデータを格納する`dataTransfer` プロパティを持ちます。このプロパティ (これは `DataTransfer` オブジェクトです) にはドラッグデータを管理するメソッドもあります。`setData()` メソッドはドラッグデータに項目を追加するのに使用され、その例は下記の通りです。

```js
function dragstart\_handler(ev) {
  // 異なる種類のドラッグデータを追加する
  ev.dataTransfer.setData("text/plain", ev.target.innerText);
  ev.dataTransfer.setData("text/html", ev.target.outerHTML);
  ev.dataTransfer.setData(
    "text/uri-list",
    ev.target.ownerDocument.location.href,
  );
}
```

* ドラッグ & ドロップで使用される一般的なデータ型の一覧 (テキスト、HTML、リンク、ファイルなど) については、推奨されるドラッグ型をご覧ください。
* ドラッグデータについて詳しくは、ドラッグデータをご覧ください。
### ドラッグ画像の定義

既定では、ブラウザーはドラッグ操作中にポインターの横に現れる画像を提供します。しかし以下の例のように、アプリケーションは `setDragImage()` メソッドでカスタム画像を定義できます。

```js
function dragstart\_handler(ev) {
  // 画像を作成し、ドラッグ画像として使う。
  // 注: "example.gif" は実際の画像の URL に変更してください。
  // でないと、既定ののドラッグ画像が使用されます。
  let img = new Image();
  img.src = "example.gif";
  ev.dataTransfer.setDragImage(img, 10, 10);
}
```

ドラッグフィードバック画像について詳しくは、下記を参照してください。

* ドラッグフィードバック画像の設定
### ドラッグ効果の定義

`dropEffect` プロパティはドラッグ & ドロップ操作中のユーザーへのフィードバックを管理するのに使います。よくあるのはドラッグ中にどのカーソルをブラウザーが表示するかに影響します。例えば、ユーザーがドロップターゲット上に持ってきたとき、ブラウザーのカーソルは起こる動作の種類を示すことがあります。

3 通りの効果が発生する可能性があります。

1. **`copy`** はドラッグしたデータが現在の場所からドロップされる場所にコピーされることを示します。
2. **`move`** はドラッグデータが現在の場所からドロップされる場所に移動されることを示します。
3. **`link`** はドラッグデータが元からドロップ先にある種の関連や接続が作成されることを示します。

ドラッグ操作の間、ある効果はある場所にだけ許可されることを示すために、ドラッグ効果は変更される場合があります。

下記の例はこのプロパティの使い方を示します。

```js
function dragstart\_handler(ev) {
  ev.dataTransfer.dropEffect = "copy";
}
```

詳しくは以下を参照してください。

* ドラッグの効果
### ドロップゾーンの定義

既定では、ブラウザーはほとんどの HTML 要素に何かがドロップされたとき、あらゆることが発生するのを防いでいます。この動作を変更して要素を*ドロップゾーン*や*ドロップ可能*にするには、要素は `ondragover` と `ondrop` イベントハンドラー属性を持たねばなりません。

以下の例は、この属性の使い方と、各属性の基本的なイベントハンドラーを示しています。

```html
<script>
 function dragover\_handler(ev) {
 ev.preventDefault();
 ev.dataTransfer.dropEffect = "move";
 }
 function drop\_handler(ev) {
 ev.preventDefault();
 // 移動された要素のidを取得して、その要素をtargetのDOMに追加する
 const data = ev.dataTransfer.getData("text/plain");
 ev.target.appendChild(document.getElementById(data));
 }
</script>

<p
 id="target"
 ondrop="drop\_handler(event)"
 ondragover="dragover\_handler(event)">
  Drop Zone
</p>
```

各ハンドラーが `preventDefault()` を呼んで、このイベントが (タッチイベントやポインターイベントなどに) 追加で処理されることを防いでいるのに注意してください

詳しくは、以下を参照してください。

* ドロップ先の指定
### ドロップ効果の扱い

`drop` イベントのハンドラーでは、アプリケーション固有の方法でドラッグデータを自由に処理できます。

ふつう、アプリケーションは`getData()` メソッドでドラッグ項目を取得して、そのようよ処理します。加えて、アプリケーションのセマンティクスは `dropEffect` の値や修飾キーの状態により異なります。

下記の例では、ドラッグデータからソース要素の `id` を取得し、 `id` を使ってソース要素をドロップ要素に移動するドロップハンドラーを示しています。

```html
<script>
 function dragstart\_handler(ev) {
 // 対象となる要素の id を DataTransfer オブジェクトに追加する
 ev.dataTransfer.setData("application/my-app", ev.target.id);
 ev.dataTransfer.effectAllowed = "move";
 }
 function dragover\_handler(ev) {
 ev.preventDefault();
 ev.dataTransfer.dropEffect = "move";
 }
 function drop\_handler(ev) {
 ev.preventDefault();
 // 移動された要素の id を取得して、その要素を target の DOM に追加する
 const data = ev.dataTransfer.getData("application/my-app");
 ev.target.appendChild(document.getElementById(data));
 }
</script>

<p id="p1" draggable="true" ondragstart="dragstart\_handler(event)">
  This element is draggable.
</p>
<div
 id="target"
 ondrop="drop\_handler(event)"
 ondragover="dragover\_handler(event)">
  Drop Zone
</div>
```

詳しくは、以下を参照してください。

* ドロップの実行
### ドラッグの終了

ドラッグ操作の終わりに、 `dragend` イベントが*ドラッグ元の*要素で発生します。 — ドラッグが開始された対象の要素です。

このイベントはドラッグの完了とキャンセルのどちらでも発生します。 `dragend` イベントハンドラーは `dropEffect` プロパティの値をチェックしてドラッグ操作が成功したか否かを決定できます。

ドラッグ操作の終了を扱うことの詳細は、以下を参照してください。

* ドラッグの終了
相互運用性
-----

DataTransferItem インターフェイスのブラウザー互換性テーブルに見られるように、ドラッグ & ドロップの相互接続性はデスクトップブラウザーでは相対的に広いです（対応の少ない `DataTransferItem` と `DataTransferItemList` インターフェイスを除いて）。このデータはモバイルブラウザーでのドラッグ & ドロップの対応はとても低いことも示しています。

例とデモ
----

* Copying and moving elements with the `DataTransfer` interface
* Copying and moving elements with the `DataTransferListItem` interface
* ファイルのドラッグ & ドロップ (Firefox のみ): http://jsfiddle.net/9C2EF/
* ファイルのドラッグ & ドロップ (全ブラウザー): https://jsbin.com/hiqasek/
* Drag and Drop API を使った駐車場プロジェクト: https://park.glitch.me/ (ここで編集できます)
仕様書
---

| Specification |
| --- |
| HTML Standard  |

関連情報
----

* ドラッグ操作
* 推奨されるドラッグ型
* HTML Living Standard: Drag and Drop
* Drag and Drop interoperability data from CanIUse


WebGLFramebuffer - Web API

WebGLFramebuffer
================

**WebGLFramebuffer** インターフェイスは WebGL API の一部で、レンダリング先となるバッファーの集まりを表します。

WebGLObject

WebGLFramebuffer解説
--

`WebGLFramebuffer` オブジェクトはそれ自身のメソッドやプロパティを定義しておらず、その内容には直接アクセスできません。 `WebGLFramebuffer` オブジェクトを扱う場合、 `WebGLRenderingContext` の以下のメソッドが役に立ちます。

* `WebGLRenderingContext.bindFramebuffer()` (en-US)
* `WebGLRenderingContext.createFramebuffer()`
* `WebGLRenderingContext.deleteFramebuffer()` (en-US)
* `WebGLRenderingContext.isFramebuffer()` (en-US)
例
-

### フレームバッファーの作成

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const buffer = gl.createFramebuffer();
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.5 |

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

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

関連情報
----

* `WebGLRenderingContext.bindFramebuffer()` (en-US)
* `WebGLRenderingContext.createFramebuffer()`
* `WebGLRenderingContext.deleteFramebuffer()` (en-US)
* `WebGLRenderingContext.isFramebuffer()` (en-US)
* 他のバッファー: `WebGLBuffer`, `WebGLRenderbuffer`


AbsoluteOrientationSensor - Web API

AbsoluteOrientationSensor
=========================

Sensor APIs の **`AbsoluteOrientationSensor`** インターフェイスは、地球の参照用座標系に対するデバイスの物理的な向きを表します。

このセンサーを使用するには、ユーザーが Permissions API により `'accelerometer'`、`'gyroscope'`、`'magnetometer'` デバイスセンサーを使用する許可を与える必要があります。

この機能はサーバーで設定された Permissions Policy でブロックされる可能性があります。

EventTarget

Sensor

OrientationSensor

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

`AbsoluteOrientationSensor()`

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

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

*固有のプロパティはありません。祖先の `OrientationSensor` および `Sensor` からプロパティを継承します。*

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

*固有のメソッドはありません。祖先の `OrientationSensor` および `Sensor` からメソッドを継承します。*

イベント
----

*固有のイベントはありません。祖先の `Sensor` からイベントを継承します。*

例
-

### 基本的な例

以下の例は、だいたい Intel の Orientation Phone demo をもとにしており、1 秒に 60 回の周期を設定して `AbsoluteOrientationSensor` のインスタンスを生成しています。測定ごとに、`OrientationSensor.quaternion` を用いて電話の視覚的なモデルを回転しています。

```js
const options = { frequency: 60, referenceFrame: "device" };
const sensor = new AbsoluteOrientationSensor(options);

sensor.addEventListener("reading", () => {
  // model は別の場所で生成した Three.js のオブジェクト
  model.quaternion.fromArray(sensor.quaternion).inverse();
});
sensor.addEventListener("error", (error) => {
  if (event.error.name === "NotReadableError") {
    console.log("センサーが利用できません。");
  }
});
sensor.start();
```

### 許可の例

向きセンサーを使用するには、複数のデバイスセンサーを使用する許可を要求する必要があります。`Permissions` インターフェイスは Promise を使用するので、許可を要求するのには `Promise.all` を使用するとよいです。

```js
const sensor = new AbsoluteOrientationSensor();
Promise.all([
  navigator.permissions.query({ name: "accelerometer" }),
  navigator.permissions.query({ name: "magnetometer" }),
  navigator.permissions.query({ name: "gyroscope" }),
]).then((results) => {
  if (results.every((result) => result.state === "granted")) {
    sensor.start();
    // …
  } else {
    console.log("AbsoluteOrientationSensor を使用する許可がありません。");
  }
});
```

仕様書
---

| Specification |
| --- |
| Orientation Sensor # absoluteorientationsensor-interface |

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

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


ウェブオーディオ API - Web API

ウェブオーディオ API
============

ウェブオーディオ API はウェブ上で音声を扱うための強力で多機能なシステムを提供します。これにより開発者は音源を選択したり、エフェクトを加えたり、視覚効果を加えたり、パンニングなどの特殊効果を適用したり、他にもたくさんのいろいろなことができるようになります。

ウェブオーディオの概念と利用方法
----------------

ウェブオーディオ API は音声操作を**音声コンテキスト**内の操作として実現し、**モジュラールーティング**できるようにデザインされています。基本的な操作は **音声ノード**として表現されています。これを接続することで、**音声ルーティンググラフ**を作成します。チャンネル構成の異なる複数の音源も 1 つのコンテキスト内で扱えます。この構成によって、複雑で動的な音声操作を実現できるようになっています。

音声ノードは、入力と出力によってチェーンと単純なウェブにリンクされています。通常、1 つまたは複数の音源から始まります。音源は、非常に小さなタイムスライス、多くの場合は 1 秒間に数万個のサウンドインテンシティ (サンプル) の配列を提供します。これらは数学的に計算されたもの (`OscillatorNode` など) や、音声ファイルや動画ファイル (`AudioBufferSourceNode` や `MediaElementAudioSourceNode` など) や音声ストリーム (`MediaStreamAudioSourceNode`) からの録音である場合もあります。実際には、音声ファイルは、マイクや電気楽器から入ってきた音の強さそのものを録音したものであり、それがミックスされて一つの複雑な波になっています。

これらのノードの出力は、他のノードの入力にリンクされ、これらの音のサンプルのストリームを異なる形に混合または変更することができます。一般的な変更は、サンプルに値を掛けて大きくしたり小さくしたりすることです（`GainNode`がそうです）。サウンドが意図した効果のために十分に処理されたら、出力先（`BaseAudioContext.destination`）の入力にリンクし、スピーカーやヘッドフォンにサウンドを送信することができるようになります。この最後の接続は、ユーザーが音声を聞くことを想定している場合にのみ必要です。

簡潔で通常のウェブオーディオの使い方は、次のようになります。

1. 音声コンテキストを作成する
2. コンテキストの中で、`<audio>`、オシレーター、ストリームなどの音源を作成する
3. リバーブ、バイクワッドフィルター、パンナー、コンプレッサーなどのエフェクトノードを作成する
4. 最終的な音声の出力先 (destination) を選ぶ（例えばスピーカーなど）
5. 音源をエフェクトに繋げ、エフェクトを出力先に繋げる

![音声コンテキストと書かれた外側のボックスと、音源、エフェクト、デスティネーションと書かれた 3 つのボックスからなるシンプルなボックスダイアグラムです。 3 つのボックスの間には矢印があり、音声情報の流れを示しています。](/ja/docs/Web/API/Web_Audio_API/audio-context_.png)

タイミングは高精度で低遅延に制御されます。正確にイベントに反応したり特定の音声サンプルにアクセスしたりすることができます。ドラムマシンやシーケンサーのようなアプリケーションを作ることができます。

ウェブオーディオ API では、立体音響を制御することもできます。*ソースリスナーモデル*に基づいたシステムを使用することで、*パンモデル*を制御し、音源の移動 (またはリスナーの移動) によって引き起こされる*距離に起因する減衰*を処理することができます。

**メモ:** ウェブオーディオ API の理論に関する詳細は ウェブオーディオ API の基本概念 をご覧ください。

ウェブオーディオ API が対象とする人
--------------------

ウェブオーディオ API は、音声や音楽用語に慣れない人には敷居が高く感じられるかもしれません。また、非常に多くの機能が組み込まれているため、開発者であれば使い始めるのは難しいかもしれません。

ウェブオーディオ API の用途としては、 futurelibrary.no のような雰囲気作りのためやフォームの検証に音を活用するために、単に音声をウェブサイトに組み込むために使用できます。一方で、高度な対話型ツールの作成にも利用できます。こうしたことを踏まえると、開発者とミュージシャンの双方に適していると言えます。

プログラミングは得意であるものの、 API の構造と用語の解説が必要な人のためには、簡単なチュートリアルがあります。

また、ウェブオーディオ API の基本理念に関する記事もあり、特にこの API の範囲でデジタル音声がどのように動作するのかを理解するのに役立ちます。また API の基礎となる優れた概念の紹介も含んでいます。

プログラムを書く作業はカードゲームに例えられます。ルールを学んで遊んでみて、またルールを学んで再び遊んでみて・・・。したがって最初のチュートリアルと記事を見たあとにピンとこなかった場合、最初のチュートリアルを拡張して、学んだことを実践して、段階的に高度なことを学んでいく発展的なチュートリアルがあります。

それとは別に、この API のすべての機能を網羅したチュートリアルとリファレンスを用意しています。このページのサイドバーを参照してください。

音楽的な側面に精通し、音楽理論の概念に精通し、楽器の構築を開始したい場合は、発展的チュートリアルやその他の解説を基に制作に移る事ができるでしょう(上記のリンク付きチュートリアルでは、スケジューリングに関する注意事項、オーダーメイドの発振器やエンベロープの作成、LFO などについて説明しています) 。

プログラミングの基本に慣れていない場合は、まず初級者向けの JavaScript チュートリアルを参照してから、このページに戻ってください。初級者向けの JavaScript 学習モジュールを参照してください。

ウェブオーディオ API インターフェイス
---------------------

ウェブオーディオ API には、たくさんのインターフェイスと関連するイベントがあり、機能的に 9 個のカテゴリーに分けられます。

### 一般的な音声グラフの定義

ウェブオーディオ API で利用する音声グラフのコンテナーと、その構成要素は以下の通りです。

`AudioContext`

**`AudioContext`** インターフェイスは、それぞれが `AudioNode` で表される音声モジュールがリンクされた音声処理グラフを表します。音声コンテキストは、それが含むノードの生成と、音声処理（デコード）の実行をコントロールします。すべてのことはコンテキストの中で行われるので、何らかの処理を行う前に `AudioContext` を作成する必要があります。

`AudioNode`

**`AudioNode`** インターフェイスは音声処理のモジュールの表現しています。これには `<audio>` 要素や `<video>` 要素のような音源、音声の出力先、 `BiquadFilterNode` (en-US) や `GainNode`) のようなフィルターなどが含まれます。

`AudioParam`

**`AudioParam`** インターフェイスは `AudioNode` の持つような、音声に関するパラメータを表現しています。値をセットするだけでなく、差分を指定することも可能です。また指定した時間やパターンで、値を変更をすることもできます。

`AudioParamMap`

`AudioParam` のマップのようなインターフェイスを提供します。つまり `forEach()`、`get()`、`has()`、`keys()`、`values()` メソッドや `size` プロパティが使えます。

`BaseAudioContext`

**`BaseAudioContext`** インターフェイスはオンライン音声処理グラフ ( `AudioContext`) やオフライン音声処理グラフ (`OfflineAudioContext`) の基底となるものです。直接 `BaseAudioContext` を使うことはなく、これを継承するこれら 2 つのインターフェイスを介して使用します。

`ended` イベント

`ended` イベントは、再生が終了した際に発生するイベントです。

### 音源の定義

ウェブオーディオ API 内で利用できる音源は以下の通りです。

`AudioScheduledSourceNode`

**`AudioScheduledSourceNode`** は `AudioNode` の一種で、いくつかの音源ノードの親インターフェイスです。

`OscillatorNode`

**`OscillatorNode`** インターフェイスは、正弦波や三角波のような周期的な波形を表します。これは指定された周波数の波を作成させる音声処理モジュール `AudioNode` です。

`AudioBuffer`

**`AudioBuffer`** インターフェイスは、メモリー上に存在する短い音声資産を表します。音声ファイルから `BaseAudioContext.decodeAudioData` メソッドで作成したり、生のデータから `BaseAudioContext.createBuffer` で作成したりすることができます。この形式にデコードされた音声は、`AudioBufferSourceNode`に格納することができます。

`AudioBufferSourceNode`

**`AudioBufferSourceNode`** インターフェイスは、`AudioBuffer` に格納されたメモリー内の音声データからなる音声ソースを表します。これは音源として機能する `AudioNode` です。

`MediaElementAudioSourceNode`

**`MediaElementAudioSourceNode`** インターフェイスは、HTML の `<audio>` または `<video>` 要素からなる音声ソースを表現します。これは音源として機能する `AudioNode` です。

`MediaStreamAudioSourceNode`

**`MediaStreamAudioSourceNode`** インターフェイスは、`MediaStream` （ウェブカメラ、マイク、リモートコンピューターから送信されるストリームなど）で構成される音声ソースを表します。ストリーム上に複数の音声トラックが表示されている場合、辞書順（アルファベット順）に最初に `id` が来るトラックが使用されます。これは音源として機能する `AudioNode` です。

`MediaStreamTrackAudioSourceNode`

`MediaStreamTrackAudioSourceNode` 型のノードは、データが `MediaStreamTrack` に由来する音声ソースを表します。ノードを作成するために `createMediaStreamTrackSource()` メソッドを使用する際に、どのトラックを使用するのか指定します。これは `MediaStreamAudioSourceNode` よりも制御を提供します。

### 音声エフェクトフィルターの定義

これらを利用すると、音源からの音声にエフェクトをかけられます。

`BiquadFilterNode` (en-US)

**`BiquadFilterNode`** インターフェースは、単純な低次フィルタを表します。これは `AudioNode` であり、異なる形のフィルター、トーンコントロール機器、グラフィックイコライザーを表すことができます。 `BiquadFilterNode` には常に 1 つの入力と 1 つの出力があります。

`ConvolverNode`

**`ConvolverNode`** インターフェイスは `AudioNode` であり、指定された `AudioBuffer` に対してリニアコンボリューションを行うもので、リバーブ効果を得るために使用されることが多いものです。

`DelayNode`

**`DelayNode`** は delay-line を表します。入力データの到着から出力への伝搬に遅延を発生させる `AudioNode` 音声処理モジュールです。

`DynamicsCompressorNode` (en-US)

**`DynamicsCompressorNode`** インターフェイスは圧縮効果を指定されたもので、複数の音を一度に再生して多重化したときに発生するクリッピングや歪みを防ぐために、信号の最も大きな部分の音量を下げることができます。

`GainNode`

**`GainNode`** インターフェイスは音量の変化を表します。これは `AudioNode` の音声処理モジュールで、出力に伝搬する前に入力データに指定されたゲイン ( *gain* ) を発生させます。

`WaveShaperNode` (en-US)

**`WaveShaperNode`** インターフェイスは非線形の歪み器（ディストーション）を表します。これは `AudioNode` で、カーブを使用して信号に波形整形歪みを適用します。明らかな歪み効果の他に、信号に暖かみのある感じを追加するために多く使用されます。

`PeriodicWave`

`OscillatorNode` の出力を形成するために使用できる周期的な波形を記述します。

`IIRFilterNode`

一般的な無限インパルス応答 (IIR) フィルターの実装です。トーン制御機器やグラフィックイコライザーの実装に利用できます。

### 音声の出力先の定義

処理した音声の出力先を、以下のもので定めます。

`AudioDestinationNode`

**`AudioDestinationNode`** はコンテキスト内での出力先を表します。通常はスピーカーとなっています。

`MediaStreamAudioDestinationNode`

**`MediaStreamAudioDestinationNode`** インターフェイスは、単一の `AudioMediaStreamTrack` を持つ WebRTC `MediaStream` からなる音声出力先を表現し、 `getUserMedia()` から得られる `MediaStream`と同様の方法で使用することができます。 音声の出力先として動作する `AudioNode` です。

### 分析と可視化

もし、音声から時間や周波数、その他のデータを抽出したいのであれば、`AnalyserNode`が必要です。

`AnalyserNode`

**`AnalyserNode`** を利用すると、音声のリアルタイムに時間領域分析と周波数領域分析が行えます。これを利用すると、音声の可視化が行えます。

### 音声チャンネルの分岐と合成

音声チャンネルを分岐したり合成したりするのにこれらのインターフェイスを使います。

`ChannelSplitterNode`

The **`ChannelSplitterNode`** は音源の複数のチャンネルを別々のモノラル出力へ分離します。

`ChannelMergerNode`

**`ChannelMergerNode`** は異なるモノラルの入力を、1 つの出力へとまとめます。それぞれの入力は、出力内のチャンネルとなります。

### 立体音響

これらのインターフェイスを使用すると、立体音響のパンニング効果を音源に追加することができます。

`AudioListener`

**`AudioListener`** インターフェイスは、音声空間化で使用される音声シーンを聞いている固有の人の位置と方向を表します。

`PannerNode`

**`PannerNode`** インターフェイスは、 3D 空間における音声ソース信号の位置と振る舞いを表現し、複雑なパンニング効果を作成することができます。

`StereoPannerNode`

**`StereoPannerNode`** インターフェイスは、音声ストリームを左または右にパンするために使用できる単純なステレオパンナーノードを表します。

### JavaScript による音声処理

音声ワークレットを使うと、 JavaScript や WebAssembly を使って独自の音声ノードを定義することができます。音声ワークレットは `Worklet` インターフェイスという軽量版 `Worker` インターフェイスを実装しています。

`AudioWorklet`

`AudioWorklet` インターフェイスは `AudioContext` オブジェクトの `audioWorklet` を通して利用することができ、メインスレッドから実行される音声ワークレットにモジュールを追加することができます。

`AudioWorkletNode`

`AudioWorkletNode` インターフェイスは `AudioNode` の一種で、音声グラフに組み込んだり、対応する `AudioWorkletProcessor` にメッセージを送信できます。

`AudioWorkletProcessor`

`AudioWorkletProcessor` インターフェイスは `AudioWorkletGlobalScope` で実行する音声処理コードで、音声の生成・処理・分析を直接行ったり、対応する `AudioWorkletNode` にメッセージを送信できます。

`AudioWorkletGlobalScope`

`AudioWorkletGlobalScope` インターフェイスは `WorkletGlobalScope` から派生するオブジェクトで、音声処理スクリプトが実行されるワーカーコンテキストを表現します。メインスレッド上ではなく、ワークレットスレッド上で JavaScript を使って直接音声データの生成、処理、分析ができるように設計されています。

#### 旧: スクリプト処理ノード

音声ワークレットが定義されるよりも昔、ウェブオーディオ API は `ScriptProcessorNode` を使用して JavaScript ベースの音声処理をしていました。コードがメインスレッドで実行されるため、パフォーマンスが悪くなります。 `ScriptProcessorNode` は歴史的な理由から残されていますが、非推奨とされています。

`ScriptProcessorNode`
非推奨

**`ScriptProcessorNode`** を利用すると、 JavaScript から音声データの生成、処理、分析を行えます。このノードは `AudioNode` の一種で、入力と出力の二つのバッファーとリンクしています。入力バッファーに新しいデータがセットされる度に `AudioProcessingEvent` インターフェイスを実装したイベントが生起します。イベントハンドラは出力バッファーにデータをセットして処理を終了します。

`audioprocess` (イベント)
非推奨

`audioprocess` イベントは `ScriptProcessorNode` の処理が可能になった際に発生します。

`AudioProcessingEvent`
非推奨

`AudioProcessingEvent` は `ScriptProcessorNode` の入力バッファーが処理可能になったことを表すイベントです。

### オフライン / バックグラウンドでの処理

以下のようにすると、バックグラウンドで音声グラフを非常に高速に処理/レンダリングし、端末のスピーカーではなく `AudioBuffer` にレンダリングすることができます。

`OfflineAudioContext`

**`OfflineAudioContext`** は `AudioContext` の一種で、`AudioNode` を組み合わせて、音声処理を行うグラフを表現しています。通常の `AudioContext`と異なり、`OfflineAudioContext` は音声を出力せず、バッファー内で高速に処理を行います。

`complete` (イベント)

`complete` イベントは `OfflineAudioContext` の処理が終了した時に発火します。

`OfflineAudioCompletionEvent`

`OfflineAudioCompletionEvent` は `OfflineAudioContext` の処理が終了したことを表します。 `complete` イベントは、このインターフェイスを使用します。

ガイドとチュートリアル
-----------

Basic concepts behind Web Audio APIこの記事では、アプリを経由した音声伝達方法の設計をする際に、十分な情報に基づいた決断をする助けとなるよう、 Web Audio API の特徴がいかに働いているか、その背後にある音声理論について説明します。この記事はあなたを熟練のサウンドエンジニアにさせることはできないものの、Web Audio API が動く理由を理解するための十分な背景を提供します。

Visualizations with Web Audio APIWeb Audio API の最も興味深い機能の 1 つは、オーディオソースから周波数、波形、その他のデータを抽出し、それを使用してビジュアライゼーションを作成する機能です。この記事では、方法について説明し、いくつかの基本的な使用例を示します。

Web Audio API の使用Web Audio API の入門を見てみましょう。ここではいくつかの概念を短く確認してから、簡単な boombox の例で、音声トラックの読み込み、再生と一時停止、音量やステレオ位置の変更の方法を学びましょう。

高度なテクニック: オーディオの生成とシーケンスこのチュートリアルでは、音の作成と変更、時間とスケジューリングについて述べます。サンプルの読み込み、エンベロープ、フィルター、ウェーブテーブル、周波数変調を紹介します。これらの用語に慣れていて、ウェブオーディオAPIによるアプリケーションの入門を探しているなら、あなたは正しい場所に来ました。

例
-

GitHub の webaudio-example リポジトリー に多数の例が掲載されています。

仕様書
---

| Specification |
| --- |
| Web Audio API # AudioContext |

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

### AudioContext

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

関連情報
----

### チュートリアル/ガイド

* ウェブオーディオ API の背後にある基本概念
* ウェブオーディオ API の使用
* 高度なテクニック: 音の作成、シーケンス、タイミング、スケジューリング
* メディアおよびウェブオーディオ API の自動再生ガイド
* Using IIR filters (en-US)
* ウェブオーディオ API による視覚化
* ウェブオーディオの空間設定の基本 (en-US)
* ConstantSourceNode で複数の引数を制御する (en-US)
* Mixing Positional Audio and WebGL
* Developing Game Audio with the Web Audio API
* webkitAudioContext のコードを標準ベースの AudioContext に移植する (en-US)
### ライブラリー

* Tones: a simple library for playing specific tones/notes using the Web Audio API.
* Tone.js: a framework for creating interactive music in the browser.
* howler.js: a JS audio library that defaults to Web Audio API and falls back to HTML Audio, as well as providing other useful features.
* Mooog: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.
* XSound: Web Audio API Library for Synthesizer, Effects, Visualization, Recording, etc.
* OpenLang: HTML video language lab web application using the Web Audio API to record and combine video and audio from different sources into a single file (source on GitHub)
* Pts.js: Simplifies web audio visualization (guide)
### 関連トピック

* ウェブメディア技術
* ウェブのメディアの種類と形式のガイド


MediaElementAudioSourceNode - Web API

MediaElementAudioSourceNode
===========================

`MediaElementAudioSourceNode` インターフェイスは、HTML の `<audio>` 要素または `<video>` 要素からなる音源を表し、音源としてふるまいます。

`MediaElementAudioSourceNode` は入力を持たず、ちょうど 1 個の出力を持ち、`AudioContext.createMediaElementSource()` メソッドにより生成されます。出力のチャンネル数はノードの生成時に用いられた `HTMLMediaElement` が参照する音声のチャンネル数で、`HTMLMediaElement` が音声を持たないときは 1 です。

EventTarget

AudioNode

MediaElementAudioSourceNode

|  |  |
| --- | --- |
| 入力数 | `0` |
| 出力数 | `1` |
| チャンネル数 | 2 (ただし、`AudioNode.channelCount` は `AudioNode` の入力のアップミキシングやダウンミキシングにのみ用いられ、`MediaElementAudioSourceNode` には入力がありません) |

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

`MediaElementAudioSourceNode()`

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

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

*親の `AudioNode` からプロパティを継承します。*

`mediaElement` 読取専用

この `MediaStreamAudioSourceNode` の構築時に用いられた `HTMLMediaElement` です。

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

*親の `AudioNode` からメソッドを継承します。*

例
-

サンプルコードは、`AudioContext.createMediaElementSource()` を参照してください。

仕様書
---

| Specification |
| --- |
| Web Audio API # MediaElementAudioSourceNode |

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

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

関連情報
----

* Web Audio API の使用


ReadableByteStreamController - Web API

ReadableByteStreamController
============================

**`ReadableByteStreamController`** はストリーム API のインターフェイスで、読み取り可能なバイトストリームコントローラーを表します。
 これは、基礎となるバイトソースを持つ `ReadableStream` の状態と内部キューを制御し、ストリームの内部キューが空の場合に、基礎となるソースからコンシューマーへの効率的なゼロコピーデータ移譲を可能にします。

 このコントローラ型のインスタンスは、 `underlyingSource` オブジェクトに `type="bytes"` プロパティを設定して `ReadableStream()` コンストラクターの引数として渡された場合に作成されます。
 `underlyingSource` オブジェクトは `start()` および `pull()` コールバック関数を定義することもできます。
 これらは、コントローラーを引数として呼び出され、 基盤となるソースを設定し、必要に応じてデータをリクエストします。

 基盤となるソースは、コントローラーを使用して `byobRequest` プロパティまたは `enqueue()` メソッドでストリームにデータを供給します。
 `byobRequest` は `ReadableStreamBYOBRequest` オブジェクトで、コンシューマーから直接コンシューマーにゼロコピーでデータを移譲するための待機リクエストを表します。
 データが存在する場合は、`byobRequest` を使用してデータをコピーする必要があります（この場合は `enqueue()` を使用しないでください）。
 基盤となるソースがストリームにデータを渡す必要があり、 `byobRequest` が `null` の場合、ソースは `enqueue()` を呼び出して、ストリーム内部のキューにデータを追加することができます。

`byobRequest` は、リーダーからのリクエストがあり、ストリームの内部キューが空の場合にのみ、「BYOB モード」で作成されることに注意してください。
 「BYOB モード」は、 `ReadableStreamBYOBReader` （通常、 `ReadableStream.getReader()` を引数 `{ mode: 'byob' }` で呼び出すことで構築されます）を使用している場合に有効になります。
 既定値でリーダーを使用し、 `autoAllocateChunkSize` が `ReadableController()` コンストラクター で指定されている場合にも有効になります。

 基盤となるバイトソースは、コントローラーを使用して、すべてのデータが送信されたときにストリームを閉じたり (`close()`)、 `error()` を使用して基盤となるソースからエラーを報告したりすることもできます。
 コントローラーの `desiredSize` プロパティを使用して「背圧」をかけ、基盤となるソースに内部キューのサイズを通知します（値が小さいと、キューがいっぱいになっていることを示し、基盤となるソースに流入を一時停止またはスロットルすることが望ましいことを示唆します）。

たとえコントローラーが主に基盤となるバイトソースによって使用されるとしても、ストリームの指示のためにシステムの他の部分によって格納することができない理由はないことに注意してください。

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

なし。 `ReadableByteStreamController` インスタンスは、 `underlyingSource` に `type="bytes"` プロパティが設定されたものが `ReadableStream()` コンストラクターに渡された場合、自動的に作成されます。

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

`ReadableByteStreamController.byobRequest` 読取専用

現在の BYOB プルリクエストを返します。未処理のリクエストがない場合は `null` となります。

`ReadableByteStreamController.desiredSize` 読取専用

ストリームの内部キューを満たすために必要な希望サイズを返します。

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

`ReadableByteStreamController.close()`

関連するストリームを閉じます。

`ReadableByteStreamController.enqueue()`

所与のチャンクを関連するストリームのキューに入れます。

`ReadableByteStreamController.error()`

関連するストリームとの今後のやり取りでエラーが発生します。

例
-

コントローラーは、データを移譲またはエンキューしたり、ストリームにデータがない（閉じられた）またはエラーとされていたことを指示するために、基盤となるソースによって使用されます。また、 `desiredSize` を使用して、希望するデータレートの「上流」から基盤ソースに指示するためにも使用します。

読み取り可能なバイトストリームの使用の例、特に読み取り可能なソケットプッシュバイトストリームの作成がこれらのほとんどの場合を示します。

仕様書
---

| Specification |
| --- |
| Streams Standard # rbs-controller-class |

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

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

関連情報
----

* ストリーム API の概念
* 読み取り可能なバイトストリームの使用
* `ReadableStream`
* WHATWG Stream Visualizer, for a basic visualization of readable, writable, and transform streams.
* Web-streams-polyfill or sd-streams - polyfills


NDEFReadingEvent - Web API

NDEFReadingEvent
================

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

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

**`NDEFReadingEvent`** はウェブ NFC API のインターフェイスで、 `NDEFReader` によって得られる新しい NFC 読み取りに対して配信するイベントを表します。

Event

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

`NDEFReadingEvent.NDEFReadingEvent()`

新しい `NDEFReadingEvent` を作成します。

プロパティ
-----

*親である `Event` からプロパティを継承しています*。

`NDEFReadingEvent.message`読取専用

`NDEFMessage` オブジェクトで、受信したメッセージを表します。

`NDEFReadingEvent.serialNumber`読取専用

機器のシリアル番号で、衝突防止と識別のために使用されます。シリアル番号がない場合は空文字列を返します。

メソッド
----

*親である `Event` からメソッドを継承しています*。

仕様書
---

| Specification |
| --- |
| Web NFC API # dom-ndefreadingevent |

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

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


Gyroscope - Web API

Gyroscope
=========

Sensor APIs の **`Gyroscope`** インターフェイスは、デバイスの 3 軸それぞれの角速度の計測値を提供します。

このセンサーを使用するには、ユーザーが Permissions API により `'gyroscope'` デバイスセンサーを使用する許可を与える必要があります。さらに、この機能はサーバーで設定された Permissions Policy によりブロックされる可能性があります。

EventTarget

Sensor

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

`Gyroscope()`

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

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

`Gyroscope.x` 読取専用

デバイスの x 軸方向の角速度を表す `double` 値を返します。

`Gyroscope.y` 読取専用

デバイスの y 軸方向の角速度を表す `double` 値を返します。

`Gyroscope.z` 読取専用

デバイスの z 軸方向の角速度を表す `double` 値を返します。

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

*`Gyroscope` には独自のメソッドはありません。しかし、親インターフェイスの `Sensor` および `EventTarget` からメソッドを継承しています。*

イベント
----

*`Gyroscope` には独自のイベントはありません。しかし、親インターフェイスの `Sensor` からイベントを継承しています。*

例
-

ジャイロスコープは、通常 `reading` イベントコールバックで読み取られます。以下の例では、これを 1 秒に 60 回行います。

```js
let gyroscope = new Gyroscope({ frequency: 60 });

gyroscope.addEventListener("reading", (e) => {
  console.log(`X 軸方向の角速度 ${gyroscope.x}`);
  console.log(`Y 軸方向の角速度 ${gyroscope.y}`);
  console.log(`Z 軸方向の角速度 ${gyroscope.z}`);
});
gyroscope.start();
```

仕様書
---

| Specification |
| --- |
| Gyroscope # gyroscope-interface |

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

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


setTimeout() - Web API

setTimeout()
============

グローバルの **`setTimeout()`** メソッドは、時間切れになると関数または指定されたコードの断片を実行するタイマーを設定します。

構文
--

```js
setTimeout(code)
setTimeout(code, delay)

setTimeout(functionRef)
setTimeout(functionRef, delay)
setTimeout(functionRef, delay, param1)
setTimeout(functionRef, delay, param1, param2)
setTimeout(functionRef, delay, param1, param2, /\* … ,\*/ paramN)
```

### 引数

`functionRef`

タイマーが満了した後に実行する`関数`。

`code`

関数の代わりに文字列を含める代替構文も許容されており、タイマーが満了したときに文字列をコンパイルして実行します。 `eval()` の使用にリスクがあるのと同じ理由で、この構文は**推奨しません**。

`delay` 省略可

指定した関数やコードを実行する前に待つタイマーの時間をミリ秒 (1/1000 秒) 単位で指定します。この引数を省略すると値 0 を使用しますので "直ちに" 実行する、より正確に言えばできるだけ早く実行することを意味します。

なお、どちらの場合も、実際の遅延が想定より長くなることがあります。後述する遅延が指定値より長い理由をご覧ください。

また、値が数値でない場合、暗黙のうちに型強制が行われ、数値に変換されることにも注意してください。これは予期しない、驚くべき結果につながる可能性があります。例として、delay の値が数値でない場合は暗黙に数値に強制されるを参照してください。

`param1`, …, `paramN` 省略可

タイマーが満了したときに、 `functionRef` で指定された関数に渡す追加の引数です。

返値
--

返される `timeoutID` は正の整数値で、 `setTimeout()` を呼び出して作成したタイマーを識別します。この値を `clearTimeout()` へ渡すことで、タイムアウトを取り消すことができます。

`timeoutID` の値は、同じオブジェクト (ウィンドウやワーカー) において、後に `setTimeout()` や `setInterval()` を呼び出しても再使用されないことが保証されています。ただし、別なオブジェクトでは別の ID プールを使用します。

解説
--

タイムアウトは、 `clearTimeout()` を使用して取り消すことができます。

関数を繰り返して（例えば *N* ミリ秒ごとに）呼び出すには、 `setInterval()` を使用することを検討してください。

### delay の値が数値でない場合は暗黙に数値に強制される

もし `setTimeout()` が呼び出されたときの *delay* 値が数値でなかった場合、暗黙のうちに型強制が行われ、その値を数値に変換します。例えば、以下のコードは *delay* の値として、数値 `1000` ではなく文字列 `"1000"` を使用しています。しかし、コードが実行されると文字列が数値 `1000` に強制されるため、どのみち動作し、 1 秒後にコードが実行されます。

```js
setTimeout(() => {
  console.log("Delayed for 1 second.");
}, "1000");
```

しかし、多くの場合、暗黙の型強制は予期しない、驚くべき結果をもたらす可能性があります。例えば、以下のコードを実行すると、文字列 `"1 second"` は最終的に数字 `0` に強制され、その結果、コードは遅延ゼロで直ちに実行されます。

```js
setTimeout(() => {
  console.log("Delayed for 1 second.");
}, "1 second");
```

したがって、 *delay* の値には文字列を使用せず、常に数字を使用してください。

```js
setTimeout(() => {
  console.log("Delayed for 1 second.");
}, 1000);
```

### 非同期関数の動作

`setTimeout()` は非同期関数です。これは、タイマー関数は関数スタック内の他の関数の実行を停止させないということです。
 言い換えると、 `setTimeout()` を使って、関数スタックの次の関数が起動するまでの「間」を作ることはできません。

以下の例をご覧ください。

```js
setTimeout(() => {
  console.log("this is the first message");
}, 5000);
setTimeout(() => {
  console.log("this is the second message");
}, 3000);
setTimeout(() => {
  console.log("this is the third message");
}, 1000);

// 出力:

// this is the third message
// this is the second message
// this is the first message
```

最初の関数は、 2 番目の関数を呼び出す前に 5 秒間の「間」を作らないことに注意してください。その代わり、 1 番目の関数が呼び出されますが、実行されるまで 5 秒間待機します。 1 番目の関数が実行を待っている間に 2 番目の関数が呼び出され、 2 番目の関数が実行される前に 3 秒の待ち時間が適用されます。 1 番目の関数も 2 番目の関数もタイマーが終了していないので、 3 番目の関数が呼び出され、先に実行を完了します。その後、 2 番目の関数が続きます。そして、最後に 1 番目の関数のタイマーが終了した後、 1 番目の関数が実行されます。

ある関数が実行された後に別の関数が実行されるような処理を行うには、プロミスのドキュメントを参照してください。

### "this" の問題

`setTimeout()` にメソッドを渡すと、 `this` が期待とは異なる値で起動されることがあります。一般的な問題は JavaScript リファレンスで詳細に説明されています。

`setTimeout()` によって実行されるコードは、 `setTimeout` が呼び出された関数とは別の実行コンテキスト内から呼び出されます。呼び出された関数に `this` キーワードを設定する通常の規則を適用して、呼び出しあるいは `bind` で `this` を設定しなければ、厳格モードでなければ `global` (または `window`)、厳格モードでは undefined になります。これは、 `setTimeout` が呼び出された関数の `this` 値と同じにはなりません。

以下の例をご覧ください。

```js
const myArray = ["zero", "one", "two"];
myArray.myMethod = function (sProperty) {
  console.log(arguments.length > 0 ? this[sProperty] : this);
};

myArray.myMethod(); // "zero,one,two" と表示
myArray.myMethod(1); // "one" と表示
```

`myMethod` を呼び出したときに、呼び出しによって `this` が `myArray` に設定されますので、関数内で `this[sProperty]` は `myArray[sProperty]` と等価です。しかし、以下のコードでは動作が異なります。

```js
setTimeout(myArray.myMethod, 1.0 \* 1000); // "[object Window]" と 1 秒後に表示
setTimeout(myArray.myMethod, 1.5 \* 1000, "1"); // "undefined" と 1.5 秒後に表示
```

`myArray.myMethod` 関数を `setTimeout` に渡しており、関数が呼び出されると `this` が前のように設定されず、既定の `window` オブジェクトになります。

Array の `forEach()` や `reduce()` などのメソッドにあるような、`thisArg` を `setTimeout` に渡すオプションもありません。また以下のように、`this` を設定するために `call` を使用する方法も動作しません。

```js
setTimeout.call(myArray, myArray.myMethod, 2.0 \* 1000); // エラー
setTimeout.call(myArray, myArray.myMethod, 2.5 \* 1000, 2); // 同じエラー
```

#### 解決策

##### ラッパー関数の使用

この問題の一般的な解決策は、`this` に必要な値を設定するラッパー関数を使用することです。

```js
setTimeout(function () {
  myArray.myMethod();
}, 2.0 \* 1000); // "zero,one,two" と 2 秒後に表示
setTimeout(function () {
  myArray.myMethod("1");
}, 2.5 \* 1000); // "one" と 2.5 秒後に表示
```

代わりにアロー関数も使用することができます。

```js
setTimeout(() => {
  myArray.myMethod();
}, 2.0 \* 1000); // "zero,one,two" と 2 秒後に表示
setTimeout(() => {
  myArray.myMethod("1");
}, 2.5 \* 1000); // "one" と 2.5 秒後に表示
```

##### bind() の使用

他に、 `bind()` を使用して `this` の値をその関数のすべての呼び出しに設定することができます。

```js
const myArray = ["zero", "one", "two"];
const myBoundMethod = function (sProperty) {
  console.log(arguments.length > 0 ? this[sProperty] : this);
}.bind(myArray);

myBoundMethod(); // "zero,one,two" と表示。関数内で 'this' が myArray に結び付けられているため。
myBoundMethod(1); // "one" と表示
setTimeout(myBoundMethod, 1.0 \* 1000); // こちらも結びつけがあるため "zero,one,two" と 1 秒後に表示
setTimeout(myBoundMethod, 1.5 \* 1000, "1"); // "one" と 1.5 秒後に表示
```

### 文字列リテラルの使用

関数の代わりに文字列を `setTimeout()` に渡すと、`eval()` を使うのと同様の問題が発生します。

```js
// こうやってはいけない
setTimeout("console.log('Hello World!');", 500);
```

```js
// こうすればよい
setTimeout(() => {
  console.log("Hello World!");
}, 500);
```

`setTimeout()` に渡した文字列はグローバルコンテキストで評価されます。そのため、`setTimeout()` が呼び出されたコンテキストのローカルシンボルは、文字列を評価したコードからは利用できません。

### 遅延が指定値より長い理由

タイムアウトが満了するまでに予想より長い時間がかかる理由は複数あります。この節では、もっとも一般的な理由を説明します。

#### 入れ子のタイムアウト

HTML 標準で指定されているとおり、ブラウザーは `setTimeout` の入れ子になった呼び出しが5回スケジュールされると、最小 4 ミリ秒のタイムアウトを強制します。

この例では、 `setTimeout` の呼び出しを `0` ミリ秒の遅延でネストし、ハンドラーが呼び出されるたびに遅延時間を記録しています。最初の 4 回は遅延が約 0 ミリ秒、その後は約 4 ミリ秒になります。

```html
<button id="run">Run</button>
<pre>previous    this    actual delay</pre>
<div id="log"></div>
```

```js
let last = 0;
let iterations = 10;

function timeout() {
  // log the time of this call
  logline(new Date().getMilliseconds());

  // if we are not finished, schedule the next call
  if (iterations-- > 0) {
    setTimeout(timeout, 0);
  }
}

function run() {
  // clear the log
  const log = document.querySelector("#log");
  while (log.lastElementChild) {
    log.removeChild(log.lastElementChild);
  }

  // initialize iteration count and the starting timestamp
  iterations = 10;
  last = new Date().getMilliseconds();

  // start timer
  setTimeout(timeout, 0);
}

function pad(number) {
  return number.toString().padStart(3, "0");
}

function logline(now) {
  // log the last timestamp, the new timestamp, and the difference
  const newLine = document.createElement("pre");
  newLine.textContent = `${pad(last)} ${pad(now)} ${
 now - last
 }`;
  document.getElementById("log").appendChild(newLine);
  last = now;
}

document.querySelector("#run").addEventListener("click", run);
```

#### アクティブでないタブのタイムアウト

バックグラウンドのタブによる負荷（および関連するバッテリーの使用量）を軽減するために、ブラウザはアクティブでないタブの最小タイムアウト時間を強制します。また、ページがウェブオーディオ API の `AudioContext` を使用して音声を再生している場合、このタイムアウトが免除されることもあります。

この仕様はブラウザーに依存します。

* Firefox のデスクトップ版と Chrome では、アクティブでないタブの最小タイムアウトは 1 秒です。
* Android 版 Firefox では、非アクティブなタブのタイムアウトは最低 15 分で、タブを完全にアンロードすることもできます。
* Firefox は、タブに `AudioContext` が含まれている場合、アクティブでないタブをスロットルで処理しません。

#### トラッキングスクリプトのタイムアウトを制限する

 Firefox は、トラッキングスクリプトとして認識されたスクリプトに対して追加のスロットルを適用します。
 フォアグラウンドで実行されている場合、最小遅延は 4ms のままです。しかし、バックグラウンドのタブでは、最小遅延時間は 10,000ms （10 秒）で、文書が最初に読み込まれてから 30 秒後に有効になります。

詳しくは、トラッキング保護を参照してください。

#### タイムアウトの遅延

ページ（または OS やブラウザー）が他のタスクでビジー状態場合、タイムアウトが予想より遅れて発生することがあります。注意すべき重要なケースとして、 `setTimeout()` を呼び出したスレッドが終了するまで、関数やコードスニペットを実行することができないことがあります。例えば、

```js
function foo() {
  console.log("foo has been called");
}
setTimeout(foo, 0);
console.log("After setTimeout");
```

このコードは、コンソールへ以下のように出力します。
```

After setTimeout
foo has been called
```

これは `setTimeout` を遅延 0 で呼び出したとしても、直ちに実行するのではなくキューに載せて、次の機会に実行するようスケジューリングされるためです。現在実行中のコードはキューにある関数を実行する前に完了しなければならず、このために実行結果の順序が想定どおりにならない場合があります。

#### ページロード中のタイムアウトの遅延

Firefox は現在のタブがロードされている間、 `setTimeout()` タイマーの発行を延期します。メインスレッドがアイドルと判断されるまで（window.requestIdleCallback() と同様）、または load イベントが発生するまで起動が延期されます。

### WebExtension のバックグラウンドページとタイマー

WebExtension では、 `setTimeout()` は信頼できる動作をしません。拡張機能の作者は、代わりに `alarms` API を使用してください。

### 最大の遅延時間

Internet Explorer、Chrome、Safari、Firefox を含むブラウザーは、内部で遅延時間を 32 ビット符号付き整数値で保存します。このため 2,147,483,647 ms (約 24.8 日) より大きな遅延時間を使用すると整数値がオーバーフローして、その結果直ちに実行されるタイムアウトになります。

例
-

### タイムアウトの設定と取り消し

以下の例はウェブページに 2 つのシンプルなボタンを置いており、`setTimeout()` および `clearTimeout()` のルーチンを実行します。1 番目のボタンを押下すると 2 秒後にアラートダイアログを呼び出すタイムアウトを設定して、`clearTimeout()` で使用するタイムアウト ID を保存します。2 番目のボタンを押下すると、このタイムアウトをキャンセルできます。

#### HTML

```html
<button onclick="delayedMessage();">2 秒後にアラートボックスを表示</button>
<button onclick="clearMessage();">アラート発生前に取り消し</button>

<div id="output"></div>
```

#### JavaScript

```js
let timeoutID;

function setOutput(outputContent) {
  document.querySelector("#output").textContent = outputContent;
}

function delayedMessage() {
  setOutput("");
  timeoutID = setTimeout(setOutput, 2 \* 1000, "本当に遅い！");
}

function clearMessage() {
  clearTimeout(timeoutID);
}
```

```
#output {
  padding: 0.5rem 0;
}
```

#### 結果

`clearTimeout()` の例も参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-settimeout-dev |

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

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

関連情報
----

* `core-js` にある `setTimeout` のポリフィルで、コールバックに引数を渡すことができるもの
* `clearTimeout`
* `setInterval()`
* `window.requestAnimationFrame`
* `queueMicrotask()`


WorkletGlobalScope - Web API

WorkletGlobalScope
==================

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

**`WorkletGlobalScope`** インターフェイスは、特定のワークレットスコープクラスの継承元となる抽象クラスです。それぞれの `WorkletGlobalScope` が新しいグローバル環境を定義します。

**メモ:** 通常このインターフェイスを扱う必要はありません。これは派生クラスが作成されることを意図した基底インターフェイスです。`AudioWorklet` オブジェクトの中で派生クラスの `AudioWorkletGlobalScope` が見つかり、`PaintWorklet` (en-US) オブジェクトの内部で `PaintWorkletGlobalScope` (en-US) が見つかるでしょう。

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

なし

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

なし

仕様書
---

| Specification |
| --- |
| HTML Standard # workletglobalscope |

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

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

関連情報
----

* `AudioWorkletGlobalScope`
* `PaintWorkletGlobalScope` (en-US)


XMLHttpRequestUpload - Web API

XMLHttpRequestUpload
====================

**`XMLHttpRequestUpload`** インターフェイスは、特定の`XMLHttpRequest`のアップロード処理を表します。これは *opaque* オブジェクトで、基盤であるブラウザー依存のアップロード処理を表します。これは`XMLHttpRequestEventTarget`であり、`XMLHttpRequest.upload`を呼び出すことで取得できます。

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

EventTarget

XMLHttpRequestEventTarget

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

*このインターフェイスに特有のプロパティはありませんが、 `XMLHttpRequestEventTarget` および `EventTarget` から継承したプロパティがあります。*

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

*このインターフェイスに特有のメソッドはありませんが、 `XMLHttpRequestEventTarget` および `EventTarget` から継承したメソッドがあります。*

イベント
----

`abort`

 リクエストが中止された場合に、例えばプログラムが `XMLHttpRequest.abort()` を呼び出したために発行されます。
 `onabort` イベントハンドラープロパティでも利用できます。

`error`

 リクエストがエラーに遭遇したときに発行されます。
 `onerror` イベントハンドラープロパティでも利用できます。

`load`

 リクエストトランザクションが成功裏に完了したときに発行されます。
 `onload` イベントハンドラープロパティでも利用できます。

`loadend`

 リクエストが成功した場合（`load` の後）または失敗した場合（`abort` または `error` の後）に発行されます。
 `onloadend` イベントハンドラープロパティでも利用できます。

`loadstart`

 リクエストがデータの読み込みを開始したときに発行されます。
 `onloadstart` イベントハンドラープロパティでも利用できます。

`progress`

 リクエストがより多くのデータを受け取ったときに定期的に発行されます。
 `onprogress` イベントハンドラープロパティでも利用できます。

`timeout`

 あらかじめ設定された時間が経過し、進行が終了したときに発行されます。
 `ontimeout` イベントハンドラープロパティでも利用できます。

例
-

### タイムアウト付きでファイルをアップロード

アップロード中は進捗バーが表示され、進捗状況や成功・失敗のメッセージが表示されます。中止ボタンでアップロードを中止できます。

#### HTML

```html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>XMLHttpRequestUpload のテスト</title>
    <link rel="stylesheet" href="xhrupload\_test.css" />
    <script src="xhrupload\_test.js"></script>
  </head>
  <body>
    <main>
      <h1>ファイルのアップロード</h1>
      <p>
        <label for="file">アップロードするファイル</label>
        <input type="file" id="file" />
      </p>
      <p>
        <progress />
      </p>
      <p>
        <output></output>
      </p>
      <p>
        <button disabled id="abort">中止</button>
      </p>
    </main>
  </body>
</html>
```

#### CSS

```css
body {
  background-color: lightblue;
}

main {
  margin: 50px auto;
  text-align: center;
}

#file {
  display: none;
}

label[for="file"] {
  background-color: lightgrey;
  padding: 10px 10px;
}

progress {
  display: none;
}

progress.visible {
  display: inline;
}
```

#### JavaScript

```js
addEventListener("DOMContentLoaded", () => {
  const fileInput = document.getElementById("file");
  const progressBar = document.querySelector("progress");
  const log = document.querySelector("output");
  const abortButton = document.getElementById("abort");

  fileInput.addEventListener("change", () => {
    const xhr = new XMLHttpRequest();
    xhr.timeout = 2000; // 2 秒

    // リンク中止ボタン
    abortButton.addEventListener(
      "click",
      () => {
        xhr.abort();
      },
      { once: true },
    );

    // アップロードを開始する時に、進捗バーを表示する
    xhr.upload.addEventListener("loadstart", (event) => {
      progressBar.classList.add("visible");
      progressBar.value = 0;
      progressBar.max = event.total;
      log.textContent = "Uploading (0%)…";
      abortButton.disabled = false;
    });

    // 進捗イベントを受信するたびに、バーを更新する
    xhr.upload.addEventListener("progress", (event) => {
      progressBar.value = event.loaded;
      log.textContent = `Uploading (${(
 (event.loaded / event.total) \*
 100
 ).toFixed(2)}%)…`;
    });

    // アップロードが完了したら、プログレスバーを非表示にする
    xhr.upload.addEventListener("loadend", (event) => {
      progressBar.classList.remove("visible");
      if (event.loaded !== 0) {
        log.textContent = "Upload finished.";
      }
      abortButton.disabled = true;
    });

    // エラー、中止、タイムアウトの場合、プログレスバーを非表示にする
    // これらのイベントは xhr オブジェクトでも待ち受けすることができることに注意
    function errorAction(event) {
      progressBar.classList.remove("visible");
      log.textContent = `Upload failed: ${event.type}`;
    }
    xhr.upload.addEventListener("error", errorAction);
    xhr.upload.addEventListener("abort", errorAction);
    xhr.upload.addEventListener("timeout", errorAction);

    // 本体を構築
    const fileData = new FormData();
    fileData.append("file", fileInput.files[0]);

    // 理論的には、 open() 呼び出しの後にイベントリスナーを設定することができますが、
    // ブラウザーはこの部分にバグがありがち
    xhr.open("POST", "upload\_test.php", true);

    // イベントリスナーは送信する前に設定しなければならないことに注意してください（プリフライトリクエストであるため）。
    xhr.send(fileData);
  });
});
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # xmlhttprequestupload |

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

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

関連情報
----

* `XMLHttpRequest`


Insertable Streams for MediaStreamTrack API - Web API

Insertable Streams for MediaStreamTrack API
===========================================

**Insertable Streams for MediaStreamTrack API** は、`MediaStreamTrack` に新しいコンポーネントを追加する方法を提供します。

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

映像や音声を処理する際、追加の要素を挿入したり、ストリームにその他の処理を行ったりしたくなることがあります。たとえば、アプリケーションは 2 本のトラック、たとえば天気の地図とその地図を解説しているプレゼンターの映像を合成したいことがあります。もしくは、トラックの処理により、背景のぼかし、背景ノイズの除去、他の要素の追加 (たとえば、人々に面白い帽子をかぶせるなど) をしたいかもしれません。この API は、ストリームに直接アクセスして操作できるようにすることで、これらを行う方法を提供します。

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

`MediaStreamTrackGenerator` (en-US)

`MediaStreamTrack` のソースとして働く `WritableStream` を生成します。

`MediaStreamTrackProcessor` (en-US)

`MediaStreamTrack` オブジェクトのソースを処理し、メディアフレームのストリームを生成します。

例
-

以下の例は記事 Insertable streams for MediaStreamTrack に載っているもので、ビデオストリーム内のバーコードをハイライトするバーコードスキャナーアプリケーションのデモを行います。これは、`MediaStreamTrackProcessor.readable` (en-US) 経由でアクセスしているストリームを変換します。

```js
const stream = await getUserMedia({ video: true });
const videoTrack = stream.getVideoTracks()[0];

const trackProcessor = new MediaStreamTrackProcessor({ track: videoTrack });
const trackGenerator = new MediaStreamTrackGenerator({ kind: "video" });

const transformer = new TransformStream({
  async transform(videoFrame, controller) {
    const barcodes = await detectBarcodes(videoFrame);
    const newFrame = highlightBarcodes(videoFrame, barcodes);
    videoFrame.close();
    controller.enqueue(newFrame);
  },
});

trackProcessor.readable
  .pipeThrough(transformer)
  .pipeTo(trackGenerator.writable);
```


CacheStorage - Web API

CacheStorage
============

**`CacheStorage`** インターフェイスは、`Cache` オブジェクトのストレージを表します。

このインターフェイスは、

* `ServiceWorker` や他の種類のワーカーまたは `window` のスコープからアクセスできる、すべての名前付きキャッシュのマスターディレクトリーを提供します（サービスワーカーでの使用には限定されません）。
* 対応する `Cache` オブジェクトへの文字列名のマッピングを維持します。

`CacheStorage.open()` を使用して、`Cache` インスタンスを取得します。

`CacheStorage.match()` を使用して、所与の `Request` が `CacheStorage` オブジェクトが追跡する `Cache` オブジェクトのキーであるかどうかを確認します。

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

**メモ:** `CacheStorage` は、信頼されていないオリジン（つまり、 HTTPS を使用しないオリジンですが、この定義は将来より複雑になる可能性があります）では常に拒否し、 `SecurityError` となります。 Firefox でテストする場合は、 Firefox 開発者ツールのオプション/ギアメニューの **HTTP による Service Worker を有効化 (ツールボックスを開いたとき)** オプションをチェックすることで回避することが可能です。さらに、 `CacheStorage` はファイルシステムへのアクセスを必要とするため、Firefoxのプライベートモードでは利用できない場合があります。

**メモ:** `CacheStorage.match()` は便利なメソッドです。 キャッシュエントリと一致する同等の機能を実装するには、`CacheStorage.keys()` からキャッシュ名の配列を返し、`CacheStorage.open()` で各キャッシュを開き、`Cache.match()` で必要なものと一致させます。

**注:** この機能は Web Worker 内で利用可能です

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

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

`CacheStorage.match()`

所与の `Request` が、`CacheStorage` オブジェクトが追跡する `Cache` オブジェクトのキーであるかどうかを確認し、その一致で解決する `Promise` を返します。

`CacheStorage.has()`

`Promise` を返します。これは、 `cacheName` に一致する `Cache` オブジェクトが存在する場合、`true` に解決されます。

`CacheStorage.open()`

`Promise` を返します。これは、 `cacheName` に一致する `Cache` オブジェクトに解決されます（まだ存在しない場合は新しいキャッシュが作成されます）。

`CacheStorage.delete()`

`cacheName` に一致する `Cache` オブジェクトを見つけ、見つかった場合は `Cache` オブジェクトを削除し、 `true` に解決される `Promise` を返します。 `Cache` オブジェクトが見つからない場合、`false` に解決されます。

`CacheStorage.keys()`

`Promise` を返します。これは、 `CacheStorage` によって追跡されるすべての名前付き `Cache` オブジェクトに対応する文字列を含む配列で解決されます。このメソッドを使用して、すべての `Cache` オブジェクトのリストを反復処理します。

例
-

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

2 番目のコードブロックでは、 `FetchEvent` が発生するのを待ちます。 次のようなカスタムレスポンスを作成します。

1. `CacheStorage` でリクエストに一致するものが見つかったかどうかを確認します。 もしそうなら、それを提供します。
2. そうでない場合は、ネットワークからリクエストを取得し、最初のブロックで作成されたキャッシュも開き、`Cache.put` (`cache.put(event.request, response.clone())`) を使用してリクエストのクローンを追加します。
3. これが失敗した場合（例えば、ネットワークがダウンしているため）、フォールバックレスポンスを返します。

最後に、`FetchEvent.respondWith` を使用して、カスタムレスポンスが等しくなったものをすべて返します。

```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",
        ]),
      ),
  );
});

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"));
      }
    }),
  );
});
```

このスニペットは、サービスワーカーのコンテキストの外部で API を使用する方法を示しており、`await` 演算子を使用してより読みやすいコードにしています。

```js
// キャッシュからデータを取得しようとしますが、フォールバックしてライブで取得します。
async function getData() {
  const cacheVersion = 1;
  const cacheName = `myapp-${cacheVersion}`;
  const url = "https://jsonplaceholder.typicode.com/todos/1";
  let cachedData = await getCachedData(cacheName, url);

  if (cachedData) {
    console.log("取得したキャッシュデータ");
    return cachedData;
  }

  console.log("最新データの取得");

  const cacheStorage = await caches.open(cacheName);
  await cacheStorage.add(url);
  cachedData = await getCachedData(cacheName, url);
  await deleteOldCaches(cacheName);

  return cachedData;
}

// キャッシュからデータを取得します。
async function getCachedData(cacheName, url) {
  const cacheStorage = await caches.open(cacheName);
  const cachedResponse = await cacheStorage.match(url);

  if (!cachedResponse || !cachedResponse.ok) {
    return false;
  }

  return await cachedResponse.json();
}

// 古いキャッシュを削除して、ユーザーのディスク容量を尊重します。
async function deleteOldCaches(currentCache) {
  const keys = await caches.keys();

  for (const key of keys) {
    const isOurCache = key.startsWith("myapp-");
    if (currentCache === key || !isOurCache) {
      continue;
    }
    caches.delete(key);
  }
}

try {
  const data = await getData();
  console.log({ data });
} catch (error) {
  console.error({ error });
}
```

仕様書
---

| Specification |
| --- |
| Service Workers # cachestorage-interface |

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

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

関連情報
----

* サービスワーカーの使用
* `Cache`
* `caches`
* プライベートブラウジング / シークレットモード


DeviceMotionEventAcceleration - Web API

DeviceMotionEventAcceleration
=============================

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

**`DeviceMotionEventAcceleration`** オブジェクトは、端末が 3 軸すべてで経験している加速度の量に関する情報を提供します。

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

`DeviceMotionEventAcceleration.x` 読取専用

X 軸に沿った加速度の大きさです。

`DeviceMotionEventAcceleration.y` 読取専用

Y 軸に沿った加速度の大きさです。

`DeviceMotionEventAcceleration.z` 読取専用

Z 軸に沿った加速度の大きさです。

仕様書
---

| Specification |
| --- |
| DeviceOrientation Event Specification # devicemotioneventacceleration |

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

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


USBConnectionEvent - Web API

USBConnectionEvent
==================

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

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

WebUSB API の **`USBConnectionEvent`** は、ユーザーエージェントが新しい USB デバイスの接続や切断を検出したとき、`USB.onconnect` および `USB.ondisconnect` に渡されるイベント型です。

Event

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

`USBConnectionEvent()`
Experimental

`USBConnectionEvent` オブジェクトを返します。

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

`USBConnectionEvent.device` 読取専用
Experimental

接続中または切断中のデバイスを表す `USBDevice` を返します。

例
-

以下の例では、接続および切断のイベントを監視することで、アプリケーションのユーザーインターフェイスにデバイスを追加したり取り除いたりします。

```js
navigator.usb.addEventListener("connect", (event) => {
  // UI に event.device を追加する
});

navigator.usb.addEventListener("disconnect", (event) => {
  // UI から event.device を取り除く
});
```

仕様書
---

| Specification |
| --- |
| WebUSB API # usbconnectionevent |

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

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


SVGStringList - Web API

SVGStringList
=============

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

`SVGStringList` は string オブジェクトのリストを定義します。

`SVGStringList` オブジェクトは読み取り専用に設計できます。まりオブジェクトを編集しようとすると例外が投げられることになります。

### インターフェイスの概要

|  |  |
| --- | --- |
| Also implement | *なし* |
| メソッド | * `void clear()`
* string
 `initialize(in string
*newItem*)`
* string
 `getItem(in unsigned long *index*)`
* string
 `insertItemBefore(in string
*newItem*, in unsigned long *index*)`
* string
 `replaceItem(in string *newItem*,
in unsigned long *index*)`
* string
 `removeItem(in unsigned long *index*)`
* string
 `appendItem(in string
*newItem*)`
 |
| 属性 | * readonly unsigned long `numberOfItems`
* readonly unsigned long
 `length`
Non-standard
 |
| Normative document | SVG 1.1 (2nd Edition) |

属性
--

| 名前 | 型 | 説明 |
| --- | --- | --- |
| `numberOfItems` | `unsigned long` | リスト内の項目の数 |
| `length` | `unsigned long` | `numberOfItems` のミラー値で、他のインターフェイスの整合性用。
Non-standard
 |

メソッド
----

| 名前と引数 | 戻り値 | 説明 |
| --- | --- | --- |
| `**clear**()` | *void* | リストから現在の既存アイテムをクリアーし、その結果空のリストになります。
**Exceptions:*** a `DOMException` with code
 `NO_MODIFICATION_ALLOWED_ERR` is raised when the list
 corresponds to a read only attribute or when the object itself is
 read only.
 |
| `**initialize**(in string
*newItem*)` | string | リストから現在の既存アイテムをクリアーしてパラメーターで指定された単一項目を保持するように初期化します。挿入した項目が既にある場合は、直前のリストから削除された後に挿入されます。挿入した項目は項目自体であってコピーではありません。戻り値はリストに挿入された項目です。
**Exceptions:*** a `DOMException` with code
 `NO_MODIFICATION_ALLOWED_ERR` is raised when the list
 corresponds to a read only attribute or when the object itself is
 read only.
 |
| `**getItem**(in unsigned long *index*)` | string | リスト内の指定した項目を返します。戻り値は項目自体であってコピーではありません。戻り値はリストに挿入された項目です。項目になされた変更は即座にリストに反映されます。最初の項目は数字のゼロです。
**Exceptions:*** a `DOMException` with code
 `NO_MODIFICATION_ALLOWED_ERR` is raised when the list
 corresponds to a read only attribute or when the object itself is
 read only.
 |
| `**insertItemBefore**(in string
*newItem*, in unsigned long *index*)` | string |
 リストの指定した位置に新しい項目を挿入します。最初の項目は数字の 0
 です。`newItem`
 がリスト中にすでに存在する場合、リストに挿入される前に以前のリストから削除されます。挿入される項目は項目自身でコピーではありません。注意点としてその前に挿入するという
 index は項目を削除する前の時点です。`index` が 0
 と等しい場合、新項目はリストの前に挿入されます。index が
 `numberOfItems`
 以上の場合、新項目はリストの後に挿入されます。

**Exceptions:*** a `DOMException` with code
 `NO_MODIFICATION_ALLOWED_ERR` is raised when the list
 corresponds to a read only attribute or when the object itself is
 read only.
 |
| `**replaceItem**(in string
*newItem*, in unsigned long *index*)` | string |
 リスト内の項目を新項目に置き換えます。`newItem`
 がリスト内にすでに存在する場合、リストに挿入される前に以前のリストから削除されます。挿入される項目は項目自身でコピーではありません。項目がリストにすでに存在する場合、注意点として置換する項目の
 index は項目を削除する前の時点です。

**Exceptions:*** a `DOMException` with code
 `NO_MODIFICATION_ALLOWED_ERR` is raised when the list
 corresponds to a read only attribute or when the object itself is
 read only.
* a `DOMException` with code
 `INDEX_SIZE_ERR` is raised if the index number is greater
 than or equal to `numberOfItems`.
 |
| `**removeItem**(in unsigned long *index*)` | string | リストから既存項目を削除します。
**Exceptions:*** a `DOMException` with code
 `NO_MODIFICATION_ALLOWED_ERR` is raised when the list
 corresponds to a read only attribute or when the object itself is
 read only.
* a `DOMException` with code
 `INDEX_SIZE_ERR` is raised if the index number is greater
 than or equal to `numberOfItems`.
 |
| `**appendItem**(in string
*newItem*)` | string |
 リストの最後に新項目を挿入します。`newItem`
 がリスト内にすでに存在する場合、リストに挿入される前に以前のリストから削除されます。挿入される項目は項目自身でコピーではありません。

**Exceptions:*** a `DOMException` with code
 `NO_MODIFICATION_ALLOWED_ERR` is raised when the list
 corresponds to a read only attribute or when the object itself is
 read only.
 |

ブラウザー実装状況
---------

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


HTMLOutputElement - Web API

HTMLOutputElement
=================

**`HTMLOutputElement`** インターフェイスは、（`HTMLElement` から継承したもの以外に）`<output>` 要素のレイアウトや表示を操作するためのプロパティやメソッドを提供します。

EventTarget

Node

Element

HTMLElement

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

*このインターフェイスには、親である `HTMLElement` から継承したプロパティがあります。*

`HTMLOutputElement.defaultValue`

文字列で、要素の既定値を表します。初期値は空文字列です。

`HTMLOutputElement.form` 読取専用

`HTMLFormElement` で、コントロールに関連付けられたフォームを表し、定義されていれば HTML の `form` 属性を反映します。

`HTMLOutputElement.htmlFor` 読取専用

`DOMTokenList` で、HTML の `for` 要素を反映し、計算値の `value` に寄与する（または他の形で影響する）同じ文書内の他の要素の ID のリストが入ります。

`HTMLOutputElement.labels` 読取専用

`NodeList` で、この要素に関連付けられた `<label>` 要素です。

`HTMLOutputElement.name`

文字列で、 HTML の `name` 属性を反映し、フォームデータと共に送信されるコントロールの名前が入ります。

`HTMLOutputElement.type` 読取専用

文字列で "`output`" です。

`HTMLOutputElement.validationMessage` 読取専用

文字列で、（もしあれば）制約検証でコントロールが合格しなかった場合のローカライズされたメッセージを表現します。この属性はコントロールが制約検証の対象にならない場合（`willValidate` が `false` の場合）や、制約を満たしている場合は空文字列になります。

`HTMLOutputElement.validity` 読取専用

`ValidityState` で、この要素がある妥当性の状態を表します。

`HTMLOutputElement.value`

文字列で、要素の内容の値を表します。 `Node.textContent` プロパティと同様です。

`HTMLOutputElement.willValidate` 読取専用

論理値で、要素が制約検証の対象になるかどうかを示します。

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

*このインターフェイスには、親である `HTMLElement` から継承したメソッドもあります。*

`HTMLOutputElement.checkValidity()`

要素の妥当性をチェックし、チェック結果を論理値で返します。

`HTMLOutputElement.reportValidity()`

このメソッドは、もしあれば、要素の制約に関する問題をユーザーに報告します。問題があれば、要素上で `invalid` イベントを発生させ、 `false` を返します。問題がなければ `true` を返します。

問題が報告された場合、ユーザーエージェントは要素にフォーカスを移し、文書のスクロール位置を変更したり、他の動作を行ったりして要素にユーザーの関心を集めることがあります。この要素に複数の問題が同時に発生した場合、ユーザーエージェントは複数の制約検証を報告することがあります。要素が表示されない場合、ユーザーエージェントはユーザーに通知する代わりに実行中のスクリプトにエラーを報告することがあります。

`HTMLOutputElement.setCustomValidity()`

独自の検証メッセージをこの要素に設定します。メッセージが空文字列でなければ、この要素は独自の検証エラーが発生している状態であり、検証に合格していません。

モード
---

この要素は 2 つのモードのどちらかで動作します。*既定*モードと*値*モードです。

### 既定モード

初期状態では、要素は既定モードになっており、要素のコンテンツは要素の値と既定値の両方を表します。

要素が既定モードである場合、何らかの形で要素の子孫が変更されたとき、`defaultValue` プロパティは `textContent` プロパティの値が設定されます。

フォームをリセットすると、要素は既定モードになり、`textContent` プロパティに `defaultValue` プロパティの値が設定されます。

### 値モード

要素は `value` プロパティの内容が設定されたときに、値モードへと移行します。 `value` プロパティはそれ以外は `textContent` プロパティと同様の動作をします。要素が値モードである場合、既定値には `defaultValue` プロパティからしかアクセスできません。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmloutputelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<output>`


Cookie Store API - Web API

Cookie Store API
================

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

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

***Cookie Store API*** は Cookie を管理するための非同期 API を提供し、同時に Cookie を Service Worker API から参照できるようにします。

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

Cookie の取得や設定を行うこれまでの方法は、文字列であるキーと値のペアとして `document.cookie` を扱うことでした。面倒で間違えやすい上に、モダンなウェブ開発の文脈では問題のもとになります。

`document.cookie` インターフェイスは同期的で、シングルスレッドで、イベントループをブロックします。Cookie に書き込みを行うとき、ブラウザーがすべての Cookie の文字列を更新するまで待たなければいけません。さらに、`document` に依存しているので、`document` オブジェクトにアクセスできないサービスワーカーからは Cookie にアクセスできません。

*Cookie Store API* は、Cookie を管理する新しい方法を提供します。これは非同期的でプロミスベースなので、イベントループをブロックしません。`document` に依存していないため、サービスワーカーから利用可能です。Cookie の取得や設定を行うメソッドは、エラーメッセージにより、より多くのフィードバックを提供します。これにより、ウェブ開発者は Cookie を設定した直後に読み込みを行って設定に成功したかを確認しなくてよくなります。

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

`CookieStore`

`CookieStore` インターフェイスは、Cookie の取得や設定を可能にします。

`CookieStoreManager`

`CookieStoreManager` インターフェイスは、サービスワーカーが Cookie 変更イベントを購読できるよう、サービスワーカーの登録を提供します。

`CookieChangeEvent`

`change` という名前の `CookieChangeEvent` は、スクリプトから参照可能な Cookie の変更が何か起こると、`Window` コンテキストの `CookieStore` オブジェクトで発行されます。

`ExtendableCookieChangeEvent`

`change` という名前の `ExtendableCookieChangeEvent` は、スクリプトから参照可能かつサービスワーカーの Cookie 変更購読リストにマッチする Cookie の変更が何か起こると、`ServiceWorkerGlobalScope` イベントで発行されます。

仕様書
---

| Specification |
| --- |
| Cookie Store API  |

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

### api.CookieStore

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

### api.CookieStoreManager

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


MediaRecorderErrorEvent - Web API

MediaRecorderErrorEvent
=======================

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

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

`MediaRecorderErrorEvent` インターフェイスは、MediaStream 収録 API によって返されるエラーを表します。 発生したエラーを記述する `DOMException` への参照をカプセル化した `Event` オブジェクトです。

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

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

`error` 読取専用
非推奨

Non-standard

発生したエラーに関する情報を含む `DOMException` です。 読み取り専用です。

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

`MediaStreamRecorderEvent()`
非推奨

Non-standard

指定された引数を使用して新しい `MediaRecorderErrorEvent` イベントオブジェクトを作成して返します。

メソッド
----

*親インタフェースである `Event` からメソッドを継承しています。*

仕様書
---

この機能は、もはやどの仕様にも属しておらず、標準化の予定もありません。

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

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


フェッチ API - Web API

フェッチ API
========

フェッチ API は（ネットワーク越しの通信を含む）リソース取得のためのインターフェイスを提供しています。 `XMLHttpRequest` と似たものではありますが、より強力で柔軟な操作が可能です。

**注:** この機能は Web Worker 内で利用可能です

概念と利用方法
-------

フェッチでは、 `Request` および `Response` オブジェクト（およびネットワークリクエストに関わるその他のもの）の汎用的な定義が提供されています。これにより、サービスワーカー、キャッシュ API、リクエストやレスポンスを処理または変更するその他の類似のもの、またはプログラム的にレスポンスを生成する (つまり、コンピュータプログラムまたはパーソナルプログラミング命令を使用する) 必要があるあらゆる種類の利用法など、将来的に必要とされるあらゆる場所で使用できるようになります。

また CORS や HTTP の Origin ヘッダーの振る舞いといった関連した概念についても定義しています。この定義は、現行の分散している個別の定義を置き換えるものです。

リソースを取得するためのリクエストは、 `fetch()` メソッドを呼ぶことで作成できます。このメソッドは `Window` や `WorkerGlobalScope` といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。

`fetch()` メソッドは必須の引数を 1 つ取り、取得したいリソースのパスを指定します。これは `Promise` を返します。これはサーバーがヘッダーで返答するとすぐに、**サーバーレスポンスが HTTP エラーステータスであったとしても**、 `Response` に解決します。第 2 引数は任意で、 `init` オプションオブジェクトを渡すことができます（`Request` を参照してください）。

`Response` を受け取ると、レスポンスに含まれるコンテンツ本体と、その処理方法を定義するための多数のメソッドが利用できるようになります。

`Request()` および `Response()` を利用することで、リクエストとレスポンスを直接作成できます。ただしこれらのオブジェクトは、`FetchEvent.respondWith()` のような他の API 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。

### jQuery との違い

`fetch` は主に 3 つの点で `jQuery.ajax()` と異なります。

* `fetch()` から返されたプロミスは、レスポンスが HTTP `404` や `500` であっても、 **HTTP エラーステータスで拒否されません**。代わりに、正常に解決され (`ok` ステータスが `false` に設定されます)、ネットワーク障害が発生した場合、または要求の完了が妨げられた場合にのみ拒否されます。
* `fetch()` は *credentials* の初期化オプションを（`include` に）設定しない限り、**オリジンをまたいだ Cookie を送信しません**。
    + 2018 年 4 月、に仕様の既定の認証情報ポリシーが `'same-origin'` に変更され、古いネイティブの fetch が Firefox 61.0b13, Safari 12, Chrome 68 のバージョンのブラウザーで更新されました。
    + これらのブラウザーより古いバージョンをターゲットにしている場合は、 Cookie/ユーザーログイン状態の影響を受ける可能性のあるすべての API リクエストに `'same-origin'` を初期化オプション に設定した認証情報を必ず含めてください。

**メモ:** フェッチ API の詳しい利用方法は フェッチの使用を参照してください。また フェッチの基本概念では、フェッチ API の基本概念が解説されています。

### フェッチの中止

未完了の `fetch()` （または `XMLHttpRequest`）の操作を中止するには、 `AbortController` および `AbortSignal` インターフェイスを使用してください。

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

`fetch()`

`fetch()` メソッドはリソース取得のために使用されます。

`Headers`

リクエストとレスポンスのヘッダーを表現しています。ヘッダー情報への問い合わせや、結果による振る舞いの選択が可能です。

`Request`

リソースのリクエストを表します。

`Response`

リクエストに対するレスポンスを表します。

仕様書
---

| Specification |
| --- |
| Fetch Standard # fetch-method |

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

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

関連情報
----

* フェッチの使用
* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
* フェッチのポリフィル
* フェッチの基本概念


WebOTP API - Web API

WebOTP API
==========

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

**WebOTP API** は、特別な形式の SMS メッセージの受信時にワンタイムパスワードを生成することで、電話番号がユーザーのものであることを検証する方法を提供します。

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

電話番号はアプリケーションがユーザーを識別する方法としてよく使用され、番号がユーザーのものであることを検証するため、SMS がよく使用されます。通常のシナリオでは、ユーザーにワンタイムパスワードを含むメッセージが送信されます。そして、ユーザーはこのパスワードを、番号がユーザーのものであることを検証するフォームにコピペしなければならないでしょう。

WebOTP API は、アプリケーションがパスワードをコピペなしで自動で受信して検証することを可能にし、この手続きで生じるイライラを解消します。

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

`OTPCredential`

`Credential` を継承し、新しいワンタイムパスワードが生成されたときに返す属性を持ちます。

例
-

この例では、SMS メッセージを受信し、ユーザーが許可すると、ワンタイムパスワードを含む `OTPCredential` オブジェクトが返ります。そして、このパスワードがフォームに入力され、フォームが送信されます。

電話機を使用してデモを体験する.

```html
<input type="text" autocomplete="one-time-code" inputmode="numeric" />
```

```js
if ("OTPCredential" in window) {
  window.addEventListener("DOMContentLoaded", (e) => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    const ac = new AbortController();
    const form = input.closest("form");
    if (form) {
      form.addEventListener("submit", (e) => {
        ac.abort();
      });
    }
    navigator.credentials
      .get({
        otp: { transport: ["sms"] },
        signal: ac.signal,
      })
      .then((otp) => {
        input.value = otp.code;
        if (form) form.submit();
      })
      .catch((err) => {
        console.error(err);
      });
  });
}
```

仕様書
---

| Specification |
| --- |
| WebOTP API  |

関連情報
----

* Verify phone numbers on the web with WebOTP
* Fill OTP forms within cross-origin iframes with WebOTP API


DataTransferItem - Web API

DataTransferItem
================

**`DataTransferItem`** オブジェクトは、1 つのドラッグデータ項目を表します。*ドラッグ操作*中、それぞれの ドラッグイベントは `dataTransfer` プロパティを持ち、このプロパティにはドラッグデータ項目の `list` を含みます。リスト内のそれぞれの項目は `DataTransferItem` オブジェクトです。

このインターフェイスにはコンストラクターがありません。

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

`DataTransferItem.kind` 読取専用

ドラッグデータの項目の種類で、`string`（文字列）か `file`（ファイル）のどちらかです。

`DataTransferItem.type` 読取専用

ドラッグデータ項目の型、通常は MIME タイプです。

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

`DataTransferItem.getAsFile()`

ドラッグデータ項目に関連付けられた `File` オブジェクト (ドラッグ項目がファイルでない場合は null) を返します。

`DataTransferItem.getAsFileSystemHandle()`
Experimental

ドラッグ中の項目がファイルであれば `FileSystemFileHandle` を、ドラッグ中の項目がディレクトリーであれば `FileSystemDirectoryHandle` を返します。

`DataTransferItem.getAsString()`

ドラッグデータ項目の文字列を引数に、指定されたコールバックを呼び出します。

`DataTransferItem.webkitGetAsEntry()`

選択したファイルのファイルシステム内の項目を表す `FileSystemEntry` (en-US) に基づくオブジェクトを返します。これは通常、`FileSystemFileEntry` または `FileSystemDirectoryEntry` オブジェクトのいずれかになります。

例
-

このインターフェイスのすべてのメソッドとプロパティには、自身のリファレンスページがあり、それぞれのリファレンスページに例があります。

仕様書
---

| Specification |
| --- |
| HTML Standard # the-datatransferitem-interface |

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

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