HTMLDialogElement - Web API

HTMLDialogElement
=================

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
**`HTMLDialogElement`** インターフェイスは `<dialog>` 要素を操作するメソッドを提供します。 `HTMLElement` インターフェースからプロパティとメソッドを継承しています。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLDialogElement.open`

論理値で、ダイアログが操作可能であることを示す `open` 属性の値を反映します。

`HTMLDialogElement.returnValue`

文字列で、ダイアログの返値を設定または返却します。

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

*親である `HTMLElement` から継承したメソッドがあります。*

`HTMLDialogElement.close()`

ダイアログを閉じます。任意で引数として文字列を渡すことができ、これがダイアログの `returnValue` を更新します。

`HTMLDialogElement.show()`

ダイアログをモードレスで開きます。すなわち、その間にダイアログの外のコンテンツが操作できます。

`HTMLDialogElement.showModal()`

ダイアログをモーダルで、他のダイアログがあればその最も上に表示します。ダイアログの外の操作はブロックされます。ダイアログの外はすべて inert となり、ダイアログの外の操作はブロックされます。

イベント
----

`cancel`

ユーザーがエスケープキーで現在開いているダイアログを解除したときに発行されます。

`close`

エスケープキー、`HTMLDialogElement.close()` メソッド、または `method="dialog"` でダイアログ内のフォームを送信することによって、このダイアログが閉じられたときに発行されます。

例
-

### モーダルダイアログを開く

以下の例はボタンを表示し、クリックすると、フォームの入ったモーダルダイアログ (`<dialog>`) を `HTMLDialogElement.showModal()` 関数によって開きます。そこから *Cancel* ボタンを押して (`HTMLDialogElement.close()` 関数で) ダイアログを閉じるか、送信ボタンでフォームを送信するかします。Cancel ボタンを選択すると、`close` イベントを生成します。`cancel` イベントではありません。

```html
<!-- pop-up dialog box, containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <p>
      <label for="favAnimal">Favorite animal:</label>
      <select id="favAnimal" name="favAnimal">
        <option></option>
        <option>Brine shrimp</option>
        <option>Red panda</option>
        <option>Spider monkey</option>
      </select>
    </p>
    <div>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </div>
  </form>
</dialog>

<div>
  <button id="updateDetails">Update details</button>
</div>
```

#### JavaScript

```js
const updateButton = document.getElementById("updateDetails");
const cancelButton = document.getElementById("cancel");
const dialog = document.getElementById("favDialog");
dialog.returnValue = "favAnimal";

function openCheck(dialog) {
  if (dialog.open) {
    console.log("Dialog open");
  } else {
    console.log("Dialog closed");
  }
}

// Update button opens a modal dialog
updateButton.addEventListener("click", () => {
  dialog.showModal();
  openCheck(dialog);
});

// Form cancel button closes the dialog box
cancelButton.addEventListener("click", () => {
  dialog.close("animalNotChosen");
  openCheck(dialog);
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # htmldialogelement |

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

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

関連情報
----

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


GPU - Web API

GPU
===

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

WebGPU API の **`GPU`** インターフェイスは、WebGPU を使用するためのスタート地点です。デバイスの要求、機能や制限の設定、などを行える `GPUAdapter` を取得するのに使用できます。

現在のコンテキスト用の `GPU` オブジェクトには、`Navigator.gpu` または `WorkerNavigator.gpu` プロパティからアクセスできます。

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

`wgslLanguageFeatures`
Experimental
 読取専用

この WebGPU の実装が対応している WGSL 言語の拡張を報告する `WGSLLanguageFeatures` オブジェクトです。

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

`requestAdapter()`
Experimental

`GPUAdapter` オブジェクトのインスタンスで解決する `Promise` を返します。これを用いて、WebGPU の機能を用いるための第一のインターフェイスである `GPUDevice` (en-US) を要求できます。

`getPreferredCanvasFormat()`
Experimental

現在のシステムにおける、8 ビット深度で通常のダイナミックレンジのコンテンツを表示するために最適なキャンバステクスチャーの形式を返します。

例
-

### アダプターとデバイスを要求する

```js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU に対応していません。");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("WebGPU アダプターを要求できませんでした。");
  }

  const device = await adapter.requestDevice();

  //...
}
```

### GPUCanvasContext を最適なテクスチャー形式で設定する

```js
const canvas = document.querySelector("#gpuCanvas");
const context = canvas.getContext("webgpu");

context.configure({
  device: device,
  format: navigator.gpu.getPreferredCanvasFormat(),
  alphaMode: "premultiplied",
});
```

仕様書
---

| Specification |
| --- |
| WebGPU # gpu-interface |

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

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

関連情報
----

* WebGPU API


MIDIInputMap - Web API

MIDIInputMap
============

Web MIDI API の読み取り専用インターフェイス **`MIDIInputMap`** は、現在利用可能な MIDI 入力ポートの集合を提供します。

`MIDIInputMap` のインスタンスは、キーを MIDI 入力の ID 文字列、対応する値を対応する `MIDIInput` オブジェクトとする読み取り専用の `Map` 風オブジェクトです。

仕様書
---

| Specification |
| --- |
| Web MIDI API # midiinputmap-interface |

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

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


SpeechRecognitionError - Web API

SpeechRecognitionError
======================

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

Web Speech API の **`SpeechRecognitionError`** インターフェイスは、認識サービスからのエラーメッセージを表します。

プロパティ
-----

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

`SpeechRecognitionError.error` (en-US) 読取専用

起こったエラーの種類を返します。

`SpeechRecognitionError.message` (en-US) 読取専用

エラーの内容が詳しく書かれたメッセージを返します。

例
-

```js
var recognition = new SpeechRecognition();

recognition.onerror = function (event) {
  console.log("Speech recognition error detected: " + event.error);
  console.log("Additional information: " + event.message);
};
```

仕様
--

| Specification |
| --- |
| Web Speech API # speechrecognitionerrorevent |

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

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

### Firefox OS の許可設定

アプリ内で音声認識を使用するには、以下の許可設定を manifest で指定する必要があります:

```json
"permissions": {
  "audio-capture" : {
    "description" : "Audio capture"
  },
  "speech-recognition" : {
    "description" : "Speech recognition"
  }
}
```

特権アプリも必要なため、以下も同様に含める必要があります:

```json
  "type": "privileged"
```

関連項目
----

* Web Speech API


origin - Web API

origin
======

グローバルの **`origin`** プロパティは読み取り専用で、文字列としてシリアライズされた、グローバルスコープのオリジンを返します。

値
-

文字列です。

例
-

ワーカースクリプト内から以下のスニペットを実行すると、メッセージを受け取る度にワーカーのグローバルスコープのオリジンをコンソールに記録します。

```js
onmessage = () => {
  console.log(self.origin);
};
```

もしオリジンがスキーム/ホスト名/ポート番号の組み合わせでない場合（すなわち、ローカルで実行しようとしている、つまり `file://` の URL の場合）、 `origin` は `"null"` という文字列を返すでしょう。

仕様書
---

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

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

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


XRBoundedReferenceSpace - Web API

XRBoundedReferenceSpace
=======================

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

.WebXR Device API の **`XRBoundedReferenceSpace`** インターフェイスは、事前設定された境界を持つ仮想世界の参照空間を記述します。 これは `XRReferenceSpace` を拡張して、ビューアーの位置の周囲の本質的に制限のない空間を記述します。 これらの境界は、点の配列を使用して定義し、各点は、ユーザーがその中で移動することができる多角形の頂点を定義します。

これは通常、XR システムがユーザーの開始位置から限られた距離内でユーザーの物理的な移動を追跡できる場合に使用します。 指定された境界は、実際には、WebXR サイトまたはアプリケーションがユーザーが現実世界の壁やその他の障害物と衝突するのを防ぐために、ユーザーがいる部屋の形状とサイズを表す場合があります。 少なくとも、境界は、XR デバイスがユーザーの移動を追跡できる領域を示します。 制限付き空間の仕組みとその有用性の詳細については、制限付き参照空間の使用 (en-US)の記事を参照してください。

プロパティ
-----

*`XRReferenceSpace` のプロパティに加えて、`XRBoundedReferenceSpace` には次のものが含まれています。*

`boundsGeometry` 読取専用

`DOMPointReadOnly` オブジェクトの配列。 各オブジェクトは、ユーザーが留まる必要がある境界を定義する多角形の頂点を定義します。 これらの頂点は、ビューアーの位置の周囲を*時計回り*に移動するように並べ替える*必要があります*。

メソッド
----

*`XRBoundedReferenceSpace` は、その親インターフェイスである `XRReferenceSpace` のメソッドを継承します。 それ以上のメソッドはありません。*

仕様
--

| Specification |
| --- |
| WebXR Device API # xrboundedreferencespace-interface |

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

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

関連情報
----

* WebXR Device API
* WebXR の幾何学と参照空間
* 視点とビューアー: WebXR でのカメラのシミュレーション


BeforeUnloadEvent - Web API

BeforeUnloadEvent
=================

**`BeforeUnloadEvent`** は `beforeunload` イベントのインターフェイスです。

`beforeunload` イベントは、ウィンドウ、文書、そのリソースがアンロードされようとしているときに発生します。

Event の `returnValue` プロパティに空文字列でない値が代入されると、ダイアログボックスが現れ、ユーザーにページを離れるかどうかの確認を求めます（下記の例を参照）。値が指定されなかった場合、イベントはサイレントで処理されます。実装によっては、フレームまたは埋め込まれたフレームがユーザージェスチャまたはユーザーの操作を受け取った場合にのみ、ダイアログボックスを示すものもあります。詳しくはブラウザーの互換性を参照してください。

**メモ:** セキュリティ上の理由から、返す文字列の代わりに、ウェブページの制御しない一般的な文字列のみが示されます。

Event

BeforeUnloadEvent

|  |  |
| --- | --- |
| バブリング | なし |
| キャンセル | 可 |
| 対象オブジェクト | defaultView |
| インターフェイス | `Event` |

例
-

```js
window.addEventListener("beforeunload", (event) => {
  event.returnValue = "\\o/";
});

// is equivalent to
window.addEventListener("beforeunload", (event) => {
  event.preventDefault();
});
```

WebKit 派生ブラウザーは、ダイアログボックスについては仕様に従っていません。ほぼクロスブラウザーで動作する例としては、下記の例のようなものがあります。

```js
window.addEventListener("beforeunload", (e) => {
  const confirmationMessage = "\\o/";

  // Gecko + IE
  (e || window.event).returnValue = confirmationMessage;

  // Safari, Chrome, and other WebKit-derived browsers
  return confirmationMessage;
});
```

仕様書
---

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

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

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

関連情報
----

* `DOMContentLoaded`
* `readystatechange`
* `load`
* `beforeunload`
* `unload`
* Unloading Documents — Prompt to unload a document


TouchEvent - Web API

TouchEvent
==========

**`TouchEvent`** インターフェイスは、タッチ感応面への接触状態が変化したときに発生する `UIEvent` を表します。この面は、例えばタッチ画面やトラックパッドです。このイベントは画面との 1 か所以上の接触を表すことが可能であり、また接触個所の移動、増加、減少などに対応することができます。

タッチは `Touch` オブジェクトで表されます。それぞれのタッチで位置、大きさと形状、圧力の量、対象要素を示します。タッチのリストは `TouchList` オブジェクトで表されます。

Event

UIEvent

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

`TouchEvent()`

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

プロパティ
-----

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

`TouchEvent.altKey` 読取専用

タッチイベントが発生したときに alt キーが押下されていたかを示す論理値です。

`TouchEvent.changedTouches` 読取専用

`TouchList` で、前回のタッチイベントと今回との間に接触状態が変化したそれぞれの接触点を表すすべての `Touch` オブジェクトです。

`TouchEvent.ctrlKey` 読取専用

タッチイベントが発生したときに control キーが押下されていたかを示す論理値です。

`TouchEvent.metaKey` 読取専用

タッチイベントが発生したときに meta キーが押下されていたかを示す論理値です。

`TouchEvent.shiftKey` 読取専用

タッチイベントが発生したときに shift キーが押下されていたかを示す論理値です。

`TouchEvent.targetTouches`読取専用

現在タッチ面に接触している、**かつ**イベントのターゲットと同じ要素でタッチを始めた `Touch` オブジェクトすべてで構成される `TouchList` です。

`TouchEvent.touches` 読取専用

`TouchList` で、対象や状態の変化にかかわらず、この面における現在のすべての接触点を表すすべての `Touch` オブジェクトが入ります。

`TouchEvent.rotation`
Non-standard
 読取専用

イベントの開始以来の回転の変化 (角度) です。正の数は時計回りの回転です。負の数は逆時計回りの回転です。初期値は `0.0` です。

`TouchEvent.scale`
Non-standard
 読取専用

イベントの開始以来の 2 本の指の間の距離です。イベントの開始時における最初の指の間の距離に対する浮動小数点の倍数で表現します。 1.0 より小さな値は内側へのピンチ (ズームアウト) です。 1.0 より大きな値は外側へのピンチ (ズームイン) です。初期値は `1.0` です。

タッチイベントの種類
----------

タッチ関連の変化があったことを示すために発生するイベントは、数種類あります。イベントの `TouchEvent.type` プロパティを確認すると、何が発生したかを判断できます。

`touchstart`

ユーザーがタッチ面のタッチ点に触れたときに発生します。イベントのターゲットは、タッチが発生した場所の要素 (`Element`) です。

`touchend`

ユーザーがタッチ面からタッチ点を削除したとき (すなわち、指やスタイラスをタッチ面から離したとき) に発生します。これはタッチ点がタッチ面の端の外へ移動した場合にも発生します。例えば、ユーザーの指が画面の端よりも外に移動した場合です。

イベントのターゲットは、タッチ点が要素の外に移動した場合であっても、タッチ点に対応する `touchstart` イベントを受信したのと同じ要素 (`Element`) です。

タッチ面から削除されたタッチ点所 (複数の場合を含む) は、 `changedTouches` 属性で示される `TouchList` でわかります。

`touchmove`

ユーザがタッチ面でタッチ点を動かしたときに発生します。イベントのターゲットは、タッチ点が要素の外に移動した場合であっても、タッチ点に対応する `touchstart` イベントを受信したのと同じ要素 (`Element`) です。

このイベントはタッチ点の範囲、回転角、強さの属性が変化したときにも発生します。

**メモ:** `touchmove` イベントが発生する頻度はブラウザーごとに異なります。また、ユーザーのハードウェアの能力にも大きく依存するでしょう。特定のイベント粒度に依存してはいけません。

`touchcancel`

タッチ個所が何らかの方法で取り消されたときに発生します。このイベントが発生する理由はいくつか考えられます（正確な理由は端末ごと、およびブラウザーごとに異なるでしょう）。

* タッチを取り消す、ある種のイベントが発生した。これは、操作中にモーダルなアラートがポップアップした場合に発生するでしょう。
* タッチ個所がドキュメントウィンドウから外れて、ブラウザの UI 領域、プラグイン、あるいは他の外部コンテンツに移動した。
* スクリーンがサポートする個数より多くのタッチ個所にユーザがタッチすると、`TouchList` の中でもっとも古い `Touch` が取り消される。

### addEventListener() および preventDefault() の使用

重要なのは多くの場合、タッチイベントとマウスイベントの両方が送られることです (タッチに特化していないコードがユーザーと対話するため)。タッチイベントを使用する場合は、 `preventDefault()` を呼び出してマウスイベントが送信されないようにしてください。

Chrome のバージョン 56 以降 (デスクトップ版, Android 版 Chrome, Android WebView) は例外で、 `passive` オプションの `touchstart` および `touchmove` における既定値は `true` であり、 `preventDefault()` の呼び出しは効果がありません。この動作を変更するためには、`passive` オプションを `false` に設定します。そうすると `preventDefault()` が仕様書通りに動作します。リスナーを既定で `passive` と扱うことで、ユーザーがスクロール中にページのレンダリングがブロックされることを防いでいます。デモが Chrome Developer サイトにあります。

例
-

タッチイベントのメイン記事にある例をご覧ください。

仕様書
---

| Specification |
| --- |
| Touch Events # touchevent-interface |

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

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

関連情報
----

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


FontFaceSet - Web API

FontFaceSet
===========

**`FontFaceSet`** は CSS フォント読み込み API のインターフェイスで、フォントフェイスのダウンロードとダウンロード状況の問い合わせを管理します。

`FontFaceSet` インスタンスは `Set` 風オブジェクト であり、 `FontFace` オブジェクトの順序付けられた集合を保持することができます。

このプロパティは `Document.fonts`、またはウェブワーカー内の `self.fonts` として利用可能です。

EventTarget

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

`FontFaceSet.status` 読取専用

フォントフェイスの読み込み状態を示します。 `'loading'` または `'loaded'` のどちらかになります。

`FontFaceSet.ready` 読取専用

`Promise` で、フォントの読み込みとレイアウト操作が完全に完了すると解決されます。

`FontFaceSet.size` 読取専用

`FontFaceSet` に含まれる値の数を返します。

### イベント

`loading`

フォントフェイスの集合の読み込みが開始されたときに発行されます。

`loadingdone`

フォントフェイスの集合の読み込みが完了したときに発行されます。

`loadingerror`

フォントフェイスの集合を読み込む際にエラーが発生した場合に発行されます。

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

`FontFaceSet.add()`

フォント集合にフォントを追加します。

`FontFaceSet.check()`

論理値で、フォントが読み込まれているかどうかを示しますが、読み込まれていないときは読み込みを開始しません。

`FontFaceSet.clear()`

手動で追加したフォントをすべてフォント集合から除去されます。CSS に接続されたフォントは影響を受けません。

`FontFaceSet.delete()`

手動で追加したフォントをフォント集合から取り除きます。CSS に接続されたフォントは影響を受けません。

`FontFaceSet.entries()`

`FontFaceSet` の各要素の値を挿入順に返す新しいイテレーターを返します。

`FontFaceSet.forEach()`

指定された関数を `FontFaceSet` オブジェクトの各値に対して実行します。

`FontFaceSet.has()`

指定された値で要素が存在するかどうかを検査して `Boolean` で返します。

`FontFaceSet.keys()`

`FontFaceSet.values()` の別名です。

`FontFaceSet.load()`

要求されたフォントのフォントフェイスのリストで解決する `Promise` を返します。

`FontFaceSet.values()`

`FontFaceSet` オブジェクトの各要素の値を挿入順に返す新しいイテレーターオブジェクトを返します。

仕様書
---

| Specification |
| --- |
| CSS Font Loading Module Level 3 # FontFaceSet-interface |

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

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


ConstantSourceNode - Web API

ConstantSourceNode
==================

`ConstantSourceNode` インターフェイスはウェブオーディオ API の一部で、出力が 1 つの不変の値である音声ソース（`AudioScheduledSourceNode` に基づいています）を表します。そのため、音声ソースから入ってくる値を一定に保つ必要がある場合に有益な値です。また、 `offset` の値を自動化したり、他のノードを接続したりして、構成可能な `AudioParam` として使用することができます。詳しくは ConstantSourceNode による複数の引数の制御 (en-US)を参照して下さい。

`ConstantSourceNode` は入力を持たず、ちょうど 1 つのモノラル（1 チャンネル）出力を持ちます。出力の値は常に `offset` 引数の値と同じです。

EventTarget

AudioNode

AudioScheduledSourceNode

ConstantSourceNode

|  |  |
| --- | --- |
| 入力数 | `0` |
| 出力数 | `1` |

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

`ConstantSourceNode()`

新しい `ConstantSourceNode` インスタンスを作成して返します。オプションとして、オブジェクトのプロパティの初期値を確立するためのオブジェクトを指定します。別の方法として、`BaseAudioContext.createConstantSource()` ファクトリーメソッドを使用することができます。AudioNode の作成を参照してください。

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

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

`offset`

このソースが連続的に出力する値を指定する `AudioParam`。既定値では 1.0 です。

### イベント

*親インターフェイスである `AudioScheduledSourceNode` からイベントを継承しています。*

**メモ:** 一部のブラウザーでは、このイベントの実装は `AudioScheduledSourceNode` インターフェイスの一部となっています。

`ended`

`ConstantSourceNode` データの再生が停止するたびに発生します。

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

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

**メモ:** 一部のブラウザーでは、これらのメソッドの実装は `AudioScheduledSourceNode` インターフェイスの一部となっています。

`start()`

正確な時刻に音を再生するようにスケジュールします。

`stop()`

正確な時刻に音を再生停止するようスケジュールします。

例
-

ConstantSourceNode での複数の引数の制御 (en-US)の記事では、 `ConstantSourceNode` を作成して 1 つのスライダーコントロールで 2 つの `GainNode` のゲインを変更できるようにしています。 3 つのノードはこのように設定されています。

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

constantNode = context.createConstantSource();
constantNode.connect(gainNode2.gain);
constantNode.connect(gainNode3.gain);
constantNode.start();

gainNode2.connect(context.destination);
gainNode3.connect(context.destination);
```

このコードでは、まずゲインノードを作成し、それらとその値を調整するボリュームコントロールをすべて 0.5 に設定します。次に `AudioContext.createConstantSource()` を呼び出して `ConstantSourceNode` を作成し、 2 つのゲインノードのそれぞれのゲイン引数を `ConstantSourceNode` に接続します。定電位ソースの `start()` メソッドを呼び出して定電位ソースを開始した後です。最後に、 2 つのゲインノードは音声出力先（通常はスピーカーまたはヘッドフォン）に接続されます。

これで `constantNode.offset` の値が変わるたびに、 `gainNode2` と `gainNode3` のゲインは同じ値になるように変化します。

この例を実際に見るには、また、これらのスニペットから派生したコードの残りを読むには、 ConstantSourceNode での複数の引数の制御 (en-US) を参照してください。

仕様書
---

| Specification |
| --- |
| Web Audio API # ConstantSourceNode |

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

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

関連情報
----

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


CookieStore - Web API

CookieStore
===========

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

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

**`CookieStore`** はクッキーストア API のインターフェイスで、ページまたはサービスワーカーから非同期に Cookie を取得、設定するためのメソッドを提供します。

`CookieStore` は `Window` または `ServiceWorkerGlobalScope` コンテキスト内のグローバスコープの属性を介してアクセスされます。そのため、コンストラクターはありません。

EventTarget

CookieStoreメソッド
----

`CookieStore.delete()`
Experimental

`delete()` メソッドは与えられた名前またはオプションオブジェクトを持つ Cookie を削除します。削除が完了すると解決される `Promise` が返されます。

`CookieStore.get()`
Experimental

`get()` メソッドは与えられた名前またはオプションオブジェクトで 1 つの Cookie を取得します。1 つの Cookie の詳細に解決される `Promise` を返します。

`CookieStore.getAll()`
Experimental

`getAll()` メソッドはマッチするすべての Cookie を取得します。Cookie のリストに解決される `Promise` を返します。

`CookieStore.set()`
Experimental

`set()` メソッドは与えられた名前と値またはオプションオブジェクトを Cookie に設定し、Cookie が設定されると解決される `Promise` を返します。

イベント
----

`change`
Experimental

`change` イベントは、任意の Cookie に変更が加えられたときに発生します。

例
-

この例では、Cookie を設定し、操作が成功したか失敗したかのフィードバックをコンソールに書き込んでいます。

```js
const day = 24 \* 60 \* 60 \* 1000;
cookieStore
  .set({
    name: "cookie1",
    value: "cookie1-value",
    expires: Date.now() + day,
    domain: "example.com",
  })
  .then(
    () => {
      console.log("It worked!");
    },
    (reason) => {
      console.error("It failed: ", reason);
    },
  );
```

仕様書
---

| Specification |
| --- |
| Cookie Store API # CookieStore |

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

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


FederatedCredential - Web API

FederatedCredential
===================

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

**`FederatedCredential`** は資格情報管理 API のインターフェイスで、連合アイデンティティプロバイダーからの資格情報についての情報を提供します。連合アイデンティティプロバイダーは、ウェブサイトが正しくユーザーを認証し、そのための API を提供する主体です。連合アイデンティティプロバイダーの一例として、 OpenID Connect があります。

**メモ:** 連合資格情報管理 API (FedCM) (en-US) は、ブラウザーで ID フェデレーションを処理するためのより完全なソリューションを提供し、`IdentityCredential` (en-US) 型を使用します。

対応しているブラウザーにおいては、このインターフェイスのインスタンスがグローバル `fetch` の `init` オブジェクトの `credential` メンバーとして渡されることがあります。

Credential

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

`FederatedCredential()`
Experimental

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

プロパティ
-----

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

`FederatedCredential.provider` 読取専用
Experimental

資格情報の連合アイデンティティプロバイダーの入った文字列を返します。

`FederatedCredential.protocol` 読取専用
Experimental

資格情報の連合アイデンティティプロトコルの入った文字列を返します。

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

なし。

メソッド
----

なし。

例
-

```js
const cred = new FederatedCredential({
  id,
  name,
  provider: "https://account.google.com",
  iconURL,
});

// 格納
navigator.credentials.store(cred).then(() => {
  // 他に何かをする
});
```

仕様書
---

| Specification |
| --- |
| Credential Management Level 1 # federated |

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

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


HTMLCanvasElement - Web API

HTMLCanvasElement
=================

**`HTMLCanvasElement`** インターフェイスは、`<canvas>` 要素のレイアウトや表示を操作するための属性やメソッドを提供します。`HTMLCanvasElement` は `HTMLElement` インターフェイスのプロパティやメソッドも継承しています。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLCanvasElement.height`

この `<canvas>` 要素の `height` 属性で、このキャンバスの 1 列分の論理ピクセル数（または RGBA 値の数）を反映した正の整数です。この属性が指定されていないか、無効な値であった場合は、`150` の既定値が用いられます。もし `<canvas>` に CSS の高さが[独立して]割り当てられていない場合、この値は CSS ピクセル数の単位で高さとしても使用されます。

`HTMLCanvasElement.width`

この `<canvas>` 要素の `width` 属性で、このキャンバスの 1 行分の論理ピクセル数（または RGBA 値の数）を反映した正の整数です。この属性が指定されていないか、無効な値であった場合は、`300` の既定値が用いられます。もし `<canvas>` に CSS の高さが[独立して]割り当てられていない場合、この値は CSS ピクセル数の単位で幅としても使用されます。

`HTMLCanvasElement.mozOpaque`
Non-standard

非推奨

この `<canvas>` 要素の `moz-opaque` 属性を反映した論理値です。半透明の部分の有無をキャンバスに伝えることができます。キャンバスに半透明がないことがわかれば、描画のパフォーマンスを最適化することができます。これは Mozilla ベースのブラウザーでのみ対応しています。代わりに標準化された `canvas.getContext('2d', { alpha: false })` を使用してください。

`HTMLCanvasElement.mozPrintCallback`
Non-standard

初期状態では null である関数です。ウェブコンテンツでここに JavaScript 関数を設定すると、ページの印刷中にキャンバスが再描画される際に呼び出されます。呼び出される際、コールバックあkン数には "printState" オブジェクトが渡されます。これは MozCanvasPrintState インターフェイスです。 コールバックは printState オブジェクトから描画するコンテキストを取得することができ、完了したら done() を呼び出す必要があります。`mozPrintCallback` の目的は、使用するプリンターの解像度でキャンバスの高解像度レンダリングを行うことです。このブログ記事を参照してください。

メソッド
----

*`HTMLElement` から継承しているメソッドがあります。*

`HTMLCanvasElement.captureStream()`

`CanvasCaptureMediaStreamTrack` (en-US) を返します。これはキャンバスの表面に対するリアルタイム動画キャプチャです。

`HTMLCanvasElement.getContext()`

このキャンバスのの描画コンテキストを返すか、対応していないコンテキスト ID の場合は null を返します。描画コンテキストを用いてキャンバスに描画することができます。getContext の引数に `"2d"` を渡して呼び出すと `CanvasRenderingContext2D` オブジェクトを返します。`"webgl"`（または `"experimental-webgl"`）で呼び出すと、 `WebGLRenderingContext` オブジェクトを返します。このコンテキストは WebGL を実装しているブラウザーでのみ使用できます。

`HTMLCanvasElement.toDataURL()`

`type` 引数で指定した形式（既定では `png`）で画像を表現した data-URL を返します。返す画像の解像度は 96dpi です。

`HTMLCanvasElement.toBlob()`

キャンパスに格納する画像を表す `Blob` オブジェクトを作成します。このファイルは、ユーザーエージェントの判断で、ディスクにキャッシュされたり、メモリーに格納されたりすることがあります。

`HTMLCanvasElement.transferControlToOffscreen()`

`OffscreenCanvas` (en-US) オブジェクトへの制御権を、メインスレッドまたはワーカーへ移譲します。

イベント
----

これらのイベントは、`addEventListener()` を使用して待ち受けしてください。

`contextlost`
Experimental

ユーザーエージェントが `CanvasRenderingContext2D` または `OffscreenCanvasRenderingContext2D` コンテキストに関連付けられたバッキングストレージが失われたことを検出した場合に発行されます。

`contextrestored`
Experimental

ユーザーエージェントが `CanvasRenderingContext2D` または `OffscreenCanvasRenderingContext2D` コンテキストの復元に成功した場合に発行されます。

`webglcontextcreationerror`

ユーザーエージェントが `WebGLRenderingContext` または `WebGL2RenderingContext` コンテキストを作成することができない場合に発行されます。

`webglcontextlost`

ユーザーエージェントが `WebGLRenderingContext` または `WebGL2RenderingContext` オブジェクトに関連付けられた描画バッファーが失われたことを検出した場合に発行されます。

`webglcontextrestored`

ユーザーエージェントが `WebGLRenderingContext` または `WebGL2RenderingContext` オブジェクトの描画バッファーを復元する場合に発行されます。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlcanvaselement |

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

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

関連情報
----

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


USB - Web API

USB
===

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

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

WebUSB API の **`USB`** インターフェイスは、ウェブページから USB デバイスを検出し、接続するための属性とメソッドを提供します。

`USB` オブジェクトにアクセスするためには、`navigator.usb` (en-US) を使用します。

USB インターフェイスは、`EventTarget` を継承します。

EventTarget

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

なし

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

`USB.getDevices()`
Experimental

接続されたペア設定済みのデバイスを表す `USBDevice` の配列で解決する `Promise` を返します。

`USB.requestDevice()`
Experimental

指定のデバイスが見つかった場合は `USBDevice` のインスタンスで解決する `Promise` を返します。このメソッドを呼ぶと、ユーザーエージェントのペア設定手続きを開始します。

イベント
----

`connect`
Experimental

ペア設定済みのデバイスが接続された時、発火します。

`disconnect`
Experimental

ペア設定済みのデバイスが切断された時、発火します。

仕様書
---

| Specification |
| --- |
| WebUSB API # usb |

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

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


BluetoothDevice - Web API

BluetoothDevice
===============

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

Web Bluetooth API の`BluetoothDevice` インターフェイスは、特定のスクリプト実行環境下における Bluetooth デバイスを表します。

EventTarget

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

`BluetoothDevice.id`
Experimental
 読取専用

デバイスを一意に識別する文字列です。

`BluetoothDevice.name`
Experimental
 読取専用

デバイスの人間にわかりやすい名前を表す文字列です。

`BluetoothDevice.gatt`
Experimental
 読取専用

デバイスの `BluetoothRemoteGATTServer` への参照です。

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

`BluetoothDevice.watchAdvertisements()`
Experimental

`undefined` で解決するか、アドバタイズが何らかの理由で表示できない場合はエラーで拒否される `Promise` を返します。

`BluetoothDevice.forget()`
Experimental

ユーザーがアクセスを許可したデバイスへのアクセスを無効化します。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # bluetoothdevice-interface |

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

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


MouseScrollEvent - Web API

MouseScrollEvent
================

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

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

**`MouseScrollEvent`** インターフェイスは、ユーザーがマウスホイールや同様の入力デバイスを動かすことによって発生するイベントを表します。

**警告:** wheel イベントにはこのインターフェイスを使用しないでください。

`MouseWheelEvent` と同様、このインターフェイスは非標準であり、非推奨です。 Gecko ベースのブラウザーでのみ使用されていました。代わりに、標準の *`WheelEvent`* を使用してください。

メソッド概要
------

```webidl
void initMouseScrollEvent(
  in DOMString typeArg,
  in boolean canBubbleArg,
  in boolean cancelableArg,
  in nsIDOMAbstractView viewArg,
  in long detailArg,
  in long screenXArg,
  in long screenYArg,
  in long clientXArg,
  in long clientYArg,
  in boolean ctrlKeyArg,
  in boolean altKeyArg,
  in boolean shiftKeyArg,
  in boolean metaKeyArg,
  in unsigned short buttonArg,
  in nsIDOMEventTarget relatedTargetArg,
  in long axis);
```

属性
--

| 属性 | 型 | 説明 |
| --- | --- | --- |
| `axis` 読取専用  | `long` | スクロール方向を示します。 |

定数
--

### デルタモード

| 定数 | 値 | 説明 |
| --- | --- | --- |
| `HORIZONTAL_AXIS` | `0x01` | このイベントは、水平ホイール操作によって発生した。 |
| `VERTICAL_AXIS` | `0x02` | このイベントは、垂直ホイール操作によって発生した。 |

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

`initMouseScrollEvent()`

`nsIDOMMouseScrollEvent::initMouseScrollEvent()` を参照。

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

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

関連情報
----

* `DOMMouseScroll`
* `MozMousePixelScroll`
* 標準化されたマウスホイールイベントオブジェクト: `WheelEvent`


端末方向イベント - Web API

端末方向イベント
========

端末方向イベントは、端末の物理的な方向を検出したり、端末の動きを検出したりするイベントです。

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

モバイル端末には、一般的にジャイロスコープ、コンパス、加速度などのセンサーがあり、端末上で動作するアプリケーションが端末の方向や動きを検出することができます。

方向イベントによって、ユーザーの端末の向きに応じて動作を変えたり、ユーザーが端末を移されたときに反応したりするウェブアプリケーションを書くことができます。

端末方向イベントを使用する典型的な機能には、以下のようなものがあります。

* ウェブベースのゲームにおいて、ユーザーが端末を傾けたり移動させたりすることによって、ゲーム内のキャラクターやオブジェクトの動きを制御することを可能にすること。
* 地図アプリケーションにおいて、端末の位置に基づいて地図の方向を変えたり、ユーザーの動きに合わせて更新される道順を提供したりするため。
* ジェスチャー認識 — 例えば、「シェイク」ジェスチャーを認識し、ユーザーが機器を振ったときに入力エリアをクリアするなどのアクションを実行するために使用します。

**メモ:** この API はモバイルブラウザーが広く対応しています。デスクトップ専用のブラウザーでは、ハードウェアの違いによる制約もありますが、センサーを搭載した端末でのこの API の主な用途を考えると、これらの制約が重要な意味を持つことはほとんどありません。

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

`DeviceOrientationEvent`

端末の物理的な方向の変化を表します。

`DeviceMotionEvent`

端末の加速度を、回転数に加えて表します。

`DeviceMotionEventAcceleration`

端末が経験している加速度を、 3 軸すべてで表します。

`DeviceMotionEventRotationRate`

端末が回転する速度を、 3 軸すべてで表します。

イベント
----

`deviceorientation`

地球座標フレームと比較した端末の現在の方向に関する、新しいデータが端末から利用できるときに発行されます。

`devicemotion`

一定間隔で発行され、その時点で端末が受けている加速度の物理的な力の大きさと、端末の回転速度を示します。

`deviceorientationabsolute`

端末の絶対的な方向が変化したときに発行されます。

仕様書
---

| Specification |
| --- |
| DeviceOrientation Event Specification  |

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

### api.Window.deviceorientation\_event

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

### api.Window.devicemotion\_event

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

### api.Window.deviceorientationabsolute\_event

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

### api.DeviceOrientationEvent

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

### api.DeviceMotionEvent

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

### api.DeviceMotionEventAcceleration

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

### api.DeviceMotionEventRotationRate

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

関連情報
----

* Device Orientation & Motion (web.dev)


FontFace - Web API

FontFace
========

**`FontFace`** は CSS フォント読み込み API のインターフェイスで、単一の使用可能なフォントフェイスを表します。

 このインターフェイスは、フォントフェイスのソース（外部リソースへの URL またはバッファー）と、`style` や `weight` などのフォントプロパティを定義します。
 URL フォントのソースの場合、リモートフォントが取得され読み込まれたときに発生させたり、読み込み状況を追跡したりすることができます。

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

`FontFace()`

新しい `FontFace` オブジェクトを、 URL で記述されている外部リソースまたは `ArrayBuffer` から構築して返します。

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

`FontFace.ascentOverride`

フォントのアセンダーの寸法を取得または設定する文字列です。これは `ascent-override` 記述子と等価です。

`FontFace.descentOverride`

フォントのディセンダーの寸法を取得または設定する文字列です。これは `descent-override` 記述子と等価です。

`FontFace.display`

フォントがダウンロードされ、使用する準備ができているかどうかによって、フォントフェイスがどのように表示されるかを決定する文字列。

`FontFace.family`

フォントのファミリを取得または設定する文字列です。これは `font-family` 記述子と等価です。

`FontFace.featureSettings`

フォントの variant プロパティでは利用できない、使用する頻度の低いフォント特性を取得または設定する文字列です。 CSS の `font-feature-settings` プロパティと等価です。

`FontFace.lineGapOverride`

フォントの行ギャップの寸法を取得または設定するには文字列を指定します。これは `line-gap-override` 記述子と等価です。

`FontFace.loaded` 読取専用

`Promise` を返します。これは、オブジェクトのコンストラクターで指定したフォントを読み込みに完了した場合に、現在の `FontFace` オブジェクトで解決したり、 `SyntaxError` `DOMException` で拒否されたりします。

`FontFace.status` 読取専用

フォントの状態を示す列挙値 `"unloaded"`、`"loading"`、`"loaded"`、`"error"` のいずれかを返します。

`FontFace.stretch`

文字列で、フォントがどのように伸縮するかを取得または設定します。これは `font-stretch` 記述子と同等です。

`FontFace.style`

文字列で、フォントのスタイルを取得または設定します。これは `font-style` 記述子と等価です。

`FontFace.unicodeRange`

文字列で、フォントを包含する Unicode コードポイントの範囲を取得または設定します。これは `unicode-range` 記述子と等価です。

`FontFace.variant`

文字列で、フォントのバリアントを取得または設定します。

`FontFace.variationSettings`
Experimental

文字列で、フォントのバリエーション設定を取得または設定します。これは `font-variation-settings` 記述子と等価です。

`FontFace.weight`

文字列で、フォントの太さが入ります。これは `font-weight` 記述子と等価です。

`FontFace.load()`

現在のオブジェクトのコンストラクターに渡された要求（場所または元のオブジェクト内のバッファーも含む）に基づいてフォントを読み込み、現在の FontFace オブジェクトに解決する `Promise` を返します。

例
-

 下記のコードでは、URL "myfont.woff" のデータといくつかのフォント記述子を使用してフォントフェイスを定義しています。
 これがどのように動作するのかを示すために、プロパティを使用して `stretch` 記述子を定義しています。

```js
// FontFace を定義
const font = new FontFace("myfont", "url(myfont.woff)", {
  style: "italic",
  weight: "400",
});

font.stretch = "condensed";
```

次に、 `FontFace.load()` を使ってフォントを読み込み、返すプロミスを使用して完了を追跡したり、エラーを報告したりします。

```js
// フォントを読み込む
font.load().then(
  () => {
    // 解決 - document.fonts にフォントを追加
  },
  (err) => {
    console.error(err);
  },
);
```

 実際にフォントを使用するには、 `FontFaceSet` に追加する必要があります。
 これはフォントを読み込む前でも後でもできます。

それ以外の例は、 CSS フォント読み込み API > 例を参照してください。

仕様書
---

| Specification |
| --- |
| CSS Font Loading Module Level 3 # fontface-interface |

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

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

関連情報
----

* @font-face


self.crypto - Web API

self.crypto
===========

グローバルの **`crypto`** プロパティは読み取り専用で、グローバルオブジェクトに関連付けられた `Crypto` オブジェクトを返します。このオブジェクトは、ウェブページが暗号に関連したサービスにアクセスできるようにします。

このプロパティ自体は読み取り専用ですが、そのメソッドすべて（加えて子オブジェクトのメソッドと `SubtleCrypto`）は読み取り専用ではありません。そのためポリフィルによる攻撃には脆弱です。

`crypto` はすべてのウィンドウで使用できますが、返される `Crypto` オブジェクトは安全でないコンテキストで使用できる機能は 1 つしかありません。 `getRandomValues()` メソッドです。一般的に、この API は安全なコンテキストでのみ使用する必要があります。

構文
--

`Crypto` インターフェイスのインスタンスで、一般用途の暗号技術と強力な乱数生成器を提供します。

例
-

この例では、 `crypto` プロパティを使用して `getRandomValues()` メソッドへアクセスします。

### JavaScript

```js
genRandomNumbers = function getRandomNumbers() {
  const array = new Uint32Array(10);
  crypto.getRandomValues(array);

  const randText = document.getElementById("myRandText");
  randText.textContent = "乱数: ";
  for (let i = 0; i < array.length; i++) {
    randText.textContent += array[i] + " ";
  }
};
```

### HTML

```html
<p id="myRandText">乱数:</p>
<button type="button" onClick="genRandomNumbers()">10 個の乱数を生成</button>
```

### 結果

仕様書
---

| Specification |
| --- |
| Web Cryptography API # dom-windoworworkerglobalscope-crypto |

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

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

関連情報
----

* `Window` グローバルオブジェクト
* `Crypto` インターフェイス


NodeList - Web API

NodeList
========

**`NodeList`** オブジェクトはノードの集合であり、 `Node.childNodes` などのプロパティや `document.querySelectorAll()` などのメソッドの返値として用いられます。

**メモ:** `NodeList` は `Array` とは異なりますが、`forEach()` メソッドで処理を反復適用することは可能です。`Array.from()` を使うことで `Array` に変換することができます。

生きた NodeList と静的な NodeList
--------------------------

NodeList には *生きた* ものと *静的な* ものの 2 種類のものがありますが、どちらも `NodeList` と考えられています。

### 生きた NodeList

場合によっては `NodeList` は *生きた* ものになります。DOM が変化すると、自動的に集合が更新されることを意味しています。

For example, `Node.childNodes` is live:

```js
const parent = document.getElementById("parent");
let childNodes = parent.childNodes;
console.log(childNodes.length); // "2" と仮定すると
parent.appendChild(document.createElement("div"));
console.log(childNodes.length); // "3" が出力される
```

### 静的な NodeList

一方、 `NodeList` が *静的な* ものである場合があります。この場合は、DOM 内の変更が集合の内容に影響を与えません。`document.querySelectorAll()` メソッドは、静的な `NodeList` を返します。

`NodeList` の各要素に反復処理を行う方法を選択したり、リストの長さをキャッシュしたりする場合は、この違いを考えておくといいでしょう。

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

`NodeList.length`

`NodeList` に含まれるノードの数です。

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

`NodeList.item()`

指定されたインデックスに対応するリスト内の要素を返します。インデックスが範囲外の場合は `null` を返します。

`nodeList[i]` のアクセスの代替手段です（この場合、`i` が範囲外の時には `undefined` が返ります）。これは JavaScript 以外の言語による DOM の実装で便利です。

`NodeList.entries()`

`イテレーター`を返し、これによってコードが集合に含まれているキーと値のペアを走査することができます。 (この場合、キーは 0 から始まる数値で値はノードです。)

`NodeList.forEach()`

指定された関数を `NodeList` の各要素に対して実行し、その要素を関数の引数として渡します。

`NodeList.keys()`

`イテレーター`を返し、これによってコードが集合に含まれているキーと値のペアのキーを走査することができます。（この場合、キーは 0 から始まる数値です。）

`NodeList.values()`

`イテレーター`を返し、これによってコードが集合に含まれているキーと値のペアの値（ノード）を走査することができます。

例
-

`NodeList` の中のアイテムは、for ループで走査することができます。

```js
for (let i = 0; i < myNodeList.length; i++) {
  let item = myNodeList[i];
}
```

リストの要素について処理を回すために `for...in` を使用しないでください。`NodeList` のプロパティである要素に加えて、 `length` や `item` プロパティについても処理が適用されるため、 `element` オブジェクトのみ処理すべきスクリプトではエラーが生じます。また、`for...in` で取得されるプロパティの順番は保証されていません。

`for...of` ループであれば、`NodeList` オブジェクトを正しく扱うことができます。

```js
const list = document.querySelectorAll("input[type=checkbox]");
for (const checkbox of list) {
  checkbox.checked = true;
}
```

最近のブラウザーでは、イテレーターに基づくメソッドとして `forEach()`, `entries()`, `values()`, `keys()` に対応しています。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-nodelist |

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

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


StorageManager - Web API

StorageManager
==============

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

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

Storage API の **`StorageManager`** インターフェイスは、永続性のパーミッションの管理と、利用可能なストレージの見積もりのインターフェイスを提供します。`navigator.storage` (en-US) か `WorkerNavigator.storage` のいずれかを使用して、このインターフェイスへの参照を取得できます。

メソッド
----

`StorageManager.estimate()` 安全なコンテキスト用

オリジンの使用量とクォータを含む `StorageEstimate` オブジェクトを返します。

`StorageManager.persist()` 安全なコンテキスト用

ユーザーエージェントがサイトのストレージを永続化できる場合に `true` に解決される `Promise` を返します。

`StorageManager.persisted()` 安全なコンテキスト用

サイトのストレージに永続性がすでに付与されている場合に `true` に解決される `Promise` を返します。

仕様
--

| Specification |
| --- |
| Storage Standard # storagemanager |

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

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


HTMLHRElement - Web API

HTMLHRElement
=============

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

EventTarget

Node

Element

HTMLElement

HTMLHRElementプロパティ
-----

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

`HTMLHRElement.align`
非推奨

文字列で、この区切り線の周囲のコンテキストに対する配置を示す列挙型の属性です。

`HTMLHRElement.color`
非推奨

文字列で、この区切り線の色の名前を表します。

`HTMLHRElement.noshade`
非推奨

論理値で、この区切り線に陰影をつけないことを設定します。

`HTMLHRElement.size`
非推奨

文字列で、この区切り線の高さを表します。

`HTMLHRElement.width`
非推奨

文字列で、この区切り線のページ上での幅を表します。

メソッド
----

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlhrelement |

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

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

関連情報
----

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


Blob - Web API

Blob
====

**`Blob`** オブジェクトは blob、すなわち不変の生データであるファイルのようなオブジェクトを表します。テキストやバイナリーデータとして読み込んだり、`ReadableStream` に変換してそのメソッドを使ったデータ処理をしたりすることができます。

Blob が表現することができるデータは必ずしも JavaScript ネイティブ形式である必要はありません。`File` インターフェイスは Blob をベースにしており、 Blob の機能を継承してユーザーのシステム上のファイルをサポートするように拡張しています。

Blob の使用
--------

他の Blob 以外のオブジェクトやデータから `Blob` を作成するには、`Blob()` コンストラクターを使用します。他の Blob のデータのサブセットを含む Blob を作成するには、 `slice()` メソッドを使用します。ユーザーのファイルシステム上のファイルの `Blob` オブジェクトを取得するには、 `File` のドキュメントを参照してください。

`Blob` オブジェクトを受け入れる API も、 `File` のドキュメントに掲載しています。

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

`Blob()`

コンストラクターに渡された配列内のすべてのデータを連結したものを含む、新しく作成された `Blob` オブジェクトを返します。

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

`Blob.prototype.size` 読取専用

`Blob` オブジェクトに含まれるデータのサイズ（バイト単位）。

`Blob.prototype.type` 読取専用

`Blob` に含まれるデータの MIME タイプを示す文字列。タイプが不明な場合、この文字列は空です。

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

`Blob.prototype.arrayBuffer()`

`Blob` の全内容をバイナリーデータとして含む `ArrayBuffer` で解決するプロミスを返します。

`Blob.prototype.slice()`

呼び出された Blob の指定されたバイト数範囲のデータを含む新しい `Blob` オブジェクトを返します。

`Blob.prototype.stream()`

`Blob` の内容を読み込むために使用できる `ReadableStream` を返します。

`Blob.prototype.text()`

UTF-8 テキストとして解釈された Blob の内容全体を含む文字列で解決するプロミスを返します。

例
-

Blob の作成
--------

`Blob()` コンストラクターは、他のオブジェクトから Blob を作成することができます。たとえば、JSON 文字列から Blob を作成するには、次のようにします。

```js
const obj = { hello: "world" };
const blob = new Blob([JSON.stringify(obj, null, 2)], {
  type: "application/json",
});
```

### 型付き配列の内容を表す URL の作成

次のコードは、 JavaScript の型付き配列を作成し、型付き配列のデータを含む新しい `Blob` を作成します。次に、`URL.createObjectURL()` を呼び出して、Blob を URL に変換します。

#### HTML

```html
<p>
  この例では、スペース文字から文字 Z までの ASCII
  コードを含む型付けされた配列を作成し、それをオブジェクト URL
  に変換します。そのオブジェクト URL
  を開くためのリンクが作成されます。リンクをクリックすると、デコードされたオブジェクト
  URL が表示されます。
</p>
```

#### JavaScript

このコードの例の主要な部分は `typedArrayToURL()` 関数で、与えられた型付き配列から `Blob` を作成し、それに対するオブジェクト URL を返します。データをオブジェクト URL に変換した後は、要素の `<img>` 属性の値として含む、さまざまな方法で使用することができます（もちろん、データに画像が含まれていることを前提としています）。

```js
function showViewLiveResultButton() {
  if (window.self !== window.top) {
    // この文書がフレーム内にある場合、最初にユーザーに独自のタブ
    // またはウィンドウで開くよう指示します。そうでなければ、
    // この例はうまく動作しません。
    const p = document.querySelector("p");
    p.textContent = "";
    const button = document.createElement("button");
    button.textContent = "上記のコード例の結果をライブで見る";
    p.append(button);
    button.addEventListener("click", () => window.open(location.href));
    return true;
  }
  return false;
}

if (!showViewLiveResultButton()) {
  function typedArrayToURL(typedArray, mimeType) {
    return URL.createObjectURL(
      new Blob([typedArray.buffer], { type: mimeType }),
    );
  }
  const bytes = new Uint8Array(59);

  for (let i = 0; i < 59; i++) {
    bytes[i] = 32 + i;
  }

  const url = typedArrayToURL(bytes, "text/plain");

  const link = document.createElement("a");
  link.href = url;
  link.innerText = "Open the array URL";

  document.body.appendChild(link);
}
```

#### 結果

### Blob からデータを抽出する

`Blob` から内容を読み込む方法の 1 つは、`FileReader` を使用することです。次のコードは、`Blob` の内容を型付き配列として読み込みます。

```js
const reader = new FileReader();
reader.addEventListener("loadend", () => {
  // reader.result には blob の内容が型付き配列として格納されます。
});
reader.readAsArrayBuffer(blob);
```

`Blob` から内容を読み込む別の方法としては、 `Response` を使用する方法があります。次のコードは、`Blob` の内容をテキストとして読み取るものです。

```js
const text = await new Response(blob).text();
```

または、`Blob.prototype.text()` を使用します。

```js
const text = await blob.text();
```

`FileReader` の他のメソッドを使用することで、Blob の内容を文字列またはデータ URL として読み込むことができます。

仕様書
---

| Specification |
| --- |
| File API # blob-section |

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

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

関連情報
----

* `FileReader`
* `File`
* `URL.createObjectURL`
* ウェブアプリケーションからのファイルの使用


ウェブ定期バックグラウンド同期 API - Web API

ウェブ定期バックグラウンド同期 API
===================

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

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

ウェブ定期バックグラウンド同期 API (Web Periodic Background Synchronization API) は、サービスワーカー上で定期的にネットワーク通信ができる状況で実行されるタスクを登録する機能を提供します。それらのタスクを定期バックグラウンド同期リクエスト (periodic background sync requests) と呼びます。

ウェブ定期バックグラウンド同期の概念と用法
---------------------

定期バックグラウンド同期 API により、ウェブアプリケーションが定期的にサービスワーカーに更新を行うよう知らせることができます。利用法としては、端末が Wi-Fi に接続している間に最新のコンテンツを取得したり、アプリケーションをバックグラウンドで更新したりすることが挙げられます。

API が呼び出された際には最小の時間間隔が設定されますが、ユーザーエージェントはサービスワーカーがそのイベントを受け取るタイミングに影響を与える様々な要素を考慮します。その要素には、例えばウェブサイトのエンゲージメントや特定のネットワークへの接続などがあります。

`PeriodicSyncManager` インターフェースは `ServiceWorkerRegistration.periodicSync` によって提供されます。一意のタグが sync イベントの 'name' として設定され、これは `ServiceWorker` スクリプト内で取得することができます。イベントを受け取った際には、キャッシュの更新や新たなリソースの取得といった任意の利用可能な機能を実行することができます

この API はサービスワーカーに依存しているため、この API も安全なコンテキストでしか利用できません。

**メモ:** 執筆時点では、ウェブ定期バックグラウンド同期 API は、インストールされたプログレッシブウェブアプリを介してのみ利用可能です。

ウェブ定期バックグラウンド同期インターフェイス
-----------------------

`PeriodicSyncManager`

ネットワーク接続がある状態で、定期的にサービスワーカーの中で実行されるタスクを登録します。これらのタスクは、定期バックグラウンド同期要求として参照されます。

`PeriodicSyncEvent` (en-US)

`ServiceWorker` のグローバルスコープに送信される、同期イベントを表します。これは、ネットワーク接続があるサービスワーカーのタスクを実行する方法を指定されたものです。

サービスワーカーへの追加
------------

定期バックグラウンド同期仕様では、定期バックグラウンド同期を使用するためのエントリーポイントを提供するために、サービスワーカー API に以下のような追加項目を指定しています。

`ServiceWorkerRegistration.periodicSync` 読取専用

特定の間隔で実行するタスクを登録するための `PeriodicSyncManager` インターフェイスへの参照を返します。

`onperiodicsync`

`periodicsync` イベントが発生したときに発行されるイベントハンドラーです。これは `PeriodicSyncManager` を登録する際に指定した、時刻を指定した間隔で実行されます。

例
-

以下の例では、インターフェイスを使用する方法を示しています。

### 定期バックグラウンド同期のリクエスト

次の非同期関数は、閲覧コンテキストから最小 1 日間隔の定期バックグラウンド同期を登録するものです。

```js
async function registerPeriodicNewsCheck() {
  const registration = await navigator.serviceWorker.ready;
  try {
    await registration.periodicSync.register("get-latest-news", {
      minInterval: 24 \* 60 \* 60 \* 1000,
    });
  } catch {
    console.log("Periodic Sync could not be registered!");
  }
}
```

### 定期バックグラウンド同期をタグで検証

このコードは、指定されたタグを持つ定期バックグラウンド同期タスクが登録されているかどうかを調べるものです。

```js
navigator.serviceWorker.ready.then((registration) => {
  registration.periodicSync.getTags().then((tags) => {
    if (tags.includes("get-latest-news")) skipDownloadingLatestNewsOnPageLoad();
  });
});
```

### 定期バックグラウンド同期タスクを削除

以下のコードでは、定期バックグラウンド同期タスクを削除し、バックグラウンドでの記事の同期を停止しています。

```js
navigator.serviceWorker.ready.then((registration) => {
  registration.periodicSync.unregister("get-latest-news");
});
```

### サービスワーカーの定期バックグラウンド同期の待ち受け

以下の例では、サービスワーカーの定期的な同期イベントに応答する方法を示しています。

```js
self.addEventListener("periodicsync", (event) => {
  if (event.tag === "get-latest-news") {
    event.waitUntil(fetchAndCacheLatestNews());
  }
});
```

仕様書
---

| Specification |
| --- |
| Web Periodic Background Synchronization  |

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

### api.PeriodicSyncManager

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

### api.ServiceWorkerGlobalScope.periodicsync\_event

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

関連情報
----

* An article on using Periodic Background Sync
* A Periodic Background Sync demo app


PannerNode - Web API

PannerNode
==========

`PannerNode` は音源の空間上の位置と振る舞いを表現したインターフェイスで、`AudioNode` の一種です。右手直交座標系に従って位置を表し、音源の動きは速度ベクトルと、向きを表すサウンドコーンを利用して表現します。

`PannerNode` は必ず 1 つの入力と、1 つの出力を持ちます。入力はモノラルでもステレオでも構いませんが、出力は必ずステレオとなります。つまりパンニングを行うには最低でも 2 チャンネルの音声チャンネルを必要です。

![The PannerNode defines a spatial position and direction for a given signal.](/ja/docs/Web/API/PannerNode/webaudiopannernode.png)

EventTarget

AudioNode

PannerNode

|  |  |
| --- | --- |
| 入力数 | `1` |
| 出力数 | `1` |
| チャンネルの数え方 | `"clamped-max"` |
| チャンネル数 | `2` |
| チャンネルの意味 | `"speakers"` |

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

`PannerNode()` (en-US)

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

プロパティ
-----

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

**メモ:** 向きと位置の設定と取得は異なる方法で行います。これは、これらの値が `AudioParam` として保存されてるためです。値の取得は `PannerNode.positionX` のように行えますが、同じ属性に対して値を設定するには `PannerNode.positionX.value` のように行います。そのため、これらの値は、WebIDL にあるように、読み取り専用とは定義されていません。

`PannerNode.coneInnerAngle`

倍精度実数値で、円錐の角度を度単位で記述し、その内側では容量が減少しません。

`PannerNode.coneOuterAngle`

倍精度実数値で、音量を `coneOuterGain` プロパティで定義された、一定値だけ減少させる円錐の外側の角度を度単位で記述します。

`PannerNode.coneOuterGain` (en-US)

倍精度実数値で、 `coneOuterAngle` 属性で定義された円錐体の外側の音量の減少量を記述します。既定値は `0` で、音が聴こえなくなることを意味します。

`PannerNode.distanceModel` (en-US)

音量の低減計算に用いるアルゴリズムを定めます。アルゴリズムは定められたものの中から選択します。とりうる値は `"linear"`、`"inverse"`、`"exponential"`で、既定値は `"inverse"`です。

`PannerNode.maxDistance` (en-US)

音源と聴取者の最大距離を定義します。これを超えた場合、音量の低減計算が行われません。

`PannerNode.orientationX`

右手直交座標系における音源の向きを表すベクトルのうち、水平方向の値です。`AudioParam` は直接変更できないため、値の変更は`value` 属性を通して行います。既定値は 1 となっています。

`PannerNode.orientationY` (en-US)

右手直交座標系における音源の向きを表すベクトルのうち、垂直方向の値です。`AudioParam` は直接変更できないため、値の変更は`value` 属性を通して行います。既定値は 0 となっています。

`PannerNode.orientationZ` (en-US)

右手直交座標系における音源の向きを表すベクトルのうち、奥行き(前後)方向の値です`AudioParam` は直接変更できないため、値の変更は`value` 属性を通して行います。既定値は 0 となっています。

`PannerNode.panningModel` (en-US)

立体音響計算を行うアルゴリズムを定めます。アルゴリズムは定められたものの中から選びます。

`PannerNode.positionX` (en-US)

右手直交座標系における音源の位置を表すベクトルのうち、水平方向の値です`AudioParam` は直接変更できないため、値の変更は`value` 属性を通して行います。既定値は 0 となっています。

`PannerNode.positionY` (en-US)

右手直交座標系における音源の位置を表すベクトルのうち、垂直方向の値です`AudioParam` は直接変更できないため、値の変更は`value` 属性を通して行います。既定値は 0 となっています。

`PannerNode.positionZ` (en-US)

右手直交座標系における音源の位置を表すベクトルのうち、奥行き(前後)方向の値です`AudioParam` は直接変更できないため、値の変更は`value` 属性を通して行います。既定値は 0 となっています。

`PannerNode.refDistance` (en-US)

音量の低減計算に用いる基準距離を表します。音源と聴取者との距離がこれを超えた場合、`rolloffFactor` と `distanceModel` に基づいて音量の低減が発生します。

`PannerNode.rolloffFactor` (en-US)

音源が聴取者から離れていく際に起きる音量の低減量を定めます。この値は、全ての距離モデルで利用されます。

メソッド
----

*親である `AudioNode` のメソッドを継承しています。*

`PannerNode.setPosition()` (en-US)
非推奨

聞き手（`BaseAudioContext.listener` 属性に格納された `AudioListener` オブジェクトで表される）からの音源の相対位置を定義します。

`PannerNode.setOrientation()` (en-US)
非推奨

音源が再生されている方向を設定します。

`PannerNode.setVelocity()`
非推奨

音源の速度を表したベクトルです。移動する速さと方向を表しています。以前の仕様では下流に接続された`AudioBufferSourceNode` のピッチを上げ下げするために、`PannerNode` は速度を表す属性を持っていました。この機能は明確に定義されておらず、問題も多かったため、現在の仕様からは削除されています。

例
-

コード例については `BaseAudioContext.createPanner()` を参照してください。

仕様書
---

| Specification |
| --- |
| Web Audio API # PannerNode |

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

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

関連情報
----

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


HTMLAudioElement - Web API

HTMLAudioElement
================

**`HTMLAudioElement`** インターフェイスは `<audio>` 要素のプロパティと、操作するメソッドへのアクセスを提供します。

この要素は `HTMLMediaElement` インターフェイスから派生しており、プロパティとメソッドを継承しています。

EventTarget

Node

Element

HTMLElement

HTMLMediaElement

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

`Audio()`

新しい `HTMLAudioElement` オブジェクトを作成し、返します。オプションとして、ファイルの URL が指定された場合は、音声ファイルを読み込む処理を開始します。

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

*固有のプロパティはありません。親である `HTMLMediaElement` および `HTMLElement` からプロパティを継承しています。*

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

*`HTMLMediaElement` および `HTMLElement` からメソッドを継承しています。*

例
-

### 基本的な使用

`Audio()` を使用すると、`HTMLAudioElement` を完全に JavaScript で生成することができます。

```js
const audioElement = new Audio("car\_horn.wav");
```

それからこの要素に対して `play()` を呼び出すことができます。

```js
audioElement.play();
```

**メモ:** よくあるのが、ページを読み込んだらすぐに audio 要素を再生しようとすることです。現代のブラウザーは、既定の自動再生ポリシーによって、このようなことが起こらないようにブロックしています。良い習慣と回避方法については、Firefox および Chrome のものを参照してください。

audio 要素のプロパティとしてよく用いられるものには、`src`, `currentTime`, `duration`, `paused`, `muted`, `volume` などがあります。このスニペットは、音声ファイルの再生時間を変数にコピーします。

```js
const audioElement = new Audio("car\_horn.wav");
audioElement.addEventListener("loadeddata", () => {
  let duration = audioElement.duration;
  // これで変数 duration に音声クリップの再生時間（2 つ目）が格納される
});
```

イベント
----

*親である `HTMLMediaElement` およびその祖先である `HTMLElement` からイベントを継承しています。* イベントを待ち受けするには、`addEventListener()` を使用するか、このインターフェイスの `onイベント名` プロパティにイベントリスナーを代入してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlaudioelement |

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

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

関連情報
----

* ウェブメディア技術
* HTML での音声と動画の使用
* このインタフェースを実装した HTML 要素: `<audio>`


NodeIterator - Web API

NodeIterator
============

**`NodeIterator`** インターフェイスは、DOM のサブツリー内に存在するノードのリストのメンバーに対するイテレーターを表します。ノードは文書内に現れる順番で返されます。

構文
--

`NodeIterator` は、以下のように `Document.createNodeIterator()` メソッドを用いて作成することができます。

```js
const nodeIterator = document.createNodeIterator(root, whatToShow, filter);
```

プロパティ
-----

*このインターフェイスが継承するプロパティはありません。*

`NodeIterator.root` (en-US) 読取専用

`NodeIterator` を作成したときに指定したルートノードを表す `Node` を返します。

`NodeIterator.whatToShow` (en-US) 読取専用

提供しなければならない `Node` の型を表す定数で構成されるビットマスクである `unsigned long` を返します。一致しないノードはスキップされますが、その子は関連があれば含まれます。

使用できる値は以下のとおりです。

| 定数 | 数値 | 説明 |
| --- | --- | --- |
| `NodeFilter.SHOW_ALL` | `4294967295` （すなわち `unsigned long` の最大値） | すべてのノードを表示します。 |
| `NodeFilter.SHOW_ATTRIBUTE`
非推奨
 | `2` | 属性の `Attr` ノードを表示します。これはルートとして `Attr` を含む `NodeIterator` を作成する場合に限り、意味があります。この場合は、反復処理や走査の最初の位置に属性ノードが現れることを意味します。属性はほかのノードの子ではありませんので、文書ツリーを走査するときは出現しません。 |
| `NodeFilter.SHOW_CDATA_SECTION`
非推奨
 | `8` | `CDATASection` ノードを表示します。 |
| `NodeFilter.SHOW_COMMENT` | `128` | `Comment` ノードを表示します。 |
| `NodeFilter.SHOW_DOCUMENT` | `256` | `Document` ノードを表示します。 |
| `NodeFilter.SHOW_DOCUMENT_FRAGMENT` | `1024` | `DocumentFragment` ノードを表示します。 |
| `NodeFilter.SHOW_DOCUMENT_TYPE` | `512` | `DocumentType` ノードを表示します。 |
| `NodeFilter.SHOW_ELEMENT` | `1` | `Element` ノードを表示します。 |
| `NodeFilter.SHOW_ENTITY`
非推奨
 | `32` | 古いもので、もう使用されません。 |
| `NodeFilter.SHOW_ENTITY_REFERENCE`
非推奨
 | `16` | 古いもので、もう使用されません。 |
| `NodeFilter.SHOW_NOTATION`
非推奨
 | `2048` | 古いもので、もう使用されません。 |
| `NodeFilter.SHOW_PROCESSING_INSTRUCTION` | `64` | `ProcessingInstruction` ノードを表示します。 |
| `NodeFilter.SHOW_TEXT` | `4` | `Text` ノードを表示します。 |

`NodeIterator.filter` (en-US) 読取専用

関連するノードを選択するために使用した `NodeFilter` (en-US) を返します。

`NodeIterator.referenceNode` (en-US) 読取専用

Experimental

イテレーターが結び付けられている `Node` を返します。

`NodeIterator.pointerBeforeReferenceNode` (en-US) 読取専用
Experimental

論理値のフラグで、 `NodeIterator` が前に固定されるかどうかを示します。前に固定される場合は `true`、後に固定される場合は `false` になります。

メソッド
----

*このインターフェイスが継承するメソッドはありません。*

`NodeIterator.detach()` (en-US)
非推奨

これは無操作です。です。これは何も行いません。以前は `NodeIterator` を使用しなくなったことをエンジンに伝えていましたが、現在は不要です。

`NodeIterator.previousNode()` (en-US)

文書内で前の `Node` を返します。ノードがない場合は `null` を返します。

`NodeIterator.nextNode()` (en-US)

文書内で次の `Node` を返します。ノードがない場合は `null` を返します。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-nodeiterator |

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

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

関連情報
----

* 作成するメソッド: `Document.createNodeIterator()`
* 関連インターフェイス
    + `NodeFilter` (en-US)
    + `TreeWalker`


CSSConditionRule - Web API

CSSConditionRule
================

**`CSSConditionRule`** インターフェイスを自訴すしているオブジェクトは、条件と文のブロックからなる単一の条件付き CSS アットルールを表します。

`CSSConditionRule` からは `CSSMediaRule` と `CSSSupportsRule` の 2 つのオブジェクトが派生しています。

CSSRule

CSSGroupingRule

CSSConditionRuleプロパティ
-----

*祖先である `CSSRule` および `CSSGroupingRule` から継承したプロパティもあります。*

`CSSConditionRule.conditionText`

ルールの条件となるテキストを表します。

メソッド
----

独自のメソッドはありません。祖先である `CSSRule` および `CSSGroupingRule` から継承したメソッドがあります。

仕様書
---

| Specification |
| --- |
| CSS Conditional Rules Module Level 3 # the-cssconditionrule-interface |

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

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

関連情報
----

* 動的なスタイル情報の使用


バッテリー状態 API - Web API

バッテリー状態 API
===========

**バッテリー状態 API** は、 **バッテリー API** と呼ばれることの方が多いのですが、システムのバッテリー充電レベルに関する情報の提供、およびバッテリーレベルや充電状態が変化したときに発生するイベントによる通知を可能にします。これは、バッテリーが消耗したときにバッテリー消費を減らすためアプリのリソース使用状況を調整したり、データを失わないためにバッテリーが切れる前に変更点を保存したりするために使用できます。

**メモ:** この API はウェブワーカー では利用できません（`WorkerNavigator` には公開されていません）。

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

`BatteryManager` (en-US)

システムのバッテリー充電レベルに関する情報を提供します。

`navigator.getBattery()` 読取専用

`Promise` を返します。これは `BatteryManager` (en-US) オブジェクトで解決します。

例
-

以下の例では、充電状況（電源に接続して充電中であるか）の変化およびバッテリーレベルの変化およびタイミングを監視します。これは、 `chargingchange` (en-US), `levelchange` (en-US), `chargingtimechange` (en-US), `dischargingtimechange` (en-US) の各イベントをそれぞれ待ち受けすることによって実現します。

```js
navigator.getBattery().then((battery) => {
  function updateAllBatteryInfo() {
    updateChargeInfo();
    updateLevelInfo();
    updateChargingInfo();
    updateDischargingInfo();
  }
  updateAllBatteryInfo();

  battery.addEventListener("chargingchange", () => {
    updateChargeInfo();
  });
  function updateChargeInfo() {
    console.log(`Battery charging? ${battery.charging ? "Yes" : "No"}`);
  }

  battery.addEventListener("levelchange", () => {
    updateLevelInfo();
  });
  function updateLevelInfo() {
    console.log(`Battery level: ${battery.level \* 100}%`);
  }

  battery.addEventListener("chargingtimechange", () => {
    updateChargingInfo();
  });
  function updateChargingInfo() {
    console.log(`Battery charging time: ${battery.chargingTime} seconds`);
  }

  battery.addEventListener("dischargingtimechange", () => {
    updateDischargingInfo();
  });
  function updateDischargingInfo() {
    console.log(`Battery discharging time: ${battery.dischargingTime} seconds`);
  }
});
```

仕様書に記載されているサンプルもご覧ください。

仕様書
---

| Specification |
| --- |
| Battery Status API  |

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

### api.BatteryManager

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

### api.Navigator.getBattery

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

関連情報
----

* Hacks blog post - Using the Battery API


Crypto - Web API

Crypto
======

**`Crypto`** インターフェイスは、現在のコンテキストで利用できる基本的な暗号機能を表します。
 これは、暗号強度の強い乱数生成器と暗号プリミティブへのアクセスを許可します。

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

ウェブ暗号 API はグローバルの `crypto` プロパティからアクセスすることができ、これが `Crypto` オブジェクトです。

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

*このインターフェイスは、 `RandomSource` 上に定義されたプロパティを実装します。*

`Crypto.subtle` 読取専用  安全なコンテキスト用

ハッシュや署名、暗号化、復号など、共通の暗号プリミティブへのアクセスを提供する `SubtleCrypto` オブジェクトを返します。

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

*このインターフェイスは、 `RandomSource` 上に定義されたメソッドを実装します。*

`Crypto.getRandomValues()`

渡された `TypedArray` を暗号強度の強い乱数値で埋めます。

`Crypto.randomUUID()`

ランダムに生成された 36 文字の v4 UUID を返します。

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

 ウェブ暗号 API は、安全でないコンテキスト上で使用するのは避けるべきです。 `Crypto` インターフェイスが安全でないコンテキスト上に存在しいたとしてもです。
 さらに、 `Crypto` の `getRandomValues()` メソッドは安全でないコンテキストでも使用できますが、 `subtle` プロパティは使用できません。

一般的には、 `Crypto` は安全なコンテキストでのみ使用できるものとして扱うべきでしょう。

仕様書
---

| Specification |
| --- |
| Web Cryptography API # crypto-interface |

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

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

関連情報
----

* ウェブセキュリティ
* 安全なコンテキスト
* 安全なコンテキストに制限されている機能
* Transport Layer Security
* Strict-Transport-Security


FileSystemHandle - Web API

FileSystemHandle
================

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

`File System Access API` の **`FileSystemHandle`** インターフェイスは、ファイルまたはディレクトリーのエントリーを表すオブジェクトです。複数のハンドルが同じエントリーを表す可能性もあります。`FileSystemHandle` を直接扱う場面はほとんどなく、子インターフェイスの `FileSystemFileHandle` や `FileSystemDirectoryHandle` を扱うでしょう。

FileSystemHandle がもととなるインターフェイス
-------------------------------

以下が、`FileSystemHandle` インターフェイスがもととなっているインターフェイスの一覧です。

`FileSystemFileHandle`

ファイルエントリーのハンドルを表します。

`FileSystemDirectoryHandle`

ディレクトリーエントリーへのハンドルを提供します。

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

`kind` 読取専用

エントリーの種類を返します。`'file'` (対応するエントリーがファイルのとき) または `'directory'` です。

`name` 読取専用

対応するエントリーの名前を返します。

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

`isSameEntry()`

2 個の`ハンドル`を比較し、対応するエントリー (ファイルまたはディレクトリー) が一致するかを調べます。

`queryPermission()`
Experimental

現在のハンドルの現在の許可の状態を取得します。

`remove()`
Experimental

Non-standard

下層のファイルシステムからハンドルが表すエントリーを除去することを要求します。

`requestPermission()`
Experimental

ファイルハンドルについて、読み取りまたは読み書きの許可を要求します。

例
-

### 種類を調べる

以下のコードでは、ユーザーにファイルピッカーでファイルを選択させ、返されたハンドルがファイルなのかディレクトリーなのかを調べます。

```js
// ファイルハンドルへの参照を保存する
let fileHandle;

async function getFile() {
  // ファイルピッカーを開く
  [fileHandle] = await window.showOpenFilePicker();

  if (fileHandle.kind === "file") {
    // ファイルの場合のコードを実行する
  } else if (fileHandle.kind === "directory") {
    // ディレクトリーの場合のコードを実行する
  }
}
```

### 許可を確認 / 要求する

以下の非同期関数は、ユーザーがファイルハンドルに読み取りまたは読み書きの許可を与えている場合 `true` を返します。許可が与えられていない場合、許可を要求します。

```js
// fileHandle は FileSystemFileHandle
// withWrite は書き込みなら true に設定される boolean

async function verifyPermission(fileHandle, withWrite) {
  const opts = {};
  if (withWrite) {
    opts.mode = "readwrite";
  }

  // 既に許可が得られているかを確認し、許可が得られていれば true を返す
  if ((await fileHandle.queryPermission(opts)) === "granted") {
    return true;
  }

  // ファイル操作の許可を要求し、ユーザーが許可すれば true を返す
  if ((await fileHandle.requestPermission(opts)) === "granted") {
    return true;
  }

  // ユーザーが許可しなかったので、false を返す
  return false;
}
```

### エントリーを比較する

以下の関数は、1 個のエントリーをエントリーの配列と比較し、一致するエントリーをすべて取り除いた新しい配列を返します。

```js
function removeMatches(fileEntry, entriesArr) {
  const newArr = entriesArr.filter((entry) => !fileEntry.isSameEntry(entry));

  return newArr;
}
```

仕様書
---

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

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

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


履歴 API - Web API

履歴 API
======

**履歴 API** は、ブラウザーのセッション履歴 (WebExtensions history と混同しないように) へのアクセスをグローバルの `history` オブジェクトを介して提供しています。このオブジェクトは、ユーザーの履歴の中を前のページや後のページへ移動したり、履歴スタックの中を操作したりするのに便利なメソッドやプロパティが提供されています。

**メモ:** この API が利用可能なのはメインスレッド (`Window`) のみです。 `Worker` や `Worklet` コンテキストではアクセスできません。

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

ユーザーの履歴の中を前のページや次のページへ移動するには、 `back()`, `forward()`, `go()` の各メソッドを使用します。

### 前のページや次のページへの移動

履歴を前に遡るには、次のようにします。

```js
history.back();
```

これは、ちょうどユーザーがブラウザーのツールバーの`**戻る**`ボタンをクリックしたときのような動作です。

同様に、次のようにして (ユーザーが`**次へ**`ボタンをクリックしたときのように) 次のページへ進むこともできます。

```js
history.forward();
```

### 履歴内の特定の位置まで移動

`go()` メソッドを使うと、セッション履歴において現在のページから相対的な位置を指定して特定のページを読み込むことができます。 (現在のページの相対位置は `0` となります。)

ひとつ前のページへと戻る例です (`back()` と同様の動き)。

```js
history.go(-1);
```

ページを進める例で、 `forward()` を呼び出すのと同様です。

```js
history.go(1);
```

同様に、 `2` を渡すことで 2 ページ分を進めることができます。

`go()` メソッドの他の使い方として、 `0` を渡すか、引数なしで呼び出すことで、現在のページを再読み込みすることができます。

```js
// 以下の文は、
// どちらもページを再読み込みする
// 効果があります。
history.go(0);
history.go();
```

`length` プロパティの値を参照することにより、履歴スタック中のページの数を知ることができます。

```js
const numberOfEntries = history.length;
```

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

`History`

ブラウザーの*セッション履歴*（すなわち、現在のページが読み込まれているタブやフレームで表示したことがあるページ群）の操作ができます。

`PopStateEvent`

`popstate` イベントのインターフェイスです。

例
-

以下の例では `popstate` イベントのリスナーを割り当てています。 history オブジェクトのメソッドで現在のタブのブラウザー履歴の追加、置換、移動など、いくつかの操作を説明しています。

```js
window.addEventListener("popstate", (event) => {
  alert(
    `location: ${document.location}, state: ${JSON.stringify(event.state)}`,
  );
});

history.pushState({ page: 1 }, "title 1", "?page=1");
history.pushState({ page: 2 }, "title 2", "?page=2");
history.replaceState({ page: 3 }, "title 3", "?page=3");
history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null"
history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"
```

仕様書
---

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

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

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

関連情報
----

* `history` global object
* `popstate` event


HTMLOptGroupElement - Web API

HTMLOptGroupElement
===================

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

EventTarget

Node

Element

HTMLElement

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

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

`HTMLOptGroupElement.disabled`

論理値で、子要素 `<option>` のリスト全体が無効か (true) そうでないか (false) を表します。

`HTMLOptGroupElement.label`

文字列で、グループのラベルを表します。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmloptgroupelement |

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

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

関連情報
----

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


BackgroundFetchUpdateUIEvent - Web API

BackgroundFetchUpdateUIEvent
============================

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 の **`BackgroundFetchUpdateUIEvent`** インターフェイスは、 `backgroundfetchsuccess` (en-US) 、および、 `backgroundfetchfail` (en-US) イベントのためのイベント型で、バックグラウンドでのフェッチの成否をユーザーに伝えるために、アプリのタイトルやアイコンを更新するメソッドを有しています。

Event

ExtendableEvent

BackgroundFetchEvent

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

`BackgroundFetchUpdateUIEvent()`
Experimental

新規に `BackgroundFetchUIEvent` オブジェクトを作成します。通常、このコンストラクターが使用されることはありません。なぜなら、これらのオブジェクトは `backgroundfetchsuccess` (en-US) 、および、 `backgroundfetchfail` (en-US) イベントのためにブラウザーによって自動で生成されるからです。

プロパティ
-----

*このインスタンスは特にプロパティを持っていませんが、 `Event` 、および、 `BackgroundFetchEvent` のプロパティを継承します。*

メソッド
----

`BackgroundFetchUpdateUIEvent.updateUI()`
Experimental

バックグラウンドのフェッチの状況を知らせるために、 UI 上のタイトルとアイコンを更新します。 `Promise` によって解決されます。

例
-

以下の例では、 `backgroundfetchsuccess` イベントの発生が待ち受けられおり、イベントの発生はフェッチが完遂されたことを意味します。イベント発生時、ユーザーにエピソードのダウンロードが完了したことを伝えるメッセージと共に、 `updateUI()` メソッドが呼ばれています。

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

  event.waitUntil(
    (async () => {
      // キャッシュを作成
      const cache = await caches.open("downloads");
      // すべての BackgroundFetchRecord オブジェクトを取得
      const records = await bgFetch.matchAll();
      // 各リクエスト/レスポンスの組をコピー
      const promises = records.map(async (record) => {
        const response = await record.responseReady;
        await cache.put(record.request, response);
      });

      // コピーの完了を待つ
      await Promise.all(promises);

      // 進捗表示を更新
      event.updateUI({ title: "Episode 5 ready to listen!" });
    })(),
  );
});
```

仕様書
---

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

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

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


PaymentRequest - Web API

PaymentRequest
==============

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

決済リクエスト API の **`PaymentRequest`** インターフェイスは、このAPIへの第一のアクセスポイントであり、ウェブコンテンツやアプリが、サイトのユーザーやアプリの公開者に代わって、エンドユーザーからの決済を受け入れることができます。

EventTarget

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

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

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

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

`PaymentRequest.id` 読取専用  安全なコンテキスト用

特定の `PaymentRequest` に固有の識別子で、`details.id` で設定することができます。設定されていない場合は、UUID が既定値として設定されます。

`PaymentRequest.shippingAddress` 読取専用  安全なコンテキスト用
非推奨

Non-standard

決済オプションでリクエストされた場合、送料を計算するためにユーザーが選んだ配送先住所を返します。このプロパティは、コンストラクターが `requestShipping` フラグを設定した状態で呼び出された場合にのみ設定されます。さらに、一部のブラウザーでは、ユーザーが取引を完了する準備ができていることを示す（すなわち、「購入する」を押す）までは、プライバシーのために住所の一部が省略されることになります。

`PaymentRequest.shippingOption` 読取専用  安全なコンテキスト用
非推奨

Non-standard

選択された配送オプションの識別子を返します。このプロパティは、`requestShipping` フラグを true に設定してコンストラクターを呼び出した場合にのみ設定されます。

`PaymentRequest.shippingType` 読取専用  安全なコンテキスト用
非推奨

Non-standard

取引を履行するために使用する配送の種類を返します。これは `shipping`、`delivery`、`pickup` のいずれか、またはコンストラクターで値が提供されなかった場合は `null` となる。

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

`PaymentRequest.canMakePayment()` 安全なコンテキスト用

`show()` を呼び出す前に `PaymentRequest` オブジェクトが決済を行うことができるかどうかを示します。

`PaymentRequest.show()` 安全なコンテキスト用

ユーザーエージェントに決済リクエストのためのユーザーとの対話を開始させます。

`PaymentRequest.abort()` 安全なコンテキスト用

ユーザーエージェントに決済リクエストを終わらせ、表示されている可能性のあるユーザーインターフェイスを除去させます。

イベント
----

`merchantvalidation` 安全なコンテキスト用
非推奨

一部の決済ハンドラー（Apple Pay など）では、`merchantvalidation` イベントを処理するためにこのイベントハンドラーが呼び出されます。このイベントは、ユーザーエージェントが、決済リクエストをする販売者またはベンダーが正当であるかどうかを検証する必要があると、販売者に要求する場合に配信されます。

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

一部の決済ハンドラー（Apple Payなど）では、クレジットカードからデビットカードに切り替えるなど、ユーザーが決済手段を変更するたびに配信されます。

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

Non-standard

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

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

Non-standard

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

仕様書
---

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

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

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


NamedNodeMap - Web API

NamedNodeMap
============

**`NamedNodeMap`** インターフェイスは `Attr` （属性）オブジェクトの集合を表します。 `NamedNodeMap` の中のオブジェクトは `NodeList` の場合とは異なり、特定の順序で並んでいるわけではありませんが、配列のように添字でアクセスすることもできます。

`NamedNodeMap` オブジェクトは**生きて**おり、内部または他の場所でその内容に変更が加えられた場合、自動的に更新されます。

**メモ:** `NamedNodeMap` と呼ばれていますが、このインターフェイスが扱うのは `Node` オブジェクトではなく、`Attr` オブジェクトであり、これは `Node` オブジェクトの特殊化されたクラスです。

プロパティ
-----

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

`NamedNodeMap.length` 読取専用

このマップに含まれるオブジェクトの数を返します。

メソッド
----

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

`NamedNodeMap.getNamedItem()`

指定された名前に対応する `Attr` を返します。

`NamedNodeMap.setNamedItem()`

指定された名前で識別される `Attr` をマップ内で置き換えたり、追加したりします。

`NamedNodeMap.removeNamedItem()`

指定されたマップで識別される `Attr` を削除します。

`NamedNodeMap.item()`

指定された位置の `Attr` を返します。指定された位置がノード数以上である場合は `null` を返します。

`NamedNodeMap.getNamedItemNS()`

名前空間と関連するローカル名で識別される `Attr` を返します。

`NamedNodeMap.setNamedItemNS()`

指定された名前空間と関連するローカル名で識別される `Attr` をマップ内で置き換えたり、追加したりします。

`NamedNodeMap.removeNamedItemNS()`

指定された名前空間と関連するローカル名で識別される `Attr` を削除します。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-namednodemap |

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

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

関連情報
----

* `Element.attributes`


PerformanceEntry - Web API

PerformanceEntry
================

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

**`PerformanceEntry`** オブジェクトは、パフォーマンスタイムラインの一部である単一のパフォーマンス指標をカプセル化します。

パフォーマンス API は、 `PerformanceEntry` の特殊なサブクラスである組み込み指標を提供します。これには、リソース読み込み、イベント時刻、最初の入力遅延 (en-US) (FID) などの項目が含まれます。

パフォーマンス項目は、アプリケーション内の明示的な時点で `Performance.mark()` または `Performance.measure()` メソッドを作成することでも作成できます。これによって、パフォーマンスタイムラインに自分の指標を追加することができます。

`PerformanceEntry` インスタンスは常に次のサブクラスのいずれかになります。

* `LargestContentfulPaint` (en-US)
* `LayoutShift` (en-US)
* `PerformanceEventTiming` (en-US)
* `PerformanceLongTaskTiming`
* `PerformanceMark`
* `PerformanceMeasure`
* `PerformanceNavigationTiming`
* `PerformancePaintTiming`
* `PerformanceResourceTiming`
* `PerformanceServerTiming` (en-US)
* `TaskAttributionTiming`
* `VisibilityStateEntry` (en-US)
インスタンスプロパティ
-----------

`PerformanceEntry.name` 読取専用

パフォーマンス項目の名前を表す文字列です。この値はサブタイプによって異なります。

`PerformanceEntry.entryType` 読取専用

パフォーマンス指標の種類を表す文字列です。たとえば "`mark`" であれば `PerformanceMark` が使用されています。

`PerformanceEntry.startTime` 読取専用

パフォーマンス指標の開始時刻を表す `DOMHighResTimeStamp` です。

`PerformanceEntry.duration` 読取専用

パフォーマンスイベントの期間を表す `DOMHighResTimeStamp` です。

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

`PerformanceEntry.toJSON()`

`PerformanceEntry` オブジェクトの JSON 表現を返します。

例
-

### パフォーマンス項目での作業

 次の例では、`PerformanceMark` 型と `PerformanceMeasure` 型の `PerformanceEntry` オブジェクトを作成します。
 `PerformanceMark` と `PerformanceMeasure` のサブクラスは `PerformanceEntry` から `duration`、`entryType`、`name`、`startTime` プロパティを継承し、適切な値に設定します。

```js
//コードの ログインを開始する場所に配置する
performance.mark("login-started");

// コードのログインが完了する場所に配置する
performance.mark("login-finished");

// ログイン期間を測定
performance.measure("login-duration", "login-started", "login-finished");

function perfObserver(list, observer) {
  list.getEntries().forEach((entry) => {
    if (entry.entryType === "mark") {
      console.log(`${entry.name}'s startTime: ${entry.startTime}`);
    }
    if (entry.entryType === "measure") {
      console.log(`${entry.name}'s duration: ${entry.duration}`);
    }
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });
```

仕様書
---

| Specification |
| --- |
| Performance Timeline # dom-performanceentry |

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

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


FileSystem - Web API

FileSystem
==========

ファイルとディレクトリー項目 API の **`FileSystem`** インターフェイスは、ファイルシステムを表現するために使用されます。これらのオブジェクトは、任意のファイルシステム項目の `filesystem` (en-US) プロパティから取得できます。ブラウザーによっては、ファイルシステムを作成・管理するための追加の API を提供しているものもあります。例えば Chrome では `requestFileSystem()` (en-US) メソッドなどがあります。

このインターフェイスは、ユーザーのファイルシステムへのアクセスを許可しません。その代わり、ブラウザーのサンドボックス内に「仮想ドライブ」を構築します。ユーザーのファイルシステムにアクセスするには、 Chrome 拡張機能をインストールするなどしてユーザーを呼び出す必要があります。関連する Chrome API はこちらを参照してください。

基本概念
----

`FileSystem` オブジェクトにアクセスするには、2 つの方法があります。

1. `window.requestFileSystem()` を呼び出すことで、このウェブアプリのためだけに作成されたサンドボックス化されたファイルシステムを直接要求することができます。呼び出しが成功した場合、コールバックハンドラーが実行され、ファイルシステムを記述する `FileSystem` オブジェクトを引数として受け取ります。
2. ファイルシステム項目オブジェクトの `filesystem` (en-US) プロパティから取得できます。
インスタンスプロパティ
-----------

`FileSystem.name` 読取専用

ファイルシステム名を表す文字列です。この名前は、公開されたファイルシステムのリスト全体の中で一意です。

`FileSystem.root` 読取専用

ファイルシステムのルートディレクトリーを表す `FileSystemDirectoryEntry` オブジェクト。このオブジェクトを使用すると、ファイルシステム内のすべてのファイルとディレクトリーにアクセスすることができます。

仕様書
---

| Specification |
| --- |
| File and Directory Entries API # api-domfilesystem |

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

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

関連情報
----

* ファイルとディレクトリー項目 API
* ファイルとディレクトリー項目 API の紹介
* `FileSystemEntry` (en-US), `FileSystemFileEntry`, `FileSystemDirectoryEntry`


CloseEvent - Web API

CloseEvent
==========

`CloseEvent` は、接続が閉じられたときに WebSocket を使用してクライアントに送信されます。これは `WebSocket` オブジェクトの `onclose` 属性で指定されたリスナーに配信されます。

Event

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

`CloseEvent()`

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

プロパティ
-----

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

`CloseEvent.code` 読取専用

サーバーが送信したクローズコードが入った `unsigned short` を返します。

`CloseEvent.reason` 読取専用

サーバーが接続を終了した理由を示す文字列を返します。これはそれぞれのサーバーとサブプロトコルで固有です。

`CloseEvent.wasClean` 読取専用

接続がきれいに閉じられたかどうかを示す論理値を返します。

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

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

仕様書
---

| Specification |
| --- |
| WebSockets Standard # the-closeevent-interface |

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

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

関連情報
----

* `WebSocket`


ウェブ音声 API - Web API

ウェブ音声 API
=========

**ウェブ音声 API** (Web Speech API) で、音声データをウェブアプリに組み入れることができます。
 ウェブ音声 API は、`SpeechSynthesis` （音声合成、Text-to-Speech）と `SpeechRecognition` （非同期音声認識、Asynchronous Speech Recognition）の 2 つの部分から成り立っています。

ウェブ音声 API のコンセプトと使用法
--------------------

 ウェブ音声 API は、ウェブアプリが音声データを扱えるようにします。
 この API には 2 つの構成要素があります。

* 音声認識は `SpeechRecognition` インターフェイス経由でアクセスされます。これは、音声入力（通常は端末の既定の音声認識サービス）から音声の文脈を認識し、適切に応答する機能を提供します。
 通常は、インターフェイスのコンストラクターを使用して新しい `SpeechRecognition` オブジェクトを生成します。このオブジェクトは、端末のマイクを通して入力された音声を検知するための、いくつものイベントハンドラーを持ちます。 `SpeechGrammar` インターフェイスは、あなたのアプリが認識すべき特定の文法群のコンテナーを表します。
 文法は、 JSpeech Grammar Format (**JSGF**) を使用して定義されています。
* 音声合成は、 `SpeechSynthesis` インターフェイス経由でアクセスされます。これは、プログラムに、そのテキストコンテンツを読み上げる機能を提供します（通常は端末の既定の音声合成を経由）。異なる種類の音声は、 `SpeechSynthesisVoice` (en-US) オブジェクトで表され、発話してほしいテキストの様々な部分は、 `SpeechSynthesisUtterance` オブジェクトで表されます。これらを `SpeechSynthesis.speak()` (en-US) メソッドに渡すことによって発話されます。

これらの機能の使い方についての詳細は、ウェブ音声 API の使用 を参照してください。

ウェブ音声 API インターフェイス
------------------

### 音声認識

`SpeechRecognition`

認識サービスのコントローラーインターフェイスです。認識サービスから送信された `SpeechRecognitionEvent` も扱います。

`SpeechRecognitionAlternative`

音声認識サービスにより認識されている単語を表します。

`SpeechRecognitionErrorEvent`

認識サービスからのエラーメッセージを表します。

`SpeechRecognitionEvent`

`result` イベントおよび `nomatch` イベントのためのイベントオブジェクトです。暫定あるいは最終の音声認識結果に関連付けられたすべてのデータを含みます。

`SpeechGrammar`

認識サービスに認識してほしい言葉または言葉のパターンです。

`SpeechGrammarList` (en-US)

`SpeechGrammar` オブジェクトのリストを表します。

`SpeechRecognitionResult` (en-US)

一致した一つの認識結果を表します。これには、複数の `SpeechRecognitionAlternative` オブジェクトが含まれることがあります。

`SpeechRecognitionResultList` (en-US)

`SpeechRecognitionResult` (en-US) オブジェクトのリストを表します。または、`continuous` モードで結果が捕捉された場合は、一つだけになります。

### 音声合成

`SpeechSynthesis`

音声サービスのコントローラーインターフェイスです。これは、デバイスで利用可能な合成音声についての情報を取得したり、発話の開始や一時停止などのコマンドを実行するために使用されます。

`SpeechSynthesisErrorEvent`

音声サービスで `SpeechSynthesisUtterance` オブジェクトの処理中に発生したあらゆるエラーについての情報を含みます。

`SpeechSynthesisEvent`

音声サービスで処理されている `SpeechSynthesisUtterance` オブジェクトの現在の状態についての情報を含みます。

`SpeechSynthesisUtterance`

 音声リクエストを表します。
 これは、音声サービスが読み上げるコンテンツとその読み上げ方 (言語、音声の高低、音量など) についての情報を含みます。

`SpeechSynthesisVoice` (en-US)

 システムが対応する音声を表します。
 すべての `SpeechSynthesisVoice` は、それ自身に関連する音声サービス (言語、名前、URI についての情報を含む) を持ちます。

`Window.speechSynthesis`

`SpeechSynthesisGetter` と呼ばれる `[NoInterfaceObject]` インターフェイスの一部として定義され、 `Window` オブジェクトによって実装されたことで、 `speechSynthesis` プロパティは `SpeechSynthesis` コントローラーへのアクセスを提供します。したがって、音声合成機能へのエントリーポイントになります。

エラー
---

音声 API が報告するエラー（例: `"language-not-supported"` や `"language-unavailable"`） の情報については、以下の文書を参照してください。

* `SpeechRecognitionErrorEvent` オブジェクトの `error` プロパティ (en-US)
* `SpeechSynthesisErrorEvent` の `error` プロパティ
例
-

Github 上のウェブ音声 API リポジトリー には、音声合成や音声認識を説明するデモが含まれています。

仕様
--

| Specification |
| --- |
| Web Speech API # speechreco-section |
| Web Speech API # tts-section |

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

### api.SpeechRecognition

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

### api.SpeechSynthesis

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

関連情報
----

* ウェブ音声 API の使用
* SitePoint の記事
* HTML5Rocks の記事


MIDIConnectionEvent - Web API

MIDIConnectionEvent
===================

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

Web MIDI API の **`MIDIConnectionEvent`** インターフェイスは、`MIDIAccess` インターフェイスの `statechange` イベントおよび `MIDIPort` インターフェイスの `statechange` イベントに渡されるイベントです。これは、新しいポートが利用可能になった時と、利用可能だったポートが利用不可能になった時に毎回発生します。たとえば、MIDI デバイスがコンピューターに接続されたり切断されたりするたびに、このイベントが発火します。

Event

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

`MIDIConnectionEvent()`

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

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

`MIDIConnectionEvent.port` 読取専用

接続または切断されたポートを表す `MIDIPort` インスタンスへの参照を返します。

例
-

`Navigator.requestMIDIAccess()` メソッドは、`MIDIAccess` オブジェクトで解決する `Promise` を返します。ポートの状態が変わると、`MIDIConnectionEvent` が `statechange` イベントに渡されます。これにより、ポートの情報をコンソールに出力できます。

```js
navigator.requestMIDIAccess().then((access) => {
  access.onstatechange = (event) => {
    console.log(event.port.name, event.port.manufacturer, event.port.state);
  };
});
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # midiconnectionevent-interface |

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

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


isSecureContext - Web API

isSecureContext
===============

グローバルの **`isSecureContext`** プロパティは読み取り専用で、現在のコンテキストが安全である (`true`) かそうではない (`false`) を示す論理値を返します。

値
-

`true` または `false` の論理値です。

仕様書
---

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

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

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

関連情報
----

* 安全なコンテキスト


IDBLocaleAwareKeyRange - Web API

IDBLocaleAwareKeyRange
======================

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

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

IndexedDB API の **`IDBLocaleAwareKeyRange`** は、`IDBKeyRange` の Firefox 固有バージョンです。全く同じように動作し、同じプロパティとメソッドを持ちますが、`locale` の値を指定して生成したインデックスを表す `IDBIndex` オブジェクトとともに使用することを意図しています。(`createIndex()` の引数 `options` を参照してください) すなわち、ロケールを意識した並べ替えが有効になっています。

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

*このインターフェイスは、親インターフェイスの `IDBKeyRange` のメソッドを全て継承します。*

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

*このインターフェイスは、親インターフェイスの `IDBKeyRange` のプロパティを全て継承します。*

ただし、`IDBLocaleAwareKeyRange` は `IDBKeyRange.bound` を独自に実装していることを覚えておいてください。これは、`bound()` は下限が上限未満であるかをチェックし、そうなっていない場合は例外を投げるためです。ロケールを意識したインデックスでは、比較の意味はロケールによって異なり、たとえばリトアニア語では Y は I と K の間に並びます。`IDBKeyRange` と `IDBLocaleAwareKeyRange` の唯一の違いは、後者はこのチェックを行わないことです。

開発者は、ロケールを意識したインデックスを扱う際は、常に `IDBLocaleAwareKeyRange` を用いるべきです。

例
-

```js
function displayData() {
  const keyRangeValue = IDBLocaleAwareKeyRange.bound("A", "F");

  const transaction = db.transaction(["fThings"], "readonly");
  const objectStore = transaction.objectStore("fThings");

  const myIndex = objectStore.index("lName");
  myIndex.openCursor(keyRangeValue).onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const tableRow = document.createElement("tr");
      tableRow.innerHTML =
        `<td>${cursor.value.id}</td>` +
        `<td>${cursor.value.lName}</td>` +
        `<td>${cursor.value.fName}</td>` +
        `<td>${cursor.value.jTitle}</td>` +
        `<td>${cursor.value.company}</td>` +
        `<td>${cursor.value.eMail}</td>` +
        `<td>${cursor.value.phone}</td>` +
        `<td>${cursor.value.age}</td>`;
      tableEntry.appendChild(tableRow);

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

仕様書
---

現在、どの仕様書にも入っていません。

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

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

関連情報
----

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


FontFaceSetLoadEvent - Web API

FontFaceSetLoadEvent
====================

**`FontFaceSetLoadEvent`** は CSS フォント読み込み API のインターフェイスで、フォントフェイスの読み込みを始めてから `FontFaceSet` で発生するイベントを表します。

イベントはフォントの読み込みが開始されたとき (`loading`)、読み込みが完全に完了したとき (`loadingdone`)、またはフォントの読み込みエラーがあったとき (`loadingerror`) に発行されます。

Event

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

`FontFaceSetLoadEvent()`

新しい `FontFaceSetLoadEvent` object.

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

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

`FontFaceSetLoadEvent.fontfaces` 読取専用

`FontFace` インスタンスの配列を返します。
 イベントに応じて、配列には読み込み中 (`loading`) の、読み込みに成功 (`loadingdone`) した、読み込みに失敗 (`loadingerror`) したフォントフェイスが格納されます。

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

*親である `Event` から継承したメソッドがあります*。

仕様書
---

| Specification |
| --- |
| CSS Font Loading Module Level 3 # fontfacesetloadevent |

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

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

関連情報
----

* `Document.fonts`
* `WorkerGlobalScope.fonts`


CSSTransformComponent - Web API

CSSTransformComponent
=====================

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

**`CSSTransformComponent`** は CSS 型付きオブジェクトモデルのインターフェイスで、 `CSSTransformValue` インターフェイスの一角です。

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

`CSSTransformComponent.is2D` 読取専用
Experimental

この座標変換が 2D か 3D かを示す論理値を返します。

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

`CSSTransformComponent.toMatrix()`
Experimental

新しい `DOMMatrix` オブジェクトを返します。

`CSSTransformComponent.toString()`
Experimental

CSS の`座標変換関数`の形の文字列です。

これは `is2D` の値を使用して、 2D または 3D 座標変換のどちらかを返します。例えば、コンポーネントが `CSSRotate` (en-US) を表し、 `is2D` が false の場合、返す文字列は CSS 座標変換の `rotate3D()` 関数の形式を取ります。true の場合、返される文字列は 2 次元の `rotate3D()` 関数の形になります。

例
-

To do

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # csstransformcomponent |

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

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


サーバー送信イベント - Web API

サーバー送信イベント
==========

伝統的には、ウェブページが新たなデータを受け取るために、サーバーにリクエストを送信しなければなりません。すなわち、ページがサーバーからデータを要求します。サーバー送信イベントによって、サーバーがウェブページにメッセージをプッシュ送信することにより、サーバーからウェブページへ新たなデータをいつでも送信することができます。入ってくるメッセージは、ウェブページ内の *イベントおよびデータ* として扱うことができます。

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

**メモ:** Firefox は現在、サービスワーカーでのサーバー送信イベントの使用に対応していません（専用ワーカーと共有ワーカーでは対応しています）。 Firefox バグ 1681218 を参照してください。

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

サーバー送信イベントの使い方を学ぶには、サーバー送信イベントの使用を参照してください。

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

`EventSource`

サーバーへの接続、イベントやデータの受信、エラー、コネクションの切断など、すべての機能の扱いを定義します。

例
-

* PHP を使用した簡単な SSE のデモ
仕様書
---

| Specification |
| --- |
| HTML Standard # server-sent-events |

関連情報
----

### ツール

* Mercure: a real-time communication protocol (publish-subscribe) built on top of SSE
* Node.js 向けの EventSource のポリフィル
* Remy Sharp による EventSource のポリフィル
* Yaffle の EventSource のポリフィル
* Rick Waldron's jquery plugin
* intercooler.js declarative SSE support
### 関連トピック

* AJAX
* JavaScript
* WebSocket
### その他のリソース

* Twitter 風のアプリケーション powered by server-sent events and its code on GitHub.
* HTML5 and Server-sent events


HTMLFormElement - Web API

HTMLFormElement
===============

**`HTMLFormElement`** インターフェイスは DOM 内の `<form>` 要素を表します。これは、フォームのコンポーネント要素へのアクセスだけでなく、フォームの様々な側面へのアクセスや、場合によっては変更を可能にします。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLFormElement.elements` 読取専用

`HTMLFormControlsCollection` で、このフォーム要素に所属するすべてのフォームコントロールを保持します。

`HTMLFormElement.length` 読取専用

`long` で、フォーム内のコントロールの数を反映します。

`HTMLFormElement.name`

文字列で、フォームの `name` 属性の値を反映し、フォームの名前を表します。

`HTMLFormElement.method`

文字列で、フォームの `method` 属性の値を反映し、フォームを送信するために使用する HTTP メソッドを示します。指定された値のみが設定できます。

`HTMLFormElement.target`

文字列で、フォームの `target` 属性の値を反映し、フォームを送信して受け取った結果を表示する場所を示します。

`HTMLFormElement.action`

文字列で、フォームの `action` 属性の値を反映し、フォームによって送信された情報を処理するプログラムの URI を示します。

`HTMLFormElement.encoding` または `HTMLFormElement.enctype`

文字列で、フォームの `enctype` 属性の値を反映し、フォームをサーバーへ送信するのに使用するコンテンツの型を示します。指定された方のみが設定できます。二つのプロパティは別名です。

`HTMLFormElement.acceptCharset`

文字列で、フォームの `accept-charset` 属性の値を反映し、サーバーが受け付ける文字エンコーディングを表します。

`HTMLFormElement.autocomplete`

文字列で、フォームの `autocomplete` 属性の値を反映し、ブラウザーが自動的にこのフォーム内のコントロールの値を生み出すことができるかどうかを示します。

`HTMLFormElement.noValidate`

`Boolean` で、フォームの `novalidate` 属性の値を反映し、フォームの検証を行わないかどうかを示します。

名前の付いた入力欄がプロパティとしてオーナーのフォームのインスタンスに追加され、同じ名前のネイティブのプロパティがあると上書きしてしまいます（例えば、フォームに `action` という名前の入力欄がある場合、 `action` プロパティはフォームの `action` 属性ではなくその入力欄を返します）。

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

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

`checkValidity()`

この要素の子コントロールが制約検証の対象となり、それらの制約を満たしている場合は `true` を返します。制約を満たさないコントロールがある場合は `false` を返します。制約を満たさないコントロールに対して、`invalid` という名前のイベントを発生させます。イベントがキャンセルされない場合、そのようなコントロールは無効とみなされます。`false` にどう対応するかはプログラマー次第です。

`reportValidity()`

要素の子コントロールがその検証する制約を満たしている場合、`true` を返します。`false` が返された場合、無効な子要素それぞれにキャンセル可能な `invalid` イベントが発生し、検証上の問題がユーザーに報告されます。

`requestSubmit()`

指定された送信ボタンとそれに対応する設定を使用してフォームを送信するよう要求します。

`reset()`

フォームを初期状態にリセットします。

`submit()`

フォームをサーバーへ送信します。

### 非推奨のメソッド

`HTMLFormElement.requestAutocomplete()`
非推奨

ネイティブのブラウザーインターフェイスを起動して、自動補完フィールド名 の値が `off` または `on` ではないフィールドを補完してユーザーを支援します。ユーザーがインターフェイスの操作を終えると、フォームはフィールドが入力された場合は `autocomplete`、問題があった場合は `autocompleteerror` のいずれかのイベントを受け取ります。

イベント
----

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

`formdata`

`formdata` イベントは、フォームのデータを表す項目リストが構築されると発行されます。

`reset`

`reset` イベントはフォームがリセットされたときに発行されます。

`submit`

`submit` イベントはフォームが送信されたときに発行されます。

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

### フォーム要素オブジェクトの取得

`HTMLFormElement` オブジェクトを取得するには、CSS セレクターと `querySelector()` を使うか、document の `forms` プロパティを使ってすべてのフォームのリストを取得できます。

`Document.forms` は `HTMLFormElement` オブジェクトの配列、つまりそのページの各フォームの一覧を返します。その後、以下の構文を使用して、個々のフォームを取得することができます。

`document.forms[index]`

フォーム配列の指定した `index` のフォームを返します。

`document.forms[id]`

ID が `id` であるフォームを返します。

`document.forms[name]`

`name` 属性値が `name` であるフォームを返します。

### フォーム内の要素へのアクセス

フォームのデータを含む要素の一覧にアクセスするには、フォームの `elements` プロパティを調べることでできます。これはフォームのユーザーデータ入力要素をすべて列挙する `HTMLFormControlsCollection` を返します。これには `<form>` の子孫と、 `form` 属性を使ったフォームのメンバーからなるものの両方が返されます。

フォームの要素を探すのに `form` のキーとして `name` 属性を使うこともできますが、 `elements` を使うのがより良い方法です。フォーム要素*のみ*を含み、`form` の他の属性と混合されることがないからです。

### 要素の名前付けの問題

名前によっては JavaScript からのプロパティや要素のアクセスに干渉します。

例えば、

* `<input name="id">` は `<form id="…">` よりも優先されます。つまり `form.id` ではフォームの id を参照せずに、名前が "`id`" である要素を参照します。その他のプロパティも同様であり、例えば `<input name="action">` や `<input name="post">` もそうです。
* `<input name="elements">` を使うと、`elements` のコレクションがアクセス不能になります。`form.elements` は特定の要素を参照するようになります。

要素名のこうした問題を避けるには、

* *常に* `elements` のコレクションを使って、要素名とフォームプロパティとのあいまいさを避けましょう。
* *決して*要素名に "`elements`" を使わないでください。

JavaScript を使っていなければ、これは問題になりません。

### フォームコントロールと見なされる要素

`HTMLFormElement.elements` および `HTMLFormElement.length` に含まれる要素は以下のものです。

* `<button>`
* `<fieldset>`
* `<input>` （`type` が `"image"` のものは歴史的な理由により除外されます）
* `<object>`
* `<output>`
* `<select>`
* `<textarea>`

`elements` が返す一覧には他の要素が記載されないので、フォームを処理する際に最も重要な要素を取得するための優れた方法となります。

例
-

新しいフォーム要素を作成し、その属性を変更し、送信します。

```js
const f = document.createElement("form"); // フォームを作成
document.body.appendChild(f); // 文書の本体に追加
f.action = "/cgi-bin/some.cgi"; // action および method 属性を追加
f.method = "POST";
f.submit(); // フォームの submit() メソッド
```

`<form>` 要素から情報を取り出し、その属性のいくつかを設定します。

```html
<form name="formA" action="/cgi-bin/test" method="post">
  <p>Press "Info" for form details, or "Set" to change those details.</p>
  <p>
    <button type="button" onclick="getFormInfo();">Info</button>
    <button type="button" onclick="setFormInfo(this.form);">Set</button>
    <button type="reset">Reset</button>
  </p>

  <textarea id="form-info" rows="15" cols="20"></textarea>
</form>

<script>
 function getFormInfo() {
 // フォームの名前からそのフォームへの参照を取得する
 const f = document.forms["formA"];
 // 関心のあるフォームプロパティ
 const properties = [
 "elements",
 "length",
 "name",
 "charset",
 "action",
 "acceptCharset",
 "action",
 "enctype",
 "method",
 "target",
 ];
 // プロパティを反復処理し、文字列に円関してユーザーに表示できるようにする
 const info = properties
 .map((property) => `${property}: ${f[property]}`)
 .join("\n");

 // フォームの <textarea> にフォームのプロパティを表示するように設定する
 document.forms["formA"].elements["form-info"].value = info; // document.forms["formA"]['form-info'].value would also work
 }

 function setFormInfo(f) {
 // 引数は、フォーム要素の参照でなければならない
 f.action = "a-different-url.cgi";
 f.name = "a-different-name";
 }
</script>
```

`<form>` を新しいウィンドウへ送信します。

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Example new-window form submission</title>
  </head>
  <body>
    <form action="test.php" target="\_blank">
      <p>
        <label>First name: <input type="text" name="firstname" /></label>
      </p>
      <p>
        <label>Last name: <input type="text" name="lastname" /></label>
      </p>
      <p>
        <label><input type="password" name="pwd" /></label>
      </p>

      <fieldset>
        <legend>Pet preference</legend>

        <p>
          <label><input type="radio" name="pet" value="cat" /> Cat</label>
        </p>
        <p>
          <label><input type="radio" name="pet" value="dog" /> Dog</label>
        </p>
      </fieldset>

      <fieldset>
        <legend>Owned vehicles</legend>

        <p>
          <label
 ><input type="checkbox" name="vehicle" value="Bike" />I have a
            bike</label
 >
        </p>
        <p>
          <label
 ><input type="checkbox" name="vehicle" value="Car" />I have a
            car</label
 >
        </p>
      </fieldset>

      <p><button>Submit</button></p>
    </form>
  </body>
</html>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlformelement |

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

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

関連情報
----

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


ネットワーク情報 API - Web API

ネットワーク情報 API
============

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

 ネットワーク情報 API はシステムのネットワーク接続に関する情報を、一般的な接続の種類 ('wifi' や 'cellular' など) の観点から提供します。
 これは、ユーザーの接続に基づき、高解像度コンテンツや低解像度コンテンツを選択するために使用することができます。

API は単一の `NetworkInformation` オブジェクトで構成されます。これは `Navigator.connection` プロパティから返されるインスタンスです。

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

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

`NetworkInformation`

端末がネットワーク通信に使用している接続方法の情報を提供します。また、接続の種類が変更された場合に、スクリプトへ通知する手段も提供します。 `NetworkInformation` インターフェイスはインスタンス化できません。代わりに、 `Navigator` インターフェイスを通してアクセスします。

例
-

### 接続の変化の検出

以下の例では、ユーザーの接続の変化を監視します。

```js
let type = navigator.connection.effectiveType;

function updateConnectionStatus() {
  console.log(
    `接続の種類が ${type} から ${navigator.connection.effectiveType} に変化`,
  );
  type = navigator.connection.effectiveType;
}

navigator.connection.addEventListener("change", updateConnectionStatus);
```

### 大きなリソースを事前読み込み

接続オブジェクトは、大きな帯域幅やメモリが使われるリソースを事前読み込みするかどうか決める場合に便利です。以下の例は、ページの読み込み直後に呼び出され、動画の事前読み込みが望ましくない場合の接続の種類を確かめます。携帯電話回線接続が見つかると、 `preloadVideo` フラグは `false` に設定されます。コードをわかりやすくするために、この例ではひとつの接続の種類だけをテストしました。実際に使う場合には、 switch 文その他のやり方で、 `NetworkInformation.type` の可能な値すべてを確かめることになるでしょう。 `type` の値にかかわらず、 `NetworkInformation.effectiveType` プロパティを用いて接続速度を見積もることができます。

```js
let preloadVideo = true;
const connection = navigator.connection;
if (connection) {
  if (connection.effectiveType === "slow-2g") {
    preloadVideo = false;
  }
}
```

仕様書
---

| Specification |
| --- |
| Network Information API # networkinformation-interface |
| Network Information API # connection-attribute |

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

### api.NetworkInformation

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

### api.Navigator.connection

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

関連情報
----

* オンライン／オフラインイベント


VideoTrack - Web API

VideoTrack
==========

`VideoTrack` インターフェイスは、`<video>` 要素からの単一の映像トラックを表します。

`VideoTrack` オブジェクトにアクセスするための最も一般的な用途は、その `<video>` 要素のアクティブ映像トラックにするために、その `selected` プロパティを切り替えることです。

プロパティ
-----

`selected`

映像トラックがアクティブかどうかを制御する論理値です。同時にアクティブにできる映像トラックは 1 つだけなので、別のトラックがアクティブなときに、あるトラックでこのプロパティを `true` に設定すると、アクティブであったトラックは非アクティブになります。

`id` 読取専用

メディア内のトラックを一意に識別する文字列です。この ID を使用して、`VideoTrackList.getTrackById()` を呼び出して、映像トラックリスト内の特定のトラックを見つけることができます。 メディアが Media Fragments URI 仕様（その日本語訳）に従ってメディアフラグメントによるシークをサポートしている場合は、ID を URL のフラグメント部分として使用することもできます。

`kind` 読取専用

トラックが属するカテゴリーを指定する文字列です。 例えば、メイン映像トラックには `"main"` という `kind` があります。

`label` 読取専用

トラックに人間が読めるラベルを提供する文字列です。 例えば、`kind` が `"sign"` のトラックには `"手話通訳"` という `label` が付いている場合があります。 ラベルが指定されていない場合、この文字列は空です。

`language` 読取専用

映像トラックの主要言語を指定する文字列、または不明の場合は空文字列です。 言語は、`"en-US"` または `"pt-BR"` などの BCP 47 (RFC 5646) 言語コードとして指定されます。

`sourceBuffer` 読取専用

トラックを作成した `SourceBuffer`。トラックが `SourceBuffer` によって作成されなかった場合、または `SourceBuffer` がその親メディアソースの `MediaSource.sourceBuffers` 属性から取り除かれた場合は、null を返します。

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

特定のメディア要素の `VideoTrack` を取得するには、その要素の `videoTracks` プロパティを使用します。 このプロパティは、メディアに含まれる個々のトラックを取得できる `VideoTrackList` オブジェクトを返します。

```js
const el = document.querySelector("video");
const tracks = el.videoTracks;
```

その後、配列の構文または `forEach()` などの関数を使用して、メディアの個々のトラックにアクセスできます。

この最初の例は、メディア上の最初の映像トラックを取得します。

```js
const firstTrack = tracks[0];
```

次の例では、メディアのすべての映像トラックをスキャンして、（変数 `userLanguage` から取得した）ユーザーの優先言語の最初の映像トラックをアクティブにします。

```js
for (const track of tracks) {
  if (track.language === userLanguage) {
    track.selected = true;
    break;
  }
}
```

`language` は標準 (RFC 5646) 形式です。 例えば、アメリカ英語の場合、これは `"en-US"` になります。

仕様書
---

| Specification |
| --- |
| HTML Standard # videotrack |

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

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


USBInterface - Web API

USBInterface
============

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

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

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

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

WebUSB API の `USBInterface` インターフェイスは、USB デバイスが提供するインターフェイスの情報を提供します。インターフェイスは、デバイスの機能を表し、特定のプロトコルを実装し、双方向通信用のエンドポイントを含むことができます。

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

`USBInterface()`
Experimental

渡された `USBConfiguration` の指定のインターフェイス番号のインターフェイスの情報が格納される新しい `USBInterface` オブジェクトを生成します。

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

`USBInterface.interfaceNumber` 読取専用
Experimental

このインターフェイスのインターフェイス番号を返します。これはこのインターフェイスを定義しているインターフェイスディスクリプターの `bInterfaceNumber` フィールドと一致します。

`USBInterface.alternate` 読取専用
Experimental

このインターフェイスで現在選択されているオルタナティブコンフィギュレーションを返します。デフォルトでは、これは `alternates` に入っている `USBAlternateInterface` の中で、`alternateSetting` が `0` のものです。`USBDevice.selectAlternateInterface()` を `alternates` に入っている他の値を渡して呼ぶことで、変えることができます。

`USBInterface.alternates` 読取専用
Experimental

このインターフェイスで可能なオルタナティブコンフィギュレーションそれぞれを表す `USBAlternateInterface` インターフェイスのインスタンスが格納された配列を返します。

`USBInterface.claimed` 読取専用
Experimental

このインターフェイスが現在のページで `USBDevice.claimInterface()` を呼ぶことで要求されたかどうかを返します。

仕様書
---

| Specification |
| --- |
| WebUSB API # usbinterface |

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

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


ShadowRoot - Web API

ShadowRoot
==========

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
**`ShadowRoot`** はシャドウ DOM API のインターフェイスで、文書の DOM ツリーから分離してレンダリングされた部分ツリーのルートノードを指します。

要素のシャドウルートへの参照は `Element.shadowRoot` プロパティで受け取ることができます。これは `Element.attachShadow()` で `mode` オプションが `open` に設定されて作成されたときに提供されます。

EventTarget

Node

DocumentFragment

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

`ShadowRoot.activeElement` 読取専用

フォーカスを持っているシャドウツリー内の `Element` を返します。

`ShadowRoot.adoptedStyleSheets` (en-US)

 シャドウ DOM のサブツリーで使用するために構築されたスタイルシートの配列を追加します。
 これらは、同じ親 `Document` ノードを共有する他の DOM サブツリーや、文書自身と共有されることがあります。

`ShadowRoot.delegatesFocus` 読取専用

シャドウが取り付けられたときに `delegatesFocus` が設定されていたかどうかを示す論理値を返します（`Element.attachShadow()` を参照）。

`ShadowRoot.fullscreenElement` 読取専用

このシャドウツリーで現在全画面モードになっている要素です。

`ShadowRoot.host` 読取専用

`ShadowRoot` が取り付けられた DOM 要素への参照を返します。

`ShadowRoot.innerHTML`

`ShadowRoot` の内部の DOM ツリーへの参照を設定したり返却したりします。

`ShadowRoot.mode` 読取専用

`ShadowRoot` のモードで `open` または `closed` の値を取ります。
 これはシャドウルートの内部の機能に JavaScript からアクセスできるかどうかを定義します。

`ShadowRoot.pictureInPictureElement` 読取専用

シャドウツリー内で現在ピクチャインピクチャモードで表示されている `Element` を返します。

`ShadowRoot.pointerLockElement` 読取専用

 ポインターがロックされている間、マウスイベントのターゲットとして設定されている `Element` を返します。
 ロックが保留中か、ポインターがロックされていないか、ターゲットがほかのツリーにある場合は `null` を返します。

`ShadowRoot.styleSheets` 読取専用

シャドウツリーに明示的にリンクされている、または埋め込まれている `CSSStyleSheet` オブジェクトの `StyleSheetList` を返します。

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

`ShadowRoot.getAnimations()`

現在有効なすべての `Animation` オブジェクトのうち、ターゲット要素がシャドウツリーの子孫であるものの配列を返します。

`ShadowRoot.getSelection()`
Non-standard

ユーザーによって選択されたテキストの範囲または現在のキャレットの位置を表現する `Selection` オブジェクトを返します。

`ShadowRoot.elementFromPoint()`
Non-standard

指定された座標における最上位の要素を返します。

`ShadowRoot.elementsFromPoint()`
Non-standard

指定された座標における全要素からなる配列を返します。

イベント
----

以下のイベントは `HTMLSlotElement` からのイベントバブリングによって `ShadowRoot` で利用できます。

`HTMLSlotElement` `slotchange` event

そのスロットに含まれるノードが変更されたときに発行されるイベント。

例
-

以下のコードは、サイズと色の属性が指定された四角形の要素を作る life-cycle-callbacks の例です。 (ライブでも確認)

`<custom-square>` 要素のクラス定義の中に、外部関数である `updateStyle()` を呼び出すライフサイクルコールバックが含まれています。`updateStyle()` は要素のサイズと色を適用します。`this` (カスタム要素自身) を引数として関数に渡していることが分かるでしょう。

```js
connectedCallback() {
  console.log('四角形のカスタム要素がページに追加されました。');
  updateStyle(this);
}

attributeChangedCallback(name, oldValue, newValue) {
  console.log('四角形のカスタム要素の属性が変更されました。');
  updateStyle(this);
}
```

`updateStyle()` 関数の中では、`Element.shadowRoot` を利用してシャドウ DOM への参照を取得しています。シャドウ DOM 内では、標準的な DOM の探索手法を用いて `<style>` を探し、CSS を更新しています。

```js
function updateStyle(elem) {
  const shadow = elem.shadowRoot;
  const childNodes = shadow.childNodes;
  for (const node of childNodes) {
    if (node.nodeName === "STYLE") {
      node.textContent = `
div {
 width: ${elem.getAttribute("l")}px;
 height: ${elem.getAttribute("l")}px;
 background-color: ${elem.getAttribute("c")};
}
 `;
    }
  }
}
```

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-shadowroot |

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

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


reportError() グローバル関数 - Web API

reportError() グローバル関数
=====================

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

**`reportError()`** グローバルメソッドは、 JavaScript の捕捉されない例外をエミュレートして、コンソールやグローバルイベントハンドラにエラーを報告するために使用することができます。

 この機能は、主にカスタムイベント配信ライブラリーや コールバック操作ライブラリーを対象としています。
 ライブラリはこの機能を使用して、コールバックコードのエラーを捕捉し、最上位のハンドラーに投げ直すことができます。
 これにより、 1 つのコールバックで例外が発生しても、他のコールバックが処理されなくなることがなくなると同時に、スタックトレース情報が最上位レベルのデバッグに利用できるようになります。

構文
--

```js
reportError(throwable)
```

### 引数

`throwable`

エラーオブジェクト、例えば `TypeError` です。

### 返値

なし (`undefined`)。

### 例外

`TypeError`

エラー引数なしでこのメソッドが呼び出された場合。

例
-

このメソッドが使用できるかどうかの機能検出です。

```js
if (typeof self.reportError === "function") {
  // この関数が定義されている
}
```

 以下のコードでは、どのようにエラーを作成して報告する方法、グローバルな `onerror` ハンドラーを使用するか、 `error` イベントのリスナーを追加してエラーを捕捉する方法を示しています。
 `onerror` に割り当てられたハンドラーは、 `true` を返さなければ、イベントがそれ以上伝播しないことに注意してください。

```js
const newError = new Error("エラーメッセージ", "someFile.js", 11);
self.reportError(newError);

window.onerror = (message, source, lineno, colno, error) => {
  console.error(`メッセージ: ${error.message}、行番号: ${lineno}`);
  return true;
};

self.addEventListener("error", (error) => {
  console.error(error.filename);
});

// 出力
// > "メッセージ: エラーメッセージ、行番号: 11"
// > "someFile.js"
```

仕様書
---

| Specification |
| --- |
| HTML Standard # runtime-script-errors |

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

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

関連情報
----

* `Window`
* `WorkerGlobalScope`
* error イベント


PerformanceObserverEntryList - Web API

PerformanceObserverEntryList
============================

**`PerformanceObserverEntryList`** インターフェイスは、`observe()` メソッドを介して明示的に*監視された* パフォーマンスイベント のリストです。

**メモ:** このインターフェイスは `Window` と `Worker` に公開されています。

メソッド
----

`PerformanceObserverEntryList.getEntries()` (en-US)

与えられた*フィルタ*に基づいて明示的に*観測された* `PerformanceEntry` オブジェクトのリストを返します。

`PerformanceObserverEntryList.getEntriesByType()` (en-US)

与えられた*エントリタイプ*の明示的に*観測された*`PerformanceEntry` オブジェクトのリストを返します。

`PerformanceObserverEntryList.getEntriesByName()` (en-US)

指定された*名前*と*エントリタイプ*に基づいて、明示的に*監視されている* `PerformanceEntry` オブジェクトのリストを返します。

例
-

```js
// Create observer for all performance event types
// list is of type PerformanceObserveEntryList
var observe_all = new PerformanceObserver(function(list, obs) {
   var perfEntries = list.getEntries();
   for (var i = 0; i < perfEntries.length; i++) {
      print\_perf\_entry(perfEntries[i]);
      // do something with it
   }
}
```

仕様書
---

| Specification |
| --- |
| Performance Timeline # performanceobserverentrylist-interface |

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

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