recursal/MDN huggingface dataset:
GPUSupportedFeatures
====================

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

WebGPU API の **`GPUSupportedFeatures`** インターフェイスは、`GPUAdapter` が対応している追加機能を表現する `Set` 風オブジェクトです。

現在のアダプター用の `GPUSupportedFeatures` オブジェクトは、`GPUAdapter.features` 経由で参照できます。

下層のハードウェアで対応していても、対応するすべてのブラウザーの WebGPU ですべての機能が利用できるわけではないことに注意するべきです。これは、たとえば以下の場合など、下層のシステム、ブラウザー、アダプターの制限によるものである可能性があります。

* 下層のシステムが、あるブラウザーと互換性がある方式で機能を利用可能にする保証ができないかもしれません。
* ブラウザーのベンダーがある機能への対応を実装するセキュアな方法をまだ見つけていないか、単にまだ実装に手が回っていないかもしれません。

WebGPU アプリケーションにおいて特定の追加機能の恩恵を受けたい場合は、徹底的にテストを行うことを推奨します。

利用可能な機能
-------

実装や物理デバイスによって異なる可能性があり、時間の経過によっても変わる可能性があるので、ここでは WebGPU で使用可能な追加機能の完全な集合を列挙していませんリストは、仕様書内の Feature Index を参照してください。

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

以下のプロパティは、すべての読み取り専用の `Set` 風オブジェクトで使用可能です。(以下のリンクはグローバルオブジェクト `Set` のリファレンスページです)

`size` 
Experimental

集合に含まれる値の数を返します。

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

以下のメソッドは、すべての読み取り専用の `Set` 風オブジェクトで使用可能です。(以下のリンクはグローバルオブジェクト `Set` のリファレンスページです)

`has()` 
Experimental

指定の値の要素が集合に含まれるか否かを表す論理値を返します。

`values()` 
Experimental

集合内の各要素の **値** を挿入した順に出力する新しいイテレーターオブジェクトを返します。

`keys()` 
Experimental

`values()` の別名です。

`entries()` 
Experimental

集合内の各要素に対応する **配列 `[value, value]`** が挿入した順に含まれる新しいイテレーターオブジェクトを返します。

`forEach()` 
Experimental

集合内の各要素について挿入した順に指定のコールバック関数を 1 度ずつ呼び出します。

例
-


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

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

  const adapterFeatures = adapter.features;

  // 集合のサイズを返す
  console.log(adapterFeatures.size);

  // アダプターがある機能に対応しているかどうかをチェックする
  console.log(adapterFeatures.has("texture-compression-astc"));

  // values() を用いて集合のすべての値を走査する
  const valueIterator = adapterFeatures.values();
  for (const value of valueIterator) {
    console.log(value);
  }

  // keys() を用いて集合のすべての値を走査する
  const keyIterator = adapterFeatures.keys();
  for (const value of keyIterator) {
    console.log(value);
  }

  // entries() を用いて集合のすべての値を走査する
  const entryIterator = adapterFeatures.entries();
  for (const entry of entryIterator) {
    console.log(entry[0]);
  }

  // forEach() を用いて集合のすべての値を走査する
  adapterFeatures.forEach((value) => {
    console.log(value);
  });

  //...
}
```

仕様書
---

| Specification |
| --- |
| WebGPU # gpu-supportedfeatures |

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

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

関連情報
----

* WebGPU API
TouchList
=========

**`TouchList`** インターフェイスは、タッチ面上の接触点のリストを表します。例えば、ユーザーがタッチ面（画面やトラックパッドなど）を 3 本指で操作している場合、対応する `TouchList` オブジェクトは 1 本の指あたり 1 つの `Touch` オブジェクトを持ち、全部で 3 項目になります。

**メモ:** このインターフェイスは変更不可能なリストを作成しようとするもので、すでに使用しているコードを壊さないために対応しているだけです。現代の API では、代わりに ECMAScript の配列型をラップした型を使用しているので、ECMAScript の配列のように扱うことができ、同時にその使用方法に追加の意味づけをすることができます（例えば、アイテムを読み取り専用にする）。

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

`TouchList.length` 読取専用 

`TouchList` 中の `Touch` オブジェクトの個数です。

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

`TouchList.item()`

リスト内の指定した位置の `Touch` オブジェクトを返します。

例
-

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

仕様書
---

| Specification |
| --- |
| Touch Events # touchlist-interface |

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

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

関連情報
----

* タッチイベント
* `Document.createTouchList()`
CSSStyleDeclaration
===================

**`CSSStyleDeclaration`** インターフェースは CSS 宣言ブロックのオブジェクトを表し、スタイル情報や様々なスタイルに関するメソッドやプロパティを提供します。

`CSSStyleDeclaration` オブジェクトは、下記の 3 つの API によって使用されます。

* 単一の要素のインラインスタイルを扱う `HTMLElement.style` から（例: `<div style="…">`）。
* `CSSStyleSheet` API から。例えば `document.styleSheets[0].cssRules[0].style` は、その文書の最初のスタイルシートの最初の CSS ルールを `CSSStyleDeclaration` を返します。
* `Window.getComputedStyle()` で、 `CSSStyleDeclaration` オブジェクトを**読み取り専用**インターフェイスとして返します。
属性
--

`CSSStyleDeclaration.cssText`

宣言ブロックのテキスト表現です。`HTMLElement.style` で公開されている場合のみ。この属性を設定すると、インラインスタイルが変更されます。計算された宣言ブロックのテキスト表現が必要な場合は、`JSON.stringify()` で取得することができます。

`CSSStyleDeclaration.length`読取専用 

プロパティの数を表します。後述の `item()` メソッドを参照のこと。

`CSSStyleDeclaration.parentRule`読取専用 

所属する `CSSRule` を表します。

### CSS プロパティ

`CSSStyleDeclaration.cssFloat`

CSS の `float` プロパティの特殊な別名です。

`CSSStyleDeclaration` の名前付きプロパティ

対応するすべての CSS プロパティを、ダッシュおよびキャメルケースにした属性です。

メソッド
----

`CSSStyleDeclaration.getPropertyPriority()`

オプションの優先度、 "important" を返します。

`CSSStyleDeclaration.getPropertyValue()`

指定されたプロパティ名のプロパティ値を返します。

`CSSStyleDeclaration.item()`

 位置から CSS プロパティ名を返します。位置が範囲を超えていた場合は空文字列を返します。
 代替方法は `nodeList[i]` にアクセスすることです (これは `i` が範囲外であった場合は `undefined` を返します)。これは JavaScript 以外の DOM 実装の多くで最も有用です。


`CSSStyleDeclaration.removeProperty()`

CSS 宣言ブロックからプロパティを削除します。

`CSSStyleDeclaration.setProperty()`

宣言ブロック内の既存の CSS プロパティを変更するか、新しい CSS プロパティを生成するかします。

`CSSStyleDeclaration.getPropertyCSSValue()` 
非推奨

**Firefox の getComputedStyle のみ対応** プロパティの値を `CSSPrimitiveValue` (en-US) として、または一括指定プロパティでは `null` を返します。

例
-


```js
const styleObj = document.styleSheets[0].cssRules[0].style;
console.log(styleObj.cssText);

for (let i = styleObj.length; i--; ) {
  const nameString = styleObj[i];
  styleObj.removeProperty(nameString);
}

console.log(styleObj.cssText);
```

仕様書
---

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

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

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

**`Comment`** インターフェイスは、マークアップ内にある注意書きのテキストを表します。これらは通常の閲覧時には表示されず、このようなコメントはブラウザーのソースビュー表示時に閲覧可能です。

HTML や XML でコメントは、'`<!--`' と '`-->`' で囲んだコンテンツとして記述します。XML 構文においては、'`--`' をコメント内に記述することはできません。

EventTarget

Node

CharacterData

Commentプロパティ
-----

*このインターフェイスに固有のプロパティはありませんが、親インターフェイスである `CharacterData`、および間接的に `Node` のプロパティを継承しています。*

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

`Comment()`

引数をテキストコンテンツとして持つ、新しい `Comment` オブジェクトを返します。存在しない場合の既定値は、空文字列 `''` です。

メソッド
----

*このインターフェイスに固有のメソッドはありませんが、親インターフェイスである `CharacterData`、および間接的に `Node` のメソッドを継承しています。*

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-comment |

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

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

関連情報
----

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

**`MutationRecord`** は、 DOM に生じた個々の変更を表します。これは `MutationObserver` のコールバック関数に渡されるオブジェクトです。

プロパティ
-----

|  |  |  |
| --- | --- | --- |
| プロパティ | 型 | 意味 |
| `MutationRecord.type` (en-US) | `String` | 
 属性値の変更の場合は `"attributes"`、`CharacterData`
 ノードに対する変更の場合は
 `"characterData"`、ノードのツリーに対する変更の場合は
 `"childList"` を返します。
  |
| `MutationRecord.target` (en-US) | `Node` | 
 変更の影響を受けたノードを、
 `MutationRecord.type` (en-US) に応じて返します。`attributes`
 の場合、属性が変更された要素となります。`characterData`
 の場合、`CharacterData` ノードとなります。`childList`
 の場合、子ノードが変更されたノードとなります。
  |
| `MutationRecord.addedNodes` (en-US) | `NodeList` | 
 追加されたノードを返します。何もノードが追加されていなかった場合は、空の
 `NodeList` を返します。
  |
| `MutationRecord.removedNodes` (en-US) | `NodeList` | 
 削除されたノードを返します。何もノードが削除されていなかった場合は、空の
 `NodeList` を返します。
  |
| `MutationRecord.previousSibling` (en-US) | `Node` | 
 追加あるいは削除されたノードの直前にあるノード、もしくは
 `null` を返します。
  |
| `MutationRecord.nextSibling` (en-US) | ``Node`` | 
 追加あるいは削除されたノードの直後にあるノード、もしくは
 `null` を返します。
  |
| `MutationRecord.attributeName` (en-US) | `String` | 変更された属性のローカル名、もしくは `null` を返します。 |
| `MutationRecord.attributeNamespace` (en-US) | `String` | 変更された属性の名前空間、もしくは `null` を返します。 |
| `MutationRecord.oldValue` (en-US) | `String` | 
 返値は `MutationRecord.type` (en-US)
 に応じて以下のように変わります。`attributes`
 の場合、変更された属性の変更前の属性値となります。`characterData`
 の場合、変更されたノードの変更前のデータとなります。`childList`
 の場合、`null` となります。


 なお、この機能が正常に動作するためには、
 `MutationObserver`
observe
 メソッドの対応する
 MutationObserverInit (en-US)
 引数で、 `attributeOldValue` または
 `characterDataOldValue` が
 `true` に設定されている必要があります

 |

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-mutationrecord |

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

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

**`PerformanceMeasure`** は、"`measure`" の `entryType` を持つ`PerformanceEntry` オブジェクトの抽象インターフェイスです。このタイプのエントリは、`performance.measure()` を呼び出して、ブラウザーのパフォーマンスタイムラインの 2 つのマークの間に*名前付き* `DOMHighResTimeStamp` (*measure*) を追加することによって作成されます。

PerformanceEntry

PerformanceMeasureプロパティ
-----

このインターフェイスはプロパティを持ちませんが、以下のようにプロパティを修飾/制約することで以下の `PerformanceEntry` プロパティを拡張します。

`PerformanceEntry.entryType`

"`measure`" を返します。

`PerformanceEntry.name`

メジャーが`performance.measure()`の呼び出しで作成されたときにメジャーに付けられた名前を返します。

`PerformanceEntry.startTime`

`performance.measure()` が呼び出されたときにメジャーに与えられた`タイムスタンプ`を返します。

`PerformanceEntry.duration`

小節の長さである `DOMHighResTimeStamp` を返します (通常、小節の終了マークのタイムスタンプから開始マークのタイムスタンプを引いたもの)。

メソッド
----

このインターフェイスにはメソッドがありません。

例
-

ユーザータイミング API の使用 (en-US)の例を参照してください。

仕様書
---

| Specification |
| --- |
| User Timing # performancemeasure |

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

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

あわせて参照
------

* User Timing (Overview) (en-US)
* Using the User Timing API (en-US)
PeriodicWave
============

**`PeriodicWave`** インターフェイスは、`OscillatorNode` の出力を形成するのに利用できる周期的な波形を定義します。

`PeriodicWave` には入力も出力もありません。これは、`OscillatorNode.setPeriodicWave()` を呼ぶ際にカスタム発振器を定義するために用います。`PeriodicWave` 自体は `BaseAudioContext.createPeriodicWave` により作成され、返されます。

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

`PeriodicWave()`

全てのプロパティについてデフォルトの値を使用し、新しい `PeriodicWave` を作成します。最初からプロパティの値をカスタムしたい場合は、かわりに `BaseAudioContext.createPeriodicWave` ファクトリーメソッドを使ってください。

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

なし。`PeriodicWave` はプロパティの継承もしません。

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

なし。`PeriodicWave` はメソッドの継承もしません。

例
-

単純な正弦波を表す `PeriodicWave` オブジェクトを作成する方法のサンプルコードは、`BaseAudioContext.createPeriodicWave` を参照してください。

仕様書
---

| Specification |
| --- |
| Web Audio API # PeriodicWave |

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

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

関連情報
----

* Web Audio API の使用
CSSSupportsRule
===============

**`CSSSupportsRule`** インターフェイスは、1 個の CSS `@supports` アット規則 を表すオブジェクトを表します。

CSSRule

CSSGroupingRule

CSSConditionRule

CSSSupportsRuleプロパティ
-----

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

メソッド
----

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

例
-

 この CSS には CSS 機能クエリーとして `@supports` アットルールを使用しており、その中にスタイルルールを 1 つ含んでいます。これは `document.styleSheets[0].cssRules` が最初に返す CSSRule になります。
 したがって、 `myRules[0]` は `CSSSupportsRule` オブジェクトを返します。


```css
@supports (display: grid) {
  body {
    color: blue;
  }
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0]); // CSSSupportsRule は機能クエリーを表す。
```

仕様書
---

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

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

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

関連情報
----

* `@supports`
ScreenOrientation
=================

Screen Orientation API の **`ScreenOrientation`** インターフェイスは、文書の現在の向きの情報を提供します。

**`ScreenOrientation`** オブジェクトのインスタンスは、`screen.orientation` プロパティで取得できます。

EventTarget

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

`ScreenOrientation.type` 読取専用 

文書の現在の向きのタイプを返します。`"portrait-primary"`、`"portrait-secondary"`、`"landscape-primary"`、`"landscape-secondary"` のいずれかです。

`ScreenOrientation.angle` 読取専用 

文書の現在の向きの角度を返します。

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

`ScreenOrientation.onchange` (en-US)

画面の向きが変わるたびに呼ばれるイベントハンドラーです。

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

`ScreenOrientation.lock()`

含んでいる文書の向きをデフォルトの向きに固定し、`Promise` を返します。

`ScreenOrientation.unlock()`

含んでいる文書の向きのデフォルトの向きへの固定を解除します。

仕様書
---

| Specification |
| --- |
| Screen Orientation # screenorientation-interface |

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

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

Sensor APIs の **`LinearAccelerationSensor`** インターフェイスは、デバイスの 3 軸それぞれにかかっている加速度の測定値を、重力の影響を除いて提供します。

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

EventTarget

Sensor

Accelerometer

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

`LinearAccelerationSensor()`

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

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

*祖先の `Accelerometer`、`Sensor`、`EventTarget` からプロパティを継承しています。*

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

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

イベント
----

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

例
-

線形加速度は通常 `reading` イベントコールバックで取得します。以下の例では、これを 1 秒に 60 回行います。


```js
let laSensor = new LinearAccelerationSensor({ frequency: 60 });

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

仕様書
---

| Specification |
| --- |
| Accelerometer # linearaccelerationsensor-interface |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ウェブアニメーション API
==============

**ウェブアニメーション API** (Web Animation API) を使うことで 、ウェブページの表現を変化させるの同期やタイミング、つまり DOM 要素のアニメーションが可能です。これらはタイミングモデルおよびアニメーションモデルという 2 つのモデルの組み合わせによって実現されます。

概念と利用方法
-------

ウェブアニメーション API は、 DOM 要素のアニメーションを記述する共通言語をブラウザーと開発者に提供します。 API の背景の概念や利用方法についての詳しい情報は、ウェブアニメーション API の使用をご覧ください。

ウェブアニメーションのインターフェイス
-------------------

`Animation`

アニメーションノードやソースの再生制御やタイムラインを提供します。 `KeyframeEffect()` (en-US) コンストラクターで作成されたオブジェクトを取ることができます。

`KeyframeEffect` (en-US)

**キーフレーム**と呼ばれるアニメーション可能なプロパティと値の組み合わせ、およびそのタイミングオプションを記述します。これは `Animation()` コンストラクターを使用して再生することができます。

`AnimationTimeline` (en-US)

アニメーションのタイムラインを表します。このインターフェイスはタイムライン機能（`DocumentTimeline` (en-US) や将来のタイムラインオブジェクトによって継承）を定義するために存在し、これ自体は開発者からはアクセスされません。

`AnimationEvent`

実際には CSS アニメーションの一部です。

`DocumentTimeline` (en-US)

アニメーションのタイムラインを表し、既定の文書のタイムライン（`Document.timeline` プロパティを使用してアクセス）を含みます。

他のインターフェイスへの拡張
--------------

ウェブアニメーション API によって `document` および `element` に新たに追加された機能があります。

### `Document` インターフェイスの拡張

`document.timeline`

既定の文書タイムラインを表す `DocumentTimeline` オブジェクトです。

`document.getAnimations()`

`document` 内で要素に対して現在有効な `Animation` オブジェクトの配列を返します。

### `Element` インターフェイスの拡張

`Element.animate()`

要素のアニメーションを作成して再生するショートカットメソッドです。作成された `Animation` オブジェクトのインスタンスを返します。

`Element.getAnimations()`

`Animation` オブジェクトの配列で、現在その要素に関連し、将来の実行が予定されているものを返します。

仕様書
---

| Specification |
| --- |
| Web Animations  |

関連情報
----

* ウェブアニメーション API の使用
* ウェブアニメーションのデモ
* ポリフィル
* Firefox の現在の実装: AreWeAnimatedYet
* ブラウザーの対応のテスト
TextDecoderStream
=================

**`TextDecoderStream`** はエンコーディング API のインターフェイスで、UTF-8 などのバイナリーエンコーディングのテキストストリームを文字列ストリームに変換します。
 これは `TextDecoder` と同等のストリームです。

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

`TextDecoderStream()`

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

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

`TextDecoderStream.encoding` 読取専用 

エンコーディングです。

`TextDecoderStream.fatal` 読取専用 

論理値で、エラーモードが fatal であるかどうかを示します。

`TextDecoderStream.ignoreBOM` 読取専用 

論理値で、バイトオーダーマークを無視するかどうかを示します。

`TextDecoderStream.readable` 読取専用 

このオブジェクトによって制御される `ReadableStream` のインスタンスを返します。

`TextDecoderStream.writable` 読取専用 

このオブジェクトによって制御される `WritableStream` のインスタンスを返します。

例
-

* 構造化データと HTML のストリーミングの例
* `TextDecoderStream` を使用したフェッチリクエストストリームの例.
仕様書
---

| Specification |
| --- |
| Encoding Standard # interface-textdecoderstream |

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

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

関連情報
----

* `TextEncoderStream`
* ストリーム API の概念
* Experimenting with the Streams API
UserActivation
==============

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

**`UserActivation`** インターフェイスは、ウインドウのユーザーによる有効化に関する情報の取得を可能にします。

ユーザーによる有効化は､ユーザーが最近ページを操作した､またはページを読み込んでから操作を完了したことを表します｡通常､これはボタンのクリックや他の UI の操作です｡

ウインドウにおけるユーザーによる有効化の状態は、以下の 2 種類があります。

* 一時的な有効化 (ユーザーが現在ページを操作している)
* 粘着的な有効化 (ユーザーがページを読み込んでから少なくとも 1 回ページを操作した)

より詳しい情報と、ユーザーによる一時的もしくは粘着的な有効化を必要とする API の一覧については、ユーザーによる有効化によって制御される機能を参照してください。

この API はウインドウコンテキストでのみ利用可能で、ワーカーには提供されていません。

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

`UserActivation.hasBeenActive` 読取専用  
Experimental

現在のウインドウでユーザーによる粘着的な有効化がされているかを表します。

`UserActivation.isActive` 読取専用  
Experimental

現在のウインドウでユーザーによる一時的な有効化がされているかを表します｡

例
-

### 最近ユーザーによる操作が行われたかをチェックする

ユーザーが最近ページを操作したか (一時的な有効化) をチェックするために `UserActivation.isActive` を使用します。


```js
if (navigator.userActivation.isActive) {
  // 例えば、メディアの再生の要求に進む
}
```

### これまでにユーザーによる操作が行われたかをチェックする

ユーザーがこれまでにページを操作したか (粘着的な有効化) をチェックするために `UserActivation.hasBeenActive` を使用します｡


```js
if (navigator.userActivation.hasBeenActive) {
  // 例えば、アニメーションの自動再生に進む
}
```

仕様書
---

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

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

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

関連情報
----

* `navigator.userActivation`
* ユーザーによる有効化によって制御される機能
InputDeviceCapabilities
=======================

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

**`InputDeviceCapabilities`** は入力機器能力 API のインターフェイスは、入力イベントを発生させる物理機器または関連の機器グループに関する情報を提供します。同じ物理入力機器によって発生させられたイベントは、このオブジェクトの同じインスタンスを取得しますが、逆はそうとは限りません。例えば、システム内の同じ能力を持つ 2 つのマウスは、単一の `InputDeviceCapabilities` インスタンスとして現れるかもしれません。

場合によっては、 `InputDeviceCapabilities` は物理機器ではなく論理機器の能力を表します。この例では、例えば、タッチ画面のキーボードと物理的なキーボードが同じ入力をする場合、同じように表すことができます。

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

`InputDeviceCapabilities()` 
Experimental

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

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

`InputDeviceCapabilities.firesTouchEvents` 読取専用  
Experimental

機器がタッチイベントを配信されるかどうかを示す `Boolean` です。

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

なし。

仕様書
---

| Specification |
| --- |
| Input Device Capabilities # dom-inputdevicecapabilities |

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

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

**`HTMLAnchorElement`** インターフェイスはハイパーリンク要素を表し、そのような要素のレイアウトと表示を操作するための特別なプロパティとメソッド（継承元である通常の `HTMLElement` オブジェクトインターフェイスにないもの）を提供します。 このインターフェイスは `<a>` 要素に対応しています。 `<link>` は `HTMLLinkElement` で表されるものであり、混同しないでください。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLElement.accessKey`

文字列で、入力フォーカスをこのハイパーリンクに切り替える単一文字を表します。

`HTMLAnchorElement.download`

文字列で、リンク先リソースをブラウザーに表示するのではなくダウンロードすることを意図していることを示します。値は、提案するファイル名を表します。そのファイル名が基になる OS の有効なファイル名でなかった場合は、ブラウザーが修正します。

`HTMLAnchorElement.hash`

文字列で、参照する URL の先頭のハッシュマーク ('`#`') を含むフラグメント識別子を表します。

`HTMLAnchorElement.host`

文字列で、参照する URL のホスト名とポート番号（既定のポート番号でない場合）を表します。

`HTMLAnchorElement.hostname`

文字列で、参照する URL のホスト名を表します。

`HTMLAnchorElement.href`

文字列で、 HTML の `href` 属性を反映し、リンク先リソースの有効な URL を含みます。

`HTMLAnchorElement.hreflang` (en-US)

文字列で、リンク先リソースの言語を示す HTML の `hreflang` 属性を反映します。

`HTMLAnchorElement.origin` 読取専用 

URL のオリジン、つまりスキーム（プロトコル）、ドメイン（ホスト名）、ポートを含む文字列を返します。

`HTMLAnchorElement.password`

ドメイン名の前に指定されたパスワードを含む文字列を返します。

`HTMLAnchorElement.pathname`

最初の `'/'` に続き、クエリー文字列やフラグメントを含まない URL のパスを含む文字列です。

`HTMLAnchorElement.port`

文字列で、参照する URL のポート番号部分がある場合は、それを表します。

`HTMLAnchorElement.protocol`

文字列で、参照する URL の末尾のコロン ('`:`') を含むプロトコルの部分を表します。

`HTMLAnchorElement.referrerPolicy` 
Experimental

文字列で、どのリファラーを使用するかを示す HTML の `referrerpolicy` 属性を反映します。

`HTMLAnchorElement.rel`

文字列で、対象オブジェクトからリンク先オブジェクトへの関係を指定する HTML の `rel` 属性を反映します。

`HTMLAnchorElement.relList` 読取専用 

`DOMTokenList` で、 HTML の `rel` 属性を反映するトークンのリストを返します。

`HTMLAnchorElement.search`

参照する URL の検索要素（先頭の疑問符 ('`?`') を含む）をがあれば、それを表す文字列です。

`HTMLElement.tabIndex`

現在の文書のタブ移動ナビゲーション順序での要素の位置を含む `long` です。

`HTMLAnchorElement.target` (en-US)

文字列で、リンク先リソースを表示する場所を示す HTML の `target` 属性を反映します。

`HTMLAnchorElement.text`

文字列で、 `Node.textContent` プロパティの別名です。

`HTMLAnchorElement.type`

文字列で、リンク先リソースの MIME タイプを示す HTML の `type` 属性を反映します。

`HTMLAnchorElement.username`

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

### 廃止されたプロパティ

`HTMLAnchorElement.charset` 
非推奨

文字列で、リンク先リソースの文字エンコードを表します。

`HTMLAnchorElement.coords` 
非推奨

文字列で、カンマ区切りの座標リストを表します。

`HTMLAnchorElement.name` 
非推奨

文字列で、アンカー名を表します。

`HTMLAnchorElement.rev` 
非推奨

文字列で、リンク先オブジェクトから対象オブジェクトへの関係を指定する HTML の `rev` HTML 属性を表します。

**メモ:** 現在、W3C HTML 5.2 仕様では、`rev` が廃止されていないことを示していますが、WHATWG の標準では、`rev` が廃止されています。この不一致が解決されるまで、廃止されていると想定する必要があります。

`HTMLAnchorElement.shape` 
非推奨

文字列で、アクティブ領域の形状を表します。

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

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

`HTMLElement.blur`

現在の要素からキーボードフォーカスを取り除きます。

`HTMLElement.focus`

現在の要素にキーボードフォーカスを与えます。

`HTMLAnchorElement.toString()`

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

`blur()` および `focus()` メソッドは、 `HTMLElement` から継承されています。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlanchorelement |

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

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

関連情報
----

* このインターフェイスを実装する HTML 要素: `<a>`
ImageData
=========

**`ImageData`** インターフェイスは、`<canvas>` 要素の領域の基礎をなすピクセルデータを表します。`ImageData()` コンストラクターや、canvas に関連付けられた `CanvasRenderingContext2D` オブジェクトの `createImageData()` メソッドおよび `getImageData()` メソッドによって生成されます。`ImageData` は `putImageData()` メソッドによって canvas の一部を設定するのにも利用可能です。

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

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

`ImageData()`

指定した `Uint8ClampedArray` と、それに含まれる画像のサイズから `ImageData` オブジェクトを生成します。配列を指定しない場合は、透明な黒色の長方形の画像を生成します。worker では `createImageData()` を使用できませんので、worker でこのようなオブジェクトを生成するためのもっとも一般的な手段です。

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

`ImageData.data` 読取専用 

RGBA の順で `0` から `255` の間の整数 (両端の値を含む) を並べたデータを持つ 1 次元配列を表す `Uint8ClampedArray` です。データは行単位で、左上のピクセルから右下のピクセルに向かう順で格納されます。

`ImageData.colorSpace` 読取専用 

画像データの色空間を表す文字列です。

`ImageData.height` 読取専用 

`ImageData` の実際の高さをピクセル数で表す `unsigned long` です。

`ImageData.width` 読取専用 

`ImageData` の実際の幅をピクセル数で表す `unsigned long` です。

仕様書
---

| Specification |
| --- |
| HTML Standard # imagedata |

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

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

関連情報
----

* `CanvasRenderingContext2D`
* `<canvas>` 要素と、関連付けられたインターフェイスである `HTMLCanvasElement`。
IntersectionObserver
====================

**`IntersectionObserver`** は交差オブザーバー API のインターフェイスで、対象となる要素と祖先要素または文書の最上位のビューポートとがの交差状態（重なり合っている状態）の変化を非同期に監視する方法を提供します。その祖先要素またはビューポートはルートと呼ばれます。

`IntersectionObserver` が生成されると、ルート内での可視部分の比率を監視するように構成されます。この構成はいったん `IntersectionObserver` が生成されると変更できませんので、与えられたオブザーバーオブジェクトは可視性の特定の変化を監視する場合にのみ利用できます。しかし、同じオブザーバーで複数の対象要素を監視することができます。

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

`IntersectionObserver()`

新しい `IntersectionObserver` オブジェクトを生成します。これは対象の要素の可視性が 1 つまたは複数の閾値を通過したことを検出したときに、指定されたコールバック関数を実行します。

プロパティ
-----

`IntersectionObserver.root` 読取専用 

`Element` または `Document` であり、この外接矩形が交差を検査するときに外接ボックスとして使用されます。 `root` の値がコンストラクターに渡されなかったり、 `null` が渡されたりした場合は、最上位の文書のビューポートが使用されます。

`IntersectionObserver.rootMargin` 読取専用 

交差状態を計算するときにルートの外接ボックスに適用されるオフセットの矩形で、計算に使用するルートの矩形を縮小または拡大させます。このプロパティから返される値は、内部的な要件に合わせて変化するので、コンストラクターを呼び出したときに指定したものと同じにならないことがあります。それぞれのオフセットはピクセル数 (`px`) またはパーセント値 (`%`) で表すことができます。既定値は "0px 0px 0px 0px" です。

`IntersectionObserver.thresholds` 読取専用 

閾値のリストで、交差領域と監視対象の外接ボックス領域との比を昇順に並べます。あるターゲットの閾値を超えると、そのターゲットに対する通知が生成されます。コンストラクターに値が渡されなかった場合、 0 が使用されます。

メソッド
----

`IntersectionObserver.disconnect()`

`IntersectionObserver` オブジェクトによる対象の監視を停止します。

`IntersectionObserver.observe()`

`IntersectionObserver` に対象の要素を監視するよう指示します。

`IntersectionObserver.takeRecords()`

監視対象すべての `IntersectionObserverEntry` オブジェクトの配列を返します。

`IntersectionObserver.unobserve()`

`IntersectionObserver` が特定の要素の監視を停止するよう指示します。

例
-


```js
const intersectionObserver = new IntersectionObserver((entries) => {
  // intersectionRatio が 0 の場合、対象がビューの外にあるので、
  // 何かをする必要はありません。
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log("Loaded new items");
});
// 監視を開始
intersectionObserver.observe(document.querySelector(".scrollerFooter"));
```

仕様書
---

| Specification |
| --- |
| Intersection Observer # intersection-observer-interface |

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

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

関連情報
----

* `MutationObserver`
* `PerformanceObserver`
* `ResizeObserver`