recursal/MDN huggingface dataset:
WebGLRenderbuffer
=================

**WebGLRenderbuffer** インターフェイスは WebGL API の一部で、画像を含むことができるバッファー、またはレンダリング操作の入力元または出力先になることができるバッファーを表します。

WebGLObject

WebGLRenderbuffer解説
--

`WebGLRenderbuffer` オブジェクトはそれ自身のメソッドやプロパティを定義しておらず、その内容には直接アクセスできません。 `WebGLRenderbuffer` オブジェクトを扱う場合は、 `WebGLRenderingContext` の以下のメソッドが役に立ちます。

* `WebGLRenderingContext.bindRenderbuffer()` (en-US)
* `WebGLRenderingContext.createRenderbuffer()`
* `WebGLRenderingContext.deleteRenderbuffer()` (en-US)
* `WebGLRenderingContext.isRenderbuffer()` (en-US)
例
-

### レンダリングバッファーの作成


```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const buffer = gl.createRenderbuffer();
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.7 |

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

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

関連情報
----

* `WebGLRenderingContext.bindRenderbuffer()` (en-US)
* `WebGLRenderingContext.createRenderbuffer()`
* `WebGLRenderingContext.deleteRenderbuffer()` (en-US)
* `WebGLRenderingContext.isRenderbuffer()` (en-US)
* 他のバッファー: `WebGLBuffer`, `WebGLFramebuffer`
FetchEvent
==========

これは `fetch` イベント用のイベント型で、サービスワーカーのグローバルスコープに配信されます。これには、リクエストや、受け手がどうレスポンスを扱うのかといった、フェッチに関する情報が含まれています。これは、このフェッチへのレスポンスを提供する `event.respondWith()` メソッドを提供します。

Event

ExtendableEvent

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

`FetchEvent()`

新しい `FetchEvent` オブジェクトを作成します。 このコンストラクターは通常は使用しません。 ブラウザーはこのオブジェクト自体を作成して `fetch` イベントのコールバックに提供します。

プロパティ
-----

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

`FetchEvent.clientId` 読取専用 

フェッチを開始した同一オリジンの`クライアント`の `id` です。

`FetchEvent.preloadResponse` 読取専用 

`Response` のための `Promise`、またはこのフェッチがナビゲーションでない場合や、ナビゲーションの先読みが有効になっていない場合は `undefined` です。

`FetchEvent.replacesClientId` 読取専用 

ページのナビゲーション中に置き換えられる`クライアント`の `id` です。

`FetchEvent.resultingClientId` 読取専用 

ページのナビゲーション中に前のクライアントを置き換える`クライアント`の `id` です。

`FetchEvent.request` 読取専用 

ブラウザーが行おうとしている `Request` です。

メソッド
----

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

`FetchEvent.respondWith()`

ブラウザー既定のフェッチ処理を抑止し、自身のレスポンス（のプロミス）を提供します。

`ExtendableEvent.waitUntil()`

イベントの存続期間を延長します。 ストリーミングやキャッシュなど、レスポンスの返却を超えて延長するタスクをブラウザーに通知するために使用します。

例
-

この fetch イベントは、 GET 以外のリクエストに対してブラウザー既定のものを使用します。 GET リクエストに対してはキャッシュから一致するものを返そうとし、ない場合はネットワークから読み取ります。キャッシュに一致するものが見つかった場合、次回ためにキャッシュを非同期に更新します。


```js
self.addEventListener("fetch", (event) => {
  // GET 以外のリクエストでは、ブラウザーに既定のことをさせる
  if (event.request.method !== "GET") return;

  // 既定のことを行わず、自分自身のリクエストを扱う
  event.respondWith(
    (async () => {
      // キャッシュからレスポンスの取得を試みる
      const cache = await caches.open("dynamic-v1");
      const cachedResponse = await cache.match(event.request);

      if (cachedResponse) {
        // キャッシュに一致するものが見つかった場合は返却し、
        // バックグラウンドでキャッシュ内の項目を更新
        event.waitUntil(cache.add(event.request));
        return cachedResponse;
      }

      // キャッシュに一致するものがなければ、ネットワークのものを使用
      return fetch(event.request);
    })(),
  );
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # fetchevent-interface |

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

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

関連情報
----

* `Promise`
* フェッチ API
DocumentFragment
================

**`DocumentFragment`** インターフェイスは、親ノードを持たない最小限の文書オブジェクト（文書フラグメント）を表します。

これは `Document` の軽量版として使用され、標準の文書のようにノードで構成される文書構造の一区間を格納します。重要な違いは、文書フラグメントがアクティブな文書ツリー構造の一部ではないことです。フラグメントに対して変更を行っても、文書には影響しません。

EventTarget

Node

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

`DocumentFragment()`

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

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

*このインターフェイスには固有のプロパティはありませんが、その親である `Node` から継承したプロパティがあります。*

`DocumentFragment.childElementCount` 読取専用 

この `DocumentFragment` が持つ子`要素`の数を表します。

`DocumentFragment.children` 読取専用 

この `DocumentFragment` オブジェクトの子であるすべての `Element` 型のオブジェクトを含む、生きた `HTMLCollection` を返します。

`DocumentFragment.firstElementChild` 読取専用 

この `DocumentFragment` オブジェクトの最初の子である `Element` を返します。なければ `null` を返します。

`DocumentFragment.lastElementChild` 読取専用 

この `DocumentFragment` オブジェクトの最後の子である `Element` を返します。なければ `null` を返します。

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

*このインターフェイスには、その親である `Node` から継承したメソッドがあります。*

`DocumentFragment.append()`

一連の `Node` オブジェクトまたは文字列を、この文書フラグメントの最後の子の後に追加します。

`DocumentFragment.prepend()`

一連の `Node` オブジェクトまたは文字列を、この文書フラグメントの最初の子の前に追加します。

`DocumentFragment.querySelector()`

この `DocumentFragment` の中で、文書の順序で見た場合に、指定されたセレクターに一致する最初の `Element` ノードを返します。

`DocumentFragment.querySelectorAll()`

この `DocumentFragment` の中で、指定されたセレクターに一致するすべての `Element` ノードの `NodeList` を返します。

`DocumentFragment.replaceChildren()`

`DocumentFragment` の既存の子を、指定された一連の新しい子で置き換えます。

`DocumentFragment.getElementById()`

この `DocumentFragment` の中で、文書の順序で見た場合に、指定された ID に一致する最初の `Element` ノードを返します。機能的には `Document.getElementById()` と同じです。

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

`DocumentFragment` の一般的な使用方法は、フラグメントを作成し、その中で DOM サブツリーを組み立て、`Node` インターフェイスのメソッド、例えば `appendChild()`、`append()`、`insertBefore()` などを用いて、フラグメントを DOM に追加または挿入することです。 これにより、フラグメントのノードが DOM 内へ移動し、空の `DocumentFragment` が残ります。

このインターフェイスは、ウェブコンポーネントでも活躍します。`<template>` 要素は `DocumentFragment` を `HTMLTemplateElement.content` プロパティに保持しています。

空の `DocumentFragment` は `document.createDocumentFragment()` メソッドまたはコンストラクターで作成することができます。

性能
--

`DocumentFragment` の性能が高いということは、よく誇張されています。エンジンによっては `DocumentFragment` を使用すると、実際には、ループで文書に追加していくするよりも遅くなる場合があることがこのベンチマークで示されています。しかし、この例の違いは非常に小さいので、性能よりも読みやすさを重視して最適化した方がいいでしょう。

例
-

### HTML


```html
<ul></ul>
```

### JavaScript


```js
const ul = document.querySelector("ul");
const fruits = ["Apple", "Orange", "Banana", "Melon"];

const fragment = new DocumentFragment();

for (const fruit of fruits) {
  const li = document.createElement("li");
  li.textContent = fruit;
  fragment.append(li);
}

ul.append(fragment);
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-documentfragment |

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

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

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

Event

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

`AnimationEvent()`

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

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

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

`AnimationEvent.animationName` 読取専用 

文字列で、このアニメーションを生成した `animation-name` の値が入ります。

`AnimationEvent.elapsedTime` 読取専用 

`float` 値で、アニメーションが実行された時間の長さを秒単位で表し、イベントが発生したときは、アニメーションが停止していた時間は除外されます。 `animationstart` イベントでは、 `elapsedTime` は、ふつう `0.0` となりますが、 `animation-delay` が負の値であった場合は例外で、この場合はイベントは `elapsedTime` に `(-1 * delay)` が入った状態でイベントが発生します。

`AnimationEvent.pseudoElement` 読取専用 

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

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

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

仕様書
---

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

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

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

関連情報
----

* CSS アニメーションの使用
* アニメーションに関する CSS プロパティとアットルール: `animation`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-play-state`, `animation-timing-function`, `@keyframes`.
ScriptProcessorNode
===================

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

`ScriptProcessorNode` インターフェイスは、JavaScript を使って音声を生成、処理、または分析することを可能にします。

EventTarget

AudioNode

ScriptProcessorNode

**メモ:** この機能は AudioWorklets と `AudioWorkletNode` インターフェイスに置き換えられました。

`ScriptProcessorNode` インターフェイスは `AudioNode` 音声処理モジュールであり、入力音声データを含む 2 つのバッファーと処理後の出力音声データを含む 1 つのバッファーにリンクされています。入力バッファーに新しいデータが入るたびに `AudioProcessingEvent` インターフェイスを実装したイベントがオブジェクトに送られ、出力バッファーがデータでいっぱいになるとイベントハンドラーは終了します。

![ScriptProcessorNode は、入力をバッファーに格納し、 audioprocess イベントを送信します。 EventHandler は入力バッファーを受け取り、出力バッファーを満たし、 ScriptProcessorNode によって出力に送信されます。](/ja/docs/Web/API/ScriptProcessorNode/webaudioscriptprocessingnode.png)

入力バッファーと出力バッファーのサイズは `BaseAudioContext.createScriptProcessor` メソッドが呼び出されたときの作成時に定義します（どちらも `BaseAudioContext.createScriptProcessor` の `bufferSize` 引数で定義されます）。バッファサイズは `256` から `16384` までの 2 の累乗、つまり `256`、`512`、`1024`、`2048`、`4096`、`8192`、`16384` のいずれかでなければなりません。小さい数値のほうが遅延を低減させますが、音声の途切れやグリッチを避けるために大きな値が必要な場合もあります。

もしバッファーサイズが定義されていない場合、これが推奨ですが、ブラウザーは経験則的に適切と思われるものを選びます。

|  |  |
| --- | --- |
| 入力数 | `1` |
| 出力数 | `1` |
| チャンネルカウントモード | `"max"` |
| チャンネルカウント | `2` (既定のカウントモードで使用しない) |
| チャンネルの解釈 | `"speakers"` |

プロパティ
-----

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

`ScriptProcessorNode.bufferSize` 読取専用 

入力と出力の両方のバッファーサイズを表す整数を返します。この値は、 `256` から `16384` までの範囲の 2 のべき乗の値です。

メソッド
----

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

イベント
----

これらのイベントは `addEventListener()` を使って、あるいはこのインターフェイスの `onイベント名` プロパティにイベントリスナーを割り当てることで待ち受けます。

`audioprocess`

`ScriptProcessorNode` の入力バッファーが処理可能な状態になったときに発行されます。
 また、`onaudioprocess` イベントハンドラープロパティでも利用可能です。


例
-

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

仕様書
---

2014 年 8 月 29 日のウェブオーディオ API 仕様書の公開以降、この機能は非推奨となりました。標準化される予定はなくなりました。

AudioWorklets と `AudioWorkletNode` インターフェイスに置き換えられました。

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

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

関連情報
----

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

`onnotificationclick` ハンドラーに渡される引数である `NotificationEvent` インターフェイスは、 `ServiceWorker` の `ServiceWorkerGlobalScope` で配信される通知クリックイベントを表します。

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

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

`NotificationEvent()`

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

プロパティ
-----

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

`NotificationEvent.notification` 読取専用 

イベントを発生させるためにクリックされた通知を表す `Notification` オブジェクトを返します。

`NotificationEvent.action` 読取専用 

ユーザーがクリックした通知ボタンの文字列 ID を返します。ユーザーがアクションボタン以外の場所で通知をクリックした場合、または通知にボタンがない場合、この値は空の文字列を返します。

メソッド
----

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

`ExtendableEvent.waitUntil()`

イベントの存続期間を延長します。作業が進行中であることをブラウザーに伝えます。

例
-


```js
self.addEventListener("notificationclick", function (event) {
  console.log("On notification click: ", event.notification.tag);
  event.notification.close();

  // これは、現在のページが既に開いているかどうかを確認し、
  // そうならばフォーカスします
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then(function (clientList) {
        for (var i = 0; i < clientList.length; i++) {
          var client = clientList[i];
          if (client.url == "/" && "focus" in client) return client.focus();
        }
        if (clients.openWindow) return clients.openWindow("/");
      }),
  );
});
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # notificationevent |

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

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

**`ExtendableMessageEvent`** はサービスワーカー API のインターフェイスで、（別のコンテキストからのメッセージを `ServiceWorkerGlobalScope` で受信した時に）サービスワーカーで発生する `message` イベントのイベントオブジェクトを表し、このようなイベントの存続期間を延長します。

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

Event

ExtendableEvent

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

`ExtendableMessageEvent()`

新しい `ExtendableMessageEvent` オブジェクトのインスタンスを作成します。

プロパティ
-----

*親の `ExtendableEvent` からプロパティを継承しています。*

`ExtendableMessageEvent.data` 読取専用 

イベントのデータを返します。 任意のデータ型が使用できます。

`ExtendableMessageEvent.origin` 読取専用 

メッセージを送信した `Client` のオリジンを返します。

`ExtendableMessageEvent.lastEventId` 読取専用 

サーバー送信イベントにおける、イベントソースの最後のイベント ID を表します。 これは空文字列です。

`ExtendableMessageEvent.source` 読取専用 

メッセージを送信した `Client` オブジェクトへの参照を返します。

`ExtendableMessageEvent.ports` 読取専用 

関連するメッセージチャンネルのポートを表す `MessagePort` オブジェクトを含む配列を返します。

メソッド
----

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

例
-

以下の例では、ページが `ServiceWorkerRegistration.active` を介して `ServiceWorker` オブジェクトへのハンドルを取得し、その `postMessage()` 関数を呼び出します。


```js
// 制御されているページ内
if (navigator.serviceWorker) {
  navigator.serviceWorker.register("service-worker.js");

  navigator.serviceWorker.addEventListener("message", (event) => {
    // event は MessageEvent オブジェクトです
    console.log(`The service worker sent me a message: ${event.data}`);
  });

  navigator.serviceWorker.ready.then((registration) => {
    registration.active.postMessage("Hi service worker");
  });
}
```


サービスワーカーは次のようにして、 `message` イベントを待ち受けしてメッセージを受信できます。


```js
// サービスワーカー内
addEventListener("message", (event) => {
  // event は ExtendableMessageEvent オブジェクトです
  console.log(`The client sent me a message: ${event.data}`);

  event.source.postMessage("Hi client");
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # extendablemessageevent-interface |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例（英語）
* ServiceWorker の準備はできていますか？（英語）
* チャンネルメッセージング
BackgroundFetchManager
======================

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

**`BackgroundFetchManager`** はバックグラウンドフェッチ API のインターフェイスで、バックグラウンドフェッチ ID をキー、`BackgroundFetchRegistration` オブジェクトを値とする対応表です。

プロパティ
-----

なし。

メソッド
----

`fetch()` 
Experimental

引数に与えられた配列( URL や `Request` オブジェクトで構成される) に対して、`BackgroundFetchRegistration` オブジェクトで解決される `Promise` を返します。

`get()` 
Experimental

引数に与えられた `id` に紐づく `BackgroundFetchRegistration` で解決される `Promise` を返します。 `id` が見つからない場合は `undefined` を返します。

`getIds()` 
Experimental

登録済みのすべてのバックグラウンドフェッチの ID を返します。

例
-

下記の例は、 `ServiceWorkerRegistration` オブジェクトから `BackgroundFetchManager` のインスタンスを取得し、バックグラウンドでオーディオファイルをダウンロードするために `fetch()` メソッドを呼び出しています。


```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,
    },
  );
});
```

仕様書
---

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

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

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

`VTTRegion` インターフェイスは WebVTT（メディアプレゼンテーションに関するテキストトラック）を処理するための API の一部であり、 `VTTCue` をレンダリングするための動画の一部を記述します。

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

`VTTRegion()`

新しく作成された `VTTRegion` オブジェクトを返します。

プロパティ
-----

`VTTRegion.id`

領域を識別する文字列。

`VTTRegion.width`

領域の幅を動画のパーセント値として表す `double` 値。

`VTTRegion.lines`

領域の高さを行数で表す `double` 値。

`VTTRegion.regionAnchorX`

領域アンカーの X オフセットを領域のパーセント値として表す `double` 値。

`VTTRegion.regionAnchorY`

領域アンカーの Y オフセットを領域のパーセント値として表す `double` 値。

`VTTRegion.viewportAnchorX`

ビューポートアンカーの X オフセットを動画のパーセント値として表す `double` 値。

`VTTRegion.viewportAnchorY`

ビューポートアンカーの Y オフセットを動画のパーセント値として表す `double` 値。

`VTTRegion.scroll`

新しいキューを追加すると既存のキューがどのように移動するかを表す列挙型。

例
-


```js
const region = new VTTRegion();
region.width = 50; // 動画幅の 50% を使用し、
region.lines = 4; // 高さは 4 行を使用します。
region.viewportAnchorX = 25; // 領域が左から 25% で始まるようにします。
const cue = new VTTCue(2, 3, "かっこいい文章を表示する");
cue.region = region; // このキューはこの領域内にのみ描かれます。
```

仕様
--

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

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

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

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

**`StylePropertyMapReadOnly`** は CSS 型付きオブジェクトモデル API のインターフェイスで、 `CSSStyleDeclaration` の代替となる読み取り専用の CSS 宣言ブロックの表現を提供します。このインターフェイスのインスタンスを取得するには、 `Element.computedStyleMap()` を使用してください。

プロパティ
-----

`StylePropertyMapReadOnly.size`

`StylePropertyMapReadOnly` オブジェクトの大きさを、符号なし長整数値で返します。

メソッド
----

`StylePropertyMapReadOnly.entries()`

このオブジェクト自身の列挙可能なプロパティ `[key, value]` の組を、 `for...in` ループが提供するものと同じ順序で配列として返します（違いは、 for-in ループがプロトタイプチェーン内のプロパティも列挙することです）。

`StylePropertyMapReadOnly.forEach()`

指定された関数を `StylePropertyMapReadOnly` のそれぞれの要素について 1 回ずつ実行します。

`StylePropertyMapReadOnly.get()`

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

`StylePropertyMapReadOnly.getAll()`

指定されたプロパティの値を含む `CSSStyleValue` オブジェクトの配列を返します。

`StylePropertyMapReadOnly.has()`

指定されたプロパティが `StylePropertyMapReadOnly` オブジェクトにあるかどうかを示します。

`StylePropertyMapReadOnly.keys()`

`StylePropertyMapReadOnly` 内のそれぞれの項目のキーを含む新しい*配列イテレーター*を返します。

`StylePropertyMapReadOnly.values()`

`StylePropertyMapReadOnly` 内のそれぞれの項目の値を含む新しい*配列イテレーター*を返します。

例
-

観察するための要素を用意します。


```html
<p>
  これは、いくつかのテキストを含む段落です。 CSS
  を追加することもできますし、しないこともできます。スタイルマップには、既定のものと継承されたすべての
  CSS プロパティ値が含まれます。
</p>
<dl id="output"></dl>
```


出力をよりよくするに、カスタムプロパティで CSS を少々追加します。


```css
p {
  --someVariable: 1.6em;
  --someOtherVariable: translateX(33vw);
  --anotherVariable: 42;
  line-height: var(--someVariable);
}
```


JavaScript を追加して段落を取得し、 `Element.computedStyleMap()` を使って、すべての既定の CSS プロパティ値の定義リストを返します。


```js
// 要素を取得
const myElement = document.querySelector("p");

// 入力する <dl> を取得
const stylesList = document.querySelector("#output");

// computedStyleMap() ですべての計算済みスタイルを取得
const stylePropertyMap = myElement.computedStyleMap();

// すべてのプロパティと値のマップを反復処理して、それぞれ <dt> と <dd> を追加
for (const [prop, val] of stylePropertyMap) {
  // プロパティ
  const cssProperty = document.createElement("dt");
  cssProperty.innerText = prop;
  stylesList.appendChild(cssProperty);

  // 値
  const cssValue = document.createElement("dd");
  cssValue.innerText = val;
  stylesList.appendChild(cssValue);
}
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # the-stylepropertymap |

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

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

**`AudioTrack`** インターフェイスは、 HTML のメディア要素（`<audio>` または `<video>`）のいずれかにある単一の音声トラックを表します。

`AudioTrack` オブジェクトにアクセスする最も一般的な用途は、トラックをミュートおよびミュート解除するためにその `enabled` プロパティを切り替えることです。

プロパティ
-----

`enabled`

音声トラックの音を有効にするかどうかを制御する論理値です。この値を `false` に設定すると、トラックの音声がミュートになります。

`id` 読取専用 

メディア内のトラックを一意に識別する文字列です。 この ID は、`AudioTrackList.getTrackById()` を呼び出すことによって、音声トラックリスト内の特定のトラックを見つけるために使用できます。 メディアがメディアフラグメント仕様書（その日本語訳）従ってメディアフラグメントによるシークをサポートしている場合は、ID を URL のフラグメント部分として使用することもできます。

`kind` 読取専用 

トラックが属するカテゴリーを指定する文字列です。 例えば、メイン音声トラックは `kind` に `"main"` を持ちます。

`label` 読取専用 

トラックに人間が読めるラベルを提供する文字列です。 例えば、映画の音声解説トラックには、`"John Q. Public 監督と俳優 John Doe と Jane Eod による解説"` という `label` が付いています。 ラベルが指定されていない場合、この文字列は空です。

`language` 読取専用 

音声トラックの主要言語を指定する文字列で、または不明の場合は空の文字列。 言語は、`"en-US"` や `"pt-BR"` などの BCP 47（RFC 5646）言語コードで指定されています。

`sourceBuffer` 読取専用 

トラックを作成した `SourceBuffer`。 トラックが `SourceBuffer` によって作成されなかった場合、または `SourceBuffer` がその親メディアソースの `MediaSource.sourceBuffers` 属性から取り除かれた場合は、null を返します。

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

特定のメディア要素の `AudioTrack` を取得するには、その要素の `audioTracks` プロパティを使用します。 このプロパティは、メディアに含まれる個々のトラックを取得できる `AudioTrackList` オブジェクトを返します。


```js
var el = document.querySelector("video");
var tracks = el.audioTracks;
```


その後、配列の構文または `forEach()` などの関数を使用して、メディアの個々のトラックにアクセスできます。

この最初の例は、メディア上の最初の音声トラックを取得します。


```js
var firstTrack = tracks[0];
```


次の例では、メディアのすべての音声トラックをスキャンして、（変数 `userLanguage` から取得した）ユーザーの優先言語のものを有効にし、それ以外を無効にします。


```js
tracks.forEach(function (track) {
  if (track.language === userLanguage) {
    track.enabled = true;
  } else {
    track.enabled = false;
  }
});
```


`language` は標準（RFC 5646）形式です。 例えば、アメリカ英語の場合、これは `"en-US"` になります。

例
-

指定されたメディア要素のトラックの種類とラベルの配列を、種類でフィルタリングして取得する方法を示す簡単な例については、 `AudioTrack.label` を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # audiotrack |

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

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

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 の `USBIsochronousInTransferResult` インターフェイスは、`USBDevice` インターフェイスの `isochronousTransferIn()` メソッドを呼び出した結果を提供します。これは、USB デバイスから USB ホストへのデータ転送の要求の結果を表します。

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

`USBIsochronousInTransferResult()` 
Experimental

指定の `packets` および `data` フィールドを持つ新しい `USBIsochronousInTransferResult` オブジェクトを生成します。

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

`USBIsochronousInTransferResult.data` 読取専用  
Experimental

デバイスから受信したデータを格納した `DataView` オブジェクトを返します。これはすべてのパケットのデータを合わせたものです。個々のパケットで受信したこのバッファーの部分は、配列 `packets` 内の個別の `DataView` オブジェクトを参照してください。

`USBIsochronousInTransferResult.packets` 読取専用  
Experimental

個々のデバイスからのパケットを受信する要求の結果が格納された `USBIsochronousInTransferPacket` オブジェクトの配列を返します。

仕様書
---

| Specification |
| --- |
| WebUSB API # usbisochronousintransferresult |

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

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

**`PictureInPictureEvent`** インターフェイスはピクチャインピクチャに関するイベント、例えば `enterpictureinpicture`、`leavepictureinpicture`、`resize` を表します。

Event

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

`PictureInPictureEvent()`

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

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

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

`PictureInPictureEvent.pictureInPictureWindow` (en-US)

このイベントが関連する `PictureInPictureWindow` を返します。

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

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

仕様書
---

| Specification |
| --- |
| Picture-in-Picture # event-types |

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

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

関連情報
----

* 基底インターフェイスである `Event`
CryptoKeyPair
=============

`Web Crypto API` の辞書 **`CryptoKeyPair`** は、非対称暗号アルゴリズム (公開鍵暗号アルゴリズムとしても知られる) の鍵ペアを表します。

`CryptoKeyPair` のオブジェクトは、以下の非対称暗号アルゴリズムのいずれかを選択して `SubtleCrypto.generateKey()` を用いることで得られます。

* RSASSA-PKCS1-v1\_5
* RSA-PSS
* RSA-OAEP
* ECDSA
* ECDH

このオブジェクトは秘密鍵を保持する `privateKey` および公開鍵を保持する `publicKey` の2個のプロパティを持ちます。これらはどちらも `CryptoKey` のオブジェクトです。

プロパティ
-----

`CryptoKeyPair.privateKey`

秘密鍵を表す `CryptoKey` のオブジェクトです。暗号化と復号のアルゴリズムでは、この鍵は復号に用います。署名と署名検証のアルゴリズムでは、この鍵は署名に用います。

`CryptoKeyPair.publicKey`

公開鍵を表す `CryptoKey` のオブジェクトです。暗号化と復号のアルゴリズムでは、この鍵は暗号化に用います。署名と署名検証のアルゴリズムでは、この鍵は署名検証に用います。

例
-

`SubtleCrypto` のメソッドの例では、よく `CryptoKeyPair` が使われます。例えば以下があります。

* `SubtleCrypto.generateKey()`
* `SubtleCrypto.deriveKey()`
* `SubtleCrypto.importKey()`
* `SubtleCrypto.exportKey()`
* `SubtleCrypto.wrapKey()`
* `SubtleCrypto.unwrapKey()`
* `SubtleCrypto.encrypt()`
* `SubtleCrypto.decrypt()`
* `SubtleCrypto.sign()`
* `SubtleCrypto.verify()`
仕様書
---

| Specification |
| --- |
| Web Cryptography API # keypair |

関連情報
----

* `SubtleCrypto.generateKey`。
* `SubtleCrypto.sign` および `SubtleCrypto.verify`。
* `SubtleCrypto.encrypt` および `SubtleCrypto.decrypt`。
CanvasGradient
==============

**`CanvasGradient`** インターフェイスは、グラデーションを記述する不透明オブジェクトを表します。 `CanvasRenderingContext2D.createLinearGradient()` (en-US) または `CanvasRenderingContext2D.createRadialGradient()` (en-US) メソッドから返されます。

`fillStyle` または `strokeStyle` として使用することができます。

プロパティ
-----

*不透明オブジェクトとして、公開されているプロパティはありません。*

メソッド
----

*継承されたメソッドはありません。*

`CanvasGradient.addColorStop()` (en-US)

`offset` および `color` で定義される、グラデーションの新しい停止点を追加します。オフセットが `0` と `1` の間でなければ `INDEX_SIZE_ERR` が発生し、色が CSS の `<color>` として解釈できない場合は `SYNTAX_ERR` が発生します。

仕様書
---

| Specification |
| --- |
| HTML Standard # canvasgradient |

ブラウザーの対応
--------

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

関連情報
----

* `CanvasRenderingContext2D` のクリエイターメソッド
* `<canvas>` 要素と関連する `HTMLCanvasElement` インターフェイス