recursal/MDN huggingface dataset:
Performance
===========

**`Performance`** インターフェイスは、現在のページのパフォーマンス関連情報へのアクセスを提供します。これは High Resolution Time API の一部ですが、Performance Timeline API、Navigation Timing API、User Timing API、および Resource Timing API によって拡張されています。

このタイプのオブジェクトは読み取り専用属性 `window.performance` を呼び出すことで取得できます。

**メモ:** このインターフェイスとそのメンバーは、以下に示されている場合を除き、Web Workers で利用可能です。 パフォーマンスマーカーと測定値はコンテキストごとにあることにも注意してください。メインスレッド (または他のワーカー) にマークを作成した場合、それを Worker スレッドには表示できません (その逆も同様)。

プロパティ
-----

*`Performance` インターフェイスはプロパティを継承しません。*

非推奨 `performance.navigation` 読取専用 

ページがロードかリフレッシュか、リダイレクトの発生回数など、`timing` にリストされている時間に含まれる操作に関する有用なコンテキストを提供するレガシー `PerformanceNavigation` オブジェクト。Worker では利用できません。

非推奨 `performance.timing` 読取専用 

待ち時間関連のパフォーマンス情報を含むレガシー `PerformanceTiming` オブジェクト。Worker には利用できません。

`performance.memory` (en-US) 
Non-standard

Chrome で追加された*非標準の*拡張子で、このプロパティは基本的なメモリ使用量情報を持つオブジェクトを提供します。*この非標準の API を**使うべきではありません***。

`performance.timeOrigin` 読取専用  
Non-standard

パフォーマンス測定の開始時刻のハイレゾリューションタイムスタンプを返します。

メソッド
----

*`Performance` インターフェイスはメソッドを継承しません。*

`performance.clearMarks()`

ブラウザーのパフォーマンスエントリバッファから指定された*マーク*を削除します。

`performance.clearMeasures()`

ブラウザーのパフォーマンスエントリバッファから指定された*数値*を削除します。

`performance.clearResourceTimings()`

ブラウザーのパフォーマンスデータバッファから "`resource`" の `entryType` を持つすべての `performance entries` を削除します。

`performance.getEntries()`

与えられた*フィルタ*に基づく `PerformanceEntry` オブジェクトのリストを返します。

`performance.getEntriesByName()`

指定された*名前*と*エントリタイプ*に基づいて `PerformanceEntry` オブジェクトのリストを返します。

`performance.getEntriesByType()`

与えられた*エントリタイプ*の `PerformanceEntry` オブジェクトのリストを返します。

`performance.mark()`

指定された名前でブラウザーの*パフォーマンスエントリバッファ*に`タイムスタンプ`を作成します。

`performance.measure()`

指定された 2 つのマーク (それぞれ*開始マーク*と*終了マーク*と呼ばれる) の間に、ブラウザーのパフォーマンスエントリバッファ内に名前付き`タイムスタンプ`を作成します。

`performance.now()`

参照時点から経過したミリ秒数を表す `DOMHighResTimeStamp` を返します。

`performance.setResourceTimingBufferSize()`

ブラウザーのリソースタイミングバッファサイズを、指定された数の "`resource`" `タイプ` `パフォーマンスエントリ` オブジェクトに設定します。

`performance.toJSON()`

`Performance` オブジェクトを表す json オブジェクトを返す jsonizer です。

イベント
----

`addEventListener()` を使用するか、このインターフェイスの `oneventname` プロパティにイベントリスナを割り当てることで、イベントを監視します。

`resourcetimingbufferfull`

ブラウザーのリソースタイミングバッファがいっぱいになったときに発生します。`onresourcetimingbufferfull` プロパティからも利用できます。

仕様書
---

| Specification |
| --- |
| High Resolution Time # sec-performance |
| Performance Timeline # extensions-to-the-performance-interface |
| Resource Timing # sec-extensions-performance-interface |
| User Timing # extensions-performance-interface |

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

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

Sensor APIs の **`Sensor`** インターフェイスは、ほかのすべてのセンサーインターフェイスのベースクラスです。このインターフェイスを直接使うことはできません。ですが、このインターフェイスは継承するインターフェイスがアクセスするプロパティ・イベントハンドラー・メソッドを提供します。

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

EventTarget

Sensor
最初に生成されたとき、`Sensor` オブジェクトは測定を行わない *idle* 状態です。`start()` メソッドが呼ばれると、データを取得する準備をします。準備ができると `activate` イベントが送られ、センサーは *activated* 状態になります。その後は、新しいデータを取得するたびに `reading` イベントを送ります。

エラーが発生したときは、`error` イベントを送り、測定を停止し、`Sensor` オブジェクトは *idle* 状態に戻ります。新しいデータを取得するには、もう一度 `start()` メソッドを呼ぶ必要があります。

`Sensor` をベースとするインターフェイス
------------------------

以下が `Sensor` インターフェイスをベースとするインターフェイスの一覧です。

* `Accelerometer`
* `AmbientLightSensor`
* `GravitySensor`
* `Gyroscope`
* `LinearAccelerationSensor`
* `Magnetometer`
* `OrientationSensor`
インスタンスプロパティ
-----------

`Sensor.activated` 読取専用 

センサーが作動中かどうかを表す `boolean` 値を返します。

`Sensor.hasReading` 読取専用 

センサーが測定値を持っているかを表す `boolean` 値を返します。

`Sensor.timestamp` 読取専用 

センサーの最新の測定値のタイムスタンプを返します。

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

`Sensor.start()`

`Sensor` をベースとするセンサーを 1 個動作開始させます。

`Sensor.stop()`

`Sensor` をベースとするセンサーを 1 個動作停止させます。

イベント
----

`activate`

センサーの動作が開始したとき発火します。

`error`

センサーで例外が発生したとき発火します。

`reading`

センサーで新しい測定値が得られたとき発火します。

仕様書
---

| Specification |
| --- |
| Generic Sensor API # the-sensor-interface |

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

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

**`VideoTrackList`** インターフェイスは、`<video>` 要素内に含まれる映像トラックのリストを表すために使用します。 各トラックはリスト内の個別の `VideoTrack` オブジェクトで表します。

`HTMLMediaElement.videoTracks` を使用してこのオブジェクトのインスタンスを取得します。 個々のトラックは、配列構文または `forEach()` などの関数を使用してアクセスできます。

EventTarget

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

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

`length` 読取専用 

リスト内のトラック数。

`selectedIndex` 読取専用 

現在選択されているトラックがある場合はそのインデックス、それ以外の場合は `-1`。

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

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

`getTrackById()`

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

イベント
----

`addtrack`

 新しい映像トラックがメディア要素に追加されたときに発生します。
 `onaddtrack` プロパティからも利用できます。


`change`

 映像トラックがアクティブまたは非アクティブになったときに発生します。
 `onchange` プロパティからも利用できます。


`removetrack`

 映像トラックがメディア要素から取り除かれたときに発生します。
 `onremovetrack` プロパティからも利用できます。


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

`VideoTrackList` を使用すると、メディア要素にある映像トラックに直接アクセスできるだけでなく、`addtrack` および `removetrack` イベントにイベントハンドラーを設定することができるため、メディア要素のストリームにトラックが追加されたときまたは取り除かれたときを検出できます。

例
-

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

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


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

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

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


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

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

仕様書
---

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

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

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

Web Crypto API の辞書 **`AesKeyGenParams`** は、AES 鍵、すなわちアルゴリズムとして AES-CBC, AES-CTR, AES-GCM, AES-KW のいずれかを指定する鍵を生成する際に `SubtleCrypto.generateKey()` の引数 `algorithm` として渡すべきオブジェクトを表します。

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

`name`

文字列。使用したいアルゴリズムにより、`AES-CBC`, `AES-CTR`, `AES-GCM`, `AES-KW` のいずれかに設定するべきです。

`length`

`Number`。生成する鍵の長さ (ビット数) です。128, 192, 256 のいずれかでなければなりません。

例
-

`SubtleCrypto.generateKey()` の例を参照してください。

仕様書
---

| Specification |
| --- |
| Web Cryptography API # dfn-AesKeyGenParams |

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

`SubtleCrypto.generateKey()` メソッドにおいて AES ベースのアルゴリズムをどれかサポートしているブラウザーは、この型をサポートするはずです。

関連情報
----

* `SubtleCrypto.generateKey()`
CSSLayerBlockRule
=================

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
**`CSSLayerBlockRule`** は `@layer` ブロックルールを表します。 これは、他のルールを含むことができる、すなわちグループ化アットルールであり、名前で識別される所定のカスケードレイヤーに関連付けられます。

CSSRule

CSSGroupingRule

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

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

* `CSSLayerBlockRule.name` 読取専用 
    + 関連するカスケードレイヤーの名前を含む文字列です。
インスタンスメソッド
----------

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

例
-

### HTML


```html
<p>I am displayed in <code>color: rebeccapurple</code>.</p>
```

### CSS


```css
@layer special {
  p {
    color: rebeccapurple;
  }
}
```

### JavaScript


```js
const item = document.getElementsByTagName("p")[0];
const rules = document.styleSheets[1].cssRules;
// スタイルシート #1 はこの埋め込み例に関連するスタイルシートであり、
// スタイルシート #0 は MDN ページ全体に関連するスタイルシート。

const layer = rules[0]; // CSSLayerBlockRule

item.textContent = `この CSSLayerBlockRule は "${layer.name}" レイヤーのものです。`;
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # csslayerblockrule |

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

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

関連情報
----

* `@layer`
* `CSSLayerStatementRule`
* CSS カスケードレイヤーの学習
ReadableStreamDefaultController
===============================

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

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

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

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

`ReadableStreamDefaultController.desiredSize` 読取専用 

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

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

`ReadableStreamDefaultController.close()`

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

`ReadableStreamDefaultController.enqueue()`

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

`ReadableStreamDefaultController.error()`

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

例
-

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

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

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


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

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

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

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

仕様書
---

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

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

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

関連情報
----

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

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

EventTarget

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

`SpeechSynthesisUtterance()`

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

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

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

`SpeechSynthesisUtterance.lang`

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

`SpeechSynthesisUtterance.pitch`

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

`SpeechSynthesisUtterance.rate`

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

`SpeechSynthesisUtterance.text`

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

`SpeechSynthesisUtterance.voice`

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

`SpeechSynthesisUtterance.volume`

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

イベント
----

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

`boundary`

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


`end`

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


`error`

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


`mark`

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


`pause`

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


`resume`

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


`start`

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


例
-

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

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


```js
const synth = window.speechSynthesis;

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

let voices;

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

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

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

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

仕様書
---

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

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

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

関連項目
----

* ウェブ音声 API
structuredClone()
=================

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

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

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

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

構文
--


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

### 引数

`value`

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


`transferables` 省略可

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

### 返値

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

### 例外

`DataCloneError` `DOMException`

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

解説
--

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


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

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

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

### 転送される値

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


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


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


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

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


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


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

仕様書
---

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

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

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

関連情報
----

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

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

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

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

`DOMStringList.length` 読取専用 

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

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

`DOMStringList.item()`

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

`DOMStringList.contains()`

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

仕様書
---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

仕様書
---

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

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

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

関連情報
----

* 位置情報の使用
CSSKeyframeRule
===============

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

CSSRule

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

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

`CSSKeyframeRule.keyText`

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

`CSSKeyframeRule.style` 読取専用 

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

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

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

例
-

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


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

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



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

仕様書
---

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

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

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

関連情報
----

* `@keyframes`
* `CSSKeyFramesRule`
TransitionEvent
===============

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

Event

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

`TransitionEvent()`

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

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

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

`TransitionEvent.propertyName` 読取専用 

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

`TransitionEvent.elapsedTime` 読取専用 

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

`TransitionEvent.pseudoElement` 読取専用 

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

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

`transitioncancel`

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

`transitionend`

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

`transitionrun`

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

`transitionstart`

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

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

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

仕様書
---

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

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

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

関連情報
----

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

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

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

EventTarget

IDBRequest

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

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

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

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

イベント
----

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

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

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

`blocked`

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

`upgradeneeded`

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

例
-

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


```js
let db;

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

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

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

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

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

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

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

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

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

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

仕様書
---

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

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

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

関連情報
----

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

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

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

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

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

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

Event

ExtendableEvent

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

`BackgroundFetchEvent()` 
Experimental

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

プロパティ
-----

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

`BackgroundFetchEvent.registration` 読取専用  
Experimental

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

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

なし。

メソッド
----

なし。

例
-

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


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

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

仕様書
---

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

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

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