recursal/MDN huggingface dataset:
ExtendableEvent
===============

**`ExtendableEvent`** インターフェイスは、サービスワーカーのライフサイクルの一部として、グローバルスコープに配信された `install` および `activate` イベントの存続期間を延長します。これにより、データベーススキーマがアップグレードされて古いキャッシュエントリーが削除されるまで、機能イベント（`FetchEvent` など）が送出されなくなります。

`waitUntil()` が `ExtendableEvent` ハンドラーの外で呼び出された場合、ブラウザーは `InvalidStateError` 例外を発生させます。 また、複数の呼び出しが積み重なり、その結果のプロミスが存続期間延長プロミスのリストに追加されることにも注意してください。

**メモ:** 上記の段落で説明した振る舞いは、Firefox 43 で修正されました（Firefox バグ 1180274 を参照）。

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

Event

ExtendableEvent

**メモ:** このインターフェイスは、グローバルスコープが `ServiceWorkerGlobalScope` の場合にのみ使用できます。 `Window` または別の種類のワーカーのスコープの場合は使用できません。

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

`ExtendableEvent()`

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

プロパティ
-----

*特定のプロパティを実装していませんが、親である `Event` からプロパティを継承しています。*

メソッド
----

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

`ExtendableEvent.waitUntil()`

イベントの存続期間を延長します。 これは、インストール中 (`installing`) のワーカーの `install` (en-US) イベントハンドラー と、アクティブ (`active`) ワーカーの `activate` (en-US) イベントハンドラー で呼び出すためのものです。

例
-

このコードスニペットは、サービスワーカーのプリフェッチの例からのものです（プリフェッチの例をライブで見る）。 コードは `ServiceWorkerGlobalScope.install_event` で `ExtendableEvent.waitUntil()` を呼び出し、インストール中（`ServiceWorkerRegistration.installing`）のワーカーがインストール済み（installed）として扱われるのを、渡された Promise が正常に解決されるまで遅らせます。 Promise は、すべてのリソースがフェッチされてキャッシュされたとき、または例外が発生したときに解決します。

コードスニペットは、サービスワーカーが使用するキャッシュのバージョン管理のベストプラクティスも示しています。 この例ではキャッシュは 1 つしかありませんが、同じアプローチを複数のキャッシュに使用できます。 キャッシュの一括指定識別子を特定のバージョン管理されたキャッシュ名にマップします。

**メモ:** Chrome では、ログ文は、chrome://serviceworker-internals を介してアクセスされる関連サービスワーカーの "Inspect" インターフェイスを介して表示されます。


```js
const CACHE\_VERSION = 1;
const CURRENT\_CACHES = {
  prefetch: `prefetch-cache-v${CACHE\_VERSION}`,
};

self.addEventListener("install", (event) => {
  const urlsToPrefetch = [
    "./static/pre\_fetched.txt",
    "./static/pre\_fetched.html",
    "https://www.chromium.org/\_/rsrc/1302286216006/config/customLogo.gif",
  ];

  console.log(
    "Handling install event. Resources to pre-fetch:",
    urlsToPrefetch,
  );

  event.waitUntil(
    caches
      .open(CURRENT\_CACHES["prefetch"])
      .then((cache) => {
        return cache
          .addAll(
            urlsToPrefetch.map((urlToPrefetch) => {
              return new Request(urlToPrefetch, { mode: "no-cors" });
            }),
          )
          .then(() => {
            console.log("すべてのリソースをフェッチし、キャッシュしました。");
          });
      })
      .catch((error) => {
        console.error("プリフェッチに失敗:", error);
      }),
  );
});
```


**メモ:** リソースをフェッチするとき、リソースが CORS をサポートしていないサーバーから提供される可能性がある場合は、`{mode: 'no-cors'}` を使用することが非常に重要です。 この例では、 www.chromium.org は CORS をサポートしていません。

仕様書
---

| Specification |
| --- |
| Service Workers # extendableevent-interface |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例
* ServiceWorker の準備はできていますか？（英語）
* `Promise`
* ウェブワーカーの使用
MediaList
=========

**`MediaList`** インターフェイスはスタイルシートのメディアクエリーを表します。例えば、 `<link>` 要素の `media` 属性で設定されるものです。

**メモ:** `MediaList` は生きたリストです。以下のプロパティやメソッドを使用して更新すると、直ちに文書の動作が更新されます。

プロパティ
-----

`MediaList.mediaText`

文字列化プロパティであり、 `MediaList` をテキストとして表す文字列を返し、また新しい `MediaList` を設定することができます。

`MediaList.length` (en-US) 読取専用 

この `MediaList` にあるメディアクエリーの数を返します。

メソッド
----

`MediaList.appendMedium()` (en-US)

`MediaList` にメディアクエリーを追加します。

`MediaList.deleteMedium()` (en-US)

`MediaList` からメディアクエリーを削除します。

`MediaList.item()` (en-US)

メディアクエリーをテキストとして返すゲッターです。メディアクエリーの `MediaList` 内での位置を指定します。

例
-

以下は、現在の文書に適用された最初のスタイルシートの `MediaList` のテキスト表現をコンソールにログ出力するものです。


```css
const stylesheets = document.styleSheets;
let stylesheet = stylesheets[0];
console.log(stylesheet.media.mediaText);
```

仕様書
---

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

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

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

HTML の `<meter>` 要素は **`HTMLMeterElement`** インターフェイスを公開します。これは（継承によって利用できる `HTMLElement` オブジェクトのインターフェイス以外に）`<meter>` 要素のレイアウトや表現を操作するためのプロパティやメソッドを提供します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLMeterElement.high`

`double` で、`high` 属性を反映し、上の境界値を表します。

`HTMLMeterElement.low`

`double` で、`low` 属性を反映し、下の境界値を表します。

`HTMLMeterElement.max`

`double` で、`max` 属性を反映し、最大値を表します。

`HTMLMeterElement.min`

`double` で、`min` 属性を反映し、最小値を表します。

`HTMLMeterElement.optimum`

`double` で、`optimum` 属性を反映し、最適な値を表します。

`HTMLMeterElement.value`

`double` で、`value` 属性を反映し、現在の値を表します。

`HTMLMeterElement.labels` 読取専用 

`NodeList` で、この要素に関連付けられた `<label>` 要素群を表します。

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

*このインターフェイスは固有のメソッドを実装していませんが、親である `HTMLElement` から継承したメソッドがあります。*

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlmeterelement |

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

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

関連情報
----

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

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

Newly availableSince September 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
AnimationPlaybackEvent はウェブアニメーション API のインターフェイスで、アニメーションイベントを表します。

アニメーションの再生時、これらはアニメーションイベントを通して `playState` の変化を報告します。

Event

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

`AnimationPlaybackEvent()`

新しい `AnimationPlaybackEvent` オブジェクトインスタンスを構築します。

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

`AnimationPlaybackEvent.currentTime` 読取専用 

イベントを生成したアニメーションの現在時刻。

`AnimationPlaybackEvent.timelineTime` 読取専用 

イベントを生成したアニメーションのタイムラインの時刻値。

仕様書
---

| Specification |
| --- |
| Web Animations # the-animationplaybackevent-interface |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation.playState`
HTMLBRElement
=============

**`HTMLBRElement`** インターフェイスはは HTML 改行要素 (`<br>`) を表現します。`HTMLElement` から継承しています。

EventTarget

Node

Element

HTMLElement

HTMLBRElement属性
--

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

`HTMLBRElement.clear` 
非推奨

文字列で、浮動オブジェクトを回り込むテキストの流れを示します。

メソッド
----

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlbrelement |

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

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

関連情報
----

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

**`RTCDataChannelEvent`** インターフェイスは、特定の `RTCPeerConnection` に関連するイベントを表します。

Event

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

`RTCDataChannelEvent()` (en-US)

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

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

*`Event` のプロパティを継承しています。。*

`channel` (en-US) 読取専用 

このイベントに関連付けられた `RTCDataChannel` を返します。

例
-

この例では、 `datachannel` イベントハンドラーを設定して、データチャンネルの参照を保存し、監視する必要があるイベントのハンドラーを設定しています。 `channel` (en-US) プロパティは、他にもピアへの接続を表す `RTCDataChannel` を提供しています。


```js
pc.ondatachannel = (event) => {
  inboundDataChannel = event.channel;
  inboundDataChannel.onmessage = handleIncomingMessage;
  inboundDataChannel.onopen = handleChannelOpen;
  inboundDataChannel.onclose = handleChannelClose;
};
```


データチャンネルを使用する、より完全な別の例は、単純な RTCDataChannel の例 (en-US)を参照してください。

仕様書
---

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # rtcdatachannelevent |

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

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

関連情報
----

* WebRTC
* `RTCDataChannel`
* 単純な RTCDataChannel の例 (en-US)
* `RTCPeerConnection` （`datachannel` (en-US) イベントのターゲットインターフェイス）
Lock
====

Web Locks API の **`Lock`** インターフェイスは、ロックの名前とモードを提供します。これは `LockManager.request()` のコールバックが受け取る新しく要求されたロックのことも、`LockManager.query()` が返した動作中もしくは待機中のロックの記録のこともあります。

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

`Lock.mode` 読取専用 

ロックの要求時に `LockManager.request()` に渡されたアクセスモードを返します。モードは `"exclusive"` (デフォルト) か `"shared"` のいずれかです。

`Lock.name` 読取専用 

ロックの要求時に `LockManager.request()` に渡された名前を返します。

例
-

以下の例では、`LockManager.request()` の呼び出し時にプロパティ `mode` および `name` がどのように渡されるかを示します。`LockManager` は `navigator.locks` が返すオブジェクトです。


```js
navigator.locks.request("net\_db\_sync", show_lock_properties);
navigator.locks.request(
  "another\_lock",
  { mode: "shared" },
  show_lock_properties,
);

function show\_lock\_properties(lock) {
  console.log(`ロック名: ${lock.name}`);
  console.log(`ロックモード: ${lock.mode}`);
}
```

仕様書
---

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

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

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

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

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

仕様書
---

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

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

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

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

`SVGFontElement` インタフェースは、SVG の `<font>` (en-US) 要素に対応するインタフェースです。

SVG の DOM 経由での `<font>` (en-US) 要素の属性へのオブジェクト指向アクセスは出来ません。

プロパティ
-----

`SVGFontElement` インタフェースは固有のプロパティを持ちませんが、親である `SVGElement` のプロパティを継承し、また`SVGExternalResourcesRequired` と `SVGStylable` (en-US) からプロパティを実装しています。

メソッド
----

`SVGFontElement` インタフェースは固有のメソッドを持ちませんが親である `SVGElement` のメソッドを継承し、また`SVGExternalResourcesRequired` と `SVGStylable` (en-US) からメソッドを実装しています。

仕様
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # InterfaceSVGFontElement |

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

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

関連情報
----

* `<font>` (en-US) SVG 要素
MediaStream Image Capture API
=============================

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

**MediaStream Image Capture API** は、写真デバイスから画像やビデオをキャプチャするための API です。データをキャプチャするだけでなく、画像サイズ、赤目軽減、フラッシュの有無、現在の設定などのデバイス機能に関する情報を取得することもできます。逆に、API では、デバイスが許可する制限内で機能を設定できます。

MediaStream image capture の概念と使用方法
----------------------------------

画像またはビデオストリームを検索するプロセスは、以下のように行われます。サンプルコードは、Chrome の Image Capture の例を基にしています。

まず、`MediaDevices.getUserMedia()` を呼び出してデバイスへの参照を取得します。`getUserMedia()` メソッドではより詳細な機能を要求できますが、以下の例では単に利用可能な任意のビデオデバイスを要求しています。このメソッドは、`MediaStream` オブジェクトで解決する `Promise` を返します。


```js
navigator.mediaDevices.getUserMedia({ video: true }).then((mediaStream) => {
  // ストリームについて何らかの処理を行う
});
```


次に、メディアストリームから映像部分を分離します。これは、`MediaStream.getVideoTracks()` を呼ぶことで行います。これは `MediaStreamTrack` オブジェクトの配列を返します。以下のコードでは、`MediaStreamTrack` の配列の最初のアイテムが使いたいものだと仮定しています。`MediaStreamTrack` オブジェクトのプロパティを用いて使いたいものを選ぶことができます。


```js
const track = mediaStream.getVideoTracks()[0];
```


この時点で、映像を取得する前にデバイスの機能の設定をしたいかもしれません。これは、他の操作をする前にトラックオブジェクトの `applyConstraints()` (en-US) を呼ぶことでできます。


```js
let zoom = document.querySelector("#zoom");
const capabilities = track.getCapabilities();
// ズームに対応しているかをチェックする
if (!capabilities.zoom) {
  return;
}
track.applyConstraints({ advanced: [{ zoom: zoom.value }] });
```


最後に、`MediaStreamTrack` オブジェクトを `ImageCapture()` (en-US) コンストラクターに渡します。`MediaStream` にはいくつかのトラックの種類があり、それらを取得する複数の方法を提供していますが、`ImageCapture` コンストラクターは `MediaStreamTrack.kind` が `"video"` でない場合、種類が `NotSupportedError` である `DOMException` を投げます。


```js
let imageCapture = new ImageCapture(track);
```

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

`ImageCapture` (en-US)

有効な `MediaStreamTrack` を通じて参照される写真デバイスから画像をキャプチャするためのインターフェイス。

`PhotoCapabilities` (en-US)

接続されている写真デバイスに利用可能な設定オプションを提供します。`ImageCapture.getPhotoCapabilities()` (en-US) を呼び出して `PhotoCapabilities` オブジェクトを取得します。

仕様書
---

| Specification |
| --- |
| MediaStream Image Capture # imagecaptureapi |

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

### ImageCapture

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

### PhotoCapabilities

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

関連情報
----

* `MediaStream`
* `MediaStreamTrack`
Text
====

**`Text`** インターフェイスは、 DOM ツリー内でテキストノード (`node`) を表します。

EventTarget

Node

CharacterData

Text
テキストノードが何であるかを理解するために、以下の文書を考えてみてください。


```html
<html lang="en" class="e">
  <head>
    <title>Aliens?</title>
  </head>
  <body>
    Why yes.
  </body>
</html>
```


この文書には 5 つのテキストノードがあり、以下のような内容になっています。

* `"\n "`（`<head>` 開始タグの後、改行に続いて 4 つの空白）
* `"Aliens?"`（`title` 要素の内容）
* `"\n "`（`</head>` 終了タグの後、改行に続いて 2 つの空白）
* `"\n "`（`<body>` 開始タグの後、改行に続いて 2 つの空白）
* `"\n Why yes.\n \n\n"` （`body` 要素の内容）

これらのテキストノードは、それぞれがこの記事で説明されているプロパティとメソッドを持つオブジェクトです。

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

`Text()`

引数をテキストコンテンツとして持つ、新しい `Text` ノードを返します。

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

*親インターフェイスである `CharacterData`, `Node`, `EventTarget` からプロパティを継承しています。*

`Text.assignedSlot` 読取専用 

ノードが挿入されている `<slot>` を表す `HTMLSlotElement` を返します。

`Text.wholeText` 読取専用 

文字列で、この `Node` に論理的に隣接しているすべての `Text` ノードのテキストを、文書内で現れる順に結合して返します。

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

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

`Text.splitText`

指定したオフセット位置で、ノードを 2 つに分割します。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-text |

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

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

関連情報
----

* DOM API
FormData
========

**`FormData`** インターフェイスは、フォームフィールドおよびそれらの値から表現されるキーと値のペアのセットを簡単に構築する手段を提供します。これは `fetch()`、`XMLHttpRequest.send()`、`navigator.sendBeacon()` の各メソッドを用いることで送信が可能です。エンコーディング型を `"multipart/form-data"` に設定した場合にフォームが使用するものと同じ形式を使用します。

単純な `GET` の送信を用いる `<form>` が行うようなクエリー引数を生成したい場合は、`URLSearchParams` コンストラクターに直接渡すことも可能です。

`FormData` を実装したオブジェクトは、`entries()` の代わりに `for...of` 構造の内部で直接使用できます。`for (const p of myFormData)` は `for (const p of myFormData.entries())` と等価です。

**メモ:** この機能はウェブワーカーで使用できます。

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

`FormData()`

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

メソッド
----

`FormData.append()`

`FormData` オブジェクト内の既存のキーに新たな値を追加するか、キーが存在しない場合はキーを追加します。

`FormData.delete()`

`FormData` オブジェクトからキーと値のペアを削除します。

`FormData.entries()`

この `FormData` に含まれているすべてのキーと値のペアを走査するイテレーターを返します。

`FormData.get()`

`FormData` オブジェクトの中から、指定したキーに関連付けられた最初の値を返します。

`FormData.getAll()`

`FormData` の中から、指定したキーに関連付けられたすべての値の配列を返します。

`FormData.has()`

`FormData` オブジェクトがあるキーと値のペアを持っているかを示す論理値を返します。

`FormData.keys()`

オブジェクト内に存在するキーと値のペアから、すべてのキーを走査できるようにするためのイテレーターを返します。

`FormData.set()`

`FormData` オブジェクト内の既存のキーに新たな値を設定するか、キーが存在しない場合はキーと値のペアを追加します。

`FormData.values()`

オブジェクト内に存在するキーと値のペアから、すべての値を走査できるようにするためのイテレーターを返します。

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # interface-formdata |

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

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

関連情報
----

* FormData オブジェクトの使用
* `<form>`
DOMPointReadOnly
================

**`DOMPointReadOnly`** インターフェイスは、 `DOMPoint` が座標系で 2D または 3D の点を定義するために使用する座標フィールドと透視図フィールドを指定するものです。

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

新しい `DOMPointReadOnly` インスタンスを作成するには、 2 つの方法があります。まず、コンストラクターを使用し、各次元の引数の値、そしてオプションで視点位置を渡すことができます。


```js
/\* 2D \*/
const point2D = new DOMPointReadOnly(50, 50);

/\* 3D \*/
const point3D = new DOMPointReadOnly(50, 50, 25);

/\* 3D で視点位置付き \*/
const point3DPerspective = new DOMPointReadOnly(100, 100, 100, 1.0);
```


もう一つの選択肢は、静的な `DOMPointReadOnly.fromPoint()` メソッドを使用する方法です。


```js
const point = DOMPointReadOnly.fromPoint({ x: 100, y: 100, z: 50, w: 1.0 });
```

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

`DOMPointReadOnly()`

座標と視点位置を指定して、新しい `DOMPointReadOnly` オブジェクトを作成します。オブジェクトを使用して点を作成する場合は、代わりに `DOMPointReadOnly.fromPoint()` を使用することができます。

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

`DOMPointReadOnly.x` 読取専用 

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

`DOMPointReadOnly.y` 読取専用 

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

`DOMPointReadOnly.z` 読取専用 

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

`DOMPointReadOnly.w` 読取専用 

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

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

`DOMPointReadOnly.fromPoint()`

指定されたオブジェクトの座標を指定して、新しい `DOMPointReadOnly` オブジェクトを作成する静的メソッドです。

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

`matrixTransform()`

オブジェクトとして指定された行列変換を `DOMPointReadOnly` オブジェクトに適用します。

`toJSON()`

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

仕様書
---

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

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

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

関連情報
----

* `DOMPoint`
* `DOMRect`
* `DOMMatrix`
HIDConnectionEvent
==================

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

`WebHID API` の **`HIDConnectionEvent`** インターフェイスは、HID の接続イベントを表します。このイベント型は、Input レポートを受信した際に `HID.onconnect` や `HID.ondisconnect` に渡される型です。

Event

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

`HIDConnectionEvent()` 
Experimental

新しい `HIDConnectionEvent` オブジェクトを返します。通常は、イベントは Input レポートを受信した際に生成されるため、このコンストラクターは使用されません。

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

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

`HIDConnectionEvent.device` 読取専用  
Experimental

この接続イベントに関係する `HIDDevice` のインスタンスを返します。

例
-

この例では、`connect` イベントと `disconnect` イベントにイベントリスナーを登録します。そして、コンソールに `HIDDevice.productName` を出力します。


```js
navigator.hid.addEventListener("connect", ({ device }) => {
  console.log(`HID が接続されました : ${device.productName}`);
});

navigator.hid.addEventListener("disconnect", ({ device }) => {
  console.log(`HID が切断されました : ${device.productName}`);
});
```

仕様書
---

| Specification |
| --- |
| WebHID API # dom-hidconnectionevent |

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

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

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

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

`oninstall` ハンドラーに引数として渡される `InstallEvent` インターフェイスは、`ServiceWorkerGlobalScope` の `ServiceWorker` で配信されるインストールアクションを表します。`ExtendableEvent` の子として、`FetchEvent` のような機能イベントがインストール中に配信されないようにします。

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

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

`InstallEvent()` 
非推奨

Non-standard

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

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

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

`InstallEvent.activeWorker` 読取専用  
非推奨

Non-standard

現在ページを制御している `ServiceWorker` を返します。

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

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

例
-

このコードスニペットは、サービスワーカーの先読みサンプルのものです（先読みのライブ実行を参照してください）。このコードは `ServiceWorkerGlobalScope.oninstall` で `ServiceWorkerRegistration.installing` ワーカーをインストールしたとみなすことを、渡されたプロミスが正常に解決するまで遅らせています。プロミスは、すべてのリソースのフェッチとキャッシュが完了したとき、または何らかの例外が発生したときに解決します。

このコードスニペットでは、サービスワーカーが使用するキャッシュをバージョン管理するためのベストプラクティスも示しています。この例ではキャッシュを 1 つしか保有していませんが、この手法を複数のキャッシュに使用することができます。このコードでは、キャッシュの一括指定と、バージョン管理された固有のキャッシュ名とを割り当てています。

**メモ:** Google Chromeでは、chrome://serviceworker-internals 経由でアクセスした関連サービスワーカーの "Inspect" インターフェイスでログ出力します。


```js
const CACHE\_VERSION = 1;
const CURRENT\_CACHES = {
  prefetch: `prefetch-cache-v${CACHE\_VERSION}`,
};

self.addEventListener("install", (event) => {
  const urlsToPrefetch = [
    "./static/pre\_fetched.txt",
    "./static/pre\_fetched.html",
    "https://www.chromium.org/\_/rsrc/1302286216006/config/customLogo.gif",
  ];

  console.log(
    "Handling install event. Resources to pre-fetch:",
    urlsToPrefetch,
  );

  event.waitUntil(
    caches
      .open(CURRENT\_CACHES["prefetch"])
      .then((cache) => {
        return cache
          .addAll(
            urlsToPrefetch.map((urlToPrefetch) => {
              return new Request(urlToPrefetch, { mode: "no-cors" });
            }),
          )
          .then(() => {
            console.log("All resources have been fetched and cached.");
          });
      })
      .catch((error) => {
        console.error("Pre-fetching failed:", error);
      }),
  );
});
```

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

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

関連情報
----

* `NotificationEvent`
* `Promise`
* フェッチ API
DecompressionStream
===================

Compression Streams API の **`DecompressionStream`** インターフェイスは、データのストリームの展開を行うAPIです。

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

`DecompressionStream()`

新しい `DecompressionStream` を生成します。

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

`DecompressionStream.readable`

このオブジェクトの制御下にある `ReadableStream` のインスタンスを返します。

`DecompressionStream.writable`

このオブジェクトの制御下にある `WritableStream` のインスタンスを返します。

例
-

この例では、blob を gzip 圧縮を用いて展開します。


```js
const ds = new DecompressionStream("gzip");
const decompressedStream = blob.stream().pipeThrough(ds);
```

仕様書
---

| Specification |
| --- |
| Compression Streams # decompression-stream |

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

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

**Screen Orientation API** は、画面の向きに関する情報を提供します。

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

* `ScreenOrientation`
仕様書
---

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

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

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

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

Plugin` インターフェイスは、 ブラウザーのプラグインに関する情報を提供します。

**メモ:** 最新のブラウザーでは、 `Plugin` オブジェクトのプロパティを列挙することができなくなりました。

プロパティ
-----

`Plugin.description` 読取専用 

人間の読みやすい形式の、プラグインに関する説明。

`Plugin.filename` 読取専用 

プラグインのファイルのファイル名。

`Plugin.name` 読取専用 

プラグインの名称。

`Plugin.version` 読取専用 

プラグインのバージョン番号文字列。

メソッド
----

`Plugin.item`

対応するコンテンツ型の MIME タイプを返します。対応する型のリストへのインデックス番号を指定します。

`Plugin.namedItem`

対応している項目の MIME タイプを返します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-plugin |

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

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

**`HTMLLegendElement`** は、`<legend>` 要素のプロパティにアクセスできるようにするインターフェイスです。 `HTMLElement` インターフェイスからプロパティとメソッドを継承しています。

EventTarget

Node

Element

HTMLElement

HTMLLegendElementプロパティ
-----

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

`HTMLLegendElement.form` 読取専用 

この凡例 (legend) が所属するフォームフォームを表す `HTMLFormElement` です。この凡例の親が fieldset 要素であれば、この属性は親 fieldset 要素の **form** 属性と同じ値を返します。それ以外の場合は、null を返します。

`HTMLLegendElement.accessKey`

文字列で、この要素にアクセスするための単一の文字のアクセスキーを表します。

`HTMLLegendElement.align` 
非推奨

文字列で、フォームのセットに対する相対的な配置を表します。

メソッド
----

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmllegendelement |

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

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

関連情報
----

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