ReadableStreamDefaultController - Web API

ReadableStreamDefaultController
===============================

**`ReadableStreamDefaultController`** はストリーム API のインターフェイスで、`ReadableStream` の状態と内部キューを制御できるコントローラーを表します。既定のコントローラーは、バイトストリームではないストリーム用のものです。

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

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

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

`ReadableStreamDefaultController.desiredSize` 読取専用

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

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

`ReadableStreamDefaultController.close()`

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

`ReadableStreamDefaultController.enqueue()`

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

`ReadableStreamDefaultController.error()`

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

例
-

次の単純な例では、コンストラクターを使用してカスタムの `ReadableStream` を作成します（完全なコードについては、単純なランダムストリームの例を参照）。 `start()` 関数は、1 秒ごとにテキストのランダムな文字列を生成し、それをストリームのキューに入れます。 `ReadableStream.cancel()` が何らかの理由で呼び出された場合、生成を停止するための `cancel()` 関数も提供します。

`ReadableStreamDefaultController` オブジェクトは、 `start()` 関数および `pull()` 関数の引数として提供されることに注意してください。

ボタンが押されると、生成を停止し、 `ReadableStreamDefaultController.close()` を使用してストリームを閉じ、ストリームからデータを読み取る別の関数を実行します。

```js
let interval;
const stream = new ReadableStream({
  start(controller) {
    interval = setInterval(() => {
      let string = randomChars();

      // ストリームに文字列を追加
      controller.enqueue(string);

      // それを画面に表示
      let listItem = document.createElement("li");
      listItem.textContent = string;
      list1.appendChild(listItem);
    }, 1000);

    button.addEventListener("click", () => {
      clearInterval(interval);
      fetchStream();
      controller.close();
    });
  },
  pull(controller) {
    // この例では実際には pull は必要ありません
  },
  cancel() {
    // リーダーがキャンセルされた場合に呼び出されるため、
    // 文字列の生成を停止する必要があります
    clearInterval(interval);
  },
});
```

仕様書
---

| Specification |
| --- |
| Streams Standard # rs-default-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


SpeechSynthesisUtterance - Web API

SpeechSynthesisUtterance
========================

**`SpeechSynthesisUtterance`** はウェブ音声 API のインターフェイスで、発話リクエストを表します。
 これには、発話サービスが読み上げるコンテンツと、その読み上げ方についての情報（言語、音の高低、音量）が含まれます。

EventTarget

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

`SpeechSynthesisUtterance()`

新しい `SpeechSynthesisUtterance` オブジェクトのインスタンスを返します。

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

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

`SpeechSynthesisUtterance.lang`

utterance （発声）の言語を取得または設定します。

`SpeechSynthesisUtterance.pitch`

utterance が発話される際のピッチ（音の高低）を取得または設定します。

`SpeechSynthesisUtterance.rate`

utterance が発話される際の速度を取得または設定します。

`SpeechSynthesisUtterance.text`

utterance が発話される際の合成されるテキストを取得または設定します。

`SpeechSynthesisUtterance.voice`

utterance の発話に使用される音声を取得または設定します。

`SpeechSynthesisUtterance.volume`

utterance が発話される際の音量を取得または設定します。

イベント
----

これらのイベントは、 `addEventListener()` を使用するか、イベントリスナーを `onイベント名` プロパティに代入することで待ち受けしてください。

`boundary`

 音声の発話が単語または文の境界に達すると発行されます。
 `onboundary` プロパティからも利用できます。

`end`

 発話が完了したときに発行されます。
 `onend` プロパティからも利用できます。

`error`

 発話が正常に行われずにエラーが発生したときに発行されます。
 `onerror` プロパティからも利用できます。

`mark`

 音声発話が SSML の名前付き "mark" タグに到達したときに発行されます。
 `onmark` プロパティからも利用できます。

`pause`

 発話の途中で一時停止した場合に発行されます。
 `onpause` プロパティからも利用できます。

`resume`

 一時停止していた発話が再開されたときに発行されます。
 `onresume` プロパティからも利用できます。

`start`

 発話が始まったときに発行されます。
 `onstart` プロパティからも利用できます。

例
-

基本的な 音声合成のデモ では、最初に `window.speechSynthesis` を使用して SpeechSynthesis コントローラーへの参照を取得します。必要な変数の定義後、 `SpeechSynthesis.getVoices()` (en-US) を使用して利用可能な音声のリストを取得し、それらの選択メニューを構成します。ユーザーは、そこから使用したい音声を選べます。

`inputForm.onsubmit` ハンドラー内部では、 `preventDefault()` でフォーム送信を停止し、 `constructor` 使用して、新しいテキスト `<input>` に入力されたテキストを含む新しい `SpeechSynthesisUtterance` インスタンスを作成します。その発話にユーザーが `<select>` 要素で選択した 音声を設定し、`SpeechSynthesis.speak()` (en-US) メソッドを通して発声の発話を開始します。

```js
const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector("input");
const voiceSelect = document.querySelector("select");

let voices;

function loadVoices() {
  voices = synth.getVoices();
  for (let i = 0; i < voices.length; i++) {
    const option = document.createElement("option");
    option.textContent = `${voices[i].name} (${voices[i].lang})`;
    option.value = i;
    voiceSelect.appendChild(option);
  }
}

// Google Chrome では、音声はページの読み込みでは準備できません
if ("onvoiceschanged" in synth) {
  synth.onvoiceschanged = loadVoices;
} else {
  loadVoices();
}

inputForm.onsubmit = (event) => {
  event.preventDefault();

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  utterThis.voice = voices[voiceSelect.value];
  synth.speak(utterThis);
  inputTxt.blur();
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # speechsynthesisutterance |

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

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

関連項目
----

* ウェブ音声 API


structuredClone() - Web API

structuredClone()
=================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
グローバルの **`structuredClone()`** メソッドは、指定された値のディープコピーを、構造化複製アルゴリズムを用いて生成します。

 このメソッドでは、元の値の転送可能オブジェクトを、新しいオブジェクトにクローンするのではなく、転送することもできます。
 転送されたオブジェクトは元のオブジェクトから切り離され、新しいオブジェクトに装着されます。元のオブジェクトからはもうアクセスできなくなります。

構文
--

```js
structuredClone(value);
structuredClone(value, transferables);
```

### 引数

`value`

 複製されるオブジェクトです。
 これはあらゆる構造化複製可能型です。

`transferables` 省略可

`value` の中にある転送可能オブジェクトの配列で、複製するのではなく移動するオブジェクトを指定します。

### 返値

返値は元の `value` のディープコピーです。

### 例外

`DataCloneError` `DOMException`

入力値にシリアライズ可能でない部分があった場合に発生します。

解説
--

 この関数は、 JavaScript の値をディープコピーするために使用することができます。
 また、以下に示すように、循環参照にも対応しています。

```js
// 値と自分自身への循環参照を持つオブジェクトを作成する
const original = { name: "MDN" };
original.itself = original;

// 複製する
const clone = structuredClone(original);

console.assert(clone !== original); // オブジェクトは同じではない（同一ではない）
console.assert(clone.name === "MDN"); // 同じ値を持っている
console.assert(clone.itself === clone); // 循環参照も保持されている
```

### 転送される値

転送可能オブジェクト（のみ）が複製先のオブジェクトに複製する代わりに転送することができます。この場合、オプションの引数 `transfer` の値を使用します。
 転送により、元のオブジェクトは使用不可能になります。

**メモ:** これが役立つ場面として、バッファー内のデータを保存する前に非同期で検証する場合です。
 データを保存する前にバッファーが変更されるのを避けるために、バッファーをクローンしてそのデータを検証することができます。
 また、データを「転送」すれば、元のバッファーに手を加えようとしても失敗するので、偶発的な悪用を防ぐことができます。

 以下のコードは、配列のクローンを作成し、その基礎となるリソースを新しいオブジェクトに転送する方法を示しています。
 返値において、元の `uInt8Array.buffer` はクリアされます。

```js
// 16MB = 1024 \* 1024 \* 16
const uInt8Array = Uint8Array.from({ length: 1024 \* 1024 \* 16 }, (v, i) => i);

const transferred = structuredClone(uInt8Array, {
  transfer: [uInt8Array.buffer],
});
console.log(uInt8Array.byteLength); // 0
```

 任意の数のオブジェクトを複製し、それらのオブジェクトの任意のサブセットを転送することができます。
 例えば、以下のコードでは、渡された値から `arrayBuffer1` を転送しますが、`arrayBuffer2` は転送しません。

```js
const transferred = structuredClone(
  { x: { y: { z: arrayBuffer1, w: arrayBuffer2 } } },
  { transfer: [arrayBuffer1] },
);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-structuredclone |

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

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

関連情報
----

* `structuredClone` のポリフィルは `core-js` にあります
* 構造化複製アルゴリズム
* 構造化クローンのポリフィル


DOMStringList - Web API

DOMStringList
=============

**`DOMStringList`** インターフェイスは、一部の API が返す古い型で、文字列 (`DOMString`) の変更不可能なリストを表します。現代の API は、代わりに `Array` オブジェクト（WebIDL では `sequence<DOMString>`）を返します。

このインターフェイスは IndexedDB や `Location` API で使用されています。

* `IDBDatabase.objectStoreNames`
* `IDBObjectStore.indexNames`
* `Location.ancestorOrigins`
インスタンスプロパティ
-----------

`DOMStringList.length` 読取専用

リストの長さを返します。

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

`DOMStringList.item()`

リストから指定されたインデックスの文字列を返します。

`DOMStringList.contains()`

指定された文字列がリストに含まれるかどうかを示す論理値を返します。

仕様書
---

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

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

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


console - Web API

console
=======

**`console`** オブジェクトは、ブラウザーのデバッグコンソール（例えば Firefox のウェブコンソール）へのアクセスを提供します。
 このオブジェクトの詳細な動作はブラウザーによって異なりますが、*一般的に共通の*機能セットが提供されています。

`console` オブジェクトには任意のグローバルオブジェクトからアクセスできます。閲覧スコープの `Window` や、特定の種類のワーカーを表す `WorkerGlobalScope` の console プロパティを通してアクセスできます。これは `Window.console` として公開されていますが、単に `console` として参照できます。

```js
console.log("Failed to open the specified link");
```

このページでは、 `console` オブジェクトで使用できるメソッドやいくらかの使用例を提供します。

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

メソッド
----

`console.assert()`

第 1 引数が `false` であれば、メッセージとスタックトレースをコンソールに出力します。

`console.clear()`

コンソールをクリアします。

`console.count()`

指定されたラベルでこの行が呼び出された回数をログ出力します。

`console.countReset()`

指定されたラベルのカウンターの値をリセットします。

`console.debug()`

ログレベルが `debug` のコンソールへメッセージを出力します。

`console.dir()`

指定した JavaScript オブジェクトのプロパティの、対話型リストを表示します。このリスト内の三角印をクリックすると、子オブジェクトの内容を調査して表示させることができます。

`console.dirxml()`

指定したオブジェクトを XML/HTML 要素で表現したものを表示します。表現できない場合は、JavaScript オブジェクトビューを表示します。

`console.error()`

エラーメッセージを出力します。このメソッドでは、文字列置換および追加の引数を使用することができます。

`console.exception()`
Non-standard

非推奨

`error()` の別名です。

`console.group()`

新たなインライングループを作成し、以降のすべての出力を別なレベルに字下げします。レベルを戻すには、`groupEnd()` を呼び出します。

`console.groupCollapsed()`

新たなインライングループを作成し、以降のすべての出力を別なレベルに字下げします。 `group()` とは異なり、グループが折りたたまれた状態で作られ、それを開くには展開ボタンを操作する必要があります。レベルを戻すには、`groupEnd()` を呼び出します。

`console.groupEnd()`

現在のインライングループから抜けます。

`console.info()`

メッセージタイプのログ情報を出力します。このメソッドでは、文字列置換および追加の引数を使用することができます。

`console.log()`

一般タイプのログ情報を出力します。このメソッドでは、文字列置換および追加の引数を使用することができます。

`console.profile()`
Non-standard

ブラウザー内蔵のプロファイラー (例えば Firefox のパフォーマンスツール) を開始します。プロファイルの名称を指定することができます。

`console.profileEnd()`
Non-standard

プロファイラーを停止します。結果のプロファイルは、ブラウザーのパフォーマンスツール (例えば Firefox のパフォーマンスツール) で確認できます。

`console.table()`

表形式のデータを、表を使用して表示します。

`console.time()`

入力引数で指定された名前のタイマーを開始します。ページあたり最大 10,000 個のタイマーを同時に動かすことができます。

`console.timeEnd()`

指定されたタイマーを停止して、そのタイマーを開始してからの時間を秒単位でログに出力します。

`console.timeLog()`

指定されたタイマーの値をコンソールへ出力します。

`console.timeStamp()`
Non-standard

ブラウザー（Chrome または Firefox）のパフォーマンスツールのタイムラインにマーカーを追加します（。

`console.trace()`

スタックトレースを出力します。

`console.warn()`

警告メッセージを出力します。このメソッドでは、文字列置換および追加の引数を使用することができます。

例
-

### コンソールへのテキストの出力

コンソールでもっとも頻繁に使用される機能は、テキストやその他のデータをログ出力することです。生成することができる出力のカテゴリは 4 つあり、`console.log()`、`console.info()`、`console.warn()`、`console.error()` の各メソッドを使用します。これらメソッドの出力結果はログ上でそれぞれ異なるスタイルがつけられ、また関心がある種類の出力だけを参照するためにブラウザーが提供するフィルタ機能を使用することもできます。

各出力メソッドを使用する方法は 2 つあります。複数の文字列表現を 1 つの文字列に連結してコンソールに出力する形でオブジェクトのリストを渡す方法と、オブジェクトのリストに続けてそれらを置き換える任意の個数の置換文字列を渡す方法です。

#### 単一のオブジェクトの出力

もっとも簡単にログを記録する方法は、単一のオブジェクトを出力することです。

```js
const someObject = { str: "Some text", id: 5 };
console.log(someObject);
```

出力内容は以下のようになります。

```bash
{str:"Some text", id:5}
```

#### 複数のオブジェクトの出力

ログ出力のメソッドを呼び出すときにオブジェクトを羅列することで、複数のオブジェクトを出力することもできます。

```js
const car = "Dodge Charger";
const someObject = { str: "Some text", id: 5 };
console.info("My first car was a", car, ". The object is:", someObject);
```

出力は以下のようになります。

```bash
My first car was a Dodge Charger . The object is: ({str:"Some text", id:5})
```

#### 文字列置換の使用

文字列を取る `console` オブジェクトのメソッドの一つ (`log()` など) に文字列を渡すと、以下の置換文字列を使用することができます。

`%o` または `%O`

JavaScript オブジェクトを出力します。オブジェクト名をクリックすると、調査ツールで詳細情報を表示します。

`%d` または `%i`

整数値を出力します。数値の書式設定をサポートしています。例えば `console.log("Foo %.2d", 1.1)` は、先頭に 0 を補った有効数字 2 桁の数値として `Foo 01` のように出力します。

`%s`

文字列を出力します。

`%f`

浮動小数点数値を出力します。数値の書式設定に対応しています。例えば `console.log("Foo %.2f", 1.1)` は、小数部分が 2 桁の数値として出力し、 `Foo 1.10` となります。

**メモ:** 精度の書式は Chrome では動作しません。

これらは引数リストの書式化文字列の後にある引数を引用します。例えば次のようになります。

```js
for (let i = 0; i < 5; i++) {
  console.log("Hello, %s. You've called me %d times.", "Bob", i + 1);
}
```

出力は以下のようになります。
```

Hello, Bob. You've called me 1 times.
Hello, Bob. You've called me 2 times.
Hello, Bob. You've called me 3 times.
Hello, Bob. You've called me 4 times.
Hello, Bob. You've called me 5 times.
```

#### コンソールの出力のスタイル付け

`%c` ディレクティブを使用すると、コンソールの出力に CSS スタイルを適用することができます。

```js
console.log(
  "This is %cMy stylish message",
  "color: yellow; font-style: italic; background-color: blue;padding: 2px",
);
```

ディレクティブの前のテキストは影響を受けませんが、ディレクティブの後ろのテキストは引数の CSS 宣言を使用して装飾されます。

![](/ja/docs/Web/API/console/css-styling.png)

`%c` は複数回使用することができます。

```js
console.log(
  "Multiple styles: %cred %corange",
  "color: red",
  "color: orange",
  "Additional unformatted message",
);
```

`%c` で利用できるプロパティは次の通りです。 (少なくとも、 Firefox では — 他のブラウザーでは異なる可能性があります)。

* `background` および同等の個別指定
* `border` および同等の個別指定
* `border-radius`
* `box-decoration-break`
* `box-shadow`
* `clear` and `float`
* `color`
* `cursor`
* `display`
* `font` および同等の個別指定
* `line-height`
* `margin`
* `outline` および同等の個別指定
* `padding`
* `text-*`、例えば `text-transform`
* `white-space`
* `word-spacing` および `word-break`
* `writing-mode`

**メモ:** コンソールメッセージは、既定ではインライン要素と同様に動作します。 `padding`, `margin` などの効果を得たい場合は、例えば `display: inline-block` のように設定してください。

### コンソールでのグループの使用

関連するデータを視覚的に結合することによりコンソール出力をまとめるのに役立つ、入れ子になったグループを使用することができます。新たな入れ子のブロックを作成するには、 `console.group()` を呼び出してください。`console.groupCollapsed()` メソッドは似ていますが、こちらは折りたたまれた状態の新たなブロックを作成し、中身を読むには展開ボタンを操作してブロックを開く必要があります。

現在のグループを抜けるには、 `console.groupEnd()` を呼び出します。例えば、以下のコードを実行します。

```js
console.log("This is the outer level");
console.group("First group");
console.log("In the first group");
console.group("Second group");
console.log("In the second group");
console.warn("Still in the second group");
console.groupEnd();
console.log("Back to the first group");
console.groupEnd();
console.debug("Back to the outer level");
```

出力は以下のようになります。

![Firefox コンソールでの入れ子になったグループのデモ](/ja/docs/Web/API/console/console_groups_demo.png)

### タイマー

特定の操作にかかる時間を計るため、タイマーを設定することができます。タイマーを開始するには、引数で名前を指定して `console.time()` メソッドを呼び出します。タイマーを停止して経過時間をミリ秒単位で取得するには、タイマーの名前をまた引数で指定して `console.timeEnd()` メソッドを呼び出します。ページあたり最大 10,000 個のタイマーを同時に動かすことができます。

例えば、次のコードを実行したとします。

```js
console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff…");
console.timeEnd("answer time");
```

ユーザーがアラートボックスを解除するのにかかった時間を記録し、その時間をコンソールに記録し、ユーザーが 2 回目のアラートを解除するのを待ってから、終了時間をコンソールに記録します。

![](/ja/docs/Web/API/console/console-timelog.png)

タイマーの名前は、タイマーの開始時と停止時の両方で表示されることに注意してください。

**メモ:** タイマーをネットワーク通信の時間の計測に用いる場合、タイマーはトランザクション全体の所要時間を報告しますが、ネットワークパネルに表示される時間はヘッダーの処理にかかった時間だけを表すことに注意してください。
 レスポンス本文の記録を有効にしている場合は、レスポンスヘッダーとレスポンス本文それぞれに表示される所要時間の合計が、コンソールに出力されている時間に一致します。

### スタックトレース

console オブジェクトはスタックトレースの出力にも対応しています。これは `console.trace()` を呼び出した場所へ至るための呼び出し経路を表示するものです。以下のコードを見てください。

```js
function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();
```

コンソールへの出力内容は以下のようになります。

![](/ja/docs/Web/API/console/api-trace2.png)

仕様書
---

| Specification |
| --- |
| Console Standard # console-namespace |

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

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

メモ
--

* 少なくとも Firefox では、ページで `console` オブジェクトを定義すると、 Firefox が内蔵している console オブジェクトをオーバーライドします。
関連情報
----

* Firefox 開発者ツール
* ウェブコンソール — Firefox のウェブコンソールがコンソール API の呼び出しを処理する方法
* about:debugging — モバイル端末がデバッグ対象である場合に、コンソールの出力を確認する方法
### その他の実装

* Google Chrome DevTools
* Microsoft Edge DevTools
* Safari Web Inspector


Geolocation - Web API

Geolocation
===========

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

**`Geolocation`** インターフェイスは、端末の位置をプログラムから取得することができるオブジェクトを表します。ウェブコンテンツが端末の位置情報にアクセスすることができるようにします。これにより、ウェブサイトやアプリがユーザーの位置に応じてカスタマイズされた結果を提供できるようになります。

このインターフェイスを持つオブジェクトは、 `Navigator` オブジェクトの `navigator.geolocation` プロパティを使って得ることができます。

**メモ:** セキュリティ上の理由により、ウェブページが位置情報にアクセスしようとする時、ユーザーにアクセス許可が求められます。その方法やポリシーはブラウザーによって異なることに注意してください。

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

*`Geolocation` インターフェイスが実装・継承しているプロパティはありません。*

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

*`Geolocation` インターフェイスが継承しているプロパティはありません。*

`Geolocation.getCurrentPosition()` 安全なコンテキスト用

端末の現在位置を特定し、結果データを `GeolocationPosition` オブジェクトで返します。

`Geolocation.watchPosition()` 安全なコンテキスト用

端末の位置が変化する度に呼び出されるコールバック関数を登録し、それを識別する `long` 型の値を返します。

`Geolocation.clearWatch()` 安全なコンテキスト用

以前に `watchPosition()` によって登録されたハンドラーを解除します。

仕様書
---

| Specification |
| --- |
| Geolocation API # geolocation\_interface |

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

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

関連情報
----

* 位置情報の使用


PointerEvent - Web API

PointerEvent
============

**`PointerEvent`** インターフェイスは、接触点の形状、イベントを生成した機器の種類、接触面に加えられた圧力の量など、ポインターによって生成された DOM イベントの状態を表します。

*ポインター*は、入力機器（マウス、ペン、またはタッチ可能な面の上の接触点など）のハードウェアにとらわれない表現です。 ポインターは、画面などの接触面上の特定の座標（または座標の集合）をターゲットにすることができます。

ポインターの*ヒットテスト*は、ブラウザーがポインターイベントのターゲット要素を決定するために使用する手続です。通常、これはポインターの位置と、画面媒体上の文書内の要素の視覚的なレイアウトを考慮して決定します。

Event

UIEvent

MouseEvent

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

`PointerEvent()`

信頼できない合成 `PointerEvent` を作成します。

プロパティ
-----

*このインターフェイスは、`MouseEvent` および `Event` からプロパティを継承しています。*

`PointerEvent.pointerId` 読取専用

イベントの原因となっているポインターの一意の識別子。

`PointerEvent.width` 読取専用

ポインターの接触形状の幅（X 軸上の大きさ、CSS ピクセル単位）。

`PointerEvent.height` 読取専用

ポインターの接触形状の高さ（Y 軸上の大きさ、CSS ピクセル単位）。

`PointerEvent.pressure` 読取専用

0 から 1 の範囲のポインター入力の正規化された圧力。 ここで、0 と 1 は、それぞれハードウェアが検出できる最小圧力と最大圧力を表します。

`PointerEvent.tangentialPressure` 読取専用

ポインター入力の正規化された接線圧力（バレル圧力またはシリンダー応力（cylinder stress）とも呼ばれます）は `-1` から `1` の範囲で、 `0` はコントロールの中立位置です。

`PointerEvent.tiltX` 読取専用

Y-Z 平面と、ポインター（ペン/スタイラスなど）軸と Y 軸の両方を含む平面との間の平面角度（度単位、`-90` から `90` の範囲）。

`PointerEvent.tiltY` 読取専用

X-Z 平面と、ポインター（ペン/スタイラスなど）軸と X 軸の両方を含む平面との間の平面角度（度単位、`-90` から `90` の範囲）。

`PointerEvent.twist` 読取専用

ポインター（ペン/スタイラスなど）の長軸を中心とした時計回りの回転の度数（`0` から `359` の範囲の値）。

`PointerEvent.pointerType` 読取専用

イベントの原因となった機器の種類（マウス、ペン、タッチなど）を示します。

`PointerEvent.isPrimary` 読取専用

ポインターがこのポインターの種類の主ポインターを表しているかどうかを示します。

メソッド
----

`PointerEvent.getCoalescedEvents()`

配信された `pointermove` イベントに結合されたすべての `PointerEvent` インスタンスの列を返します。

`PointerEvent.getPredictedEvents()` (en-US)

配信された `pointermove` イベントの結合イベントの後に続くとブラウザーが予測した `PointerEvent` インスタンスの列を返します。

ポインターイベントの種類
------------

`PointerEvent` インターフェイスには、複数の種類のイベントがあります。 どのイベントが発生したかを判断するには、イベントの `type` プロパティを調べてください。

**メモ:** 多くの場合、ポインターとマウスの両方のイベントが送信されることに注意することが重要です（ポインター固有でないコードでもユーザーと対話できるようにするため）。 ポインターイベントを使用する場合は、`event.preventDefault()` を呼び出してマウスイベントが共に送信されないようにする必要があります。

`pointerover`

このイベントは、ポインティングデバイスが要素のヒットテスト境界内に移動したときに発生します。

`pointerenter`

このイベントは、ポインティングデバイスが要素またはその子孫の 1 つのヒットテスト境界内に移動したときに発生します。 これには、ホバーに対応していない機器からの `pointerdown` イベントの結果も含まれます（`pointerdown` を参照）。 この種類のイベントは `pointerover` に似ていますが、バブリングしないという点が異なります。

`pointerdown`

このイベントは、ポインターが*アクティブ*になると発生します。 マウスの場合、ボタンが押されていない状態から少なくとも 1 つのボタンが押された状態に移行したときに発生します。タッチの場合、物理的な接触がデジタイザーとなされたときに発生します。 ペンの場合、スタイラスがデジタイザーと物理的に接触したときに発生します。

**メモ:** 直接操作を受け付けるタッチ画面のブラウザーでは、 `pointerdown` イベントにより暗黙的なポインターキャプチャが行われ、以降のすべてのポインターイベントが、キャプチャターゲット上で発生したかのようにターゲットに捕捉されます。そのため `pointerover`、`pointerenter`、`pointerleave`、`pointerout` はキャプチャが設定されている間は**発生しません**。キャプチャはターゲット要素上で `element.releasePointerCapture` を呼び出すことで手動で解除することができ、また `pointerup` または `pointercancel` イベントの後で暗黙的に解放されます。

`pointermove`

このイベントは、ポインターが座標を変更したときに発生します。

`pointerrawupdate`
Experimental

このイベントは、ポインターのいずれかのプロパティが変更されたときに発生します。

`pointerup`

このイベントは、ポインターが*アクティブ*でなくなったときに発生します。

`pointercancel`

ブラウザーは、ポインターがイベントを生成できなくなったと判断した場合（例えば、関連するデバイスが無効になった場合）、このイベントを発生させます。

`pointerout`

このイベントは、次のようないくつかの理由で発生します。 ポインティングデバイスが要素のヒットテスト境界外に移動した。 ホバーをサポートしていないデバイスの `pointerup` イベントが発生した（`pointerup` を参照）。 `pointercancel` イベントの発生後（`pointercancel` を参照）。 ペン/スタイラスがデジタイザーで検出可能なホバー範囲を離脱したとき。

`pointerleave`

このイベントは、ポインティングデバイスが要素のヒットテスト境界外に移動したときに発生します。 ペンデバイスの場合、このイベントは、スタイラスがデジタイザーで検出可能なホバー範囲を離脱したときに発生します。

`gotpointercapture`

このイベントは、要素がポインターキャプチャを受け取ったときに発生します。

`lostpointercapture`

このイベントは、ポインターに対するポインターキャプチャが解放された後に発生します。

例
-

各プロパティ、種類のイベント、およびグローバルイベントハンドラーの例は、それぞれのリファレンスページに含まれています。

仕様書
---

| Specification |
| --- |
| Pointer Events # pointerevent-interface |

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

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

関連情報
----

* タッチイベント
* `GestureEvent` (en-US)
* `touch-action`


CSSKeyframeRule - Web API

CSSKeyframeRule
===============

**`CSSKeyframeRule`** インターフェイスは、指定されたキーフレームのスタイルセットを表すオブジェクトを提供します。アット規則 の `@keyframes` の 1 つのキーフレームに対応しています。

CSSRule

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

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

`CSSKeyframeRule.keyText`

`'10%'` や `'75%'` のように、キーフレームのキーを表します。`from` キーワードは `'0%'` に対応付けられ、`to` キーワードは `'100%'` に対応づけられます。

`CSSKeyframeRule.style` 読取専用

キーフレームに関連した CSS スタイルの `CSSStyleDeclaration` を返します。

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

*固有のメソッドはありません。祖先である `CSSRule` からメソッドを継承しています。*

例
-

 この CSS には、 keyframes アットルールが含まれています。これは最初の `CSSRule` となり、 `document.styleSheets[0].cssRules` で返されます。
 `myRules[0]` は `CSSKeyframesRule` オブジェクトを返し、その中に各キーフレームのための個別の `CSSKeyFrame` オブジェクトが格納されます。

```css
@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
```

```js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
console.log(keyframes[0]); // a CSSKeyframeRule representing an individual keyframe.
```

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # interface-csskeyframerule |

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

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

関連情報
----

* `@keyframes`
* `CSSKeyFramesRule`


TransitionEvent - Web API

TransitionEvent
===============

**`TransitionEvent`** インターフェイスは、トランジションに関する情報を提供するイベントを表します。

Event

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

`TransitionEvent()`

指定された引数で `TransitionEvent` イベントを作成します。

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

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

`TransitionEvent.propertyName` 読取専用

文字列で、このトランジションに関連付けられた CSS プロパティの名前が入ります。

`TransitionEvent.elapsedTime` 読取専用

`float` で、このイベントが発生した時点でトランジションが実行している時間を秒単位で表します。この値は `transition-delay` プロパティの影響を受けません。

`TransitionEvent.pseudoElement` 読取専用

文字列で、 `::` で始まる、アニメーションが実行される擬似要素の名前が入ります。トランジションが擬似要素上ではなく要素上で実行されている場合は、空文字列 `''` になります。

`TransitionEvent` の種類
---------------------

`transitioncancel`

`Event` で、 CSS トランジションが中断されたときに発生します。

`transitionend`

`Event` で、 CSS トランジションの実行が終了したときに発生します。

`transitionrun`

`Event` で、 CSS トランジションが生成されたとき、実行中のトランジションに追加されたときに発生し、必ずしも開始時に発生するとは限りません。

`transitionstart`

`Event` で、 CSS トランジションの推移が開始したときに発生します。

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

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

仕様書
---

| Specification |
| --- |
| CSS Transitions # interface-transitionevent |

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

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

関連情報
----

* CSS トランジションの使用
* CSS プロパティ: `transition`, `transition-delay`, `transition-duration`, `transition-property`, `transition-timing-function`


IDBCursor - Web API

IDBCursor
=========

IndexedDB API の **`IDBCursor`** インターフェイスはデータベースの複数レコードを横断したり繰り返すためのカーソルです。

このカーソルはどのインデックスやオブジェクトをループしているかを示す元です。これは範囲内の位置を示し、レコードのキー順に増/減して動きます。カーソルはアプリケーションからカーソル範囲内の全レコードに非同期に処理できるようにします。

一度に無制限の数のカーソルを持つことができます。あるカーソルを表す同一の `IDBCursor` オブジェクトを取得できます。操作はインデックスやオブジェクトストアに対して実行されます。

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

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

`IDBCursor.source` 読取専用

カーソルが繰り返している`IDBObjectStore` か `IDBIndex` を返します。この関数は、カーソルが現在繰り返されていたり、繰り返しが終わりを過ぎたり、トランザクションがアクティブでなくても、`null` や例外を返しません。

`IDBCursor.direction` 読取専用

カーソルの横断の向きを返します。取りうる値については定数を見てください。

`IDBCursor.key` 読取専用

カーソル位置のレコードのキーを返します。カーソルが範囲外の場合、`undefined` にセットされます。カーソルキーはあらゆるデータ型となりえます。

`IDBCursor.value` 読取専用

カーソル位置のレコードの値を返します。カーソルの値はあらゆるデータ型となりえます。

`IDBCursor.primaryKey` 読取専用

カーソルの現在有効な主キーを返します。カーソルが現在繰り返されていたり範囲外で繰り返されていた場合、これは `undefined` にセットされます。カーソルの主キーはあらゆるデータ型となりえます。

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

`IDBCursor.advance()`

カーソルが位置を前進させる回数を設定します。

`IDBCursor.continue()`

カーソルを現在の方向の次の位置、省略可能な `key` 引数に当てはまるアイテムに進めます。

`IDBCursor.continuePrimaryKey()`

カーソルを引数で与えられたインデックスキーと主キーに従って設定します。

`IDBCursor.delete()`

`IDBRequest` オブジェクトを返し、別のスレッドでカーソルの位置を変えずにカーソルの位置にあるレコードを削除します。これは、特定のレコードを削除するのに使用できます。

`IDBCursor.update()`

`IDBRequest` オブジェクトを返し、別のスレッドでオブジェクトストア内のカーソルの現在の位置にある値を更新します。これは、特定のレコードを更新するのに使用できます。

定数
--

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

**警告:** これらの定数は利用できません。Gecko 25 で削除されました。代わりに文字列定数を直接使う必要があります。(Firefox バグ 891944)

* `NEXT`: `"next"` : カーソルは重複を含む全てのレコードを提示します。キーの範囲の下限から開始し、上方向に動きます。(キーの順番に単調増加します)
* `NEXTUNIQUE` : `"nextunique"` : カーソルは重複を除いた全てのレコードを提示します。同じキーを持つ複数のレコードが存在する場合、走査の順で最初のレコードのみを取得できます。キーの範囲の下限から開始し、上方向に動きます。
* `PREV`: `"prev"` : カーソルは重複を含む全てのレコードを提示します｡キーの範囲の上限から開始し､下方向に動きます｡(キーの順番に単調減少します)
* `PREVUNIQUE`: `"prevunique"` : カーソルは重複を除いた全てのレコードを提示します｡同じキーを持つ複数のレコードが存在する場合､走査の順で最初のレコードのみを取得できます｡キーの範囲の上限から開始し､下方向に動きます｡
例
-

この単純なコードスニペットでは、トランザクションを生成し、オブジェクトストアを取得し、そしてカーソルを用いてオブジェクトストア内の全レコードを走査します。カーソルを使う場合、データをキーを用いて選択する必要はなく、単に全部を取得できます。ループにおけるそれぞれの繰り返しにおいて、カーソルオブジェクトの現在のレコードから `cursor.value.foo` でデータを取り出せることにも注目してください。動く例全体は、IDBCursor example を参照してください。(動く例を見る)

```js
function displayData() {
  var transaction = db.transaction(["rushAlbumList"], "readonly");
  var objectStore = transaction.objectStore("rushAlbumList");

  objectStore.openCursor().onsuccess = function (event) {
    var cursor = event.target.result;
    if (cursor) {
      var listItem = document.createElement("li");
      listItem.innerHTML = cursor.value.albumTitle + ", " + cursor.value.year;
      list.appendChild(listItem);

      cursor.continue();
    } else {
      console.log("全エントリーを表示しました。");
    }
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # cursor-interface |

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

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

関連情報
----

* IndexedDB を使用する
* トランザクションを開始する : `IDBDatabase`
* トランザクションを使用する : `IDBTransaction`
* キーの範囲をセットする : `IDBKeyRange`
* データを取得、変更する : `IDBObjectStore`
* カーソルを使用する : `IDBCursor`
* リファレンスの例 : To-do Notifications (動く例を見る)


IDBOpenDBRequest - Web API

IDBOpenDBRequest
================

IndexedDB API の **`IDBOpenDBRequest`** インターフェイスは、固有のイベントハンドラー属性を用い、(`IDBFactory.open` や `IDBFactory.deleteDatabase` により行われた) データベースのオープンや削除の要求の結果へのアクセスを提供します。

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

EventTarget

IDBRequest

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

*親の `IDBRequest` および `EventTarget` からプロパティを継承しています。*

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

*メソッドはありませんが、親の `IDBRequest` および `EventTarget` からメソッドを継承しています。*

イベント
----

*親インターフェイスの `IDBRequest` および `EventTarget` で定義されているイベントも `IDBOpenDBRequest` オブジェクトで発生させることができます。*

`addEventListener()` を用いるか、このインターフェイスの `oneventname` プロパティにイベントリスナーを代入することで、一般のイベントおよび固有のイベントを監視できます。

このインターフェイスに固有のイベントは、以下です。

`blocked`

データベースへのオープン中の接続が、同じデータベースの `versionchange` トランザクションをブロックしているとき発火します。`onblocked` プロパティを用いても利用可能です。

`upgradeneeded`

現在のバージョンよりも高いバージョン番号でデータベースをオープンしようとしたとき発火します。`onupgradeneeded` プロパティを用いても利用可能です。

例
-

この例では、高いバージョン番号のデータベースをを読み込もうとした場合に、`onupgradeneeded` ハンドラーによりデータベースの構造を更新します。動く例全体は、To-do Notifications アプリケーションを見てください。(動く例を見る)

```js
let db;

// 我々のデータベースを開きましょう
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

// これらのイベントハンドラーは、開かれているデータベースを扱います
DBOpenRequest.onerror = (event) => {
  note.innerHTML += "<li>データベースの読み込み中にエラーが発生しました。</li>";
};

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>データベースの初期化が完了しました。</li>";

  // データベースを開いた結果を変数 db に格納します。
  // これは後でたくさん使います。
  db = DBOpenRequest.result;

  // IDB に既に入っている TO-DO リストのデータ全てを
  // タスクリストに入れるため、displayData() 関数を実行します。
  displayData();
};

// このイベントは、データベースがまだ作成されていないか、
// 上の window.indexedDB.open の行で新しいバージョン番号が
// 指定されたかで、新しいバージョンのデータベースを
// 作成する必要がある場合を扱います。
// これは最近のブラウザーでしか実装されていません。
DBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = (event) => {
    note.innerHTML +=
      "<li>データベースの読み込み中にエラーが発生しました｡</li>";
  };

  // このデータベース用の objectStore を作成します
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // objectStore にどのようなアイテムを保存するかを定義します

  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
  objectStore.createIndex("notified", "notified", { unique: false });
};
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # idbopendbrequest |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始s: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キーの範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)


BackgroundFetchEvent - Web API

BackgroundFetchEvent
====================

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

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

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

Background Fetch API の **`BackgroundFetchEvent`** インターフェイスは、 `service worker global scope` で実行されるバックグラウンドのフェッチイベントのためのイベント型です。

これはイベント型で、`onbackgroundfetchabort` 、および、 `onbackgroundfetchclick` イベントハンドラプロパティに渡されます。

Event

ExtendableEvent

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

`BackgroundFetchEvent()`
Experimental

新規に `BackgroundFetchEvent` オブジェクトを作成します。通常、このコンストラクタが使用されることはありません。なぜなら、これらのオブジェクトはブラウザによって自動で生成され、バックグラウンドのフェッチイベントのコールバックに渡されるからです。

プロパティ
-----

*祖先である `Event` のプロパティを継承します。*

`BackgroundFetchEvent.registration` 読取専用
Experimental

イベントが初期化された `BackgroundFetchRegistration` を返します。

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

なし。

メソッド
----

なし。

例
-

以下の例では、ユーザーがダウンロードの進捗表示のUIをクリックすると、新規にウィンドウが開きます。`event.registration` を呼び出して、現在の `BackgroundFetchRegistration` を取得しています。

```js
addEventListener("backgroundfetchclick", (event) => {
  const bgFetch = event.registration;

  if (bgFetch.result === "success") {
    clients.openWindow("/latest-podcasts");
  } else {
    clients.openWindow("/download-progress");
  }
});
```

仕様書
---

| Specification |
| --- |
| Background Fetch # background-fetch-event |

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

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


WebXR 機器 API - Web API

WebXR 機器 API
============

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

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

**WebXR** は、仮想世界（**仮想現実**、virtual reality、または **VR**）を提示するために、またはグラフィック画像を現実世界に追加（**拡張現実**、augmented reality、または **AR**）するために設計されたハードウェアへの 3D シーンのレンダリングに対応するために、一緒に使用される標準のグループです。 **WebXR 機器 API** は WebXR 機能セットのコアを実装し、出力機器の選択を管理し、適切なフレームレートで選択した機器に 3D シーンをレンダリングし、入力コントローラーを使用して作成されたモーションベクトルを管理します。

WebXR 互換機器には、モーションと方向の追跡が可能な完全没入型 3D ヘッドセット、フレームを通した現実世界のシーンの上にグラフィックをオーバーレイする眼鏡、カメラで世界を捉えることで現実を拡張し、コンピューターで生成された画像でそのシーンを増強する携帯電話が含まれます。

これらを実現するために、WebXR 機器 API は次の主要な機能を提供します。

* 互換性のある VR または AR 出力機器を見つける。
* 3D シーンを適切なフレームレートで機器にレンダリングする。
* （オプション）出力を 2D ディスプレイにミラーリングする。
* 入力コントロールの動きを表すベクトルを作成する。

最も基本的なレベルでは、それぞれの目の位置を計算し、その位置からシーンをレンダリングすることにより、ユーザーのそれぞれの目の視点からレンダリングするためにシーンに適用するパースペクティブを計算することにより、ユーザーが現在向いている方向を見ているシーンが 3D で提示されます。 これらの 2 つの画像はそれぞれ単一のフレームバッファーにレンダリングされ、左目のレンダリングされた画像は左側に、右目の視点はバッファーの右半分にレンダリングされます。 シーンに対する両目の視点がレンダリングされると、結果のフレームバッファーが WebXR 機器に配信され、ヘッドセットまたは他の適切なディスプレイ機器を通じてユーザーに提示されます。

古い WebVR API は、仮想現実（VR）に対応するためだけに設計されましたが、WebXR はウェブ上の VR と拡張現実（AR）の両方に対応します。 AR 機能の対応は、WebXR 拡張現実モジュールによって追加されます。

典型的な XR 機器は 3 または 6 自由度を持つことができ、外部位置センサーがある場合とない場合があります。

機器はまた、ユーザーが空間を移動したり、頭を回転したりすることなどを感知するために使用する加速度計、気圧計、または他のセンサーを含んでいるかもしれません。

WebXR リファレンス記事
--------------

### 初期化

* `navigator.xr`
* `XRSystem`
* `XRPermissionStatus`
* `Permissions-Policy`: `xr-spatial-tracking`

### セッション

* `XRSession` (en-US)
* `XRSessionEvent` (en-US)
* `XRRenderState` (en-US)

### フレームループ

* `XRFrame` (en-US)

### 空間

* `XRSpace` (en-US)
* `XRReferenceSpace`
* `XRBoundedReferenceSpace`
* `XRReferenceSpaceEvent`
* `XRJointSpace` (en-US)

### ビュー

* `XRView` (en-US)
* `XRViewport` (en-US)

### 幾何プリミティブ

* `XRRigidTransform`

### 姿勢

* `XRPose` (en-US)
* `XRJointPose` (en-US)
* `XRViewerPose` (en-US)

### 入力

* `XRHand` (en-US)
* `XRInputSource`
* `XRInputSourceArray` (en-US)
* `XRInputSourceEvent` (en-US)
* `XRInputSourcesChangeEvent` (en-US)

### レイヤー

* `XRLayer` (en-US)
* `XRLayerEvent` (en-US)
* `XRCompositionLayer` (en-US)
* `XRCubeLayer` (en-US)
* `XRCylinderLayer` (en-US)
* `XREquirectLayer` (en-US)
* `XRProjectionLayer` (en-US)
* `XRQuadLayer` (en-US)
* `XRMediaBinding` (en-US)

### WebGL の構築

* `XRWebGLBinding` (en-US)
* `WebGLRenderingContext.makeXRCompatible()` (en-US)
* `XRWebGLLayer` (en-US)
* `XRSubImage` (en-US)
* `XRWebGLSubImage` (en-US)

### アンカー

* `XRAnchor` (en-US)
* `XRAnchorSet` (en-US)

### 深度センシング

* `XRDepthInformation` (en-US)
* `XRCPUDepthInformation` (en-US)
* `XRWebGLDepthInformation` (en-US)

### ヒットテスト

* `XRHitTestSource` (en-US)
* `XRTransientInputHitTestSource` (en-US)
* `XRHitTestResult` (en-US)
* `XRTransientInputHitTestResult` (en-US)
* `XRRay` (en-US)

### 照明の推定

* `XRLightEstimate` (en-US)
* `XRLightProbe`

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

次のガイドとチュートリアルは、WebXR とその基礎となる 3D および VR/AR のグラフィックスの概念を理解する方法を学ぶための優れたリソースです。

### 基盤と基礎

* WebXR の基本
* ウェブの行列計算
* WebXR アプリケーションのライフサイクル (en-US)

### 複合現実エクスペリエンスの作成

* WebXR セッションの起動と停止
* WebXR の幾何学と参照空間
* WebXR での空間追跡 (en-US)
* レンダリングと WebXR フレームアニメーションコールバック
* 視点とビューアー: WebXR でのカメラのシミュレーション
* WebXR 設定の照明
* 制限付き参照空間の使用 (en-US)

### インタラクティブにする

* 移動、向き、モーション: WebXR の例
* 入力と入力ソース (en-US)
* ターゲティングとヒット検出 (en-US)

### パフォーマンスとセキュリティ

* WebXR パフォーマンスガイド (en-US)
* WebXR の権限とセキュリティ (en-US)

仕様書
---

| Specification |
| --- |
| **WebXR Device API**
 (ソース、
 課題、
 説明)
  |
| **WebXR Anchors Module**
 (ソース、
 課題、
 説明)
  |
| **WebXR Augmented Reality Module**
 (ソース、
 課題、
 説明)
  |
| **WebXR Depth Sensing Module**
 (ソース、
 課題、
 説明)
  |
| **WebXR DOM Overlays Module**
 (ソース、
 課題、
 説明)
  |
| **WebXR Gamepads Module**
 (ソース、
 課題、
 説明)
  |
| **WebXR Hand Input Module**
 (ソース、
 課題、
 説明)
  |
| **WebXR Hit Test Module**
 (ソース、
 課題、
 説明)
  |
| **WebXR Layers API**
 (ソース、
 課題、
 説明)
  |
| **WebXR Lighting Estimation API**
 (ソース、
 課題、
 説明)
  |

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

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

関連情報
----

* ウェブのグラフィック
* グラフィックの描画
* WebGL API: ウェブ上の 2D および 3D グラフィックスの高速化
* キャンバス API: ウェブのための 2D 描画
* キャンバスチュートリアル


FileSystemSyncAccessHandle - Web API

FileSystemSyncAccessHandle
==========================

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

File System Access API の **`FileSystemSyncAccessHandle`** インターフェイスは、ファイルシステムのエントリーを扱う同期式のハンドルを表します。ファイルの読み書きにおける同期式であるという性質は、WebAssembly などの非同期操作が高いオーバーヘッドに繋がる状況における重要なメソッドのパフォーマンスを高めることができます。

このクラスは、それ用の Web Workers 内でオリジンプライベートファイルシステムにあるファイルを操作するときのみアクセスできます。

このインターフェイスは `FileSystemFileHandle.createSyncAccessHandle()` メソッド経由でアクセスされます。

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

なし

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

`close()`

開かれている同期式ファイルハンドルを閉じます。これ以降操作をできなくし、ファイルハンドルに対応するファイルにかけた排他的ロックを解除します。

`flush()`

ハンドルに対応するファイルに対し `write()` メソッドにより行われたすべての変更をディスクに保存します。

`getSize()`

ハンドルに対応するファイルのサイズをバイト単位で返します。

`read()`

ハンドルに対応するファイルの内容を指定のバッファーに読み込みます。オフセットを指定することもできます。

`truncate()`

ハンドルに対応するファイルのサイズを指定のバイト数にします。

`write()`

指定のバッファーの内容をハンドルに対応するファイルに書き込みます。オフセットを指定することもできます。

例
-

以下の非同期のイベントハンドラー関数は、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-filesystemsyncaccesshandle |

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

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


AuthenticatorAssertionResponse - Web API

AuthenticatorAssertionResponse
==============================

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

**`AuthenticatorAssertionResponse`** は Web Authentication API のインターフェイスで、 `CredentialsContainer.get()` (en-US) に `PublicKeyCredential` を渡すと返されます。そして、キーペアを持ち、認証付きリクエストが有効で承認されていることをサービスに証明します。

このインターフェイスは `AuthenticatorResponse` を継承しています。

**メモ:** このインターフェイスは最上位のコンテキストに限定されています。 `<iframe>` 要素の中で使用しても、何も効果がありません。

プロパティ
-----

`AuthenticatorAssertionResponse.clientDataJSON` 安全なコンテキスト用読取専用

認証のためのクライアントデータで、オリジンやチャレンジです。 `clientDataJSON` プロパティは `AuthenticatorResponse` から継承しています。

`AuthenticatorAssertionResponse.authenticatorData` (en-US) 安全なコンテキスト用読取専用

`ArrayBuffer` で、認証機器からの情報、例えば Relying Party ID Hash (rpIdHash)、証明カウンター、ユーザー存在テスト、ユーザー検証フラグ、その他の認証機器によって処理される拡張情報が入ります。

`AuthenticatorAssertionResponse.signature` (en-US) 安全なコンテキスト用読取専用

`AuthenticatorAssertionResponse.authenticatorData` (en-US) および `AuthenticatorResponse.clientDataJSON` (en-US) に関するアサーション署名です。アサーション署名は `navigator.credentials.create()` の呼び出しで生成された鍵ペアの秘密鍵によって作成され、同じ鍵ペアの公開鍵によって検証されます。

`AuthenticatorAssertionResponse.userHandle` (en-US) 安全なコンテキスト用読取専用

`ArrayBuffer` で、非透過的なユーザー識別子が入ります。

メソッド
----

なし。

例
-

```js
var options = {
  challenge: new Uint8Array([
    /\* bytes sent from the server \*/
  ]),
};

navigator.credentials
  .get({ publicKey: options })
  .then(function (credentialInfoAssertion) {
    var assertionResponse = credentialInfoAssertion.response;
    // Do something specific with the response

    // send assertion response back to the server
    // to proceed with the control of the credential
  })
  .catch(function (err) {
    console.error(err);
  });
```

仕様書
---

| Specification |
| --- |
| Web Authentication: An API for accessing Public Key Credentials - Level 3 # iface-authenticatorassertionresponse |

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

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

関連情報
----

* `AuthenticatorAttestationResponse`: 新しい資格情報を生成する際に得られる種類のレスポンスのインターフェイス
* `AuthenticatorResponse`: 親インターフェイス


HTMLMapElement - Web API

HTMLMapElement
==============

**`HTMLMapElement`** インターフェイスは、（継承によって利用できる、通常のオブジェクトである `HTMLElement` インターフェイスのもの以外に）map 要素のレイアウトと表示を操作するための特別なプロパティとメソッドを提供します。

EventTarget

Node

Element

HTMLElement

HTMLMapElementプロパティ
-----

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

`HTMLMapElement.name` (en-US)

他のコンテキストを参照するための `<map>` 要素を表します。`id` 属性が設定された場合、これは同じ値である必要があります。`null` や空文字列にすることはできません。

`HTMLMapElement.areas` 読取専用

生きた `HTMLCollection` で、この `<map>` に関連付けられた `<area>` 要素を表します。

メソッド
----

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlmapelement |

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

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

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

* HTML element implementing this interface: `<map>`.


HTMLBodyElement - Web API

HTMLBodyElement
===============

**`HTMLBodyElement`** インターフェイスは、（通常の `HTMLElement` インターフェイスから継承されるもの以外に） `<body>` 要素を操作するための特別なプロパティとメソッドを提供します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLBodyElement.aLink`
非推奨

文字列で、アクティブなハイパーリンクの色を表します。

`HTMLBodyElement.background`
非推奨

文字列で、背景画像リソースの場所の説明を表します。これは URI ではないことに注意してください。ただし、一部のブラウザーの一部の古いバージョンはそれを想定しています。

`HTMLBodyElement.bgColor`
非推奨

文字列で、ドキュメントの背景色を表します。

`HTMLBodyElement.link`
非推奨

文字列で、未訪問のリンクの色を表します。

`HTMLBodyElement.text`
非推奨

文字列で、テキストの前景色を表します。

`HTMLBodyElement.vLink`
非推奨

文字列で、訪問済みのリンクの色を表します。

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

*固有のメソッドはありません。 インターフェイスである `HTMLElement` からメソッドを継承しています。*

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

`HTMLElement` のイベントを継承しています。

以下の `Window` の `onXYZ` イベントハンドラープロパティも、 `window` オブジェクトをターゲットとした別名として利用可能です。しかし、これらは `HTMLBodyElement` ではなく、 `window` オブジェクトで直接待ち受けすることをお勧めします。

**メモ:** `addEventListener()` を `HTMLBodyElement` に対して使用しても、以下に示す `onXYZ` イベントハンドラーを動作させることができません。代わりに `window` オブジェクトのイベントを待ち受けしてください。

`HTMLBodyElement.onafterprint`

文書の印刷を開始した後、または印刷プレビューが閉じられた後に発行されます。

`HTMLBodyElement.onbeforeprint`

文書を印刷しようとしているとき、または印刷のためにプレビュしようとしているときに発行されます。

`HTMLBodyElement.onbeforeunload`

ウィンドウ、文書、およびそのリソースがアンロードされようとしているときに発行されます。

`HTMLBodyElement.ongamepadconnected`

ゲームパッドが接続されたことをブラウザーが検出したとき、またはゲームパッドのボタン／軸が初めて使用されたときに発行されます。

`HTMLBodyElement.ongamepaddisconnected`

ゲームパッドが切断されたことをブラウザーが検出したときに発行されます。

`HTMLBodyElement.onhashchange`

URLのフラグメント識別子（URL の `#` で始まる部分とそれに続く部分）が変更されたときに発行されます。

`HTMLBodyElement.onlanguagechange`

ユーザーの優先言語が変更されたときに発行されます。

`HTMLBodyElement.onmessage`

ウィンドウがメッセージを受け取ったときに発行されます。例えば、他の閲覧コンテキストから `Window.postMessage()` を呼び出した場合などに発行されます。

`HTMLBodyElement.onmessageerror`

ウィンドウがデシリアライズできないメッセージを受信したときに発行されます。

`HTMLBodyElement.onoffline`

ブラウザーがネットワークにアクセスできなくなり、 `Navigator.onLine` の値が `false` に切り替わったときに発行されます。

`HTMLBodyElement.ononline`

ブラウザーがネットワークにアクセスし、 `Navigator.onLine` の値が `true` に切り替わったときに発行されます。

`HTMLBodyElement.onpagehide`

ブラウザーがセッションの履歴から別のページを表示する過程で、現在のページを非表示にしたときに発行されます。

`HTMLBodyElement.onpageshow`

ブラウザーがナビゲーションによってウィンドウの文書を表示したときに発行されます。

`HTMLBodyElement.onpopstate`

ユーザーがセッション履歴を操作している間に、アクティブな履歴項目が変更されたときに発行されます。

`HTMLBodyElement.onrejectionhandled`

JavaScript のプロミス (`Promise`) が拒否され、拒否の処理が行われたときに発行されます。

`HTMLBodyElement.onstorage`

他の文書のコンテキストでストレージ領域 (`localStorage`) が変更されたときに発行されます。

`HTMLBodyElement.onunhandledrejection`

プロミス (`Promise`) が拒否されたが、拒否の処理が行われなかった場合に発行されます。

`HTMLBodyElement.onunload`

ドキュメントがアンロードされるときに発行されます。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlbodyelement |

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

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

関連情報
----

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


HTMLDataListElement - Web API

HTMLDataListElement
===================

**`HTMLDataListElement`** インターフェイスは、（継承元である `HTMLElement` オブジェクトインターフェイスからの継承によって利用できるもの以外に） `<datalist>` 要素およびその内容を操作するための特別なプロパティを提供します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLDataListElement.options` 読取専用

含まれる option 要素の集合を表す `HTMLCollection` です。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmldatalistelement |

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

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

関連情報
----

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


FileSystemSync - Web API

FileSystemSync
==============

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

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

ファイルおよびディレクトリー項目 API では、 `FileSystemSync` オブジェクトはファイルシステムを表します。 2 つのプロパティがあります。

**メモ:** このインターフェイスは非推奨で、標準路線ではなくなりました。
 *もう使用しないでください。* 代わりにファイルおよびディレクトリー項目 APIを使用してください。

基本コンセプト
-------

`FileSystemSync` オブジェクトは API 全体へのゲートウェイであり、頻繁に使用します。したがって、参照を取得したら、オブジェクトをグローバル変数またはクラスプロパティにキャッシュします。

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

`name` 読取専用
Non-standard

非推奨

文字列で、ファイルシステムの名前を示します。名前は公開されたファイルシステムのリスト内で一意でなければなりません。

`root` 読取専用
Non-standard

非推奨

`DirectoryEntry` で、このファイルシステムのルートディレクトリーを表します。

仕様書
---

この機能はもうどの仕様にも含まれていません。標準化される予定もありません。

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

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

関連情報
----

* ファイルおよびディレクトリー項目 API
* ファイルおよびディレクトリー項目 API 入門


ドキュメントオブジェクトモデル (DOM) - Web API

ドキュメントオブジェクトモデル (DOM)
=====================

**ドキュメントオブジェクトモデル** (**Document Object Model**, **DOM**) は、ウェブページを表す HTML のような文書の構造をメモリー内に表現することで、ウェブページとスクリプトやプログラミング言語を接続するものです。ふつうは JavaScript を使用しますが、HTML、SVG、XML などの文書をオブジェクトとしてモデリングすることはコア JavaScript 言語の一部ではありません。

DOM は文書を論理的なツリーで表現します。ツリーのそれぞれの枝はノードで終わっており、それぞれのノードがオブジェクトを含んでいます。 DOM のメソッドでプログラム的にツリーにアクセスできます。これにより、文書構造やスタイルやコンテンツを変更することができます。

ノードにはイベントハンドラーを割り当てることができます。イベントが発生すると、イベントハンドラーが実行されます。

DOM とは何であるか、どのように文書を表現するのかについてもっと学習するのであれば、DOM 入門をご覧ください。

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

* `AbortController`
* `AbortSignal`
* `AbstractRange`
* `Attr`
* `CDATASection`
* `CharacterData`
* `Comment`
* `CustomEvent`
* `Document`
* `DocumentFragment`
* `DocumentType`
* `DOMError`
非推奨
* `DOMException`
* `DOMImplementation`
* `DOMParser`
* `DOMPoint`
* `DOMPointReadOnly`
* `DOMRect`
* `DOMTokenList`
* `Element`
* `Event`
* `EventTarget`
* `HTMLCollection`
* `MutationObserver`
* `MutationRecord`
* `NamedNodeMap`
* `Node`
* `NodeIterator`
* `NodeList`
* `ProcessingInstruction`
* `Range`
* `StaticRange`
* `Text`
* `TextDecoder`
* `TextEncoder`
* `TimeRanges`
* `TreeWalker`
* `XMLDocument`
### 廃止された DOM インターフェイス

ドキュメントオブジェクトモデルは高度に単純化されてきています。このため、 DOM レベル 3 以前の仕様書にあった以下のインターフェイスは削除されています。一部が再導入されるかどうかはまだ不明ですが、当面は廃止されたと考え、使用を避けてください。

* `DOMConfiguration`
* `DOMErrorHandler`
* `DOMImplementationList`
* `DOMImplementationRegistry`
* `DOMImplementationSource`
* `DOMLocator`
* `DOMObject`
* `DOMSettableTokenList`
* `DOMUserData`
* `ElementTraversal`
* `Entity`
* `EntityReference`
* `NameList`
* `Notation`
* `TypeInfo`
* `UserDataHandler`
HTML DOM
--------

HTML を含む文書は、 HTML 仕様で拡張した様々な HTML 固有の機能を含む `Document` インターフェイスを使用して記述されます。具体的には、 `Element` インターフェイスは拡張されて `HTMLElement` を始めとするサブクラスになっており、それぞれが要素の一つ (または深く関係した同類のもの) を表します。

HTML DOM API によって、タブやウィンドウ、 CSS スタイルやスタイルシート、ブラウザーの履歴など、様々なブラウザーの機能にアクセスすることができます。これらのインターフェイスの詳細については、 HTML DOM API のドキュメントにあります。

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

### SVG 要素のインターフェイス

* `SVGAElement` (en-US)
* `SVGAnimationElement` (en-US)
* `SVGAnimateElement` (en-US)
* `SVGAnimateColorElement` (en-US)
非推奨
* `SVGAnimateMotionElement` (en-US)
* `SVGAnimateTransformElement` (en-US)
* `SVGCircleElement` (en-US)
* `SVGClipPathElement` (en-US)
* `SVGComponentTransferFunctionElement` (en-US)
* `SVGCursorElement` (en-US)
* `SVGDefsElement` (en-US)
* `SVGDescElement` (en-US)
* `SVGElement`
* `SVGEllipseElement` (en-US)
* `SVGFEBlendElement` (en-US)
* `SVGFEColorMatrixElement` (en-US)
* `SVGFEComponentTransferElement` (en-US)
* `SVGFECompositeElement` (en-US)
* `SVGFEConvolveMatrixElement` (en-US)
* `SVGFEDiffuseLightingElement` (en-US)
* `SVGFEDisplacementMapElement` (en-US)
* `SVGFEDistantLightElement` (en-US)
* `SVGFEDropShadowElement` (en-US)
* `SVGFEFloodElement` (en-US)
* `SVGFEFuncAElement` (en-US)
* `SVGFEFuncBElement` (en-US)
* `SVGFEFuncGElement` (en-US)
* `SVGFEFuncRElement` (en-US)
* `SVGFEGaussianBlurElement` (en-US)
* `SVGFEImageElement` (en-US)
* `SVGFEMergeElement` (en-US)
* `SVGFEMergeNodeElement` (en-US)
* `SVGFEMorphologyElement` (en-US)
* `SVGFEOffsetElement` (en-US)
* `SVGFEPointLightElement` (en-US)
* `SVGFESpecularLightingElement` (en-US)
* `SVGFESpotLightElement` (en-US)
* `SVGFETileElement` (en-US)
* `SVGFETurbulenceElement` (en-US)
* `SVGFilterElement` (en-US)
* `SVGFilterPrimitiveStandardAttributes`
* `SVGFontElement`
非推奨
* `SVGFontFaceElement` (en-US)
非推奨
* `SVGFontFaceFormatElement` (en-US)
非推奨
* `SVGFontFaceNameElement` (en-US)
非推奨
* `SVGFontFaceSrcElement` (en-US)
非推奨
* `SVGFontFaceUriElement` (en-US)
非推奨
* `SVGForeignObjectElement` (en-US)
* `SVGGElement` (en-US)
* `SVGGeometryElement` (en-US)
* `SVGGlyphElement` (en-US)
非推奨
* `SVGGlyphRefElement` (en-US)
非推奨
* `SVGGradientElement` (en-US)
* `SVGGraphicsElement`
* `SVGHatchElement`
Experimental
* `SVGHatchpathElement`
Experimental
* `SVGHKernElement` (en-US)
非推奨
* `SVGImageElement` (en-US)
* `SVGLinearGradientElement` (en-US)
* `SVGLineElement` (en-US)
* `SVGMarkerElement` (en-US)
Experimental
* `SVGMaskElement` (en-US)
* `SVGMetadataElement` (en-US)
* `SVGMissingGlyphElement` (en-US)
非推奨
* `SVGMPathElement` (en-US)
* `SVGPathElement` (en-US)
* `SVGPatternElement` (en-US)
* `SVGPolylineElement` (en-US)
* `SVGPolygonElement` (en-US)
* `SVGRadialGradientElement` (en-US)
* `SVGRectElement` (en-US)
* `SVGScriptElement` (en-US)
* `SVGSetElement` (en-US)
* `SVGStopElement` (en-US)
* `SVGStyleElement` (en-US)
* `SVGSVGElement` (en-US)
* `SVGSwitchElement` (en-US)
* `SVGSymbolElement` (en-US)
* `SVGTextContentElement` (en-US)
* `SVGTextElement`
* `SVGTextPathElement` (en-US)
* `SVGTextPositioningElement` (en-US)
* `SVGTitleElement` (en-US)
* `SVGTRefElement` (en-US)
非推奨
* `SVGTSpanElement` (en-US)
* `SVGUseElement` (en-US)
* `SVGViewElement` (en-US)
* `SVGVKernElement` (en-US)
非推奨
### SVG データ型のインターフェイス

SVG のプロパティと属性の定義で使用されるデータタイプの DOM API を次に示します。

#### 静的型

* `SVGAngle` (en-US)
* `SVGColor`
非推奨
* `SVGICCColor`
非推奨
* `SVGElementInstance`
* `SVGElementInstanceList`
* `SVGLength` (en-US)
* `SVGLengthList` (en-US)
* `SVGNameList`
* `SVGNumber` (en-US)
* `SVGNumberList` (en-US)
* `SVGPaint`
* `SVGPathSeg`
非推奨
* `SVGPathSegClosePath`
非推奨
* `SVGPathSegMovetoAbs`
非推奨
* `SVGPathSegMovetoRel`
非推奨
* `SVGPathSegLinetoAbs`
非推奨
* `SVGPathSegLinetoRel`
非推奨
* `SVGPathSegCurvetoCubicAbs`
非推奨
* `SVGPathSegCurvetoCubicRel`
非推奨
* `SVGPathSegCurvetoQuadraticAbs`
非推奨
* `SVGPathSegCurvetoQuadraticRel`
非推奨
* `SVGPathSegArcAbs`
非推奨
* `SVGPathSegArcRel`
非推奨
* `SVGPathSegLinetoHorizontalAbs`
非推奨
* `SVGPathSegLinetoHorizontalRel`
非推奨
* `SVGPathSegLinetoVerticalAbs`
非推奨
* `SVGPathSegLinetoVerticalRel`
非推奨
* `SVGPathSegCurvetoCubicSmoothAbs`
非推奨
* `SVGPathSegCurvetoCubicSmoothRel`
非推奨
* `SVGPathSegCurvetoQuadraticSmoothAbs`
非推奨
* `SVGPathSegCurvetoQuadraticSmoothRel`
非推奨
* `SVGPathSegList`
非推奨
* `SVGPoint` (en-US)
非推奨
* `SVGPointList` (en-US)
非推奨
* `SVGPreserveAspectRatio` (en-US)
* `SVGRect`
非推奨
* `SVGStringList`
* `SVGTransform` (en-US)
* `SVGTransformList` (en-US)

#### アニメーション型

* `SVGAnimatedAngle` (en-US)
* `SVGAnimatedBoolean` (en-US)
* `SVGAnimatedEnumeration` (en-US)
* `SVGAnimatedInteger` (en-US)
* `SVGAnimatedLength` (en-US)
* `SVGAnimatedLengthList` (en-US)
* `SVGAnimatedNumber` (en-US)
* `SVGAnimatedNumberList` (en-US)
* `SVGAnimatedPathData`
非推奨
* `SVGAnimatedPreserveAspectRatio` (en-US)
* `SVGAnimatedRect` (en-US)
* `SVGAnimatedString` (en-US)
* `SVGAnimatedTransformList` (en-US)
### SMIL 関連インターフェイス

* `ElementTimeControl`
* `TimeEvent` (en-US)
### その他 SVG インターフェイス

* `GetSVGDocument`
* `ShadowAnimation`
* `SVGColorProfileRule`
非推奨
* `SVGCSSRule`
非推奨
* `SVGDocument`
* `SVGException`
非推奨
* `SVGFitToViewBox`
* `SVGLocatable`
非推奨
* `SVGRenderingIntent` (en-US)
非推奨
* `SVGUnitTypes` (en-US)
* `SVGUseElementShadowRoot`
* `SVGViewSpec`
非推奨
* `SVGZoomEvent`
非推奨
仕様書
---

| Specification |
| --- |
| DOM Standard  |

関連情報
----

* DOM の例
* CSS オブジェクトモデル (CSSOM)


HTMLLabelElement - Web API

HTMLLabelElement
================

**`HTMLLabelElement`** インターフェイスは `<label>` 要素を操作するための独自のプロパティへのアクセスを提供します。基底となる `HTMLElement` インターフェイスからメソッドとプロパティを継承しています。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLLabelElement.control` 読取専用

`HTMLElement` で、このラベルが関連付けられているコントロールを表します。

`HTMLLabelElement.form` 読取専用

`HTMLFormElement` オブジェクトで、このラベル付きコントロールが関連付けられているフォームを表します。関連付けられているコントロールがない場合や、コントロールがフォームに関連付けられていない場合は `null` になります。言い換えれば、これは `HTMLLabelElement.control.form` のショートカットです。

`HTMLLabelElement.htmlFor`

文字列で、ラベル付けしたコントロールの ID が入ります。これは `for` 属性を反映します。

**メモ:** プログラムから `for` 属性を設定する場合は、 `htmlFor` を使用してください。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmllabelelement |

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

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

関連情報
----

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


StyleSheet - Web API

StyleSheet
==========

`StyleSheet` インターフェイスを実装するオブジェクトは、単一のスタイルシートを表します。 CSS スタイルシートは、より特殊化された `CSSStyleSheet` インターフェイスを実装します。

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

`StyleSheet.disabled`

論理値で、現在のスタイルシートが適用されているかどうかを示します。

`StyleSheet.href` 読取専用

文字列で、スタイルシートの位置を返します。

`StyleSheet.media` 読取専用

`MediaList` で、スタイル情報の宛先メディアを返します。

`StyleSheet.ownerNode` 読取専用

`Node` で、このスタイルシートを現在の文書に関連付けているノードを返します。

`StyleSheet.parentStyleSheet` 読取専用

存在する場合、これをインクルードしている `StyleSheet` を返します。ない場合は `null` を返します。

`StyleSheet.title` 読取専用

現在のスタイルシートのアドバイザリータイトルを表す文字列を返します。

`StyleSheet.type` 読取専用

このスタイルシートのスタイルシート言語を表す文字列を返す。

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-stylesheet-interface |

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

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

関連情報
----

* `CSSStyleSheet`


Web Bluetooth API - Web API

Web Bluetooth API
=================

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

Web Bluetooth API は、Bluetooth Low Energy の周辺機器に接続して操作する機能を提供します。

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

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

`Bluetooth`

指定のオプションに合致する `BluetoothDevice` オブジェクトで解決する `Promise` を返します。

`BluetoothCharacteristicProperties`

特定の `BluetoothRemoteGATTCharacteristic` のプロパティを提供します。

`BluetoothDevice`

特定のスクリプト実行環境内の Bluetooth デバイスを表します。

`BluetoothRemoteGATTCharacteristic`

GATT キャラクタリスティックを表します。これは、周辺機器のサービスに関する詳細情報を提供する基本的なデータ要素です。

`BluetoothRemoteGATTDescriptor`

GATT ディスクリプターを表します。これは、キャラクタリスティックの値に関する詳細情報を提供します。

`BluetoothRemoteGATTServer`

リモートデバイス上の GATT サーバーを表します。

`BluetoothRemoteGATTService`

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

仕様書
---

| Specification |
| --- |
| Web Bluetooth # bluetooth |

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

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


AudioParam - Web API

AudioParam
==========

Web Audio API の `AudioParam` インターフェイスは、オーディオ関連のパラメーターを表します。通常は `AudioNode` のパラメーター（`GainNode.gain` など）です。

`AudioParam` は特定の値または値の変化に設定でき、特定の時間に特定のパターンに従って発生するようにスケジュールできます。

それぞれの `AudioParam` には、いつ、どのように値を変更するかを定義するイベントのリストを持っており、最初は空です。このリストが空でない場合、 `AudioParam.value` 属性を使用した変更は無視されます。このイベントのリストにより、任意のタイムラインベースのオートメーションカーブを使用して、とても正確な時間に変更をスケジュールすることができます。使用される時間は `AudioContext.currentTime` で定義されたものです。

AudioParam の種類
--------------

`AudioParam` には *a-rate* パラメーターと *k-rate* パラメーターの 2 種類があります。それぞれの `AudioNode` は、そのパラメーターが *a-rate* と *k-rate* のどちらであるかを仕様で定義しています。

### a-rate

*a-rate* の `AudioParam` は、音声信号の各サンプルフレームの現在の音声パラメーターの値を導きます。

### k-rate

*k-rate* の `AudioParam` は処理されるブロック全体、つまり 128 サンプルフレームに対して同じオーディオパラメーターの初期値を使用します。言い換えれば、ノードによって処理される音声のすべてのフレームに同じ値が適用されます。

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

`AudioParam.defaultValue` 読取専用

`AudioParam` を作成する特定の `AudioNode` によって定義された属性の初期値を表します。

`AudioParam.maxValue` 読取専用

パラメーターの公称（有効）範囲の最大可能値を表します。

`AudioParam.minValue` 読取専用

パラメーターの公称（有効）範囲の最小可能値を表します。

`AudioParam.value`

パラメーターの現在の値を浮動小数点値として表します。 最初は `defaultValue` の値に設定されています。

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

`AudioParam.setValueAtTime()`

`AudioContext.currentTime` に対して正確な時間に `AudioParam` の値の変更をスケジュールします。 新しい値は `value` 引数によって与えられます。

`AudioParam.linearRampToValueAtTime()`

`AudioParam` の値を徐々に線形に変化させるようにスケジュールします。 変更は、*前のイベント*に指定された時間に開始され、 `value` 引数で指定された新しい値へのランプ関数に従って進み、 `endTime` 引数で指定された時間に新しい値に到達します。

`AudioParam.exponentialRampToValueAtTime()`

`AudioParam` の値の段階的な指数関数的な変化をスケジュールします。 変更は*前のイベント*に指定された時間に開始され、 `value` 引数で指定された新しい値への指数関数的な増加をたどり、 `endTime` 引数で指定された時間に新しい値に到達します。

`AudioParam.setTargetAtTime()`

`AudioParam` の値に対する変更の開始をスケジュールします。 変更は `startTime` で指定された時間に開始し、 `target` 引数で指定された値に向かって指数関数的に移動します。 指数関数的な減衰率は、 `timeConstant` 引数によって定義されます。これは、秒単位で測定された時間です。

`AudioParam.setValueCurveAtTime()`

`AudioParam` の値が、指定された開始時間から開始し、指定された期間にわたって、指定された間隔に収まるようにスケーリングされた浮動小数点数の配列で定義された一連の値に従うようにスケジュールします。

`AudioParam.cancelScheduledValues()`

`AudioParam` に対する今後予定されているすべての変更をキャンセルします。

`AudioParam.cancelAndHoldAtTime()`

`AudioParam` に対して将来予定されているすべての変更をキャンセルしますが、他の方法でさらに変更が加えられるまで、指定された時間にその値を保持します。

例
-

まず、ゲイン値を設定した `GainNode` の基本的な例です。 値はオーディオのサンプルフレームごとに異なるように設定される可能性があるため、ゲインは *a-rate* の `AudioParam` の例です。

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

const gainNode = audioCtx.createGain();
gainNode.gain.value = 0;
```

次に、いくつかの値が設定された `DynamicsCompressorNode` (en-US) を示す例です。 値はオーディオブロック全体に一度に設定されるため、これらは *k-rate* の `AudioParam` の例です。

```js
const compressor = audioCtx.createDynamicsCompressor();
compressor.threshold.setValueAtTime(-50, audioCtx.currentTime);
compressor.knee.setValueAtTime(40, audioCtx.currentTime);
compressor.ratio.setValueAtTime(12, audioCtx.currentTime);
compressor.attack.setValueAtTime(0, audioCtx.currentTime);
compressor.release.setValueAtTime(0.25, audioCtx.currentTime);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # AudioParam |

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

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

関連情報
----

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


SVGTextElement - Web API

SVGTextElement
==============

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

`SVGTextElement` インタフェースは `<text>` 要素に対応するインタフェースです。

### インタフェースの概要

| 実装インタフェース | `SVGTextPositioningElement` (en-US) 、 `SVGTransformable` |
| --- | --- |
| メソッド | *無し* |
| プロパティ | *無し* |
| 標準文書 | SVG 1.1 (2nd Edition) |

プロパティ
-----

固有のプロパティはありません。

メソッド
----

固有のメソッドはありません。

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

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

関連情報
----

* `<text>` SVG 要素


PaymentMethodChangeEvent - Web API

PaymentMethodChangeEvent
========================

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

**`PaymentMethodChangeEvent`** は Payment Request API のインターフェイスで、ユーザーが支払方法を切り替えたとき (例えば、ユーザーが Apple Pay を使用する際に、「その店舗の」カードを選択する場合) に実行される一部の支払いハンドラーが発生する `paymentmethodchange` イベントを説明します。

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

`PaymentMethodChangeEvent()` (en-US)

新しい `PaymentMethodChangeEvent` オブジェクトを作成して返し、オプションで与えられた `PaymentMethodChangeEventInit` 辞書から得た値で初期化します。

プロパティ
-----

*以下のプロパティに加えて、このインターフェイスは `PaymentRequestUpdateEvent` から継承したプロパティを含みます。*

`methodDetails` (en-US) 読取専用  安全なコンテキスト用

支払方法の変更時に利用できる支払方法に依存したデータを含むオブジェクトです。そのような情報が利用できない場合は、この値は `null` です。

`methodName` (en-US) 読取専用  安全なコンテキスト用

`DOMString` で、特定の支払方法を固有に識別する文字列である支払方法識別子が入ります。この識別子はふつう、支払い手続で使用される URL ですが、 `basic-card` のような標準化された文字列にすることもできます。既定値は空文字列、 `""` です。

メソッド
----

*このインターフェイスは `PaymentRequestUpdateEvent` から継承したメソッドを含みます。*

仕様書
---

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

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

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


DOMImplementation - Web API

DOMImplementation
=================

**`DOMImplementation`** インターフェイスは、特定の文書に依存しないメソッドを提供するオブジェクトを表します。こうしたオブジェクトは `Document.implementation` プロパティで返されます。

プロパティ
-----

*このインターフェイスは特定のプロパティを持たず、継承もしていません。*

メソッド
----

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

`DOMImplementation.createDocument()`

`XMLDocument` を作成して返します。

`DOMImplementation.createDocumentType()`

`DocumentType` を作成して返します。

`DOMImplementation.createHTMLDocument()`

HTML `Document` を作成して返します。

`DOMImplementation.hasFeature()`
非推奨

指定された機能に対応しているかどうかを示す論理値を返します。この関数は信頼性が低く、互換性のためだけに用意されています。SVG 関連のクエリーを除けば、常に `true` を返します。古いブラウザーはその動作にまったく一貫性がありません。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-domimplementation |

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

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

関連情報
----

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


AudioTrackList - Web API

AudioTrackList
==============

**`AudioTrackList`** インターフェイスは、所与の HTML メディア要素内に含まれる音声トラックのリストを表すために使用します。 各トラックはリスト内の別々の `AudioTrack` オブジェクトで表します。

`HTMLMediaElement.audioTracks` を使用してこのオブジェクトのインスタンスを取得します。 個々のトラックは、配列構文を使用してアクセスできます。

EventTarget

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

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

`length` 読取専用

リスト内のトラック数。

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

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

`getTrackById()`

指定された文字列と一致する `id` を持つ `AudioTrackList` 内で見つかった `AudioTrack` を返します。 一致が見つからない場合は、`null` を返します。

イベント
----

`addtrack`

新しい音声トラックがメディア要素に追加されたときに発生します。

`change`

トラックが有効または無効にされたときに発生します。

`removetrack`

音声トラックがメディア要素から取り除かれたときに発生します。

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

`AudioTrackList` を使用すると、メディア要素にある音声トラックに直接アクセスできるだけでなく、`addtrack` イベントと `removetrack` イベントにイベントハンドラーを設定できるため、メディア要素のストリームにトラックが追加されたときまたは取り除かれたときに検出できます。 詳細と例については、`addtrack` と `removetrack` を参照してください。

例
-

### メディア要素の音声トラックリストの取得

メディア要素の `AudioTrackList` を取得するには、その `audioTracks` プロパティを使用します。

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

### トラック数の変化の監視

この例では、利用可能なチャンネル数に関する情報を表示するアプリがあります。 それを最新に保つために、 `addtrack` イベントと `removetrack` イベントのためのハンドラを設定しています。

```js
audioTracks.onaddtrack = updateTrackCount;
audioTracks.onremovetrack = updateTrackCount;

function updateTrackCount(event) {
  trackCount = audioTracks.length;
  drawTrackCountIndicator(trackCount);
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # audiotracklist-and-videotracklist-objects |

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

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


ブロードキャストチャンネル API - Web API

ブロードキャストチャンネル API
=================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**ブロードキャストチャンネル API** (Broadcast Channel API) を使用すると、同じオリジンの閲覧コンテキスト（つまり、*ウィンドウ*、*タブ*、*フレーム*、*iframe*）やワーカー間で、基本的な通信を行うことができます。

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

`BroadcastChannel` オブジェクトを作成することで、投稿されたメッセージを受け取ることができます。通信したいフレームやワーカーへの参照を保持する必要はありません。同じ名前の `BroadcastChannel` を自分自身で構築することで特定のチャンネルに「加入 (subscribe)」し、それらすべての間で双方向の通信をすることができます。

![ブロードキャストチャンネル API の原理](/ja/docs/Web/API/Broadcast_Channel_API/broadcastchannel.png)

ブロードキャストチャンネルのインターフェイス
----------------------

### チャンネルの作成または参加

クライアントは `BroadcastChannel` オブジェクトを作成することで、特定のブロードキャストチャンネルに参加します。コンストラクターは一つだけ引数として、チャンネルの*名前*を取ります。 ブロードキャストチャンネルに最初に接続した場合は、基になるリソースが作成されます。

```js
// ブロードキャストチャンネルへの接続
const bc = new BroadcastChannel("test\_channel");
```

### メッセージの送信

作成した `BroadcastChannel` オブジェクトの `postMessage()` メソッドを呼び出すだけで十分です。 このメソッドは任意のオブジェクトを引数として取ります。文字列のメッセージの例を示します。

```js
// 非常に単純なメッセージの送信例
bc.postMessage("This is a test message.");
```

チャンネルに送信されたデータは、構造化複製アルゴリズムを使用してシリアライズされます。つまり、多種多様なデータオブジェクトを自分でシリアライズすることなく、安全に送信することができるのです。

API はメッセージに意味づけをしないので、どのようなメッセージを期待し、それをどう処理するかはコード次第です。

### メッセージの受信

メッセージが投稿されると、 `message` イベントがこのチャンネルに接続されているそれぞれの `BroadcastChannel` オブジェクトに送出されます。このイベントに対して `onmessage` イベントハンドラーを使用して関数を実行することができます。

```js
// イベントをコンソールに出力するだけのハンドラー
bc.onmessage = (event) => {
  console.log(event);
};
```

### チャンネルの切断

チャンネルを去るには、オブジェクトの `close()` メソッドを呼び出す必要があります。 これにより、オブジェクトと基になるチャンネル間のリンクを切断し、ガベージコレクションをすることができます。

```js
// チャンネルの切断
bc.close();
```

まとめ
---

ブロードキャストチャンネル API は、自己完結型のインターフェイスによってコンテキスト間通信が可能です。ユーザーがログインしたときやログアウトしたときなど、同じオリジン内の他のタブでのユーザーの操作を検出するために使用することができます。

メッセージングプロトコルは定義されておらず、様々な閲覧コンテキストがそれ自体を実装する必要があります。 ネゴシエーションも仕様からの要件もありません。

仕様書
---

| Specification |
| --- |
| HTML Standard # broadcasting-to-other-browsing-contexts |

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

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

関連情報
----

* `BroadcastChannel`: これを実装するインターフェイス。


Web Locks API - Web API

Web Locks API
=============

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

Web Locks API を用いると、1 個のタブまたはワーカーで実行されているスクリプトが非同期でロックを獲得し、処理の実行中保持し、その後解放することができます。ロックが保持されている間は、同じオリジンで実行されている他のスクリプトは同じロックを獲得できず、複数のタブやワーカーで実行されているウェブアプリケーションが処理やリソースの使用を協調して行うことができます。

Web Locks の概念と使用法
-----------------

ロックは共有されうるリソースを表す抽象概念であり、ウェブアプリケーションが設定する名前によって識別されます。たとえば、複数のタブで実行されるウェブアプリケーションが 1 個のタブでのみネットワークと Indexed DB の間のデータ同期を行うことを保証したい場合、それぞれのタブが `"my_net_db_sync"` ロックの獲得を試みることができますが、1 個のタブのみが獲得に成功するでしょう。(リーダー選出パターン)

この API は、以下の流れで使用します。

1. ロックを要求します。
2. ロックを保持し、非同期のタスクで処理を実行します。
3. タスクが完了すると、ロックが自動的に解放されます。

```js
navigator.locks.request("my\_resource", async (lock) => {
  // ロックが獲得された
  await do\_something();
  await do\_something\_else();
  // ここでロックが解放される
});
```

ロックを確保している間は、同じ実行コンテキストや、別のタブやワーカーからの同じロックの要求はキューに投入されます。ロックが解放されたときのみ、最初にキューに投入された要求がロックを獲得します。

この API は、以下を含む必要に応じて使用できるオプションの機能を提供します。

* 非同期タスクから値を返す
* 共有および排他ロックモード
* 条件付き獲得
* オリジン内のロックの状態を得て診断を行う
* デッドロック対策用の避難口

ロックのスコープはオリジン内です。`https://example.com` 由来のタブで獲得されるロックは、別のオリジンである `https://example.org:8080` 由来のタブで獲得されるロックには影響しません。

主なエントリーポイントは、ロックを要求する `navigator.locks.request()` です。このメソッドは、ロックの名前、省略可能なオプション一式、コールバックをとります。コールバックは、ロックが獲得されると呼び出されます。ロックはコールバックから帰ると自動的に解放されるので、通常コールバックには *非同期関数* を用います。この場合、ロックは非同期関数の実行が完全に完了するまで解放されません。

`request()` 関数自体も、ロックが解放されると解決する `Promise` を返します。非同期関数内では、呼び出しに `await` を用いることで非同期のコードの流れを直線的にできます。

例:

```js
await do\_something\_without\_lock();

// ロックを要求する
await navigator.locks.request("my\_resource", async (lock) => {
  // ロックを獲得した
  await do\_something\_with\_lock();
  await do\_something\_else\_with\_lock();
  // ここでロックが解放される
});
// ロックが解放された

await do\_something\_else\_without\_lock();
```

### オプション

ロックの要求時、いくつかのオプションを渡すことができます。

* `mode`: デフォルトのモードは `"exclusive"` ですが、`"shared"` を指定することができます。`"exclusive"` のロックを保持できるのは 1 個だけですが、`"shared"` で要求された場合は同時に複数のロックが獲得できます。これにより、readers-writer pattern を実装できます。
* `signal`: **`AbortSignal`** を渡すことができ、ロックの要求を中止できるようにします。これにより、要求のタイムアウトを実装できます。
* `ifAvailable`: 指定された場合は、ロックを待たずにすぐ獲得できない場合はロックの要求が失敗します。コールバックは `null` とともに呼び出されます。
### 監視

`navigator.locks.query()` メソッドにより、スクリプトからオリジンのロックマネージャーの状態を観察できます。これは、ロックが獲得できない理由を特定するなどのデバッグに役立つ可能性があります。結果はロックマネージャーの状態のスナップショットであり、スナップショットが取られた時点での保持されているロック、要求されているロック、それぞれについての追加情報 (モードなど) を特定できます。

### 高度な使用法

ロックを任意の期間保持するなどのより複雑な場合には、コールバックはスクリプトによって明示的に解決される `Promise` を返すことができます。

```js
// Promise の制御関数を取り込む
let resolve, reject;
const p = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
});

// ロックを要求する
navigator.locks.request(
  "my\_resource",
  // ロックを獲得した
  (lock) => p, // これで、ロックは resolve() または reject() を呼ぶまで確保される
);
```

### デッドロック

デッドロックは、それぞれの部分が満たされない要求を待機しているため、処理が進まなくなると発生します。これは、複数のロックがバラバラの順番で要求されるなど、この API の複雑な使用例で起こる可能性があります。タブ 1 がロック A を保持し、タブ 2 がロック B を保持し、さらにタブ 1 がロック B を、タブ 2 がロック A を獲得しようとすると、どちらのリクエストも満たすことはできません。ウェブアプリケーションは、複数の戦略でこれを回避できます。たとえば、ロックの要求を入れ子にしないことを保証する、常に決まった順番で要求を行う、タイムアウトを設けるなどです。なお、このようなデッドロックはそれらのロック自身とそれらに依存するコードのみに影響を与えます。ブラウザー・他のタブ・ページ内の他のスクリプトには影響しません。

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

`Lock`

`LockManager.request()` のコールバックに渡され、要求したロックの名前とモードを提供します。

`LockManager`

新しい `Lock` オブジェクトの要求や、既存の Lock オブジェクトの取得を行うメソッドを提供します。LockManager のインスタンスを得るには、`navigator.locks` を参照します。

仕様書
---

| Specification |
| --- |
| Web Locks API  |

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

### api.LockManager

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

### api.Lock

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


PushMessageData - Web API

PushMessageData
===============

**`PushMessageData`** はプッシュ API のインターフェイスで、さまざまな形式でサーバーから送信されるプッシュテータを取得する方法を提供します。

フェッチ API の同様のメソッドが 1 回しか呼び出せないのと異なり、これらは複数回呼び出せます。

プッシュ API を通して受け取ったメッセージはプッシュサービスによって暗号化されて送信され、`PushMessageData` インターフェースのメソッドで利用可能になる前にブラウザーによって自動的に復号されます。

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

なし。

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

`PushMessageData.arrayBuffer()`

データを `ArrayBuffer` オブジェクトとして抜き出します。

`PushMessageData.blob()`

データを `Blob` オブジェクトとして抜き出します。

`PushMessageData.json()`

データを JSON オブジェクトとして抜き出します。

`PushMessageData.text()`

データをプレーンテキスト文字列として抜き出します。

例
-

```js
self.addEventListener("push", (event) => {
  const obj = event.data.json();

  if (obj.action === "subscribe" || obj.action === "unsubscribe") {
    fireNotification(obj, event);
    port.postMessage(obj);
  } else if (obj.action === "init" || obj.action === "chatMsg") {
    port.postMessage(obj);
  }
});
```

仕様書
---

| Specification |
| --- |
| Push API # pushmessagedata-interface |

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

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


AudioWorklet - Web API

AudioWorklet
============

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

ウェブオーディオ API の **`AudioWorklet`** インターフェイスは、別のスレッドで実行して非常に低遅延の音声処理を提供するカスタム音声処理スクリプトを提供するのに使われます。

このワークレットのコードはグローバル実行コンテキスト `AudioWorkletGlobalScope` で、ワークレットと他の音声ノードで共有のウェブオーディオスレッドで実行されます。

音声コンテキストの `AudioWorklet` のインスタンスには、`BaseAudioContext.audioWorklet` プロパティを通じてアクセスできます。

Worklet

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

*`AudioWorklet` インターフェイスは自身のプロパティを定義していませんが、`Worklet` のプロパティを継承しています。*

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

*このインターフェイスは `Worklet` からメソッドを継承しています。`AudioWorklet` インターフェイスは自身のメソッドを定義していません。*

イベント
----

*`AudioWorklet` には反応するイベントがありません。*

例
-

カスタム音声ノードを作成する完全な例は、`AudioWorkletNode` を参照してください。

仕様書
---

| Specification |
| --- |
| Web Audio API # AudioWorklet |

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

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

関連情報
----

* `AudioWorkletGlobalScope` — `AudioWorklet` のグローバル実行コンテキスト
* ウェブオーディオ API
* Web Audio API の使用
* AudioWorklet の使用 (en-US)


URL - Web API

URL
===

**`URL`** インターフェイスは、URL の解釈、構築、正規化、およびエンコードに使用します。 URL のコンポーネントを簡単に読み取って変更できるプロパティを提供することで機能します。

通常、新しい `URL` オブジェクトを作成するにはコンストラクターを呼び出すときに URL を文字列として指定するか、相対 URL とベース URL を指定します。その後、解釈された URL のコンポーネントを簡単に読み取ったり、URL を変更したりすることができます。

ブラウザーがまだ `URL()` コンストラクターに対応していない場合は、`Window` インターフェイスの `URL` プロパティを使用して URL オブジェクトにアクセスできます。対象とするブラウザーのいずれかに、この接頭辞を付ける必要があるかどうかを確認してください。

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

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

`URL()`

絶対 URL 文字列、または相対 URL 文字列とベース URL 文字列を使用して指定された URL を参照する `URL` オブジェクトを作成して返します。

プロパティ
-----

`hash`

`'#'` に続いて URL のフラグメント識別子の入った文字列です。

`host`

ドメイン（*ホスト名*）に続いて（ポートが指定されている場合）、`':'` と URL の*ポート番号*の入った文字列。

`hostname`

URL のドメインの入った文字列です。

`href`

URL 全体の入った文字列を返す文字列化子です。

`origin` 読取専用

URL のオリジン、つまりそのスキーム、ドメイン、およびポート番号の入った文字列を返します。

`password`

ドメイン名の前に指定されたパスワードの入った文字列です。

`pathname`

最初の `'/'` に続いて URL のパスの入り、クエリー文字列やフラグメントが入らない文字列です。

`port`

URL のポート番号の入った文字列です。

`protocol`

最後の `':'` までを含めた URL のプロトコルスキームの入った文字列です。

`search`

URL 引数文字列を示す文字列です。引数が指定されている場合、この文字列には先頭の `?` 文字で始まるすべての引数が含まれます。

`searchParams` 読取専用

`search` で見つかった個々のクエリー引数にアクセスするために使用できる `URLSearchParams` オブジェクトです。

`username`

ドメイン名の前に指定されたユーザー名の入った文字列です。

静的メソッド
------

`canParse()`

URL 文字列とオプションのベース URL 文字列から定義された URL が解釈可能で有効かどうかを示す論理値を返します。

`createObjectURL()`

一意の blob URL の入った文字列を返します。 これは、スキームとして `blob:` の入った URL で、その後にブラウザー内のオブジェクトを一意に識別する不透明な文字列が続きます。

`revokeObjectURL()`

`URL.createObjectURL_static` を使用して以前に生成したオブジェクト URL を取り消します。

メソッド
----

`toString()`

URL 全体の入った文字列を返します。 `URL.href` と同義ですが、値の変更に使用することはできません。

`toJSON()`

URL 全体の入った文字列を返します。 `href` プロパティと同じ文字列を返します。

使用上の注意
------

コンストラクターは、`url` 引数と、`url` 引数が相対 URL の場合にベースとして使用するオプションの `base` 引数を受け取ります。

```js
const url = new URL("../cats", "http://www.example.com/dogs");
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"
```

 コンストラクターは URL を有効な URL に解釈できない場合に例外を発生させます。
 上記のコードを `try...catch` ブロックの中で呼び出すか、`canParse()` 静的メソッドを使って先に URL が有効かどうかをチェックしてください。

```js
if (URL.canParse("../cats", "http://www.example.com/dogs")) {
  const url = new URL("../cats", "http://www.example.com/dogs");
  console.log(url.hostname); // "www.example.com"
  console.log(url.pathname); // "/cats"
} else {
  console.log("無効な URL"); // 無効な URL
}
```

URL を構築するために URL のプロパティを設定できます。

```js
url.hash = "tabby";
console.log(url.href); // "http://www.example.com/cats#tabby"
```

URL は、RFC 3986 にあるルールに従ってエンコードされます。 例えば、次のとおりです。

```js
url.pathname = "démonstration.html";
console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"
```

URL のクエリー文字列を構築および操作するために、`URLSearchParams` インターフェイスを使用できます。

現在のウィンドウの URL から検索引数を取得するには、次のようにします。

```js
// https://some.site/?id=123
const parsedUrl = new URL(window.location.href);
console.log(parsedUrl.searchParams.get("id")); // "123"
```

URL の `toString()` メソッドは `href` プロパティの値を返すだけなので、コンストラクターを使用して URL を直接に正規化およびエンコードできます。

```js
const response = await fetch(
  new URL("http://www.example.com/démonstration.html"),
);
```

仕様書
---

| Specification |
| --- |
| URL Standard # url |

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

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

関連情報
----

* `URL` のポリフィル (`core-js`)
* URL API
* URL とは何か
* `URL` オブジェクトを取得するプロパティ: `URL`
* `URLSearchParams`


HTMLBaseElement - Web API

HTMLBaseElement
===============

**`HTMLBaseElement`** インターフェイスは、文書の基底 URI を持ちます。このオブジェクトは `HTMLElement` インターフェイスで定められているすべてのプロパティとメソッドを継承します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLBaseElement.href`

文字列で、 HTML の `href` 属性を反映し、文書内の相対 URL の基底 URL を保持します。

`HTMLBaseElement.target` (en-US)

文字列で、 HTML の `target` 属性を反映し、要素にターゲットとなる参照先が指定されなかった場合の既定のターゲットとなる閲覧コンテキストまたはフレームを保持します。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlbaseelement |

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

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

関連情報
----

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


ReadableStreamBYOBRequest - Web API

ReadableStreamBYOBRequest
=========================

**`ReadableStreamBYOBRequest`** はストリーム API のインターフェイスで、は、コンシューマーにゼロコピーで移譲される（ストリーム内部のキューをバイパスする）基盤からのデータの「プルリクエスト」を表します。

`ReadableStreamBYOBRequest` オブジェクトは、コンシューマーがデータのリクエストを行い、ストリームの内部キューが空である場合に、「BYOBモード」で作成されます。
 （ストリームがすでにバッファーされたデータを持っている場合、ストリームはコンシューマーのリクエストを直接解決します。）
 基盤のバイトソースは、コントローラの `ReadableByteStreamController.byobRequest` プロパティを通してアクティブな BYOB リクエストにアクセスすることができます。

 「BYOB モード」に対応している基盤ソースは、 `ReadableByteStreamController.byobRequest` を調べ、存在する場合はそれを使用してデータを移譲しなければなりません。
 もし `ReadableByteStreamController.byobRequest` が `null` の時に基盤からデータが到着した場合、 `ReadableByteStreamController.enqueue()` を使用してキューに入れることができます。
 これは、ストリームの内部バッファーが空でないときに、基盤のプッシュソースが新しいデータを受信した場合に発生する可能性があります。

 基盤ソースは、 BYOB リクエストの `view` にデータを書き込んでから `respond()` を呼び出すか、 `respondWithNewView()` を呼び出して新しいビューを引数として渡すことで、リクエストを使用します。
 「新しいビュー」は、実際には元の `view` と同じバッファー上で、同じオフセットから始まるビューでなければならないことに注意してください。
 これは、基盤が元のビュー全体を満たすことができない場合に、より短いバッファーを返すために使用することができます。

 なお、 `ReadableByteStreamController` は `ReadableStream()` コンストラクターで `type="bytes"` を指定した場合のみ、が基盤ソースに対して作成されます。
 「BYOB モード」は `autoAllocateChunkSize` を `ReadableController()` コンストラクターで指定した場合、または `ReadableStreamBYOBReader` （ふつうは `ReadableStream.getReader()` に引数 `{ mode: 'byob' }` 付きで呼び出すことで構築される）を使用した場合にに有効になります。

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

なし。 `ReadableStreamBYOBRequest` インスタンスは `ReadableByteStreamController` によって必要に応じて作成されます。

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

`ReadableStreamBYOBRequest.view` 読取専用

 現在のビューを返します。
 `ReadableStreamBYOBRequest.respond()` が呼び出されたときにコンシューマーに移譲されるバッファーに関するビューです。

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

`ReadableStreamBYOBRequest.respond()`

 関連付けられた読み取り可能なバイトストリームに、指定したバイト数が現在の `view` に書き込まれたことを通知し、コンシューマーからの待機中のリクエストを解決させます。
 このメソッドが呼び出された後、`view`は移譲され、変更できなくなることに注意してください。

`ReadableStreamBYOBRequest.respondWithNewView()`

 引数として渡された、読み取り可能なバイトストリームのコンシューマーに転送される、関連付けられた読み取り可能なストリームビューへ通知します。
 この新しいビューは、元の `view` と同じバッファーを使用し、同じオフセットから始まり、同じ長さかそれ以下でなければなりません。
 このメソッドが呼び出された後、 `view` は移譲され、変更できなくなることに注意してください。

例
-

以下のコードは、読み取り可能なバイトストリーム > 読み取り可能なソケットプッシュバイトストリームの作成のライブ例から引用したものです。

 データを移譲するプッシュ基盤バイトソースは、最初に `controller.byobRequest` が `null` でないことを調べる必要があります。
 このチェックが必要なのは、自動チャンク割り当てが有効でなく、既定のリーダーで使用する場合のみです。

```js
if (controller.byobRequest) {
  /\* code to transfer data \*/
}
```

`ReadableStreamBYOBRequest` にデータを読み込んでそれを移譲するには 2 つの方法があります。
 最初の方法は `ReadableStreamBYOBRequest.view` プロパティにデータを書き込んでから `ReadableStreamBYOBRequest.respond()` を呼び出して移譲するデータ量を示す方法です。
 処理後、 `byobRequest.view` を切り離し、リクエストを破棄すべきです。

下記のコードはこの用途を示すもので、データをビューにコピーするために `readInto()` メソッドを使用しています。

```js
const v = controller.byobRequest.view;
bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
controller.byobRequest.respond(bytesRead);
```

 他にも、 `ReadableStreamBYOBRequest.respondWithNewView()` を呼び出して、同じ基盤バッキングデータに自分自身でビューを渡す、という手法があります。
 これは単に、実際に移譲される基盤バッファー/メモリーバッキングの範囲を指定する別の方法であることに注意してください。
 上のコードと同等の `respondWithNewView` は次のようになります。

```js
const v = controller.byobRequest.view;
bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
const newView = new Uint8Array(v.buffer, v.byteOffset, bytesRead);
controller.byobRequest.respondWithNewView(newView);
```

仕様書
---

| Specification |
| --- |
| Streams Standard # rs-byob-request-class |

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

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

関連情報
----

* 読み取り可能なバイトストリームの使用


HTML Sanitizer API - Web API

HTML Sanitizer API
==================

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

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

**HTML Sanitizer API** は、信頼できない HTML 文字列と `Document` または `DocumentFragment` オブジェクトを受け取り、それらを安全にドキュメントの DOM に挿入するためのサニタイズ処理を行うことができます。

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

例えば、クライアントサイドのテンプレート化ソリューションの一部として、またはユーザー生成コンテンツをレンダリングするために、あるいは他のサイトからのフレームにデータを含めるときに、ウェブアプリケーションはしばしばクライアントサイドで信頼できない HTML を扱う必要があります。Sanitizer API を使用すると、このような潜在的に信頼できない HTML を安全な方法でレンダリングすることができます。

API にアクセスするには、`Sanitizer()` (en-US) コンストラクターを使用して `Sanitizer` (en-US) インスタンスを作成し、設定することになります。設定オプションのパラメーターで、許可する要素や許可しない要素、属性を指定し、カスタム要素やコメントを有効にすることができます。

最も一般的なユースケースである XSS の防止は、デフォルトの設定によって処理されます。カスタム設定による `Sanitizer()` (en-US) の作成は、アプリケーション固有のユースケースを追加で扱う場合にのみ必要です。

API には、データをサニタイズするための主要な 3 つのメソッドがあります。

1. `Element.setHTML()` は、HTML の文字列を解析してサニタイズし、現在の要素の子として DOM に即座にそれを挿入します。これは本質的に `Element.innerHTML` の「安全」バージョンであり、信頼できないデータを挿入する際には innerHTML の代わりに使用されるべきものです。
2. `Sanitizer.sanitizeFor()` (en-US) は、後で DOM に挿入するために HTML の文字列を解析しサニタイズします。これは文字列のターゲット要素が、常に更新の準備ができている／利用可能である、とは限らない場合に使用されるかもしれません。
3. `Sanitizer.sanitize()` (en-US) は、`Document` または `DocumentFragment` 内にあるデータをサニタイズします。これは、例えば、フレーム内の `Document` インスタンスをサニタイズするために使用されるかもしれません。
### 文字列のパースとサニタイズ

HTML の文字列をパースした結果は、それが挿入されるコンテキスト／要素に依存します。

例えば、`<td>` 要素を含む HTML 文字列は、`<table>` 要素の下に挿入すれば有効ですが、`<div>` 要素の中に挿入すると落とされます。同様に、`<em>` 要素は `<div>` の中では有効なノードですが、`<textarea>` の中で使われるとタグはエスケープされます。

```html
<!-- "<em>bla</em>" inserted into <div> -->
<div><em>bla</em></div>

<!-- "<em>bla</em>" inserted into <textarea> -->
<textarea><em>bla</textarea>
```

したがって、パーサーの実行時にターゲットとなる要素が分かっている必要があり、結果のサブツリーは DOM 内の同じ種類の要素に挿入されなければならず、さもなければ結果は不正確なものとなります。

このため、`Sanitizer.sanitizeFor()` (en-US) を使用する場合、開発者は最終的なターゲット要素のタグをパラメーターとして指定する必要があり、メソッドは解析された文字列を子として一致する HTML 要素を返します（例えば、ターゲットタグ `"div"` は `HTMLDivElement` のインスタンスであるオブジェクトを返します）。この戻り値の型により、DOM に挿入されるオブジェクトのコンテキストをユーザーは常に持つことが保証されます。

`Element.setHTML()` は特定の要素で呼び出されるため、この配慮は重要ではなく、コンテキストも暗黙的なものになります。

パーサーは、入力文字列に対して正規化処理を行うこともあります。その結果、HTML が妥当でありサニタイザーメソッドが何もしない場合でも、サニタイズされた出力がサニタイズされていない入力と正確に一致しないことがあります。これは、両方のメソッドに適用されます。

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

`Sanitizer` (en-US)

サニタイザーの構成を定義する機能、後で DOM に挿入するための信頼できない HTML 文字列をサニタイズする機能、および `Document` と `DocumentFragment` オブジェクトをサニタイズする機能を提供します。

`Element.setHTML()`

HTML の文字列をノードのサブツリーにパースし、`Sanitizer` オブジェクトを使用してそれをサニタイズし、そして現在の要素の子としてそれを設定します。

例
-

以下の例では、デフォルトのサニタイザーを使用して Sanitizer API を使用する方法を示します（執筆時点では、設定操作はまだサポートされていません）。

### 文字列を即座にサニタイズする

以下のコードは、`Element.setHTML()` を使って HTML の文字列をサニタイズし、それを `target` という id を持つ `Element` に挿入する方法を示しています。

`script` 要素はデフォルトのサニタイザーで許可されていないため alert は削除されます。

```js
const unsanitized_string = "abc <script>alert(1)<" + "/script> def"; // サニタイズされていない文字列

const sanitizer = new Sanitizer(); // デフォルトのサニタイザー

// id が "target" の要素を取得し、サニタイズした文字列をセットする
const target = document.getElementById("target");
target.setHTML(unsanitized_string, { sanitizer });

console.log(target.innerHTML);
// "abc def"
```

### 遅延使用のための文字列のサニタイズ

以下の例では `Sanitizer.sanitizeFor()` (en-US) メソッドを使用して同じサニタイズ処理を行い、後で返された要素を `<div>` 要素に挿入することを意図しています。

```js
const unsanitized_string = "abc <script>alert(1)<" + "/script> def"; // サニタイズされていない文字列
const sanitizer = new Sanitizer(); // デフォルトのサニタイザー

// 文字列をサニタイズする
const sanitizedDiv = sanitizer.sanitizeFor("div", unsanitized_string);

// 返された要素の型を調べて、サニタイズされた HTML を文字列で表示する
//We can verify the returned element type, and view sanitized HTML in string form:
console.log(sanitizedDiv instanceof HTMLDivElement);
// true
console.log(sanitizedDiv.innerHTML);
// "abc def"

// その後に処理をする…

// 更新する要素を取得する。要素は sanitizeFor() のコンテキストと一致するように div である必要がある
// サニタイズされた要素の子となるように内容をセットする
document.querySelector("div#target").replaceChildren(sanitizedDiv.children);
```

**メモ:** どうしても文字列から文字列への操作を行いたい場合は `innerHTML` を使って文字列を抽出することができますが、文字列が適用されるときに正しいコンテキストを使用することを忘れてはいけません。

```js
const unsanitized_string = "abc <script>alert(1)<" + "/script> def";
const sanitizedString = new Sanitizer().sanitizeFor(
  "div",
  unsanitized_string,
).innerHTML;
```

### フレームのサニタイズ

id が `userFrame` である `<iframe>` からのデータをサニタイズします。

```js
const sanitizer = new Sanitizer(); // デフォルトのサニタイザー

// frame の要素とその document オブジェクトを取得する
const frame_element = document.getElementById("userFrame");
const unsanitized_frame_tree = frame_element.contentWindow.document;

// ドキュメントツリーをサニタイズし、frame を更新する
const sanitized_frame_tree = sanitizer.sanitize(unsanitized_frame_tree);
frame_element.replaceChildren(sanitized_frame_tree);
```

仕様書
---

| Specification |
| --- |
| HTML Sanitizer API # sanitizer-api |

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

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


GamepadHapticActuator - Web API

GamepadHapticActuator
=====================

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

Gamepad API の **`GamepadHapticActuator`** インターフェイスは、ユーザーに触覚フィードバックを提供するように設計されたコントローラー内のハードウェア (可能な場合) を表し、最も一般的には振動ハードウェアです。

このインターフェイスには、 `Gamepad.hapticActuators` プロパティからアクセスできます。

プロパティ
-----

`GamepadHapticActuator.type` 読取専用

触覚ハードウェアのタイプを表す列挙型を返します。

メソッド
----

`GamepadHapticActuator.pulse()` 読取専用

指定した期間、特定の強度でハードウェアパルスを作成します。

例
-

TBD.

仕様書
---

| Specification |
| --- |
| Gamepad Extensions # gamepadhapticactuator-interface |

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

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

関連情報
----

* Gamepad API


ポインターロック API - Web API

ポインターロック API
============

**ポインターロック API** （以前は *マウスロック API* と呼ばれていました）は、ビューポート内のマウスカーソルの絶対位置だけでなく、時間の経過に伴うマウスの動き（すなわち、デルタ）に基づく入力方法を提供します。これにより、マウスの生の移動量を知ることができ、マウスイベントのターゲットをひとつの要素にロックでき、マウスが一方向へどれだけ移動できるかの制限を除去でき、視野からカーソルを取り除くことができます。これらは、本人視点の 3D ゲームなどで理想的です。

さらにこの API は、動きのコントロールやオブジェクトの回転、エントリーの変更にかなりのマウス操作が必要になるアプリケーションで役立ちます。例えばなんらかのボタンをクリックすることなく、マウスを動かすだけで視野角を制御できます。ボタンは他の操作のために使用できます。また、地図や衛星画像を見るアプリでも役に立ちます。

ポインターロックでは、カーソルがブラウザーやスクリーンの境界を通り過ぎるときでもマウスイベントにアクセスできます。例えばユーザーは限りなくマウスを動かすことで、3D モデルの回転や操作を続けることができます。ポインターロックがなければ、ポインターがブラウザーまたはスクリーンの端に達したときに回転や操作が止まります。ゲームのプレイヤーはマウスカーソルがゲームのプレイ領域から外れて、別のアプリケーションを意図せずクリックしてゲームからマウスのフォーカスが外れてしまうことを心配せずに、熱中してボタンをクリックしたり、マウスカーソルをあちこちに動かしたりすることができるようになります。

基本概念
----

ポインターロックは マウスキャプチャ と関係があります。マウスキャプチャはマウスのドラッグ中にターゲットの要素へ継続的にイベントを提供しますが、マウスのボタンを離すとイベントが停止します。ポインターロックとマウスキャプチャの違いは以下のとおりです。

* ポインターロックは永続的です。明示的に API が呼び出されるかユーザーが特定の解放ジェスチャを行うまで、マウスを解放しません。
* ポインターロックはブラウザーまたはスクリーンの境界に制限されません。
* ポインターロックはマウスボタンの状態に関係なく、イベントが発生し続けます。
* ポインターロックはカーソルを隠します。
メソッド/プロパティの概要
-------------

ここでは、ポインターロック仕様に関係するプロパティやメソッドを簡単に説明します。

### requestPointerLock()

ポインターロック API は 全画面 API と同様に、 DOM 要素に新たなメソッド `requestPointerLock()` を追加することで拡張しています。接頭辞が最近削除されましたので、例えば `canvas` 要素で ポインターロックを要求したい場合は、現在は以下のように宣言します。

```js
canvas.requestPointerLock =
  canvas.requestPointerLock || canvas.mozRequestPointerLock;

canvas.requestPointerLock();
```

**メモ:** ユーザーが既定のロック解除ジェスチャでポインターロックを解除した場合、またはこの文書に対して以前にポインターロックが入力されていない場合、エンゲージメントジェスチャの結果として生成されるイベントを `requestPointerLock` が成功する前に、文書内で受信する必要があります。（https://w3c.github.io/pointerlock/#extensions-to-the-element-interface より）

### pointerLockElement と exitPointerLock()

ポインターロック API は `Document` インターフェイスも拡張しており、新たなプロパティやメソッドを追加しています。新たなプロパティ `pointerLockElement` は、現在ロックしている要素がある場合に、その要素へアクセスするために使用します。また、 `Document` 新たなメソッドである `exitPointerLock()` は、名前が示唆するとおりポインターロックを終えるために使用します。

`pointerLockElement` プロパティは要素が現在ポインターがロック状態であるかを判断する（例えば論理型でチェックを行う）ため、またはロックされた要素があればその要素への参照を得るために有用です。

`pointerLockElement` の使用例を示します。

```js
if (
  document.pointerLockElement === canvas ||
  document.mozPointerLockElement === canvas
) {
  console.log("The pointer lock status is now locked");
} else {
  console.log("The pointer lock status is now unlocked");
}
```

`Document.exitPointerLock()` メソッドはポインターロックを終えるために使用され、`requestPointerLock()` と同様に `pointerlockchange` イベントや `pointerlockerror` イベントを用いて非同期的に動作します。使用例は以下のとおりです。

```js
document.exitPointerLock =
  document.exitPointerLock || document.mozExitPointerLock;

// ロック解除を試みる
document.exitPointerLock();
```

pointerlockchange イベント
----------------------

ポインターロックの状態が変化したとき、例えば `requestPointerLock()` や `exitPointerLock()` を呼び出したときや、ユーザーが ESC キーを押下したときなどに、`pointerlockchange` イベントが `document` に発生します。これはシンプルなイベントであり、付加的なデータは含まれません。

```js
if ("onpointerlockchange" in document) {
  document.addEventListener("pointerlockchange", lockChangeAlert, false);
} else if ("onmozpointerlockchange" in document) {
  document.addEventListener("mozpointerlockchange", lockChangeAlert, false);
}

function lockChangeAlert() {
  if (
    document.pointerLockElement === canvas ||
    document.mozPointerLockElement === canvas
  ) {
    console.log("The pointer lock status is now locked");
    // 応答として役に立つ処理
  } else {
    console.log("The pointer lock status is now unlocked");
    // 応答として役に立つ処理
  }
}
```

pointerlockerror イベント
---------------------

`requestPointerLock()` または `exitPointerLock()` の呼び出しによりエラーが発生したときは、`pointerlockerror` イベントが `document` に発生します。これはシンプルなイベントであり、付加的なデータは含まれません。

```js
document.addEventListener("pointerlockerror", lockError, false);
document.addEventListener("mozpointerlockerror", lockError, false);

function lockError(e) {
  alert("Pointer lock failed");
}
```

**メモ:** Firefox 50 まで、上記のイベントは `moz` 接頭辞を付加していました。

Mouse イベントの拡張
-------------

ポインターロック API は通常の `MouseEvent` インターフェイスを、movement 属性で拡張します。新たな 2 つの属性 `movementX` および `movementY` が、マウスポインターの位置の変化を提供します。引数の値は `MouseEvent` のプロパティである `screenX` および `screenY` の値同士の差と同じであり、それらのプロパティは 2 つ続いて発生する `mousemove` イベント `eNow` および `ePrevious` に保存されます。言い換えると、ポインターロックのパラメーター `movementX` は、`eNow.screenX - ePrevious.screenX` になります。

### ロックされた状態

ポインターロックが有効であるとき、標準 `MouseEvent` のプロパティである `clientX`、`clientY`、`screenX`、`screenY` は、マウスが動いていないかのように値が固定されます。`movementX` プロパティおよび `movementY` プロパティが、マウスの位置の変化を提供し続けます。マウスが一方向へ連続的に移動するとしても、`movementX` および `movementY` の値に制限はありません。マウスカーソルは存在せず、ウィンドウから外れたりスクリーンの端で止まったりしないという考え方です。

### ロックが解除された状態

引数 `movementX` および `movementY` はマウスのロック状態にかかわらず有効であり、ロックされていない状態でも利便性のために使用できます。

マウスのロックが解除されると、システムカーソルが存在するようになり、ブラウザーがウィンドウ表示に戻ります。このとき、`movementX` および `movementY` は 0 に設定されるかもしれません。

シンプルな例のウォークスルー
--------------

ポインターロックの使用方法やシンプルな制御システムの設定方法を示すため、シンプルな ポインターロックのデモ を作成しました (ソースコードを確認する)。このデモでは、JavaScript を使用して `<canvas>` 要素上にボールを描画します。canvas をクリックすると ポインターロックがマウスポインターを取り除いて、マウスを使用してボールを直接動かすことができます。このデモの仕組みを見ていきましょう。

canvas 内の、x および y の初期位置を設定します。

```js
const x = 50;
const y = 50;
```

現在は ポインターロックのメソッドに接頭辞がついていますので、ブラウザー実装ごとに処理を分けています。

```js
canvas.requestPointerLock =
  canvas.requestPointerLock || canvas.mozRequestPointerLock;

document.exitPointerLock =
  document.exitPointerLock || document.mozExitPointerLock;
```

キャンバスがクリックされたときに、キャンバスで `requestPointerLock()` メソッドを実行するイベントリスナーを設定します。これは、ポインターロックを開始します。

```js
canvas.onclick = () => {
  canvas.requestPointerLock();
};
```

ポインターロックイベント `pointerlockchange` のイベントリスナーを設定します。イベントが発生したら、ポインターロックの変更を制御するために `lockChangeAlert()` という名前の関数を実行します。

```js
// ポインターロックのイベントリスナー

// さまざまなブラウザー向けに、ポインターロックの状態変化イベントをフックする
document.addEventListener("pointerlockchange", lockChangeAlert, false);
document.addEventListener("mozpointerlockchange", lockChangeAlert, false);
```

この関数は、 pointLockElement プロパティがキャンバスを示しているかを確認します。示している場合は、マウスの移動を扱うために、イベントリスナーを `updatePosition()` に設定します。示していない場合は、イベントリスナーを再び削除します。

```js
function lockChangeAlert() {
  if (
    document.pointerLockElement === canvas ||
    document.mozPointerLockElement === canvas
  ) {
    console.log("The pointer lock status is now locked");
    document.addEventListener("mousemove", updatePosition, false);
  } else {
    console.log("The pointer lock status is now unlocked");
    document.removeEventListener("mousemove", updatePosition, false);
  }
}
```

updatePosition() 関数が、キャンバス内のボールの位置 (`x` および `y`) を更新します。また、ボールがキャンバスの端からはみ出すかをチェックする `if()` 文が含まれています。ボールがはみ出す場合は、反対側の端にボールを描画します。また、`requestAnimationFrame()` がすでに呼び出されたかを確認しており、呼び出された場合は必要に応じて再び呼び出して、キャンバスのシーンを更新するために `canvasDraw()` 関数を呼び出します。さらに、参照用に X および Y の位置を表示するための tracker も設定します。

```js
const tracker = document.getElementById("tracker");

let animation;
function updatePosition(e) {
  x += e.movementX;
  y += e.movementY;
  if (x > canvas.width + RADIUS) {
    x = -RADIUS;
  }
  if (y > canvas.height + RADIUS) {
    y = -RADIUS;
  }
  if (x < -RADIUS) {
    x = canvas.width + RADIUS;
  }
  if (y < -RADIUS) {
    y = canvas.height + RADIUS;
  }
  tracker.textContent = `X position: ${x}, Y position: ${y}`;

  if (!animation) {
    animation = requestAnimationFrame(() => {
      animation = null;
      canvasDraw();
    });
  }
}
```

`canvasDraw()` 関数は、現在の `x` および `y` の位置にボールを描画します。

```js
function canvasDraw() {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#f00";
  ctx.beginPath();
  ctx.arc(x, y, RADIUS, 0, degToRad(360), true);
  ctx.fill();
}
```

iframe の制限
----------

ポインターロックが一度にロックできる iframe は 1 つだけです。 iframe をひとつロックすると、別の iframe をロックしてターゲットを切り替えようとすることはできません。ポインターロックはエラーになります。この制限を避けるため、始めにロックされた iframe のロックを解除してから別の iframe をロックしてください。

iframe の既定の動作では、「サンドボックス化された」 iframe が ポインターロックをブロックします。この制限を回避するには、 `<iframe sandbox="allow-pointer-lock">` を使用してください。

仕様書
---

| Specification |
| --- |
| Pointer Lock 2.0  |

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

### api.Document.exitPointerLock

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

### api.Element.requestPointerLock

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

関連情報
----

* `MouseEvent`


HTMLImageElement - Web API

HTMLImageElement
================

**`HTMLImageElement`** インターフェイスは HTML の `<img>` 要素を表現し、画像要素を操作するためのプロパティとメソッドを提供します。

EventTarget

Node

Element

HTMLElement

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

`Image()`

`Image()` コンストラクターは、 DOM ツリーに属さない HTML の `<img>` 要素を表す新しい `HTMLImageElement` オブジェクトを生成し、返します。オプションで幅と高さの引数を受け取ることができます。引数なしで呼び出された場合、 `new Image()` は `document.createElement('img')` を呼び出すのと同じになります。

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

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

`HTMLImageElement.alt`

文字列で、HTML の `alt` 属性を反映します。画像が読み込まれなかった場合に表示される代替フォールバックコンテンツを表します。

`HTMLImageElement.complete` 読取専用

論理値で、ブラウザーが画像の取得を完了した場合、成功したかどうかに関わらず `true` を返します。つまり、読み込むべき画像を示す `src` の値が存在しない場合も、この値は `true` となります。

`HTMLImageElement.crossOrigin`

文字列で、この画像要素の CORS 設定を指定します。詳細は CORS 設定属性を参照してください。これは CORS が使用されていない場合、 `null` になることがあります。

`HTMLImageElement.currentSrc` 読取専用

現在表示されている画像が読み込まれた URL を表す文字列を返します。この文字列は、メディアクエリーが適用されている場合、状況の変化に応じて画像が調整され、変更される可能性があります。

`HTMLImageElement.decoding`

ブラウザーが画像をどのようにデコードすべきかのヒントを表すオプションの文字列です。この値を指定する場合、許可されている値のいずれかでなければなりません。同期的に画像をデコードする場合は `sync`、非同期的に画像をデコードする場合は `async`、優先順位を指定しない場合は `auto` （これが既定値）です。このプロパティの値の意味については、 `decoding` のページを参照してください。

`HTMLImageElement.fetchPriority`
Experimental

オプションの文字列で、他の画像との比較において画像の取得を優先させるためのブラウザーへのヒントを表します。この値を指定する場合、許可されている値のいずれかでなければなりません。高い優先度で取得する場合は `high`、低い優先度で取得する場合は `low`、優先度を設定しない場合は `auto` （これが既定値）です。

`HTMLImageElement.height`

HTML の `height` 属性を反映した整数値です。画像のレンダリング時の高さを CSS ピクセル数で表します。

`HTMLImageElement.isMap`

HTML の `ismap` 属性を反映した論理値で、画像がサーバーサイドイメージマップの一部であることを示します。これは、 `<img>` 要素とそれに対応する `<map>` を用いて指定され、画像内のクリック可能な領域を示す `<area>` 要素を含むクライアントサイドイメージマップと異なるものです。画像は `<a>` 要素の中に含まれていなければなりません。詳細は `ismap` のページを参照してください。

`HTMLImageElement.loading`

文書の読み込みを最適化するために使用するブラウザーへのヒントを提供する文字列で、画像をすぐに読み込むか (`eager`) それとも必要に応じて読み込むか (`lazy`) を決定します。

`HTMLImageElement.naturalHeight` 読取専用

利用できる場合は、画像の本来の高さを CSS ピクセル数で表した整数値を返します。そうでない場合は `0` を示します。これは、画像が自然な大きさでレンダリングされた場合の高さです。

`HTMLImageElement.naturalWidth` 読取専用

利用できる場合は、画像の本来の幅を CSS ピクセル数で表した整数値を返します。そうでない場合は `0` を示します。これは、画像が自然な大きさでレンダリングされた場合の幅です。

`HTMLImageElement.referrerPolicy`

HTML の `referrerpolicy` 属性を反映した文字列です。画像を取得するためにどのリファラーを使用するかを決定する方法をユーザーエージェントに伝えます。この文字列が取り得る値の詳細については、この記事をお読みください。

`HTMLImageElement.sizes`

HTML の `sizes` 属性を反映した文字列です。この文字列は、画像の条件付きサイズのリストをカンマ区切りで指定します。すなわち、与えられたビューポートの大きさに対して、特定の画像サイズが使用されることになります。この文字列の形式の詳細については、 `sizes` ページにあるドキュメントを参照してください。

`HTMLImageElement.src`

HTML の `src` 属性を反映した文字列です。これには、ベース URI を含む画像の完全な URL を指定します。 `src` 属性の URL を変更することで、要素に別の画像を読み込むことができます。

`HTMLImageElement.srcset`

HTML の `srcset` 属性を反映した文字列です。これは、画像候補のリストをカンマ (`',', U+002C COMMA`) 区切りで指定します。それぞれの候補画像は、 URL の後にスペースが続き、その後に画像のサイズを示す特別な形式の文字列が続きます。サイズは、幅またはサイズの倍数で指定することができます。サイズの部分文字列の形式については、 `srcset` ページをお読みください。

`HTMLImageElement.useMap`

HTML の `usemap` 属性を反映した文字列です。これは、使用するイメージマップを記述した `<map>` 要素のページローカルな URL を含みます。ページローカルの URL は、ポンド (ハッシュ) 記号 (`#`) の後に `<map>` 要素の ID を続けたもの、例えば `#my-map-element` のようになります。 `<map>` には、画像内のクリック可能な領域を示す `<area>` 要素が順番に入ります。

`HTMLImageElement.width`

HTML の `width` 属性を反映した整数値で、画像のレンダリング幅を CSS ピクセルで表します。

`HTMLImageElement.x` 読取専用

`<html>` 要素を含むブロックの原点に対する、画像の CSS レイアウトボックスの左境界線の水平オフセットを示す整数です。

`HTMLImageElement.y` 読取専用

`<html>` 要素を含むブロックの原点に対する、画像の CSS レイアウトボックスの上境界線の垂直オフセットを示す整数です。

廃止されたプロパティ
----------

`HTMLImageElement.align`
非推奨

周囲のコンテキストに対する画像の配置を示す文字列。指定可能な値は `"left"`, `"right"`, `"justify"`, そして `"center"` です。これは時代遅れです。代わりに、 CSS （`text-align` など、名前に反して画像で動作するもの）を使って整列を指定する必要があります。

`HTMLImageElement.border`
非推奨

画像を囲む境界の幅を定義する文字列。これは非推奨です。代わりに CSS の `border` プロパティを使用してください。

`HTMLImageElement.hspace`
非推奨

画像の左右に空ける空間の量を（ピクセル数で）指定する整数値です。

`HTMLImageElement.longDesc`
非推奨

画像の内容に関する長い説明文が掲載されている URL を指定する文字列です。これは、画像を自動的にハイパーリンクにするために使用されます。現代的なHTMLでは、ハイパーリンクを定義する `<a>` 要素の中に `<img>` を代わりに配置します。

`HTMLImageElement.name`
非推奨

要素の名前を表す文字列です。

`HTMLImageElement.vspace`
非推奨

画像の上下に空ける空間をピクセル単位で指定する整数値です。

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

*親である `HTMLElement` から継承したメソッドがあります。*

`HTMLImageElement.decode()`

画像がデコードされ、 DOM に画像を追加しても安全になったときに解決されるプロミス (`Promise`) を返します。これにより、デコードされていない画像が DOM に追加された場合のように、画像をデコードするために次のフレームのレンダリングが中断されることを防ぐことができます。

エラー
---

画像の読み込みやレンダリング中にエラーが発生し、`onerror` イベントハンドラーが `error` イベントを処理するために設定されていた場合、そのイベントハンドラーが呼ばれることになります。これは、以下のような様々な状況で起こり得ます。

* `src` 属性がないか `null` である。
* 指定された `src` の URL が、ユーザーが現在いるページの URL と同じである。
* 指定された画像が何らかの原因で破損しており、読み込むことができない。
* 指定された画像のメタデータが寸法を取得できない状態に破損しており、 `<img>` 要素の属性に寸法が指定されていない。
* 指定された画像がユーザーエージェントが対応していない形式である。
例
-

```js
const img1 = new Image(); // Image コンストラクター
img1.src = "image1.png";
img1.alt = "alt";
document.body.appendChild(img1);

const img2 = document.createElement("img"); // DOM の HTMLImageElement を使う
img2.src = "image2.jpg";
img2.alt = "alt text";
document.body.appendChild(img2);

// 文書内の最初の画像を使用
alert(document.images[0].src);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlimageelement |

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

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

関連情報
----

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


DOMQuad - Web API

DOMQuad
=======

`DOMQuad` は任意の四角形の角を定義する 4 つの `DOMPoint` の集合です。 `DOMQuad` を返すことで、 `getBoxQuads()` は任意の 2D または 3D 変換を表示している場合でも正確な情報を返すことができます。便利な `bounds` 属性があり、軸に沿った長方形が欲しい場合に `DOMRectReadOnly` を返します。

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

`DOMQuad()`

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

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

p1,p2,p3,p4 読取専用

それぞれ `DOMPoint` オブジェクトで、 `DOMQuad` オブジェクトの 4 つの角のそれぞれに対応します。

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

`DOMQuad.fromRect()`

渡された座標の集合に基づいて新しい `DOMQuad` オブジェクトを返します。

`DOMQuad.fromQuad()`

渡された座標の集合に基づいて新しい `DOMQuad` オブジェクトを返します。

`DOMQuad.getBounds()`

`DOMQuad` オブジェクトの座標と寸法を持つ `DOMRect` オブジェクトを返します。

`DOMQuad.toJSON()`

`DOMQuad` オブジェクトの JSON 表現を返します。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMQuad |

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

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


HTMLSlotElement - Web API

HTMLSlotElement
===============

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
**`HTMLSlotElement`** はシャドウ DOM API のインターフェイスで、 HTML の `<slot>` 要素の名前と割り当てられたノードにアクセスできるようにします。

EventTarget

Node

Element

HTMLElement

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

`HTMLSlotElement.name`

文字列で、スロットの名前を取得または設定するために使用します。

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

`HTMLSlotElement.assign()`

このスロットに手動で割り当てられたノードを、指定されたノードに設定します。

`HTMLSlotElement.assignedNodes()`

このスロットに割り当てられた一連のノードを返し、`flatten` オプションが `true` に設定されていた場合は、このスロットの子孫である他のスロットに割り当てられたノードも返します。割り当てられたノードが見つからない場合は、スロットの代替コンテンツを返します。

`HTMLSlotElement.assignedElements()`

このスロットに割り当てられた一連の要素を返します (それ以外のノードは返しません)。`flatten` オプションが `true` に設定されていた場合は、このスロットの子孫である他のスロットに割り当てられた要素も返します。割り当てられたノードが見つからない場合は、スロットの代替コンテンツを返します。

イベント
----

`slotchange`

スロットに含まれるノードが変更されたときに `HTMLSlotElement` インスタンス (`<slot>` 要素) に発生します。

例
-

以下のスニペットは、 slotchange の例からとりました (ライブでも確認)。

```js
let slots = this.shadowRoot.querySelectorAll("slot");
slots[1].addEventListener("slotchange", (e) => {
  let nodes = slots[1].assignedNodes();
  console.log(
    `Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`,
  );
});
```

ここではすべてのスロットの参照を取得し、テンプレート内の 2 番目のスロットに slotchange イベントリスナーを追加します。 — これが例の中でコンテンツの変更を追跡します。

スロットの変更の中で要素が挿入されるたびに、コンソールにどのスロットが変更されたか、スロット内の新しいノードは何であるかをログ出力します。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlslotelement |

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

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