recursal/MDN huggingface dataset:
FormDataEvent
=============

**`FormDataEvent`** インターフェイスは `formdata` イベントを表します。 — このようなイベントは `HTMLFormElement` オブジェクトで、フォームデータを表すエントリーリストが構築された後に発行されます。これはフォームが送信されようとするときに発行されますが、 `FormData()` コンストラクターの呼び出しでも発行させることができます。

これにより、 `XMLHttpRequest` などのメソッドでフォームデータを送信する際に、自分で用意しなくても、 `formdata` イベントの発行に応じて、 `FormData` オブジェクトをすばやく取得することができます（FormData オブジェクトの使用を参照）。

Event

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

`FormDataEvent()`

新しい `FormDataEvent` オブジェクトインスタンスを生成します。

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

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

`FormDataEvent.formData`

イベントが発行された時点のフォーム内に含まれるデータを表す `FormData` オブジェクトです。

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

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

例
-


```js
// フォームの参照を得る

const formElem = document.querySelector("form");

// submit ハンドラー

formElem.addEventListener("submit", (e) => {
  // フォーム送信時に、既定の動作を抑止
  e.preventDefault();

  console.log(form.querySelector('input[name="field1"]')); // FOO
  console.log(form.querySelector('input[name="field2"]')); // BAR

  // FormData オブジェクトを構築し、 formdata イベントを発行させる
  const formData = new FormData(formElem);
  // フォームデータがが formdata イベントによって変更される
  console.log(formData.get("field1")); // foo
  console.log(formData.get("field2")); // bar
});

// データを受け取るための formdata ハンドラー

formElem.addEventListener("formdata", (e) => {
  console.log("formdata fired");

  // フォームデータを変更
  const formData = e.formData;
  formData.set("field1", formData.get("field1").toLowerCase());
  formData.set("field2", formData.get("field2").toLowerCase());
});
```

仕様書
---

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

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

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

関連情報
----

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

ウェブオーディオ API の **`AudioParamMap`** インターフェイスは、複数の音声パラメーターのセットを表します。それぞれの音声パラメーターは、パラメーターを識別する文字列から値を表す `AudioParam` オブジェクトへのマップとして表されます。

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

`AudioParamMap` オブジェクトは、`Map` のようにアクセスできます。それぞれのパラメーターは名前の文字列によって識別され、そのパラメーターの値を持つ `AudioParam` にマップされます。加えて、以下のプロパティが利用可能です。

`size`

?

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

`entries()`

?

`forEach()`

?

`has()`

?

`keys()`

?

`values()`

?

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

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

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

**`HID`** インターフェイスは、 *HID デバイス* への接続およびアタッチした HID デバイスのリストアップを行うメソッドと、HID デバイスの接続を扱うイベントハンドラーを提供します。

EventTarget

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

*このインターフェイスは、親の `EventTarget` から継承したプロパティも持ちます。*

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

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

`getDevices()` 
Experimental

接続中の `HIDDevice` オブジェクトの配列で解決する `Promise` を返します。

`requestDevice()` 
Experimental

接続中の `HIDDevice` オブジェクトの配列で解決する `Promise` を返します。この関数を呼ぶことで、返されたデバイスのリストから選ばれた 1 個のデバイスにアクセスする許可を得るための、ユーザーエージェントの許可手続きを開始できます。

### イベント

`connect` 
Experimental

HID デバイスが接続された時に発火します。

`disconnect` 
Experimental

HID デバイスが切断された時に発火します。

仕様書
---

| Specification |
| --- |
| WebHID API # dom-hid |

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

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

関連情報
----

* `WebHID API`
WorkerNavigator
===============

**`WorkerNavigator`** インターフェイスは `Navigator` インターフェイスのサブセットで、ワーカー (`Worker`) からアクセスできるものです。このようなオブジェクトはワーカーごとに初期化され、 `self.navigator` プロパティを介して利用できます。

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

*`WorkerNavigator` インターフェイスは何もプロパティを継承していません。*

`WorkerNavigator.appCodeName` 
非推奨
 読取専用 

どのブラウザーでも常に `'Mozilla'` を返します。このプロパティは互換性のためだけに残されています。

`WorkerNavigator.appName` 
非推奨
 読取専用 

ブラウザーの正式名称を返します。このプロパティが正しい値を返すことに頼らないでください。

`WorkerNavigator.appVersion` 
非推奨
 読取専用 

ブラウザー のバージョンを文字列で返します。このプロパティが正しい値を返すことに頼らないでください。

`WorkerNavigator.connection` 読取専用 

端末のネットワーク接続に関する情報を格納した `NetworkInformation` オブジェクトを提供します。

`WorkerNavigator.globalPrivacyControl` 読取専用  
Experimental

ユーザーの情報の共有や販売への同意状況を表す論理値を返します。

`WorkerNavigator.gpu` 読取専用  
Experimental

現在のワーカーコンテキスト用の `GPU` オブジェクトを返します。WebGPU API のエントリーポイントです。

`WorkerNavigator.hardwareConcurrency` 読取専用 

利用可能な論理プロセッサーコアの数を返します。

`WorkerNavigator.language` 読取専用 

ユーザーの環境設定言語（通常はブラウザー UI の言語）を表す文字列を返します。不明な場合は `null` 値を返します。

`WorkerNavigator.languages` 読取専用 

ユーザーが知っている言語を、環境設定の順に文字列の配列で返します。

`WorkerNavigator.locks` 読取専用 

新しい `LockManager` オブジェクトをリクエストしたり、既存の `Lock` オブジェクトを問い合わせるためのメソッドを提供する `Lock` オブジェクトを返します。

`WorkerNavigator.mediaCapabilities` 読取専用 

指定の形式のデコードおよびエンコードの能力と、出力の能力に関する情報を参照可能にする `MediaCapabilities` (en-US) オブジェクトを返します。

`WorkerNavigator.onLine` 読取専用 

ブラウザーがオンラインであるかどうかを示す論理値を返します。

`WorkerNavigator.permissions` 
Experimental
 読取専用 

`Permissions` オブジェクトを返します。これは、権限 API が定める API の権限状態を問い合わせたり更新したりするために使用できます。

`WorkerNavigator.platform` 
非推奨
 読取専用 

ブラウザーのプラットフォームを表す文字列を返します。このプロパティが正しい値を返すことに頼らないでください。

`WorkerNavigator.product` 
非推奨
 読取専用 

どのブラウザーでも常に `'Gecko'` を返します。このプロパティは互換性のためにのみ残されています。

`WorkerNavigator.serial` 読取専用  
Experimental

シリアルポートを制御するためのウェブシリアル API へのエントリーポイントを表す `Serial` オブジェクトを返します。

`WorkerNavigator.storage` 読取専用 

永続化の権限を管理し、利用できるストレージを推定するための `StorageManager` インターフェイスを返します。

`WorkerNavigator.userAgent` 読取専用 

現在のブラウザーのユーザーエージェント文字列を返します。

`WorkerNavigator.userAgentData` 読取専用  
Experimental

ユーザーのブラウザーとオペレーティングシステムに関する情報にアクセスするための `NavigatorUAData` オブジェクトを返します。

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

*`WorkerNavigator` インターフェイスは何もメソッドを継承または実装していません。*

仕様書
---

| Specification |
| --- |
| HTML Standard # the-workernavigator-object |

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

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

関連情報
----

* その他のワーカーに関するインターフェイス: `Worker`, `WorkerLocation`, `WorkerGlobalScope`
* ウェブワーカーの使用
HTMLTableRowElement
===================

**`HTMLTableRowElement`** インターフェイスは、（継承によって利用できる通常の `HTMLElement` インターフェイスに加えて）HTML の表の行のレイアウトを操作したり行を表したりするための特別なプロパティとメソッドを提供します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLTableRowElement.cells` 読取専用 

行のセルを表す生きた `HTMLCollection` を返します。 `HTMLCollection` は生きており、セルが追加・削除された際に自動的に更新されます。

`HTMLTableRowElement.rowIndex` 読取専用 

表全体におけるこの行の論理的な位置を表す `long` 値を返します。この行が表の中になかった場合は、 `-1` を返します。

`HTMLTableRowElement.sectionRowIndex` 読取専用 

所属する表の区間におけるこの行の論理的な位置を表す `long` 値を返します。この行が区間の中になかった場合は、 `-1` を返します。

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

*親である `HTMLElement` から継承したメソッドがあります。*

`deleteCell(index)`

`index` の位置に対応するセルを取り除きます。 `index` が `-1` であった場合、末尾のセルを取り除きます。 `index` が `-1` より小さいか、このコレクションにあるセルの数より大きい場合、 `DOMException` が `IndexSizeError` の値で発生します。

`insertCell(index)`

`HTMLTableCellElement` でこの行の新しいセルを表します。セルはこのセルのコレクションの中で、行の中の `index` の位置の直前に挿入されます。 `index` が `-1` の場合、新しいセルはコレクションの末尾に追加されます。 `index` が `-1` より小さいか、このコレクションにあるセルの数より大きい場合、 `DOMException` が `IndexSizeError` の値で発生します。

非推奨のプロパティ
---------

**警告:** これらのプロパティは非推奨になっており、もう使用するべきではありません。これらは主に古いコードベースを理解しやすくすることを目的に文書化されています。

`HTMLTableRowElement.align` 
非推奨

文字列で、 `align` 属性を反映した列挙値です。これは、周囲のコンテキストに対する要素の内容の整列を示す。指定できる値は `"left"`, `"right"`, `"center"` です。

`HTMLTableRowElement.bgColor` 
非推奨

文字列で、セルの背景色です。これは、廃止された `bgColor` 属性を反映したものです。

`HTMLTableRowElement.ch` 
非推奨

文字列で、 1 つの文字を含みます。この文字は、列の全てのセルを揃えるための文字です。これは `char` を反映し、既定では言語に関連付けられた小数点の値、例えば英語なら `'.'`、フランス語なら `','` となります。このプロパティはオプションであり、あまり対応されていませんでした。

`HTMLTableRowElement.chOff` 
非推奨

文字列で、 `HTMLTableRowElement.ch` で定義された文字の右側（左書きの場合。右書きの場合は左側）に何文字残さなければならないかを示す整数です。このプロパティはオプションであり、あまり対応されていませんでした。

`HTMLTableRowElement.vAlign` 
非推奨

文字列で、セルの内容がどのように垂直方向に配置されるかを示す列挙値です。これは `valign` 属性を反映しており、 `"top"`, `"middle"`, `"bottom"`, `"baseline"` のいずれかになります。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmltablerowelement |

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

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

関連情報
----

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

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

WebGPU API の **`GPUAdapter`** インターフェイスは、GPU アダプターを表します。これを用いて `GPUDevice` (en-US)、アダプターの情報、機能、制限を要求できます。

`GPUAdapter` オブジェクトは `GPU.requestAdapter()` メソッドを用いて要求できます。

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

`features` 
Experimental
 読取専用 

アダプターが対応している追加の機能を表現する `GPUSupportedFeatures` オブジェクトです。

`isFallbackAdapter` 
Experimental
 読取専用 

論理値です。アダプターがフォールバックアダプターである場合は `true` を返し、そうでない場合は `false` を返します。

`limits` 
Experimental
 読取専用 

アダプターが対応している制限を表現する `GPUSupportedLimits` オブジェクトです。

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

`requestAdapterInfo()` 
Experimental

アダプターに関する特定用の情報が格納された `GPUAdapterInfo` オブジェクトで解決する `Promise` を返します。

`requestDevice()` 
Experimental

GPU とのやりとり用の第一インターフェイスである `GPUDevice` (en-US) オブジェクトで解決する `Promise` を返します。

例
-


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

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

  const device = await adapter.requestDevice();

  //...
}
```

仕様書
---

| Specification |
| --- |
| WebGPU # gpu-adapter |

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

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

関連情報
----

* WebGPU API
CanvasPattern
=============

**`CanvasPattern`** インターフェイスは、画像、キャンバス、動画をもとに生成される不透明オブジェクトを表し、`CanvasRenderingContext2D.createPattern()` (en-US) メソッドによって作成されます。

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

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

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

メソッド
----

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

`CanvasPattern.setTransform()`

パターンに線形の座標変換を表す `DOMMatrix` を適用します。

仕様書
---

| Specification |
| --- |
| HTML Standard # canvaspattern |

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

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

関連情報
----

* `CanvasRenderingContext2D.createPattern()` (en-US)
* The `<canvas>` 要素と関連するインターフェイスである `HTMLCanvasElement`
端末メモリー API
==========

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

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

クライアント端末の能力は、使用可能な RAM の量に大きく依存します。 従来、開発者は経験則を使用し、端末のベンチマークを行うか、端末の製造元やユーザーエージェント文字列などの他の要因に基づいて端末の能力を推測する必要がありました。

端末のメモリー容量へのアクセス
---------------

RAM 端末の概算量にアクセスするには、 JavaScript API を使用する方法と、クライアントヒント HTTP ヘッダーを使用する方法の 2 つがあります。

### JavaScript API

`Navigator.deviceMemory` を取得することで、概算の RAM 容量を照会することができます。


```js
var RAM = navigator.deviceMemory;
```

### クライアントヒント

クライアントヒント ヘッダーの `Device-Memory` ディレクティブを使用して、同じく概算の RAM 容量を取得することもできます。

仕様書
---

| Specification |
| --- |
| Device Memory  |

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

### JavaScript インターフェイス

### api.Navigator.deviceMemory

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

### api.WorkerNavigator.deviceMemory

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

### http.headers.Device-Memory

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

### クライアントヒント拡張機能

### api.Navigator.deviceMemory

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

### api.WorkerNavigator.deviceMemory

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

### http.headers.Device-Memory

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

関連情報
----

* `Navigator.deviceMemory`
* `Device-Memory` ヘッダー
幾何インターフェイス
==========

**幾何インターフェイス** は、 3D および 2D グラフィックを操作するためのインターフェイスを提供する CSS モジュールです。特に、点、長方形、四角形、座標変換行列 （グラフィックを移動、拡大縮小、回転、歪め/傾け、反転、乗算/連鎖させ、逆演算/元に戻す処理）を演算するためのインターフェイスを提供します。

ウェブ開発者であれば、常に幾何インターフェイスを直接使用するわけではありませんが、その代わりに裏で幾何インターフェイスに頼っている他の機能、たとえば CSS 座標変換、キャンバス API 、WebXR 機器 API の一部、そして（より直接的に）`VideoFrame.visibleRect` (en-US)、`Element.getClientRects()`、`Element.getBoundingClientRect()` などを使用しています。

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

`DOMMatrix`

座標変換行列を表します。グラフィックの平行移動、拡大縮小、回転、歪め/せん断/傾け、反転、乗算/連結、逆演算/取り消しなどの演算を行います。

`DOMMatrixReadOnly`

`DOMMatrix` の読み取り専用版です。

`DOMPoint`

座標系内の 2D または 3D の点を表します。 3D までの座標の値と、オプションの視点位置を含みます。

`DOMPointReadOnly`

`DOMPoint` の読み取り専用版です。

`DOMQuad`

四辺形 の角を定義する 4 つの `DOMPoint` オブジェクトの集合を表します。

`DOMRect`

長方形の大きさと位置を表します。

`DOMRectReadOnly`

`DOMRect` の読み取り専用版です。

例
-

`Path2D.addPath()` と `CanvasPattern.setTransform()` の記事に、幾何インターフェイスを使用する例があります。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMMatrix |
| Geometry Interfaces Module Level 1 # DOMPoint |
| Geometry Interfaces Module Level 1 # DOMQuad |
| Geometry Interfaces Module Level 1 # DOMRect |

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

### api.DOMMatrix

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

### api.DOMMatrixReadOnly

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

### api.DOMPoint

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

### api.DOMPointReadOnly

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

### api.DOMQuad

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

### api.DOMRect

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

### api.DOMRectReadOnly

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

関連情報
----

* `Path2D.addPath()`
* `CanvasPattern.setTransform()`
* `CanvasRenderingContext2D.getTransform()` (en-US)
* `CanvasRenderingContext2D.setTransform()` (en-US)
* `CSSTransformValue.toMatrix()`
* `CSSTransformComponent.toMatrix()`
* `Element.getBoundingClientRect()`
* `Element.getClientRects()`
* `VideoFrame.visibleRect` (en-US)
* `XRLightEstimate` (en-US)
* `XRRigidTransform`
StereoPannerNode
================

`StereoPannerNode` はウェブオーディオ API のインターフェイスで、音声ストリームを左右にパンすることができる、シンプルなステレオのパンニングを行うノードを表します。これは `AudioNode` の一種で、コストが低くパワーの変わらない アルゴリズムを用います。

`pan` (en-US) 属性には -1 （完全に左へパンニング）から 1（完全に右へパンニング）までの実数値を単位をつけずに指定します。このインターフェイスにより、`PannerNode` よりシンプルにパンを指定できます。

![](/ja/docs/Web/API/StereoPannerNode/stereopannernode.png)

EventTarget

AudioNode

StereoPannerNode

|  |  |
| --- | --- |
| 入力数 | `1` |
| 出力数 | `1` |
| チャンネルカウントモード | `"clamped-max"` |
| チャンネル数 | `2` |
| チャンネルの意味 | `"speakers"` |

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

`StereoPannerNode()` (en-US)

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

プロパティ
-----

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

`StereoPannerNode.pan` (en-US) 読取専用 

a-rate の `AudioParam` で、パンニングの量を指定できます。

メソッド
----

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

例
-

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

仕様書
---

| Specification |
| --- |
| Web Audio API # stereopannernode |

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

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

関連情報
----

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

**Compression Streams API** は、gzip 形式や deflate 形式によるデータのストリームの圧縮や展開を行う JavaScript の API を提供します。

ビルトインの圧縮機能を使うことで、JavaScript のアプリケーションに圧縮ライブラリーを含める必要がなくなり、アプリケーションのダウンロードサイズをより小さくできます。

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

`CompressionStream`

データのストリームを圧縮します。

`DecompressionStream`

データのストリームを展開します。

例
-

この例では、ストリームを gzip 圧縮により圧縮します。


```js
const compressedReadableStream = inputReadableStream.pipeThrough(
  new CompressionStream("gzip"),
);
```


この例は、blob を gzip により展開する関数です。


```js
async function DecompressBlob(blob) {
  const ds = new DecompressionStream("gzip");
  const decompressedStream = blob.stream().pipeThrough(ds);
  return await new Response(decompressedStream).blob();
}
```

仕様書
---

| Specification |
| --- |
| Compression Streams # compression-stream |

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

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

**`HTMLOptionElement`** インターフェイスは `<option>` 要素を表し、 `HTMLElement` インターフェイスのすべてのクラスとメソッドを継承しています。

EventTarget

Node

Element

HTMLElement

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

`Option()`

新しく作成された `HTMLOptionElement` オブジェクトを返します。引数は、表示するテキストである `text`、関連付けられる値である `value`、`defaultSelected` の値、`selected` の値の 4 つです。後 3 者は省略可能です。

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

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

`HTMLOptionElement.defaultSelected`

`true` または `false` の値を取り、選択肢が既定で選択されているかどうかを示す HTML の `selected` 属性の初期値を表します。

`HTMLOptionElement.disabled`

`true` または `false` の値を取り、その選択肢が選択できないことを示す HTML の `disabled` 属性の値を表します。選択肢は無効状態の `<optgroup>` 要素の子である場合も無効になります。

`HTMLOptionElement.form` 読取専用 

`HTMLFormElement` で、この選択肢が `<select>` 要素の子孫であった場合は、対応する `<select>` 要素の `form` と同じ値を表します。見つからない場合は null になります。

`HTMLOptionElement.index` 読取専用 

`long` 値で、所属する選択肢のリスト内におけるツリー順の位置を表します。その選択肢がリストに含まれていない場合、例えば `<datalist>` 要素の一部である場合などは、値は `0` になります。

`HTMLOptionElement.label` 読取専用 

文字列で、この選択肢のラベルを提供する HTML の `label` 属性の値を反映します。この属性が特に設定されていない場合は、この値を読み取ると要素のテキストコンテンツが返されます。

`HTMLOptionElement.selected`

`true` または `false` の値を取り、この選択肢が現在選択されているかどうかを示します。

`HTMLOptionElement.text`

文字列で、この要素のテキストコンテンツが入ります。

`HTMLOptionElement.value`

文字列で、 HTML の `value` 属性が存在する場合は、その値を反映します。存在しない場合は `Node.textContent` プロパティの値を反映します。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmloptionelement |

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

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

関連情報
----

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

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

**`ToggleEvent`** インターフェイスは、ポップオーバー要素の状態が表示と非表示の間で切り替わるときにユーザーに通知するイベントを表します。

これは `HTMLElement` の `beforetoggle` および `toggle` イベントのためのイベントオブジェクトであり、表示中と非表示の間で遷移したときに（それぞれ前と後に）ポップオーバーで発行されます。

Event

ToggleEvent

**メモ:** `ToggleEvent` は `HTMLDetailsElement` の `toggle` イベントとは関係ありません。こちらは `<details>` において、`open`/`closed` の状態が変化したときに発生します。こちらのイベントオブジェクトは一般的な `Event` です。

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

`ToggleEvent()` 
Experimental

`ToggleEvent` オブジェクトを作成します。

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

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

`ToggleEvent.newState` 読取専用  
Experimental

（`"open"` または `"closed"`の）文字列で、要素が遷移した後の状態を表します。

`ToggleEvent.oldState` 読取専用  
Experimental

（`"open"` または `"closed"`の）文字列で、要素が遷移する前の状態を表します。

例
-

### 基本的な例


```js
const popover = document.getElementById("mypopover");

// ...

popover.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover is being shown");
  } else {
    console.log("Popover is being hidden");
  }
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # toggleevent |

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

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

関連情報
----

* ポップオーバー API
* `beforetoggle` イベント
* `toggle` イベント
EyeDropper
==========

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

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

**`EyeDropper`** インターフェイスは、ユーザーが開いて画面から色を選択できるスポイトツールのインスタンスを表します。

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

`EyeDropper()` 
Experimental

新しい `EyeDropper` のインスタンスを返します。

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

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

`EyeDropper.open()` 
Experimental

選択された色へのアクセスを提供するオブジェクトで解決するプロミスを返します。

例
-

### スポイトツールを開いて色を取得する

この例では、スポイトツールを開き、ユーザーが画面からピクセルを選択するか `Escape` を押してスポイトモードをキャンセルするのを待つ方法を示します。

#### HTML


```html
<button id="start-button">スポイトを開く</button> <span id="result"></span>
```


#### JavaScript


```js
document.getElementById("start-button").addEventListener("click", () => {
  const resultElement = document.getElementById("result");

  if (!window.EyeDropper) {
    resultElement.textContent =
      "このブラウザーは EyeDropper API に対応していません";
    return;
  }

  const eyeDropper = new EyeDropper();

  eyeDropper
    .open()
    .then((result) => {
      resultElement.textContent = result.sRGBHex;
      resultElement.style.backgroundColor = result.sRGBHex;
    })
    .catch((e) => {
      resultElement.textContent = e;
    });
});
```


#### 結果

### スポイトツールを終了する

この例では、スポイトモードはユーザーが色を選択したり `Escape` を押したりする前に終了させることもできることを示します。

#### HTML


```html
<button id="start-button">スポイトを開く</button> <span id="result"></span>
```


#### JavaScript


```js
document.getElementById("start-button").addEventListener("click", () => {
  const resultElement = document.getElementById("result");

  if (!window.EyeDropper) {
    resultElement.textContent =
      "このブラウザーは EyeDropper API に対応していません";
    return;
  }

  const eyeDropper = new EyeDropper();
  const abortController = new AbortController();

  eyeDropper
    .open({ signal: abortController.signal })
    .then((result) => {
      resultElement.textContent = result.sRGBHex;
      resultElement.style.backgroundColor = result.sRGBHex;
    })
    .catch((e) => {
      resultElement.textContent = e;
    });

  setTimeout(() => {
    abortController.abort();
  }, 2000);
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| EyeDropper API # eyedropper-interface |

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

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

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

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

**Badging API** は、文書またはアプリケーションにバッジを設定する方法をウェブ開発者に提供します。バッジは、より邪魔になる通知を表示することなく、状態が変化したことを通知する役割を果たします。よくある使用法としては、メッセージ機能を持つアプリケーションが、新着メッセージがあることを示すためにアプリケーションのアイコンにバッジを表示することがあるでしょう。

概念と使用法
------

ウェブ開発者は、よく状態を表すために文書のファビコンやタイトルを更新します。Badging API は、ユーザーエージェントが解釈でき、UI の他の部分に合う形で表示できる方法を提供することで、状態を表示するためのより上品な方法を提供します。

### バッジの種類

バッジには 2 種類あります。

* 文書バッジ: 通常、ブラウザーのタブ上で、ページアイコンの近くまたは上に表示されます。
* アプリケーションバッジ: インストールされたウェブアプリケーションのアイコンと関連付けられます。使用中のデバイスに応じて、ドック、シェルフ、ホームスクリーンにあるアプリケーションのアイコン上に表示される可能性があります。
### バッジの状態

バッジは、内部で設定される 3 種類の値のうち 1 つをとることができます。

`nothing`

現在、バッジが何も設定されていないことを示します。バッジがアプリケーションによってクリアされたり、ユーザーエージェントによってリセットされることにより、この状態になる可能性があります。

`flag`

バッジが設定されているが、表示する特定のデータが無いことを示します。バッジがアプリケーションによって設定されたが、メソッドに値が渡されなかったとき、この状態になります。

`整数`

バッジの設定時に値が渡されました。この値は `0` にはなりません。バッジを設定する際に値 `0` を渡すと、ユーザーエージェントは `nothing` に設定してバッジをクリアします。

### バッジの設定

バッジは、(インストールされたアプリケーションでは) `setAppBadge()` メソッドで設定できます。このメソッドに引数を渡さない場合、バッジの値は `flag` です。ユーザーエージェントは通知バッジ (たとえばアイコンの上の色付きの丸) を表示するでしょう。

このメソッドは、数値の引数 `contents` をとることもできます。この引数を渡すと、これがバッジの中に表示されます。ユーザーエージェントは、この値を何らかの形で変える可能性があります。たとえば、4000 などの非常に大きい値を渡すと、ユーザーエージェントはこれをバッジに 99+ として表示する可能性があります。ユーザーエージェントは、このデータを無視してかわりにマーカーを表示する可能性もあります。

### バッジのクリア

バッジは、`clearAppBadge()` メソッドでクリアできます。このメソッドは引数をとらず、バッジを値 `nothing` に設定します。また、`setAppBadge()` に値 `0` を渡すと、バッジを `nothing` に設定してクリアします。

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

なし

### Navigator インターフェイスの拡張

`Navigator.setAppBadge()`

アプリケーションに関連付けられたアイコンにバッジを設定します。

`Navigator.clearAppBadge()`

アプリケーションに関連付けられたアイコンのバッジをクリアします。

### WorkerNavigator インターフェイスの拡張

`WorkerNavigator.setAppBadge()`

アプリケーションに関連付けられたアイコンにバッジを設定します。

`WorkerNavigator.clearAppBadge()`

アプリケーションに関連付けられたアイコンのバッジをクリアします。

例
-

以下のようにすると、現在のアプリケーションに値 12 の通知バッジを設定できます。


```js
navigator.setAppBadge(12);
```


以下のようにすると、現在のアプリケーションの通知バッジをクリアできます。


```js
navigator.clearAppBadge();
```

仕様書
---

| Specification |
| --- |
| Badging API # setappbadge-method |

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

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

関連情報
----

* Badging for app icons
* Badging API Explainer