recursal/MDN huggingface dataset:
CustomElementRegistry
=====================

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
**`CustomElementRegistry`** インターフェイスは、カスタム要素の登録と、登録された要素を照会するためのメソッドを提供します。このインスタンスを取得するには、`window.customElements` プロパティを使用してください。

メソッド
----

`CustomElementRegistry.define()`

新しいカスタム要素を定義します。

`CustomElementRegistry.get()`

名前付きカスタム要素のコンストラクターを返します。カスタム要素が定義されていない場合は `undefined` を返します。

`CustomElementRegistry.upgrade()`

シャドウルートに接続する前であっても、直接カスタム要素をアップグレードします。

`CustomElementRegistry.whenDefined()`

指定された名前でカスタム要素が定義されたときに解決する空のプロミスを返します。そのようなカスタム要素が既に定義されていた場合、返されたプロミスは即座に履行状態になります。

例
-

以下のコードは word-count-web-component という例 (ライブデモも見てください) から持ってきています。カスタム要素のクラスを作成した後に、 `CustomElementRegistry.define()` メソッドを使用してカスタム要素を定義していることに注意してください。


```js
// 要素のクラスを作成
class WordCount extends HTMLParagraphElement {
  constructor() {
    // コンストラクターでは常に super を最初に呼び出してください
    super();

    // 要素の親要素の語数を数える
    var wcParent = this.parentNode;

    function countWords(node) {
      var text = node.innerText || node.textContent;
      return text.split(/\s+/g).length;
    }

    var count = "Words: " + countWords(wcParent);

    // シャドウルートを生成
    var shadow = this.attachShadow({ mode: "open" });

    // テキストノードを生成し、語数を追加
    var text = document.createElement("span");
    text.textContent = count;

    // シャドウルートに追加
    shadow.appendChild(text);

    // 要素の内容が変化したとき、語数を更新
    setInterval(function () {
      var count = "Words: " + countWords(wcParent);
      text.textContent = count;
    }, 200);
  }
}

// 新しい要素を定義
customElements.define("word-count", WordCount, { extends: "p" });
```


**メモ:** CustomElementsRegistry は `Window.customElements` プロパティを通して利用可能です。

仕様書
---

| Specification |
| --- |
| HTML Standard # custom-elements-api |

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

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

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

**`HTMLParamElement`** インターフェイスは、（継承によって使用できる通常の `HTMLElement` インターフェイスのものに加えて） `<param>` 要素を操作するための特別なプロパティを提供し、 `<object>` 要素の引数として機能するキーと値の組を表します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLParamElement.name` 
非推奨

文字列で、引数の名前を表します。 `name` 属性を反映しています。

`HTMLParamElement.value` 
非推奨

文字列で、この引数に関連付けられた値を表します。 `value` 属性を反映しています。

`HTMLParamElement.type` 
非推奨

文字列で、 `valueType` が `"ref"` の値であった場合の引数の型を示します。 `type` 属性を反映しています。

`HTMLParamElement.valueType` 
非推奨

文字列で、 `value` の型を表します。これは `valuetype` 属性を反映しており、値は `"data"`, `"ref"`, `"object"` のいずれかになります。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlparamelement |

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

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

関連情報
----

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

**`HTMLPreElement`** インターフェイスは、（継承によって利用できる `HTMLElement` インターフェイスのものに加えて）整形済みテキストのブロック (`<pre>`) を操作するための固有のプロパティやメソッドを公開します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLPreElement.width` 
非推奨

`long` 値で、古い `width` 属性を反映し、`<pre>` 要素の固定長の長さを指定します。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlpreelement |

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

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

関連情報
----

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

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

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

**`VRStageParameters`** は WebVR API のインターフェイスで，ルームスケール体験に対応している機器用にステージエリアを記述する値を表現しています。

**メモ:** このインターフェイスは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

このインターフェイスには `VRDisplay.stageParameters` プロパティを通じてアクセスできます。

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

`VRStageParameters.sittingToStandingTransform` 
非推奨
 読取専用  
Non-standard

`VRFrameData` の座位空間ビュー行列を立位空間に変換する行列を格納しています。

`VRStageParameters.sizeX` 
非推奨
 読取専用  
Non-standard

プレイ領域境界の幅を、メートル単位で返します。

`VRStageParameters.sizeY` 
非推奨
 読取専用  
Non-standard

プレイ領域境界の奥行きを、メートル単位で返します。

例
-


```js
const info = document.querySelector("p");
let vrDisplay;

navigator.getVRDisplays().then((displays) => {
  vrDisplay = displays[0];
  const stageParams = vrDisplay.stageParameters;
  // stageParams is a VRStageParameters object

  if (stageParams === null) {
    info.textContent =
      "Your VR Hardware does not support room-scale experiences.";
  } else {
    info.innerHTML =
      `<strong>Display stage parameters</strong><br>` +
      `Sitting to standing transform: ${stageParams.sittingToStandingTransform}<br>` +
      `Play area width (m): ${stageParams.sizeX}<br>` +
      `Play area depth (m): ${stageParams.sizeY}`;
  }
});
```

仕様書
---

このインターフェイスは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR API を実装するまで、 A-Frame、Babylon.js、Three.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

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

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

関連情報
----

* WebVR API
DeviceOrientationEvent
======================

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

**`DeviceOrientationEvent`** は端末方向イベントのインターフェイスで、ウェブ開発者にウェブページを実行する端末の物理的な方向からの情報を提供します。

Event

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

`DeviceOrientationEvent.DeviceOrientationEvent()`

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

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

`DeviceOrientationEvent.absolute` 読取専用 

論理値で、端末が絶対に方向データを提供するかどうかを示します。

`DeviceOrientationEvent.alpha` 読取専用 

数値で、端末の Z 軸の回転量を表し、 0 （含む）から 360 （含まない）までの範囲の値で表します。

`DeviceOrientationEvent.beta` 読取専用 

数値で、端末の X 軸の回転量を表し、 -180 （含む）から 180 （含まない）までの範囲の値で表します。これは端末の前後方向の動きを表します。

`DeviceOrientationEvent.gamma` 読取専用 

数値で、端末の Z 軸の回転量を表し、 -90 （含む）から 90 （含まない）までの範囲の値で表します。これは端末の左右方向の動きを表します。

`DeviceOrientationEvent.webkitCompassHeading` 
Non-standard
 読取専用 

数値で、ワールドシステムの Z 軸を中心とした端末の動きと北の方向との差を表し、 0 から 360 の範囲の値で度数で表します。

`DeviceOrientationEvent.webkitCompassAccuracy` 
Non-standard
 読取専用 

コンパスの精度で、偏差が正の値または負の値を意味しています。通常は 10 です。

例
-


```js
window.addEventListener("deviceorientation", (event) => {
  console.log(`${event.alpha} : ${event.beta} : ${event.gamma}`);
});
```

仕様書
---

| Specification |
| --- |
| DeviceOrientation Event Specification # deviceorientation |

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

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

関連情報
----

* `deviceorientation`
* `DeviceMotionEvent`
* `devicemotion`
* 端末の方向の検出
* 方向および動きとして示されるデータ
PerformanceMark
===============

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

PerformanceEntry

PerformanceMarkプロパティ
-----

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

`PerformanceEntry.entryType`

"`mark`" を返します。

`PerformanceEntry.name`

マークが`performance.mark()` を呼び出して作成されたときに付けられた名前を返します。

`PerformanceEntry.startTime`

`performance.mark()` が呼び出されたときに `DOMHighResTimeStamp` を返します。

`PerformanceEntry.duration`

"`0`" を返します (マークには*期間*がありません)

メソッド
----

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

例
-

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

仕様書
---

| Specification |
| --- |
| User Timing # performancemark |

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

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

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

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

歴史的な理由から、`Window` オブジェクトは `window.HTMLDocument` プロパティを持ち、その値は `Document` インターフェイスです。つまり、`HTMLDocument` は `Document` の別名と考えることができ、`HTMLDocument` のメンバーのドキュメントは `Document` インターフェイスのドキュメントの下で見つかります。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmldocument |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
クリップボード API
===========

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
**クリップボード API** は、クリップボードのコマンド (切り取り、コピー、貼り付け) に応答する機能や、システムクリップボードの非同期の読み取りや書き込みを行う機能を提供します。

**メモ:** この API はウェブワーカーでは利用できません。（`WorkerNavigator` に公開されていません）。

この API は、 `document.execCommand()` を使用したクリップボードへのアクセスを置き換えるように設計されています。

**メモ:** **クリップボード**は、短期間のデータ保存やデータ転送に使用されるデータバッファで、文書間やアプリケーション間で使用することができます。
 通常、無名で一時的なデータバッファーとして実装されており、ペーストバッファーと呼ばれることもあります。環境内のほとんどまたはすべてのプログラムから定義されたプログラミングインターフェイスを通じてアクセス可能です。


一般的なアプリケーションでは、これらのインターフェイスに対して、キーバインド、メニュー選択などのユーザー入力を対応付けることでクリップボード機能にアクセスします。

クリップボードへのアクセス
-------------

`Clipboard` オブジェクトをインスタンス化して生成するのではなく、グローバル変数の `Navigator.clipboard` を通してシステムクリップボードにアクセスすることができます。


```js
navigator.clipboard
  .readText()
  .then(
    (clipText) => (document.querySelector(".editor").innerText += clipText),
  );
```


このスニペットはクリップボードからテキストを読み取り、最初に見つかった `editor` クラスを持つ要素に追加します。 `readText()` (および場合によっては `read()`) はクリップボードにテキストがないときには空文字列を返すので、このコードは安全です。

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

`Clipboard` 安全なコンテキスト用

システムクリップボードに対してテキストやデータを読み書きするインターフェイスを提供します。これは仕様書では「非同期クリップボード API」と呼ばれています。

`ClipboardEvent` 安全なコンテキスト用

クリップボードの変更に関する情報を提供するイベント、すなわち `cut`, `copy`, `paste` イベントを表します。これは仕様書では「クリップボードイベント API」と呼ばれています。

`ClipboardItem` 安全なコンテキスト用

データの読み書きの際に使用する単一項目形式を表します。

仕様書
---

| Specification |
| --- |
| Clipboard API and events # clipboard-interface |
| Clipboard API and events # clipboard-event-interfaces |
| Clipboard API and events # clipboarditem |

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

### api.Clipboard

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

### api.ClipboardEvent

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

### api.ClipboardItem

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

関連情報
----

* Async Clipboard API demo on Glitch
* Image support for Async Clipboard article
XSLTProcessor
=============

**`XSLTProcessor`** は、XSLT スタイルシート変換を XML 文書に適用して、新しい XML 文書を出力として生成します。 XSLT スタイルシートをロードし、 `<xsl:param>` 引数の値を操作し、変換処理を文書に適用するメソッドを持っています。

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

`XSLTProcessor()` (en-US)

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

メソッド
----

`XSLTProcessor.importStylesheet()` (en-US)

XSLT スタイルシートをインポートします。指定されたノードがドキュメントノードの場合は、完全な XSL Transform またはリテラルの結果要素の変換を渡すことができます。それ以外の場合は、`<xsl:stylesheet>` または `<xsl:transform>` 要素でなければなりません。

`XSLTProcessor.transformToFragment()` (en-US)

`XSLTProcessor.importStylesheet()` (en-US) 関数を使用してインポートしたスタイルシートを適用して、ノードソースを変換します。結果として得られる文書フラグメントの文書オーナーは所有者ノードです。

`XSLTProcessor.transformToDocument()` (en-US)

`XSLTProcessor.importStylesheet()` (en-US) 関数を使用してインポートされたスタイルシートを適用して、ノードソースを変換します。

結果のオブジェクトはスタイルシートのメソッド出力に依存します。

| メソッド出力 | 結果の型 |
| --- | --- |
| `html` | `HTMLDocument` |
| `xml` | `XMLDocument` |
| `text` | `XMLDocument` と単一のルート要素 `<transformiix:result>` に子としてテキストがついたもの |

`XSLTProcessor.setParameter()` (en-US)

インポートされた XSLT スタイルシートに引数を設定します。 (`<xsl:param>` の値を設定します)。`namespaceURI` の値が null の場合は、空の文字列と同じように扱われます。

`XSLTProcessor.getParameter()` (en-US)

XSLT スタイルシートから引数の値を取得します。 `namespaceURI` の値が null の場合は、空の文字列と同じように扱われます。

`XSLTProcessor.removeParameter()` (en-US)

パラメータが以前に設定されていた場合は削除します。これにより、`XSLTProcessor` はスタイルシートで指定されたパラメータの既定値を使用します。`namespaceURI` の値が null の場合は、空の文字列と同じように扱われます。

`XSLTProcessor.clearParameters()` (en-US)

`XSLTProcessor` からすべての設定パラメータを削除します。 `XSLTProcessor` は XSLT スタイルシートで指定されているデフォルトを使用します。

`XSLTProcessor.reset()` (en-US)

すべてのパラメータとスタイルシートを `XSLTProcessor` から削除します。

プロパティ
-----

*このインターフェイスにはプロパティがありません。*

例
-

1. 基本的な例
2. 高度な例
3. 追加の例
仕様書
---

| Specification |
| --- |
| DOM Standard # interface-xsltprocessor |

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

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

関連情報
----

* Mozilla JavaScript インターフェイスを使用した XSL 変換
InputEvent
==========

Baseline 2023
-------------

Newly availableSince March 2023, 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
**`InputEvent`** インターフェイスは、編集可能なコンテンツが変更されたことを通知するイベントを表します。

Event

UIEvent

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

`InputEvent()`

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

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

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

`InputEvent.data` 読取専用 

文字列で、挿入された文字を返します。変更により挿入されたテキストがない（例えば文字を削除した）場合は、空文字列になることがあります。

`InputEvent.dataTransfer` 読取専用 

編集可能なコンテンツに追加されたリッチテキストまたはプレーンテキストデータ、あるいは削除されたプレーンテキストデータに関する情報を保持する `DataTransfer` オブジェクトを返します。

`InputEvent.inputType` 読取専用 

テキストの挿入、削除、書式設定など、編集可能なコンテンツに対する変更の種類を返します。

`InputEvent.isComposing` 読取専用 

論理値で、イベントが `compositionstart` の後かつ `compositionend` の前に発生したかを示す値を返します。

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

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

`InputEvent.getTargetRanges()`

入力イベントが取り消されない場合、DOM の変更に影響される静的範囲を配列で返します。

仕様書
---

| Specification |
| --- |
| Input Events Level 2 # interface-InputEvent |
| UI Events # interface-inputevent |

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

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

関連情報
----

* `beforeinput` イベント
* `input` イベント
HTMLUnknownElement
==================

**`HTMLUnknownElement`** インターフェイスは不正な HTML 要素である事を表します。`HTMLElement` インターフェイスを継承しますが、追加のメソッドやプロパティは実装しません。

プロパティ
-----

固有プロパティはありません。`HTMLElement` インターフェイスから継承するプロパティのみ利用可能です。

メソッド
----

固有メソッドはありません。`HTMLElement` インターフェイスから継承するメソッドのみ利用可能です。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlunknownelement |

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

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

関連情報
----

* このインターフェイスを持つ非標準要素及び廃止要素 : `<bgsound>` 、 `<isindex>` 、 `<multicol>` 、 `<nextid>` 、 `<rb>` 、 `<spacer>`
BroadcastChannel
================

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
**`BroadcastChannel`** インターフェイスは、特定のオリジンの閲覧コンテキストが加入できる名前付きチャンネルを表します。これにより、同じオリジンの異なる文書間（異なるウィンドウ、タブ、フレーム、iframe）の通信を可能にします。 メッセージは、チャンネルに参加しているすべての `BroadcastChannel` オブジェクトで発生する `message` イベントを介して配信されます。

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

EventTarget

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

`BroadcastChannel()`

名前付きチャンネルにリンクするオブジェクトを作成します。

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

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

`BroadcastChannel.name` 読取専用 

チャンネルの名前を表す文字列を返します。

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

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

`BroadcastChannel.postMessage()`

同じチャンネルに参加しているそれぞれの `BroadcastChannel` オブジェクトに、任意の種類のオブジェクトのメッセージを送信します。

`BroadcastChannel.close()`

チャンネルオブジェクトを閉じます。 これは、新しいメッセージを取得しないことを示し、最終的にガベージコレクションされることを許可します。

イベント
----

`message`

 メッセージがチャンネルに到着したときに発生します。
 `onmessage` プロパティからも利用できます。


`messageerror`

 逆シリアル化できないメッセージが到着したときに発生します。
 `onmessageerror` プロパティからも利用できます。


仕様書
---

| Specification |
| --- |
| HTML Standard # broadcasting-to-other-browsing-contexts |

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

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

関連情報
----

* 閲覧コンテキスト間で通信するための、もう一つの重量級の方法: `ServiceWorker`.
* ブロードキャストチャンネル API の概要
USBOutTransferResult
====================

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

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

`USBOutTransferResult()` 
Experimental

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

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

`USBOutTransferResult.bytesWritten` 読取専用  
Experimental

転送要求によりデバイスに送られたバイト数を返します。

`USBOutTransferResult.status` 読取専用  
Experimental

転送要求の状態を返します。以下のいずれかです。

* `"ok"` — 転送は成功しました。
* `"stall"` — デバイスはエンドポイントでストール状態を発生させ、エラーを示しました。バルクエンドポイントやインタラプトエンドポイントでのストールは、次の `transferOut()` の呼び出しの前に `clearHalt()` を呼び出してクリアする必要があります。

仕様書
---

| Specification |
| --- |
| WebUSB API # usbouttransferresult |

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

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

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

WebGPU API の **`WGSLLanguageFeatures`** インターフェイスは、この WebGPU の実装が対応している WGSL 言語の拡張を報告する Set 風オブジェクトです。

`WGSLLanguageFeatures` オブジェクトは `GPU.wgslLanguageFeatures` プロパティ経由で参照します。

**メモ:** API をサポートしているすべてのブラウザーの WebGPU ですべての WGSL 言語の拡張が使えるわけではありません。使うことにした拡張をすべて徹底的にテストすることを推奨します。

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

利用可能な WGSL 言語の拡張は実装や物理デバイスによって異なる可能性があり、時間の経過によっても変わる可能性があります。そのため、ここでは列挙しません。完全なリストは、WGSL の仕様書内の WGSL 言語の拡張を参照してください。

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

以下のプロパティは、すべての読み取り専用の Set 風オブジェクトで使用可能です。

`size` 
Experimental

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

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

以下のメソッドは、すべての読み取り専用の Set 風オブジェクトで使用可能です。

`has()` 
Experimental

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

`values()` 
Experimental

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

`keys()` 
Experimental

`values()` の別名です。

`entries()` 
Experimental

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

`forEach()` 
Experimental

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

例
-


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

const wgslFeatures = navigator.gpu.wgslLanguageFeatures;

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

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

// ...
```

仕様書
---

| Specification |
| --- |
| WebGPU # gpuwgsllanguagefeatures |

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

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

関連情報
----

* WebGPU API
HTMLLIElement
=============

**`HTMLLIElement`** インターフェイスは、（継承によって使用できる通常の `HTMLElement` インターフェイスのものに加えて）リスト要素を操作するための特別なプロパティを提供します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLLIElement.type` 
非推奨

文字列で、箇条書き記号の種類を `"disc"`, `"square"`, `"circle"` のいずれかで表します。リストの種別を定義する標準の方法は CSS の `list-style-type` プロパティによる方法なので、スクリプトから設定する場合は CSSOM のメソッドを使用してください。

`HTMLLIElement.value`

`long` 型で、 `<ol>` の内部での*リスト要素*の位置を順序で示します。これは HTML の `<li>` 要素の `value` 属性を反映しています。 `0` より小さくすることもできます。 `<li>` 要素が `<ol>` 要素の子である場合、このプロパティは意味を持ちません。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmllielement |

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

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

関連情報
----

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

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

**`KeyboardLayoutMap`** はキーボード API のインターフェイスで、読み取り専用のオブジェクトであり、特定の物理キーに関連付けられた文字列を取得するための関数を備えています。

`KeyboardLayoutMap` インスタンスは読み取り専用の `Map` 風オブジェクトであり、各キーはキーボード上の固有の物理キーを識別する文字列（「キーコード」）であり、対応する値は関連するキー属性値（キーボードレイアウトナドによって影響を受ける可能性があります）です。

有効なキーの一覧は UI Events KeyboardEvent code Values 仕様にあります。

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

`KeyboardLayoutMap.entries` 読取専用  
Experimental

指定されたオブジェクト自身の列挙可能なプロパティ `[key, value]` ペアの配列を、 `for...in` ループで指定されたものと同じ順序で返します（`for-in` ループでは、プロトタイプチェーン内のプロパティも列挙される点が異なります）。

`KeyboardLayoutMap.keys` 読取専用  
Experimental

配列の各インデックスのキーを格納した新しい配列イテレーターオブジェクトを返します。

`KeyboardLayoutMap.size` 読取専用  
Experimental

`KeyboardLayoutMap` オブジェクトの要素数を返します。

`KeyboardLayoutMap.values` 読取専用  
Experimental

`KeyboardLayoutMap` オブジェクトの各インデックスの値を格納した新しい配列イテレーターオブジェクトを返します。

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

`KeyboardLayoutMap.forEach()` 読取専用  
Experimental

指定された関数を `KeyboardLayoutMap` の各要素に対して一度ずつだけ実行します。

`KeyboardLayoutMap.get()` 
Experimental

`KeyboardLayoutMap` オブジェクトから、指定されたキーを持つ要素を返します。

`KeyboardLayoutMap.has()` 
Experimental

`KeyboardLayoutMap` オブジェクトに指定したキーを持つ要素があるかどうかを示す論理値を返します。

例
-

次の例は、英語の QWERTY キーボードの 'W' キーに対応する場所またはレイアウトに依存した文字列を取得する方法を示しています。


```js
const keyboard = navigator.keyboard;
keyboard.getLayoutMap().then((keyboardLayoutMap) => {
  const upKey = keyboardLayoutMap.get("KeyW");
  window.alert(`Press ${upKey} to move up.`);
});
```

仕様書
---

| Specification |
| --- |
| Keyboard Map # keyboardlayoutmap-interface |

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

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

`CSSRuleList` は読み取り専用の `CSSRule` オブジェクトの順序付きコレクションを表します。

`CSSRuleList` オブジェクトは読み取り専用であり、直接変更することはできませんが、内容が変化していくことがあるので `live` オブジェクトと見なされます。

`CSSRule` オブジェクトが返す基本ルールを編集するには、 `CSSStyleSheet` のメソッドである `CSSStyleSheet.insertRule()` と `CSSStyleSheet.deleteRule()` を使用します。

このインターフェイスにはコンストラクターがありません。 `CSSRuleList` のインスタンスは `CSSStyleSheet.cssRules` と `CSSKeyframesRule.cssRules` から返却されます。

プロパティ
-----

`CSSRuleList.length`読取専用 

このコレクション内の `CSSRule` オブジェクトの数を表す整数を返します。

メソッド
----

`CSSRuleList.item()`

単一の `CSSRule` を取得します。

例
-

以下の例には、 3 つのルールがあるスタイルシートがあります。 `CSSStyleSheet.cssRules` を使用すると `CSSRuleList` を返し、それがコンソールに出力されます。

リスト内のルールの数は、 `CSSRuleList.length` を使用してコンソールに出力されます。最初の `CSSRule` は `0` を `CSSRuleList.item` の引数に指定することで返されます。この例では `body` セレクターのルールセットが返されます。

### CSS


```css
body {
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  margin: 2em;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
}

.container > \* {
  background-color: #3740ff;
  color: #fff;
}
```

### JavaScript


```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules);
console.log(myRules.length);
console.log(myRules[0]);
```

仕様書
---

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

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

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

関連情報
----

* `CSSRule`
Magnetometer
============

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

Sensor APIs の **`Magnetometer`** インターフェイスは、デバイスのプライマリー磁気センサーで検出される磁場の情報を提供します。

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

EventTarget

Sensor

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

`Magnetometer()` 
Experimental

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

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

`Magnetometer.x` 読取専用  
Experimental

デバイスの x 軸方向の磁場を表す `double` 値を返します。

`Magnetometer.y` 読取専用  
Experimental

デバイスの y 軸方向の磁場を表す `double` 値を返します。

`Magnetometer.z` 読取専用  
Experimental

デバイスの z 軸方向の磁場を表す `double` 値を返します。

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

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

イベント
----

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

例
-

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


```js
let magSensor = new Magnetometer({ frequency: 60 });

magSensor.addEventListener("reading", (e) => {
  console.log(`X 軸方向の磁場 ${magSensor.x}`);
  console.log(`Y 軸方向の磁場 ${magSensor.y}`);
  console.log(`Z 軸方向の磁場 ${magSensor.z}`);
});
magSensor.start();
```

仕様書
---

| Specification |
| --- |
| Magnetometer # magnetometer-interface |

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

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