recursal/MDN huggingface dataset:
DOMPoint
========

**`DOMPoint`** オブジェクトは、座標系における二次元または三次元の点を表します。最大三次元までの座標の値、およびオプションで視点の値も含まれます。 `DOMPoint` は `DOMPointReadOnly` に基づいていますが、そのプロパティの値を変更することができます。

一般的には、正の `x` 成分は原点よりも右側の位置を表し、正の `y` 成分は原点よりも下側の位置を表し、正の `z` 成分は画面の外側（言い換えれば、ユーザーの方向）に向かって広がっています。

DOMPointReadOnly

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

`DOMPoint()`

0 個以上の座標成分の値、およびオプションとして `w` の視点位置を与えられた新しい `DOMPoint` オブジェクトを作成し、それを返します。また、既存の `DOMPoint` や `DOMPointReadOnly` 、あるいはオブジェクトを使用して、 `DOMPoint.fromPoint()` 静的メソッドを呼び出し、新しい点を作成することができます。

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

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

`DOMPoint.x`

この `DOMPoint` の水平座標である `x` です。

`DOMPoint.y`

この `DOMPoint` の垂直座標である `y` です。

`DOMPoint.z`

この `DOMPoint` の奥行き座標である `z` です。

`DOMPoint.w`

この `DOMPoint` の視点位置である `w` です。

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

*`DOMPoint` には親である `DOMPointReadOnly` から継承したインスタンスメソッドがあります。*

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

*`DOMPoint` には親である `DOMPointReadOnly` から継承した静的メソッドがあります。*

`DOMPoint.fromPoint()`

既存の点（または、一致するプロパティを含むオブジェクト）を指定して、そのプロパティの値を提供する、新しい変更可能な `DOMPoint` オブジェクトを作成します。

例
-

WebXR 機器 API では、位置や向きを表すために `DOMPointReadOnly` 値が使用されます。以下のスニペットでは、 XR 機器（VR ヘッドセットや AR 機能付き携帯電話など）のポーズは `XRSession` (en-US) アニメーションフレームの中で `XRFrame.getViewerPose()` (en-US) を呼び出すことで取得することができ、それから結果の `XRPose` (en-US) の `transform` (en-US) プロパティにアクセスしています。これには 2 つの `DOMPointReadOnly` 属性があります。ベクトルを表す `position` と、クォータニオンを表す `orientation` です。


```js
function onXRFrame(time, xrFrame) {
  let viewerPose = xrFrame.getViewerPose(xrReferenceSpace);

  if (viewerPose) {
    let position = viewerPose.transform.position;
    let orientation = viewerPose.transform.orientation;

    console.log(
      `XR Viewer Position: {x: ${roundToTwo(position.x)}, y: ${roundToTwo(
 position.y,
 )}, z: ${roundToTwo(position.z)}`,
    );

    console.log(
      `XR Viewer Orientation: {x: ${roundToTwo(orientation.x)}, y: ${roundToTwo(
 orientation.y,
 )}, z: ${roundToTwo(orientation.z)}, w: ${roundToTwo(orientation.w)}`,
    );
  }
}
```

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMPoint |

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

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

関連情報
----

* `DOMRect`
* `DOMMatrix`
File
====

**`File`** インターフェイスは、ファイルについての情報を提供したり、ウェブページ内の JavaScript からその内容にアクセスできるようにしたりします。

`File` オブジェクトは通常、`<input>` 要素を使用してファイルを選択した結果として返される `FileList` オブジェクト、またはドラッグ＆ドロップ操作の `DataTransfer` オブジェクトから取得します。

`File` オブジェクトは特別な種類の `Blob` オブジェクトであり、 Blob が利用できる場面ではどこでも利用できます。特に、`FileReader`、`URL.createObjectURL_static`、`createImageBitmap()`、`XMLHttpRequest.send()` は、`Blob` と `File` の両方を受け付けます。

詳しい情報や例は、ウェブアプリケーションからのファイルの使用 を参照してください。

Blob

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

`File()`

新しく構築された `File` オブジェクトを返します。

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

`File.prototype.lastModified` 読取専用 

ファイルの最終更新時刻を、 UNIX 元期 (1970 年 1 月 1 日深夜) からの経過ミリ秒数で返します。

`File.prototype.lastModifiedDate` 
非推奨
 読取専用  
Non-standard

`File` オブジェクトが参照しているファイルの最終更新時刻の `Date` を返します。

`File.prototype.name` 読取専用 

`File` オブジェクトが参照しているファイルの名前を返します。

`File.prototype.webkitRelativePath` 読取専用 

`File` の URL の相対パスを返します。

`File` は `Blob` を実装しているので、以下のようなプロパティも利用できます。

`Blob.size` 読取専用 

ファイルのサイズをバイト単位で返します。

`File.prototype.type` 読取専用 

ファイルの MIME タイプを返します。

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

*`File` インターフェイスはメソッドを定義せず、`Blob` インターフェイスからメソッドを継承しています。*

`Blob.prototype.slice([start[, end[, contentType]]])`

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

`Blob.prototype.stream()`

`File` を `ReadableStream` に変換し、`File` の内容を読み込めるようにします。

`Blob.prototype.text()`

`File` をストリームに変換し、最後まで読み込みます。これは、文字列（テキスト）で解決するプロミスを返します。

`Blob.prototype.arrayBuffer()`

`File` をストリームに変換し、最後まで読み込みます。 `ArrayBuffer` で解決するプロミスを返します。

仕様書
---

| Specification |
| --- |
| File API # file-section |

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

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

関連情報
----

* ウェブアプリケーションからのファイルの使用
* `FileReader`
VREyeParameters
===============

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

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

**`VREyeParameters`** は WebVR API のインターフェイスで、指定した目のためにシーンを正しくレンダリングするためのすべての情報（視界の情報を含む）を表します。

**メモ:** このインターフェイスは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

このインターフェイスは `VRDisplay.getEyeParameters()` メソッドを通じてアクセスできます。

**警告:** このインターフェイスは、ビューおよび投影行列を計算するために使用すべきではありません。ハードウェアの互換性を可能な限り確保するために、`VRFrameData` で指定された行列を使用してください。

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

`VREyeParameters.offset` 
非推奨
 読取専用  
Non-standard

ユーザーの目と目の間の中心点から目の中心までのオフセットを、メートル単位で表します。

`VREyeParameters.fieldOfView` 
非推奨
 読取専用  
Non-standard

ユーザーの瞳孔間距離 (IPD) の調整により変化する、目の現在の視野角を記述します。

`VREyeParameters.renderWidth` 
非推奨
 読取専用  
Non-standard

それぞれの目のビューポートの推奨レンダーターゲットの幅をピクセル単位で記述します。

`VREyeParameters.renderHeight` 
非推奨
 読取専用  
Non-standard

それぞれの目のビューポートの推奨レンダーターゲットの高さをピクセル単位で記述します。

例
-


```js
navigator.getVRDisplays().then((displays) => {
  // If a display is available, use it to present the scene
  vrDisplay = displays[0];
  console.log("Display found");
  // Starting the presentation when the button is clicked:
  // It can only be called in response to a user gesture
  btn.addEventListener("click", () => {
    vrDisplay.requestPresent([{ source: canvas }]).then(() => {
      console.log("Presenting to WebVR display");

      // Set the canvas size to the size of the vrDisplay viewport

      const leftEye = vrDisplay.getEyeParameters("left");
      const rightEye = vrDisplay.getEyeParameters("right");

      canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) \* 2;
      canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);

      drawVRScene();
    });
  });
});
```

仕様書
---

このインターフェイスは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR API を実装するまで、 A-Frame、Babylon.js、Three.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

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

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

関連情報
----

* WebVR API
LockManager
===========

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

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

`LockManager.request()`

名前と性質を指定する引数をとり、`Lock` オブジェクトを要求します。

`LockManager.query()`

確保中のロックと獲得待ち中のロックに関する情報を持ったオブジェクトで解決する `Promise` を返します。

仕様書
---

| Specification |
| --- |
| Web Locks API # api-lock-manager |

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

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

**`MediaStreamTrackAudioSourceNode`** インターフェイスは `AudioNode` の一種で、WebRTC やメディアキャプチャとストリーム API から得られた特定の `MediaStreamTrack` からデータを取得する音源を表します。

音声自体は、マイクやその他の音声サンプリングデバイスからの入力かもしれないし、`RTCPeerConnection` から受信したものかもしれないし、その他かもしれません。

`MediaStreamTrackAudioSourceNode` は入力を持たず、ちょうど 1 個の出力を持ち、`AudioContext.createMediaStreamTrackSource()` メソッドにより生成されます。このインターフェイスは、ストリームの最初の音声トラックで決め打ちするのではなく使用するトラックを明示できるという点以外、`MediaStreamAudioSourceNode` に似ています。

EventTarget

AudioNode

MediaStreamTrackAudioSourceNode

|  |  |
| --- | --- |
| 入力数 | `0` |
| 出力数 | `1` |
| チャンネル数 | 生成時に `AudioContext.createMediaStreamTrackSource()` メソッドに渡された最初の音声 `MediaStreamTrack` により定義されます。 |

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

`new MediaStreamTrackAudioSourceNode()`

オプションを指定して新しい `MediaStreamTrackAudioSourceNode` オブジェクトを生成します。

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

*`MediaStreamTrackAudioSourceNode` インターフェイスは自身のプロパティを持ちません。しかし、親の `AudioNode` のプロパティを継承します。*

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

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

例
-

`AudioContext.createMediaStreamSource()` に、このオブジェクトを用いるサンプルコードがあります。

仕様書
---

| Specification |
| --- |
| Web Audio API # MediaStreamTrackAudioSourceNode |

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

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

関連情報
----

* Web Audio API の使用
* WebRTC API
* メディアキャプチャとストリーム API (メディアストリーム)
* `MediaStreamAudioSourceNode`
CSSStyleRule
============

**`CSSStyleRule`** は、単一の CSS スタイルルールを表します。

CSSRule

CSSGroupingRule

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

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

`CSSStyleRule.selectorText`

このルールのセレクターのテキスト表現を返します。例: `"h1,h2"`

`CSSStyleRule.style` 読取専用 

このルールの `CSSStyleDeclaration` オブジェクトを返します。

`CSSStyleRule.styleMap` 読取専用 

`StylePropertyMap` オブジェクトを返し、これによってこのルールのプロパティと値の組へアクセスできます。

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

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

例
-

 この CSS は 1 つのスタイルルールを含んでいます。これは最初の `CSSRule` となり、 `document.styleSheets[0].cssRules` で返されます。
 従って、 `myRules[0]` は `h1` を定義するルールを表す `CSSStyleRule` オブジェクトを返します。


```css
h1 {
  color: pink;
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0]); // a CSSStyleRule representing the h1.
```

仕様書
---

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

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

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

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
`VTTCue` インターフェイスは WebVTT（メディアプレゼンテーションに関するテキストトラック）を処理するための API の一部で、特定の `<track>` 要素に関連付けられたテキストトラックを記述および制御します。

EventTarget

TextTrackCue

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

`VTTCue()`

指定された時間範囲をカバーし、指定されたテキストを持つ、新しく作成された `VTTCue` オブジェクトを返します。

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

*このインターフェイスには `TextTrackCue` から継承したプロパティもあります。*

`VTTCue.region`

キューが描画される動画のサブ領域を説明する `VTTRegion` オブジェクト。 割り当てられていない場合は `null`。

`VTTCue.vertical`

キューの書き込み方向を表す列挙型を返します。

`VTTCue.snapToLines`

`VTTCue.line` 属性が整数の行数または動画サイズのパーセントである場合、`true` を返します。

`VTTCue.line`

キューの行位置を返します。 これは、文字列 `auto` またはその解釈が `VTTCue.snapToLines` の値に依存する数値になります。

`VTTCue.lineAlign`

`VTTCue.line` の配置を表す列挙型を返します。

`VTTCue.position`

行内のキューのインデントを返します。 これは、文字列 `auto` または `VTTCue.region` のパーセント値、または `VTTCue.region` が `null` の場合は動画サイズです。

`VTTCue.positionAlign`

キューの配置を表す列挙型を返します。 これは `VTTCue.position` が何に固定されているかを決定するために使用されます。

`VTTCue.size`

キューのサイズを表す `double` 型を動画サイズのパーセントで返します。

`VTTCue.align`

キューボックス内のすべてのテキスト行の配置を表す列挙型を返します。

`VTTCue.text`

キューの内容を含む文字列を返します。

メソッド
----

`getCueAsHTML()`

キューのテキストを `DocumentFragment` として返します。

例
-

### HTML

次の例は、新しい `TextTrack` を動画に追加し、次に `TextTrack.addCue()` メソッドを使用して `VTTCue` オブジェクトを値としてキューを追加します。


```html
<video
 controls
 src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4"></video>
```

### CSS


```css
video {
  width: 420px;
  height: 300px;
}
```

### JavaScript


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
track.addCue(new VTTCue(0, 0.9, "Hildy!"));
track.addCue(new VTTCue(1, 1.4, "How are you?"));
track.addCue(new VTTCue(1.5, 2.9, "Tell me, is the lord of the universe in?"));
track.addCue(new VTTCue(3, 4.2, "Yes, he's in - in a bad humor"));
track.addCue(new VTTCue(4.3, 6, "Somebody must've stolen the crown jewels"));
console.log(track.cues);
```

### 結果

仕様書
---

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # the-vttcue-interface |

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

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

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

**`CSSTransformValue`** は CSS 型付きオブジェクトモデルのインターフェイスで、 CSS の `transform` プロパティで使用される `transform-list` の値を表します。

CSSStyleValue

CSSTransformValueCSSTransformValue を継承しているインターフェイス
---------------------------------

以下のリストは `CSSTransformValue` インターフェイスを継承しているインターフェイスの一覧です。

* `CSSTranslate` (en-US)
* `CSSRotate` (en-US)
* `CSSScale` (en-US)
* `CSSSkew`
* `CSSSkewX` (en-US)
* `CSSSkewY` (en-US)
* `CSSPerspective` (en-US)
* `CSSMatrixComponent` (en-US)
コンストラクター
--------

`CSSTransformValue()` 
Experimental

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

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

`CSSTransformValue.length` 読取専用  
Experimental

`CSSTransformValue` に格納されている座標変換コンポーネントの数を返します。

`CSSTransformValue.is2D` 読取専用  
Experimental

変換が 2D か 3D かを示す論理値を返します。

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

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

`CSSTransformValue.toMatrix()` 
Experimental

新しい `DOMMatrix` オブジェクトを返します。

`CSSUnparsedValue.entries()` 
Experimental

指定されたオブジェクト自身で列挙可能なプロパティ `[key, value]` のペアを、 `for...in` ループが提供するのと同じ順序で配列にして返します（for-in ループはプロトタイプチェーン内のプロパティも同様に列挙する点が異なります）。

`CSSUnparsedValue.forEach()` 
Experimental

指定された関数を `CSSTransformValue` オブジェクトの各要素に対して一度だけ実行します。

`CSSUnparsedValue.keys()` 
Experimental

CSSTransformValue` オブジェクトの各インデックスに対応するキーを格納した新しい *配列イテレーター* オブジェクトを返します。

`CSSUnparsedValue.values()` 
Experimental

`CSSTransformValue` オブジェクトの個々の位置に対応する値を格納した新しい *配列イテレーター* オブジェクトを返します。

例
-

To Do.

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # transformvalue-objects |

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

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

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** は、動画や音声ファイル、ソフトウェアのような、時間のかかるダウンロードをうまく処理するためのメソッドを提供します。

概要と用途
-----

ウェブアプリケーションがユーザーに大きなファイルをダウンロードさせる必要があるとき、よく起きる問題として、ユーザーがダウンロードの完了までページに接続し続けなければならないという問題があります。接続が切れたり、タブを閉じたり、ページを離れたりすると、ダウンロードは中止されてしまいます。

`Background Synchronization API` (en-US) を用いて、ユーザーが接続されるまでサービスワーカーに処理を延期させることができますが、この方法は大容量ファイルのダウンロードのような時間のかかる処理には使えません。バックグラウンド同期は、フェッチが完了するまでサービスワーカーが生き続ける必要がありますが、ブラウザーはバッテリーの寿命を長持ちさせるため、また、バックグラウンドで不要なタスクが発生することを防ぐために、途中でタスクを終了させてしまうでしょう。

Background Fetch API はこの問題を解決します。たとえば、ユーザーが動画をダウンロードするためのボタンをクリックしたときなどに、ウェブ開発者はブラウザーにバックグラウンドでフェッチを行うよう指示できるようになります。指示が行われると、ブラウザーはユーザーに見える形でフェッチを実行します。(ユーザーに進捗状況を表示し、ユーザーはダウンロードをキャンセルすることもできます。)ダウンロードが完了すると、ブラウザーはサービスワーカーを開きます。この時点で、アプリケーションは必要に応じて応答を処理できます。

Background Fetch API は、ユーザーがプロセスをオフラインで開始した場合にも、フェッチの発生を可能にします。一旦接続されると、処理が開始されます。ユーザーがオフラインになると、再びオンラインになるまでプロセスは一時停止します。

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

`BackgroundFetchManager`

キーが background fetch のIDで、値が `BackgroundFetchRegistration` のオブジェクトのマップ。

`BackgroundFetchRegistration`

Background Fetch を表します。

`BackgroundFetchRecord`

個々のフェッチ要求と応答を表します。

`BackgroundFetchEvent`

`onbackgroundfetchabort` と `onbackgroundfetchclick` に渡されるイベント型。

`BackgroundFetchUpdateUIEvent`

`onbackgroundfetchsuccess` と `onbackgroundfetchfail` に渡されるイベント型。

例
-

Background Fetch を使用する前に、ブラウザーで利用可能か確認しましょう。


```js
if (!("BackgroundFetchManager" in self)) {
  // 代わりのダウンロード方法を用意してください。
}
```


Background Fetch の使用には登録済みのサービスワーカーが必要となります。そして、 `backgroundFetch.fetch()` を呼び出してフェッチを実行します。これは `BackgroundFetchRegistration` で解決されるプロミスを返します。

バックグラウンドフェッチは、複数のファイルをフェッチすることができます。下記の例では、フェッチは MP3 ファイルと JPEG ファイルをリクエストします。このことは、ユーザーが 1 つのアイテムとして見ている、複数ファイルで構成されたパッケージ (たとえば、 podcast とアートワーク) を一度にダウンロードすることを可能にします。


```js
navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch(
    "my-fetch",
    ["/ep-5.mp3", "ep-5-artwork.jpg"],
    {
      title: "Episode 5: Interesting things.",
      icons: [
        {
          sizes: "300x300",
          src: "/ep-5-icon.png",
          type: "image/png",
        },
      ],
      downloadTotal: 60 \* 1024 \* 1024,
    },
  );
});
```


Background Fetch を実装したデモアプリは こちら 。

仕様書
---

| Specification |
| --- |
| Background Fetch  |

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

### api.BackgroundFetchManager

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

### api.BackgroundFetchRegistration

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

### api.BackgroundFetchRecord

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

関連情報
----

* Introducing Background Fetch
* Background Fetch - HTTP 203
ANGLE\_instanced\_arrays
========================

**`ANGLE_instanced_arrays`** 拡張機能は WebGL API の一部であり、同じ頂点データ、プリミティブカウント、およびタイプを共有している同じオブジェクトまたは同様のオブジェクトのグループを複数回描画することができます。

WebGL 拡張機能は `WebGLRenderingContext.getExtension()` (en-US) メソッドを使用することで利用できるようになります。詳しくは、 WebGL チュートリアル の 拡張機能の使用も参照してください。

**メモ:** この拡張機能は WebGL1 のコンテキストでのみ利用可能です。 WebGL2 (en-US) のコンテキストでは、この機能は既定で使用することができ、定数やメソッドは "`ANGLE`" 接尾辞なしで使用することができます。

"ANGLE" という名前ですが、この拡張機能は ANGLE ライブラリーを使用していれば、 Windows でなくてもハードウェアが対応していればあらゆる端末で動作します。 "ANGLE" は単に、この拡張機能が ANGLE ライブラリーの作者によって書かれたことを示しているだけです。

定数
--

この拡張機能は新しい定数を公開します。これは `gl.getVertexAttrib()` (en-US) メソッドで使用することができます。

`ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE`

`GLint` で、 `gl.getVertexAttrib()` (en-US) で `pname` 引数として使用されたときにインスタンス化されたレンダリングに用いられる序数を記述したものを返します。

メソッド
----

この拡張機能は 3 つの新しいメソッドを公開します。

`ext.drawArraysInstancedANGLE()` (en-US)

`gl.drawArrays()` と同様に動作しますが、要素の範囲の複数のインスタンスが実行され、反復ごとにインスタンスが進む点が異なります。

`ext.drawElementsInstancedANGLE()` (en-US)

`gl.drawArrays()` と同様に動作しますが、要素のセットの複数のインスタンスが実行され、各セット間でインスタンスが進む点が異なります。

`ext.vertexAttribDivisorANGLE()` (en-US)

プリミティブの複数のインスタンスを `ext.drawArraysInstancedANGLE()` (en-US) および `ext.drawElementsInstancedANGLE()` (en-US) で描画する際に一般頂点属性が進む速度を変更します。

例
-

次の例は、与えられた図形を 1 回の draw 呼び出しで複数回描画する方法です。

**警告:** 以下は教育的なものであり、製品レベルのコードではありません。レンダリングループ内や使用直前にデータ/バッファを構築することは、一般的に避けるべきです。


```js
// 拡張機能を有効化
const ext = gl.getExtension("ANGLE\_instanced\_arrays");

// 通常通りに図形バッファーを関連付ける
gl.bindBuffer(gl.ARRAY\_BUFFER, geometryVertexBuffer);
gl.enableVertexAttribArray(vertexPositionAttributeLocation);
gl.vertexAttribPointer(
  vertexPositionAttributeLocation,
  3,
  gl.FLOAT,
  false,
  0,
  0,
);

// 位置バッファーを構築
const instancePositions = [];
for (const instance of instances) {
  instancePositions.push(
    instance.position.x,
    instance.position.y,
    instance.position.z,
  );
}
const instancePositionBuffer = createWebGLBufferFromData(instancePositions);

// 他の属性と同様に、このインスタンスと位置バッファーを関連付け
gl.bindBuffer(gl.ARRAY\_BUFFER, instancePositionBuffer);
gl.enableVertexAttribArray(instancePositionAttributeLocation);
gl.vertexAttribPointer(
  instancePositionAttributeLocation,
  3,
  gl.FLOAT,
  false,
  0,
  0,
);

// 属性をインスタンスとしてマークし、すべての頂点ではなく、それぞれ（1 つ）のインスタンスを進めます。
ext.vertexAttribDivisorANGLE(instancePositionAttributeLocation, 1);

// それぞれのインスタンスについて、図形を描画します。
ext.drawArraysInstancedANGLE(
  gl.TRIANGLES,
  0,
  numGeometryVertices,
  instances.length,
);
```

仕様書
---

| Specification |
| --- |
| WebGL ANGLE\_instanced\_arrays Khronos Ratified Extension Specification  |

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

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

関連情報
----

* `WebGLRenderingContext.getExtension()` (en-US)
* `WebGL2RenderingContext.drawArraysInstanced()` (en-US)
* `WebGL2RenderingContext.drawElementsInstanced()` (en-US)
* `WebGL2RenderingContext.vertexAttribDivisor()` (en-US)
DOMTokenList
============

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

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

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

`DOMTokenList.length` 読取専用 

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

`DOMTokenList.value`

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

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

`DOMTokenList.item()`

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

`DOMTokenList.contains()`

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

`DOMTokenList.add()`

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

`DOMTokenList.remove()`

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

`DOMTokenList.replace()`

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

`DOMTokenList.supports()`

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

`DOMTokenList.toggle()`

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

`DOMTokenList.entries()`

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

`DOMTokenList.forEach()`

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

`DOMTokenList.keys()`

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

`DOMTokenList.values()`

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

例
-

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

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


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


そして JavaScript です。


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


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

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

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


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



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


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

仕様書
---

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

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

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

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

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

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

WorkletGlobalScope

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

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

`currentFrame` 読取専用 

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

`currentTime` 読取専用 

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

`sampleRate` 読取専用 

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

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

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

`registerProcessor()`

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

例
-

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

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


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

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

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

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

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

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


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


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

仕様書
---

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

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

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

関連情報
----

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