Document.compatMode - Web API

Document.compatMode
===================

**`Document.compatMode`** プロパティは、文書が Quirks モード (互換モード) か標準準拠モードのどちらで表示されているかを示します。

構文
--
```

const mode = document.compatMode
```

### 値

列挙値で、次の値を取ります。

* "`BackCompat`" 文書が互換モードの場合。
* "`CSS1Compat`" 文書が互換モードでない ("standards" モードとも呼ばれる) または限定互換モード ("almost standards" モードとも呼ばれる) 場合。

**メモ:** これらのモードはすべて標準で定義されましたので、より古い "standards" および "almost standards" の名前は無意味であり、もう標準では使用されません。

例
-

```js
if (document.compatMode == "BackCompat") {
  // 互換モード
}
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-compatmode① |

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

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


Document.enableStyleSheetsForSet() - Web API

Document.enableStyleSheetsForSet()
==================================

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

現在のスタイルシートセットの中で指定された名前に一致するスタイルシートを有効化し、それ以外のスタイルシートを (常に有効になるタイトルなしのものを除いて) 無効化します。

構文
--

```js
enableStyleSheetsForSet(name);
```

### 引数

`name`

有効にするスタイルシートの名前。この名前に一致する題名を持ったスタイルシートはすべて有効化され、他の題名を持つスタイルシートは無効化されます。引数 *name* に空文字列を指定すると、すべての代替および推奨スタイルシートを無効化します (常設スタイルシート、つまり、 `title` 属性がないものを除く)。

### 返値

なし (`undefined`)。

メモ
--

* 題名は大文字と小文字を区別して照合します。
* このメソッドに `null` の *name* を指定して呼び出しても効果はありません。すべての代替および推奨スタイルシートを無効化したいのであれば、空文字列 "" を渡す**必要があります**。
* 題名がないスタイルシートは、このメソッドの影響を受けません。
* このメソッドは `document.lastStyleSheetSet` や `document.preferredStyleSheetSet` の値に影響しません。
例
-

```js
document.enableStyleSheetsForSet("Some style sheet set name");
```

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

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

関連情報
----

* `Stylesheet`
* `Document.styleSheets`
* `document.lastStyleSheetSet`
* `document.preferredStyleSheetSet`
* `document.selectedStyleSheetSet`
* `document.enableStyleSheetsForSet()`
* 外部スタイルシートでタイトルを正しく使用する


サーバー送信イベントの使用 - Web API

サーバー送信イベントの使用
=============

サーバー送信イベント (Server-Sent Events) を使用するウェブアプリケーションの開発は簡単です。サーバー上でフロントエンドへイベントを流すために必要になるコードはわずかですが、クライアント側のコードはウェブソケットで入ってくるイベントを扱う部分とほぼ同じ動作をします。これは単方向の接続ですので、クライアントからサーバーへイベントを送信することはできません。

サーバからのイベントの受信
-------------

サーバー送信イベント API は `EventSource` インターフェイスに含まれています。イベントを受け取るためにサーバへの接続を開始するには、新たな `EventSource` オブジェクトを作成し、イベントを生成するスクリプトの URI を指定します。例を挙げます。

```js
const evtSource = new EventSource("ssedemo.php");
```

イベントを生成するスクリプトが別のオリジンに存在する場合は、 新しい `EventSource` オブジェクトを作成し、 URI とオプション辞書の両方を指定する必要があります。例えば、クライアントスクリプトが `example.com` にある場合は次のようになります。

```js
const evtSource = new EventSource("//api.example.com/ssedemo.php", {
  withCredentials: true,
});
```

イベントソースのインスタンスを起動したら、 `message` イベントのハンドラーを取り付けて、サーバーからのメッセージを待ち受けすることができます。

```js
evtSource.onmessage = function (event) {
  const newElement = document.createElement("li");
  const eventList = document.getElementById("list");

  newElement.textContent = "message: " + event.data;
  eventList.appendChild(newElement);
};
```

このコードは入力メッセージ（すなわち `event` フィールドを持たない、サーバーからの通知）を受信して、メッセージのテキストを文書の HTML にあるリストへ追加します。

`addEventListener()` を使用してイベントを待ち受けすることもできます。

```js
evtSource.addEventListener("ping", function (event) {
  const newElement = document.createElement("li");
  const eventList = document.getElementById("list");
  const time = JSON.parse(event.data).time;
  newElement.textContent = "ping at " + time;
  eventList.appendChild(newElement);
});
```

前のコードと似ていますが、`event` フィールドに "ping" が設定されたメッセージがサーバーから送られたときに、自動的に呼び出されることが異なります。こちらは `data` フィールドの JSON を解釈して、情報を出力します。

**警告:** **HTTP/2 上で使用されていない**場合、 SSE は開くことができる接続の最大数に制限を受けます。この制限は*ブラウザー単位*で設定されており、非常に小さい数 (6) に設定されているため、複数のタブを開くと特に痛みを伴う場合があります。この問題は、 Chrome と Firefox で「修正予定なし」と示されています。この制限はブラウザー + ドメインごとに設定されており、`www.example1.com` への SSE 接続をすべてのタブで 6 つ、 `www.example2.com` への SSE 接続をさらに 6 つ開くことができることを意味します（Stackoverflow によれば）。 HTTP/2 を使用する場合、同時に使用することができる *HTTP ストリーム*の最大数は、サーバーとクライアントの間で交渉が行われます（既定値は 100 です）。

サーバからのイベントの送信
-------------

イベントを送信するサーバー側のスクリプトは、 MIME タイプ `text/event-stream` で応答する必要があります。個々の通知は、 2 つの改行で終わるテキストのブロックとして送信されます。イベントストリームの形式について、詳しくはイベントストリーム形式をご覧ください。

この例で使用している PHP は次の通りです。

```php
date\_default\_timezone\_set("America/New\_York");
header("Cache-Control: no-store");
header("Content-Type: text/event-stream");

$counter = rand(1, 10);
while (true) {
  // "ping" イベントを毎秒送信

  echo "event: ping\n";
  $curDate = date(DATE\_ISO8601);
  echo 'data: {"time": "' . $curDate . '"}';
  echo "\n\n";

  // シンプルなメッセージをランダムな間隔で送信

  $counter--;

  if (!$counter) {
    echo 'data: This is a message at time ' . $curDate . "\n\n";
    $counter = rand(1, 10);
  }

  ob\_end\_flush();
  flush();

  // クライアントが接続を中止したら（ページを閉じたら）ループから抜ける

  if ( connection\_aborted() ) break;

  sleep(1);
}
```

 上記のコードは、イベント種別が "ping" のイベントを毎秒生成します。それぞれのイベントのデータは、 JSON オブジェクトで、イベントが生成された時刻を ISO 8601 形式のタイムスタンプで表します。またランダムな間隔で、単純なメッセージ（イベント種別なし）を送信します。
 ループは接続状態にかかわらず実行し続けられますので、接続が閉じられたとき（例えばクライアントがページを閉じたとき）にループから脱出するためのチェックが含まれています。

**メモ:** この記事にあるコードを使用した完全な例が GitHub にあります。 Simple SSE demo using PHP を参照してください。

エラー処理
-----

問題が発生した場合（ネットワークのタイムアウトやアクセス制御に関する問題など）は、エラーイベントが生成されます。これをプログラムで処理するには、 `onerror` コールバックを `EventSource` に実装してください。

```js
evtSource.onerror = function (err) {
  console.error("EventSource failed:", err);
};
```

イベントストリームを閉じる
-------------

既定では、クライアントとサーバーの間の接続を閉じると、接続が再起動します。接続は `.close()` メソッドで終了します。

```js
evtSource.close();
```

イベントストリームの形式
------------

イベントストリームは単純なテキストデータのストリームで、 UTF-8 でエンコードされていなければなりません。イベントストリームのメッセージは、 2 つの改行文字で区切られます。行の先頭の文字がコロンであった場合はコメントとみなされ、無視されます。

**メモ:** コメント行を使用して、接続がタイムアウトになることを防ぐことができます。サーバーは接続を維持するために、定期的にコメントを送信することがあります。

それぞれのメッセージは、そのメッセージのフィールドを列挙した 1 行以上のテキストで構成されています。各フィールドは、フィールド名、コロン、そのフィールドの値のテキストデータで表現されます。

### フィールド

受信した各メッセージには、以下のフィールドの組み合わせが、 1 行 1 つで現れます。

`event`

記述されるイベントの種別を識別する文字列です。指定された場合、イベントはブラウザー内で、指定されたイベント名のイベントリスナーへ送られます。ウェブサイトのソースコードで名前付きイベントを待ち受けするには `addEventListener()` を使用してください。メッセージにイベント名が指定されなかった場合は、 `onmessage` ハンドラーが呼び出されます。

`data`

メッセージのデータフィールドです。 `EventSource` が `data:` で始まる、複数の連続した行を受け取ったときは、それらを連結して各項目の間に改行文字を挿入します。末尾の改行は取り除かれます。

`id`

`EventSource` (en-US) オブジェクトの最後のイベント ID の値に設定するイベント ID です。

`retry`

再接続時間です。サーバーへの接続が切れた場合、ブラウザーは指定した時間だけ待ってから再接続を試みます。これは整数値でなければならず、再接続時間をミリ秒単位で指定します。整数値以外が指定された場合は、このフィールドは無視されます。

他のフィールド名は、すべて無視されます。

**メモ:** 行にコロンが含まれない場合は行全体がフィールド名とし、値は空文字列として扱います。

### 例

#### データのみのメッセージ

以下の例では、3 つのメッセージが送信されています。最初のメッセージはコロン文字から始まっているため、コメントです。前述したように、コメントはメッセージが定期的に送信されない可能性がある場合のキープアライブとして利用できます。

2 番目のメッセージには data フィールドがあり、その値は "some text" です。 3 番目のメッセージは data フィールドで、値は "another message\nwith two lines" です。値に改行文字があることに注意してください。

```bash
: this is a test stream

data: some text

data: another message
data: with two lines
```

#### 名前付きイベント

こちらの例では、名前付きイベントをいくつか送信しています。それぞれのイベントではイベント名が `event` フィールドで指定されており、また `data` フィールドではクライアントでの処理に必要なデータを含む、適切な JSON 文字列の値が指定されています。もちろん、 `data` フィールドには任意の文字列データを入れることができます。 JSON である必要はありません。

```bash
event: userconnect
data: {"username": "bobby", "time": "02:33:48"}

event: usermessage
data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}

event: userdisconnect
data: {"username": "bobby", "time": "02:34:23"}

event: usermessage
data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."}
```

#### 組み合わせ

名前なしのメッセージや種類の付いたイベントだけを使用しなければならない訳ではありません。これらを単一のイベントストリーム内で混用することができます。

```bash
event: userconnect
data: {"username": "bobby", "time": "02:33:48"}

data: Here's a system message of some kind that will get used
data: to accomplish some task.

event: usermessage
data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
```

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

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


InputDeviceCapabilities: firesTouchEvents プロパティ - Web API

InputDeviceCapabilities: firesTouchEvents プロパティ
===============================================

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

**`InputDeviceCapabilities.firesTouchEvents`** は読み取り専用プロパティで、機器がタッチイベントを配信されるかどうかを示す論理値を返します。

このプロパティを使用して、すでにタッチイベントハンドラーによって処理されている可能性のあるアクションを表すマウスイベントを検出することができます。これは必ずしも機器がタッチ画面であることを意味しているわけではありません。例えば、スタイラスやマウス機器は通常、モバイルブラウザー上でタッチイベントを生成します。

構文
--

```js
const boolean = InputDeviceCapabilities.firesTouchEvents
```

### 返値

論理値 (`Boolean`) です。

例
-

```js
myButton.addEventListener("mousedown", (e) => {
  if (!e.sourceCapabilities.firesTouchEvents) myButton.classList.add("pressed");
});
```

仕様書
---

| Specification |
| --- |
| Input Device Capabilities # dom-inputdevicecapabilities-firestouchevents |

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

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


InputDeviceCapabilities: InputDeviceCapabilities() コンストラクター - Web API

InputDeviceCapabilities: InputDeviceCapabilities() コンストラクター
===========================================================

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

`InputDeviceCapabilities()` コンストラクターは新しい `InputDeviceCapabilities` オブジェクトを作成し、タッチイベントを生成する物理機器に関する情報を提供します。

構文
--

```js
new InputDeviceCapabilities()
new InputDeviceCapabilities(InputDeviceCapabilitiesInit)
```

### 返値

`InputDeviceCapabilities` インターフェイスのインスタンスです。

### 引数

`InputDeviceCapabilitiesInit` 省略可

一連の機器能力を格納する辞書オブジェクト。以下のプロパティを持ちます。

* `fireTouchEvents`: 機器でタッチイベントが配信されるかどうかを示す論理値です。

仕様書
---

| Specification |
| --- |
| Input Device Capabilities # dom-inputdevicecapabilities-constructor |

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

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


PopStateEvent: PopStateEvent() コンストラクター - Web API

PopStateEvent: PopStateEvent() コンストラクター
=======================================

**`PopStateEvent()`** コンストラクターは、新しい `PopStateEvent` オブジェクトを生成します。

**メモ:** ウェブ開発者は通常このコンストラクタを呼び出す必要はありません。ブラウザーは `popstate` イベントを発行するときにこれらのオブジェクトを生成するからです。

構文
--

```js
new PopStateEvent(type, options)
```

### 引数

`type`

 イベントの名前の文字列です。
 大文字と小文字は区別され、ブラウザーはこれを `popstate` に設定します。

`options` 省略可

オブジェクトで、 *`Event()` で定義されているプロパティに加えて*、以下のプロパティがあります。

`state` 省略可

状態を表すオブジェクトです。実質的には `history.pushState()` または `history.replaceState()` の呼び出しで指定された値です。設定されていない場合、既定値は `null` です。

### 返値

新しい `PopStateEvent` オブジェクトです。

仕様書
---

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

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

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

関連情報
----

* `history.pushState()`
* `history.replaceState()`
* `popstate` イベント


PopStateEvent: state プロパティ - Web API

PopStateEvent: state プロパティ
==========================

**`state`** は `PopStateEvent` インターフェイスの読み取り専用プロパティで、このイベントが生成されたときに格納された状態を表します。

実質的には、 `history.pushState()` または `history.replaceState()` の呼び 出しによって指定された値です。

値
-

オブジェクト、または `null` です。

例
-

以下のコードでは、 `pushState()` メソッドを使って値を履歴にプッシュしたときの `state` の値を記録しています。

```js
// Log the state of
addEventListener("popstate", (event) => {
  console.log("State received: ", event.state);
});

// Now push something on the stack
history.pushState({ name: "Example" }, "pushState example", "page1.html");
history.pushState(
  { name: "Another example" },
  "pushState example",
  "page1.html",
);
```

次のようにログ出力します。
```

State received: { name: "Example" }
State received: { name: "Another example" }
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-popstateevent-state-dev |

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

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

関連情報
----

* `PopStateEvent()` コンストラクター
* `History.state`


VRDisplay.getImmediatePose() - Web API

VRDisplay.getImmediatePose()
============================

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

**`getImmediatePose()`** は `VRDisplay` インターフェイスのメソッドで、 `VRDisplay` の現在のポーズを定義した `VRPose` オブジェクトを返します。

**メモ:** このプロパティは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

構文
--

```js
getImmediatePose();
```

### 引数

なし．

### 返値

`VRPose` オブジェクトです。

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

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

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

関連情報
----

* WebVR API


VRDisplay.stageParameters - Web API

VRDisplay.stageParameters
=========================

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

**`stageParameters`** は `VRDisplay` インターフェイスの読み取り専用プロパティで、 `VRDisplay` がルームスケール体験をサポートしている場合に、ルームスケールパラメーターを持つ `VRStageParameters` オブジェクトを返します．

**メモ:** このプロパティは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

### 値

`VRDisplay` のルームスケールパラメーターを持つ `VRStageParameters` オブジェクトです。 `VRDisplay` がルームスケール体験をサポートしていない場合は `null` です。

例
-

例については `VRStageParameters` を参照してください。

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

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

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

関連情報
----

* WebVR API


VRDisplay.resetPose() - Web API

VRDisplay.resetPose()
=====================

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

**`resetPose()`** は `VRDisplay` インターフェイスのメソッドで、`VRDisplay` のポーズをリセットして、現在の `VRPose.position` と `VRPose.orientation` を "原点/ゼロ位置" の値として扱います。

**メモ:** このプロパティは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

`resetPost()` を呼出した後は、 `VRDisplay.getPose()`/`VRDisplay.getImmediatePose()` から返された未来予測ポーズは、`resetPose()` が最後に呼び出された時点からの相対的な `VRDisplay` の位置になります。また、`resetPose()` が最後に呼び出された時点の VR ディスプレイのヨー (yaw) を前方として扱います。

VRDisplay の報告されるロール (roll) とピッチ (pitch) は重力に対して相対的なので `resetPose()` を呼んでも変化しません。 `resetPose()` を呼び出すと `VRStageParameters.sittingToStandingTransform` 行列が変更される場合があります。

構文
--

```js
resetPose();
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

```js
// Assuming vrDisplay already contains a VRDisplay object,
// and we have a <button> referenced inside btn
btn.addEventListener("click", function () {
  vrDisplay.resetPose();
  console.log("Current pose set as origin/center");
});
```

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

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

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

関連情報
----

* WebVR API


VRDisplay.getFrameData() - Web API

VRDisplay.getFrameData()
========================

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

**`getFrameData()`** は `VRDisplay` インターフェイスのメソッドで、 `VRFrameData` オブジェクトを受け取り、現在のフレームをレンダリングするために必要な情報を入力します。

**メモ:** このプロパティは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

現在のフレームの `VRPose` とビューおよび投影行列が含まれます。

構文
--

```js
getFrameData(frameData);
```

### 引数

`frameData`

入力したい `VRFrameData` オブジェクトを指定します。

### 返値

論理値です。 — `VRFrameData` オブジェクトへの入力が成功した場合は `true` を返し、失敗した場合は `false` を返します。

例
-

```js
var frameData = new VRFrameData();
var vrDisplay;

navigator.getVRDisplays().then(function(displays) {
  vrDisplay = displays[0];
  console.log('Display found');
  // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
  btn.addEventListener('click', function() {
    vrDisplay.requestPresent([{ source: canvas }]).then(function() {
      drawVRScene();
    });
  });
});

// WebVR: Draw the scene for the WebVR display.
function drawVRScene() {
  // WebVR: Request the next frame of the animation
  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);

  // Populate frameData with the data of the next frame to display
  vrDisplay.getFrameData(frameData);

  // You can get the position, orientation, etc. of the display from the current frame's pose
  // curFramePose is a VRPose object
  var curFramePose = frameData.pose;
  var curPos = curFramePose.position;
  var curOrient = curFramePose.orientation;

  // Clear the canvas before we start drawing on it.

  gl.clear(gl.COLOR\_BUFFER\_BIT | gl.DEPTH\_BUFFER\_BIT);

  // WebVR: Create the required projection and view matrix locations needed
  // for passing into the uniformMatrix4fv methods below

  var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix");
  var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");

  // WebVR: Render the left eye's view to the left half of the canvas
  gl.viewport(0, 0, canvas.width \* 0.5, canvas.height);
  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
  drawGeometry();

  // WebVR: Render the right eye's view to the right half of the canvas
  gl.viewport(canvas.width \* 0.5, 0, canvas.width \* 0.5, canvas.height);
  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix);
  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
  drawGeometry();

  function drawGeometry() {
    // draw the view for each eye
  }

    ...

  // WebVR: Indicate that we are ready to present the rendered frame to the VR display
  vrDisplay.submitFrame();
}
```

**メモ:** この完全なコードは raw-webgl-example で見ることができます。

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

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

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

関連情報
----

* WebVR API


VRDisplay.depthNear - Web API

VRDisplay.depthNear
===================

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

**`depthNear`** は `VRDisplay` インターフェイスのプロパティで、 eye view frustum (ビューフラスタム；つまりシーンの可視領域の境界) の near 平面を定義している z-depth の取得と設定を行います。

**メモ:** このプロパティは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

一般的には、この値をそのままにしておきますが、遅いコンピューターでパフォーマンスを向上させようとしている場合や、ニアバウンダリーをより遠くに作ることで UI が意味をなす場合などは、この値を大きくするとよいでしょう。

値
-

double 値で z-depth をメートル単位で表します。初期値は `0.01` です。

例
-

```js
var vrDisplay;

navigator.getVRDisplays().then(function (displays) {
  vrDisplay = displays[0];
  vrDisplay.depthNear = 1.0;
  vrDisplay.depthFar = 7500.0;
});
```

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

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

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

関連情報
----

* WebVR API


VRDisplay.exitPresent() - Web API

VRDisplay.exitPresent()
=======================

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

**`exitPresent()`** は `VRDisplay` インターフェイスのメソッドで、この `VRDisplay` がシーンを表示するのを停止します。

**メモ:** このプロパティは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

構文
--

```js
exitPresent();
```

### 引数

なし。

### 返値

表示が終了したら解決するプロミスです。この `VRDisplay` が、 `exitPresent()` が呼び出されたときに表示を行っていない場合、このプロミスは拒否されます。

例
-

```js
if (navigator.getVRDisplays) {
  console.log("WebVR 1.1 supported");
  // Then get the displays attached to the computer
  navigator.getVRDisplays().then(function (displays) {
    // If a display is available, use it to present the scene
    if (displays.length > 0) {
      vrDisplay = displays[0];
      console.log("Display found");
      // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
      btn.addEventListener("click", function () {
        if (btn.textContent === "Start VR display") {
          vrDisplay.requestPresent([{ source: canvas }]).then(function () {
            console.log("Presenting to WebVR display");

            // Set the canvas size to the size of the vrDisplay viewport

            var leftEye = vrDisplay.getEyeParameters("left");
            var rightEye = vrDisplay.getEyeParameters("right");

            canvas.width =
              Math.max(leftEye.renderWidth, rightEye.renderWidth) \* 2;
            canvas.height = Math.max(
              leftEye.renderHeight,
              rightEye.renderHeight,
            );

            // stop the normal presentation, and start the vr presentation
            window.cancelAnimationFrame(normalSceneFrame);
            drawVRScene();

            btn.textContent = "Exit VR display";
          });
        } else {
          vrDisplay.exitPresent();
          console.log("Stopped presenting to WebVR display");

          btn.textContent = "Start VR display";

          // Stop the VR presentation, and start the normal presentation
          vrDisplay.cancelAnimationFrame(vrSceneFrame);
          drawScene();
        }
      });
    }
  });
}
```

**メモ:** この完全なコードは raw-webgl-example で見ることができます。

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

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

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

関連情報
----

* WebVR API


VRDisplay.isPresenting - Web API

VRDisplay.isPresenting
======================

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

**`isPresenting`** は `VRDisplay` インターフェイスの読み取り専用プロパティで、 `VRDisplay` が現在コンテンツを表示中かどうかを示す論理値を返します。

**メモ:** このプロパティは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

### 値

論理値です。 `true` の場合はそのディスプレイが表示中であることを意味します。 `false` はそうではないことを示します。

例
-

```js
function onVRExitPresent() {
  // No sense in exiting presentation if we're not actually presenting.
  // (This may happen if we get an event like vrdisplaydeactivate when
  // we weren't presenting.)
  if (!vrDisplay.isPresenting) return;
  vrDisplay.exitPresent().then(
    function () {
      // Nothing to do because we're handling things in onVRPresentChange.
    },
    function (err) {
      var errMsg = "exitPresent failed.";
      if (err && err.message) {
        errMsg += "<br/>" + err.message;
      }
      VRSamplesUtil.addError(errMsg, 2000);
    },
  );
}
```

**メモ:** このコードスニペットは Google's VR Presentation demo から取ったものです。

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

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

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

関連情報
----

* WebVR API


VRDisplay.getLayers() - Web API

VRDisplay.getLayers()
=====================

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

**`getLayers()`** は `VRDisplay` インターフェイスのメソッドで、 `VRDisplay` が現在表示しているレイヤーを返します。

**メモ:** このプロパティは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

構文
--

```js
getLayers();
```

### 引数

なし．

### 返値

`VRDisplay` が表示中の場合、このメソッドは現在表示中の `VRLayerInit` オブジェクトの配列を返します（現在 `VRDisplayCapabilities.maxLayers` は常に 1 なので、これは 1 つになります）。 `VRDisplay`が表示されていない場合、このメソッドは空の配列を返します。

例
-

例については `VRLayerInit` を参照してください。

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

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

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

関連情報
----

* WebVR API


VRDisplay.requestAnimationFrame() - Web API

VRDisplay.requestAnimationFrame()
=================================

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

**`requestAnimationFrame()`** は `VRDisplay` インターフェイスのメソッドで、 `Window.requestAnimationFrame` の特別な実装です．このメソッドは `VRDisplay` がレンダリングされている間、新しいフレームが来るたびに呼び出されるコールバック関数を含みます。

**メモ:** このプロパティは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

* `VRDisplay` がシーンを表示していないときは、 `Window.requestAnimationFrame` と等価に動作します。
* `VRDisplay` が表示されている場合は、ネイティブのリフレッシュレートでコールバックが呼び出されます。
構文
--

```js
requestAnimationFrame(callback);
```

### 引数

`callback`

`VRDisplay` の表示の新しいフレームが描画されるたびに呼び出されるコールバック関数です。

### 返値

`requestAnimationFrame()` 呼び出しのハンドルを表す long です。これを `VRDisplay.cancelAnimationFrame()` 呼び出しに渡すと、コールバックの登録が解除されます。

例
-

```js
var frameData = new VRFrameData();
var vrDisplay;

navigator.getVRDisplays().then(function(displays) {
  vrDisplay = displays[0];
  console.log('Display found');
  // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
  btn.addEventListener('click', function() {
    vrDisplay.requestPresent([{ source: canvas }]).then(function() {
      drawVRScene();
    });
  });
});

// WebVR: Draw the scene for the WebVR display.
function drawVRScene() {
  // WebVR: Request the next frame of the animation
  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);

  // Populate frameData with the data of the next frame to display
  vrDisplay.getFrameData(frameData);

  // You can get the position, orientation, etc. of the display from the current frame's pose
  var curFramePose = frameData.pose;
  var curPos = curFramePose.position;
  var curOrient = curFramePose.orientation;

  // Clear the canvas before we start drawing on it.

  gl.clear(gl.COLOR\_BUFFER\_BIT | gl.DEPTH\_BUFFER\_BIT);

  // WebVR: Create the required projection and view matrix locations needed
  // for passing into the uniformMatrix4fv methods below

  var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix");
  var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");

  // WebVR: Render the left eye's view to the left half of the canvas
  gl.viewport(0, 0, canvas.width \* 0.5, canvas.height);
  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
  drawGeometry();

  // WebVR: Render the right eye's view to the right half of the canvas
  gl.viewport(canvas.width \* 0.5, 0, canvas.width \* 0.5, canvas.height);
  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix);
  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
  drawGeometry();

  function drawGeometry() {
    // draw the view for each eye
  }

    ...

  // WebVR: Indicate that we are ready to present the rendered frame to the VR display
  vrDisplay.submitFrame();
}
```

**メモ:** この完全なコードは raw-webgl-example で見ることができます。

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

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

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

関連情報
----

* WebVR API


VRDisplay.getPose() - Web API

VRDisplay.getPose()
===================

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

**`getPose()`** は `VRDisplay` インターフェイスのメソッドで、現在のフレームが実際に描画される時点の未来の `VRDisplay` の予測ポーズを決める `VRPose` オブジェクトを返します。

**メモ:** このプロパティは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

こちらでも非推奨でした。 — 代わりに `VRDisplay.getFrameData()` で `VRPose` オブジェクトを受け取ってください。

構文
--

```js
getPose();
```

### 引数

なし．

### 返値

`VRPose` オブジェクトです。

例
-

`VRDisplay` オブジェクトへの参照を得ると、ディスプレイの現在のポーズを表す `VRPose` を取得することができるようになります。

```js
if(navigator.getVRDisplays) {
  console.log('WebVR 1.1 supported');
  // Then get the displays attached to the computer
  navigator.getVRDisplays().then(function(displays) {
    // If a display is available, use it to present the scene
    if(displays.length > 0) {
      vrDisplay = displays[0];
      console.log('Display found');

          // Return the current VRPose object for the display
          var pose = vrDisplay.getPose();

          ...

    }
  });
}
```

しかし、非推奨ではない `VRFrameData` オブジェクト（`VRDisplay.getFrameData()`で取得）の `pose` プロパティを使用して、表示するためにディスプレイに送信する前に各フレームの現在の姿勢を取得することをお勧めします。これはアプリのレンダリングループの各反復処理で行われるため、ポーズデータが最新であることを確認することができます。

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

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

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

関連情報
----

* WebVR API


VRDisplay.displayName - Web API

VRDisplay.displayName
=====================

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

**`displayName`** は `VRDisplay` インターフェイスの読み取り専用プロパティで、 `VRDisplay` を識別する人間が読める名前を返します。

**メモ:** このプロパティは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

これは通常、 "Oculus VR HMD (HMD)" や "Oculus VR HMD (Sensor)" のようなものになります。

値
-

特定の VR ディスプレイの人間にとって読みやすい名前を含む文字列です。

例
-

例については `VRDisplayCapabilities` を参照してください。

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

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

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

関連情報
----

* WebVR API


VRDisplay.requestPresent() - Web API

VRDisplay.requestPresent()
==========================

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

**`requestPresent()`** は `VRDisplay` インターフェイスのメソッドで、`VRDisplay` へのシーン表示を開始します。

**メモ:** このプロパティは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

構文
--

```js
requestPresent(layers);
```

### 引数

`layers`

表示したいシーンを表す `VRLayerInit` オブジェクトの配列です。現時点では、指定できるのは最小 0 要素、最大 1 要素です。

### 返値

プレゼンテーションが開始されると解決されるプロミスです。プロミスの履行または拒否にはいくつかのルールがあります。

* `VRDisplayCapabilities.canPresent` が false の場合、または VRLayer 配列に `VRDisplayCapabilities.maxLayers` を超えるレイヤーがある場合、プロミスは拒否されます。
* `requestPresent()` が呼び出された時、 `VRDisplay` が既に表示していた場合、 `VRDisplay` は表示している `VRLayer` 配列を更新します。
* もし `requestPresent()` の呼び出しが `VRDisplay` が既に表示されている状態で拒否された場合は、その表示を終了します。
* もし `requestPresent()` がエンゲージメントジェスチャーの外で呼び出された場合、`VRDisplay` が既に表示されていない限り、そのプロミスは拒否されます。このエンゲージメントジェスチャーは、プレゼンテーションが終了するまで `requestPointerLock()` の呼び出しを許可することにも使えます。
例
-

```js
if (navigator.getVRDisplays) {
  console.log("WebVR 1.1 supported");
  // Then get the displays attached to the computer
  navigator.getVRDisplays().then(function (displays) {
    // If a display is available, use it to present the scene
    if (displays.length > 0) {
      vrDisplay = displays[0];
      console.log("Display found");
      // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
      btn.addEventListener("click", function () {
        if (btn.textContent === "Start VR display") {
          vrDisplay.requestPresent([{ source: canvas }]).then(function () {
            console.log("Presenting to WebVR display");

            // Set the canvas size to the size of the vrDisplay viewport

            var leftEye = vrDisplay.getEyeParameters("left");
            var rightEye = vrDisplay.getEyeParameters("right");

            canvas.width =
              Math.max(leftEye.renderWidth, rightEye.renderWidth) \* 2;
            canvas.height = Math.max(
              leftEye.renderHeight,
              rightEye.renderHeight,
            );

            // stop the normal presentation, and start the vr presentation
            window.cancelAnimationFrame(normalSceneFrame);
            drawVRScene();

            btn.textContent = "Exit VR display";
          });
        } else {
          vrDisplay.exitPresent();
          console.log("Stopped presenting to WebVR display");

          btn.textContent = "Start VR display";

          // Stop the VR presentation, and start the normal presentation
          vrDisplay.cancelAnimationFrame(vrSceneFrame);
          drawScene();
        }
      });
    }
  });
}
```

**メモ:** この完全なコードは raw-webgl-example で見ることができます。

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

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

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

関連情報
----

* WebVR API


VRDisplay.cancelAnimationFrame() - Web API

VRDisplay.cancelAnimationFrame()
================================

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

**`cancelAnimationFrame()`** は `VRDisplay` インターフェイスのメソッドで、 `Window.cancelAnimationFrame` の特別な実装であり、 `VRDisplay.requestAnimationFrame()` で登録したコールバックを登録解除します．

**メモ:** このプロパティは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

構文
--

```js
cancelAnimationFrame(handle);
```

### 引数

`handle`

登録解除するための `VRDisplay.requestAnimationFrame()` の呼び出しで返されたハンドルです。

### 返値

なし (`undefined`)。

例
-

```js
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
drawScene();

// WebVR: Check to see if WebVR is supported
if(navigator.getVRDisplays) {
  console.log('WebVR 1.1 supported');
  // Then get the displays attached to the computer
  navigator.getVRDisplays().then(function(displays) {
    // If a display is available, use it to present the scene
    if(displays.length > 0) {
      vrDisplay = displays[0];
      console.log('Display found');
      // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
      btn.addEventListener('click', function() {
        if(btn.textContent === 'Start VR display') {
          vrDisplay.requestPresent([{ source: canvas }]).then(function() {
            console.log('Presenting to WebVR display');

            // Set the canvas size to the size of the vrDisplay viewport

            var leftEye = vrDisplay.getEyeParameters('left');
            var rightEye = vrDisplay.getEyeParameters('right');

            canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) \* 2;
            canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);

            // stop the normal presentation, and start the vr presentation
            window.cancelAnimationFrame(normalSceneFrame);
            drawVRScene();

            btn.textContent = 'Exit VR display';
          });
        } else {
          vrDisplay.exitPresent();
          console.log('Stopped presenting to WebVR display');

          btn.textContent = 'Start VR display';

          // Stop the VR presentation, and start the normal presentation
          vrDisplay.cancelAnimationFrame(vrSceneFrame);
          drawScene();
        }
      });
    }
  });
} else {
  info.textContent = 'WebVR API not supported by this browser.'
}

function drawVRScene() {
  // WebVR: Request the next frame of the animation
  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);

  ...
}
```

**メモ:** 完全なコードは raw-webgl-example で見ることができます。

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

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

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

関連情報
----

* WebVR API


VRDisplay.getEyeParameters() - Web API

VRDisplay.getEyeParameters()
============================

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

**`getEyeParameters()`** は `VRDisplay` インターフェイスのメソッドで、指定された目の視線パラメーターを持つ `VREyeParameters` オブジェクトを返します。

**メモ:** このプロパティは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

構文
--

```js
getEyeParameters(whichEye);
```

### 引数

`whichEye`

文字列で、視線パラメーターを取得したい目を表します。指定できる値は `left` と `right` です（VREye 列挙型 で定義されています）。

### 返値

`VREyeParameters` オブジェクト、または VR コンテンツを表示できない場合（例えば `VRDisplayCapabilities.canPresent` が `false` を返す場合）は null です。

例
-

例については `VREyeParameters` 参照してください。

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

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

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

関連情報
----

* WebVR API


VRDisplay.isConnected - Web API

VRDisplay.isConnected
=====================

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

**`isConnected`** は `VRDisplay` インターフェイスの読み取り専用プロパティで、この `VRDisplay` がコンピューターに接続されているかどうかを示す論理値を返します。

**メモ:** このプロパティは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

### 値

論理値です。 `true` の場合はディスプレイが接続されていることを意味します。 `false` はそうでないことを意味します。

例
-

```js
navigator.getVRDisplays().then(function (displays) {
  // ディスプレイがある場合は、それを使ってシーンを表示する
  if (displays.length > 0) {
    vrDisplay = displays[0];

    // ボタンがクリックされたときに表示を開始。ユーザーのジェスチャーに応答してのみ呼び出すことができます。
    btn.addEventListener("click", function () {
      // ディスプレイが接続されている場合のみ、表示を要求します。
      if (vrDisplay.isConnected) {
        vrDisplay.requestPresent([{ source: canvas }]).then(function () {
          // アプリの描画を開始するなど。
        });
      } else {
        console.log("Connection to display lost");
      }
    });
  }
});
```

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

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

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

関連情報
----

* WebVR API


VRDisplay.capabilities - Web API

VRDisplay.capabilities
======================

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

**`capabilities`** は `VRDisplay` インターフェイスの読み取り専用プロパティで、 `VRDisplay` の様々な利用可能な機能を示す `VRDisplayCapabilities` オブジェクトを返します。

**メモ:** このプロパティは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

### 値

`VRDisplayCapabilities` オブジェクト。

例
-

コード例については `VRDisplayCapabilities` を参照してください。

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

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

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

関連情報
----

* WebVR API


VRDisplay.submitFrame() - Web API

VRDisplay.submitFrame()
=======================

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

**`submitFrame()`** は `VRDisplay` インターフェイスのメソッドで、 `VRDisplay` 内に現在表示中の `VRLayerInit` の現在の状態をキャプチャします。

**メモ:** このプロパティは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

その後、 `VRPose` と `getFrameData()` の最後の呼び出しによって提供された行列を使用してフレームがレンダリングされる必要があります。

構文
--

```js
submitFrame();
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

```js
var frameData = new VRFrameData();
var vrDisplay;

navigator.getVRDisplays().then(function(displays) {
  vrDisplay = displays[0];
  console.log('Display found');
  // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
  btn.addEventListener('click', function() {
    vrDisplay.requestPresent([{ source: canvas }]).then(function() {
      drawVRScene();
    });
  });
});

// WebVR: Draw the scene for the WebVR display.
function drawVRScene() {
  // WebVR: Request the next frame of the animation
  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);

  // Populate frameData with the data of the next frame to display
  vrDisplay.getFrameData(frameData);

  // You can get the position, orientation, etc. of the display from the current frame's pose
  var curFramePose = frameData.pose;
  var curPos = curFramePose.position;
  var curOrient = curFramePose.orientation;

  // Clear the canvas before we start drawing on it.

  gl.clear(gl.COLOR\_BUFFER\_BIT | gl.DEPTH\_BUFFER\_BIT);

  // WebVR: Create the required projection and view matrix locations needed
  // for passing into the uniformMatrix4fv methods below

  var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix");
  var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");

  // WebVR: Render the left eye's view to the left half of the canvas
  gl.viewport(0, 0, canvas.width \* 0.5, canvas.height);
  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
  drawGeometry();

  // WebVR: Render the right eye's view to the right half of the canvas
  gl.viewport(canvas.width \* 0.5, 0, canvas.width \* 0.5, canvas.height);
  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix);
  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
  drawGeometry();

  function drawGeometry() {
    // draw the view for each eye
  }

    ...

  // WebVR: Indicate that we are ready to present the rendered frame to the VR display
  vrDisplay.submitFrame();
}
```

**メモ:** この完全なコードは raw-webgl-example で見ることができます。

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

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

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

関連情報
----

* WebVR API


VRDisplay.displayId - Web API

VRDisplay.displayId
===================

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

**`displayId`** は `VRDisplay` インターフェイスの読み取り専用プロパティで、この特定の `VRDisplay` の識別子を返します。これは、 Gamepad API の関連付けポイントとしても使用されます( `Gamepad.displayId` を参照)。

**メモ:** このプロパティは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

### 値

特定の `VRDisplay` の ID を表す数値です。

例
-

例については `VRDisplayCapabilities` を参照してください。

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

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

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

関連情報
----

* WebVR API


VRDisplay.depthFar - Web API

VRDisplay.depthFar
==================

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

**`depthFar`** は `VRDisplay` インターフェイスのプロパティで、 eye view frustum (ビューフラスタム；つまりシーンの可視領域の境界) の far 平面を定義している z-depth の取得と設定を行います．

**メモ:** このプロパティは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

一般的にはこの値をそのままにしておきますが、低速のコンピューターでパフォーマンスを向上させる場合は、この値を小さくするとよいでしょう。

値
-

double 値で、 z-depth をメートル単位で表します。初期値は `10000.0` です。

例
-

```js
var vrDisplay;

navigator.getVRDisplays().then(function (displays) {
  vrDisplay = displays[0];
  vrDisplay.depthNear = 1.0;
  vrDisplay.depthFar = 7500.0;
});
```

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

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

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

関連情報
----

* WebVR API


CSSPageRule.selectorText - Web API

CSSPageRule.selectorText
========================

**`selectorText`** は `CSSPageRule` インターフェイスのプロパティで、この `CSSPageRule` に関連付けられたセレクターを取得および設定します。

値
-

文字列で宇s。

例
-

このスタイルシートは 2 つの `@page` ルールを含んでいます。 `selectorText` プロパティは、`:first` のセレクターテキストを文字列として返します。

```css
@page {
  margin: 1cm;
}

@page :first {
  margin: 2cm;
}
```

```js
let myRules = document.styleSheets[0].cssRules; // 2 つの myRules を返す
console.log(myRules[1].selectorText); // ":first" という文字列を返す
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssgroupingrule-selectortext |

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

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


CSSPageRule.style - Web API

CSSPageRule.style
=================

**`style`** は `CSSPageRule` インターフェイスの読み取り専用プロパティで、 `CSSStyleDeclaration` オブジェクトを返します。これは CSS 宣言ブロックであるオブジェクトを表し、スタイル情報や様々なスタイル関係のメソッドとプロパティを公開します。

値
-

`CSSStyleDeclaration` オブジェクトで、 CSS 宣言ブロックを以下のプロパティで表します。

computed flag

未設定。

declarations

ルール内で宣言された宣言は、指定された順に、一括指定プロパティを個別指定に展開されます。

parent CSS rule

コンテキストオブジェクト、すなわち this の別名です。

owner node

Null です。

例
-

このスタイルシートは `@page` ルールを含んでいます。ルールのリストを取得し、 style プロパティの値を返すと、`CSSStyleDeclaration` オブジェクトが返されます。

```css
@page {
  margin: 1cm;
}
```

```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].style); // CSSStyleDeclaration オブジェクトを返す
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssgroupingrule-style |

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

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


Resource Timing API - Web API

Resource Timing API
===================

**`Resource Timing`** インターフェイスは、アプリケーションの*リソース*のロードに関する詳細なネットワークタイミングデータの取得と分析を可能にします。アプリケーションはタイミングメトリックを使用して、たとえば、`XMLHttpRequest`、`<SVG>`、画像、スクリプトなど特定のリソースをロードするのにかかる時間を決定できます。

インターフェイスのプロパティは、リダイレクトの開始時間と終了時間、DNS ルックアップの開始時間と終了時間、リクエストの開始時間、レスポンスの開始時間と終了時間などネットワークイベントに対して high-resolution timestamps のリソースロードタイムラインを作成します。このインタフェースには、取得したリソースのサイズや取得を開始したリソースの種類に関するデータを提供するその他のプロパティも含まれています。

このドキュメントでは、`Resource Timing` インターフェイスの概要を説明します。例を含むインターフェイスの詳細については、各インターフェイスのリファレンスページ、リソースタイミング API の使用、および あわせて参照 セクションの参照を参照してください。リソースタイミング処理モデルのグラフィック表示については、リソースタイミングフェーズの図を参照してください。

**メモ:** The `PerformanceResourceTiming` interface extends the `PerformanceEntry` for performance entries which have an `entryType` of "`resource`".

High-resolution タイムスタンプ
-----------------------

Several of the `Resource Timing` properties return *high-resolution timestamps*. These timestamps have a ``DOMHighResTimeStamp`` type and as its name implies, they represent a high-resolution point in time. This type is a `double` and its value is a discrete point in time or the difference in time between two discrete points in time.

The unit of `DOMHighResTimeStamp` is milliseconds and should be accurate to 5 µs (microseconds). However, If the browser is unable to provide a time value accurate to 5 µs (because, for example, due to hardware or software constraints), the browser can represent a the value as a time in milliseconds accurate to a millisecond.

リソースロードタイムスタンプ
--------------

An application can get timestamps for the various stages used to load a resource. The first property in the processing model is `startTime` which returns the timestamp immediately before the resource loading process begins. The `fetchStart` timestamps follows and redirect processing (if applicable) and preceeds DNS lookup. The next stages are `connectStart` and `connectEnd` which are the timestamps immediately before and after connecting to the server, respectively. The last three timestamps are, in order: `requestStart` - the timestamp before the browser starts requesting the resource from the server; `responseStart` - the timestamp after the browser receives the first byte of the response from the server; and `responseEnd` - the timestamp after the browser receives the last byte of the resource. If the resource is loaded via a secure connection a `secureConnectionStart` timestamp will be available between the connection start and end events.

**メモ:** When CORS is in effect, many of these values are returned as zero unless the server's access policy permits these values to be shared. This requires the server providing the resource to send the `Timing-Allow-Origin` HTTP response header with a value specifying the origin or origins which are allowed to get the restricted timestamp values.

The properties which are returned as 0 by default when loading a resource from a domain other than the one of the web page itself: `redirectStart`, `redirectEnd`, `domainLookupStart`, `domainLookupEnd`, `connectStart`, `connectEnd`, `secureConnectionStart`, `requestStart`, and `responseStart`.

The ``PerformanceResourceTiming`` interface also includes several network timing properties. The `redirectStart` and `redirectEnd` properties return `timestamps` for redirect start and end times, respectively. Likewise, the The `domainLookupStart` and `domainLookupEnd` properties return `timestamps` for DNS lookup start and end times, respectively.

*This would be a nice place to have a diagram showing the relationships between these segments of the resource loading time.*

リソースサイズ
-------

The `PerformanceResourceTiming` interface has three properties that can be used to obtain size data about a resource. The `transferSize` property returns the size (in octets) of the fetched resource including the response header fields plus the response payload body.

The `encodedBodySize` property returns the size (in octets) received from the fetch (HTTP or cache), of the *payload body*, **before** removing any applied content-codings. `decodedBodySize` returns the size (in octets) received from the fetch (HTTP or cache) of the *message body*, **after** removing any applied content-codings.

その他のプロパティ
---------

The `nextHopProtocol` property returns the *network protocol* used to fetch the resource.

The `initiatorType` property returns the *type* of resource that initiated the performance entry such as "`css`" for a CSS resource, "`xmlhttprequest`" for an XMLHttpRequest and "`img`" for an image (such as a JPEG).

If the current context is a `worker`, the `workerStart` property can be used to obtain a `DOMHighResTimeStamp` when the worker was started.

メソッド
----

The Resource Timing API includes two methods that extend the `Performance` interface. The `clearResourceTimings()` method removes all "`resource`" type performance entries from the browser's *resource* performance entry buffer. The `setResourceTimingBufferSize()` method sets the resource performance entry buffer size to the specified number of resource `performance entries`.

The `PerformanceResourceTiming` interface's `toJSON()` method returns a JSON serialization of a "`resource`" type `performance entry`.

実装状況
----

As shown in the `PerformanceResourceTiming` interface's Browser Compatibility table, most of these interfaces are broadly implemented by desktop browsers. However, note that some properties have little to no implementation so see each property's "Browser compatibility" section for more specific interoperability data.

To test your browser's support for these interfaces, run the `perf-api-support` application.

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

* Resource Timing Standard; W3C Editor's Draft
* CanIUse data
* Resource Timing practical tips; Steve Souders; 2014 August 21
* Measuring network performance with Resource Timing API; Ilya Grigorik; 2013 December 11
* A Primer for Web Performance Timing APIs; Xiaoqian Wu; W3C Editor's Draft


Navigation Timing API - Web API

Navigation Timing API
=====================

**Navigation Timing API** は、ウェブサイトのパフォーマンス計測に使用できるデータを提供します。同じ目的に使用される他の JavaScript ベースの機構と異なり、この API はエンドツーエンドのさらに役立つ正確な遅延データを提供できます。

以下の例は、知覚できる読み込み時間の計測方法です:
```

function onLoad() {
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  console.log("User-perceived page loading time: " + page_load_time);
}
```

数ミリ秒の間に多くの計測イベントが発生し、これらは `PerformanceTiming` インターフェイスを通してアクセスできます。以下は発生順のイベントリストです:

* navigationStart
* unloadEventStart
* unloadEventEnd
* redirectStart
* redirectEnd
* fetchStart
* domainLookupStart
* domainLookupEnd
* connectStart
* connectEnd
* secureConnectionStart
* requestStart
* responseStart
* responseEnd
* domLoading
* domInteractive
* domContentLoadedEventStart
* domContentLoadedEventEnd
* domComplete
* loadEventStart
* loadEventEnd

`window.performance.navigation` オブジェクトは 2 個の属性を格納しており、ページの読み込みが何によって起こされたか (リダイレクト、戻る・進むボタン、通常の URL 読み込み) を知るために使用します。

window.performance.navigation.type:

| 定数 | 値 | 説明 |
| --- | --- | --- |
| `TYPE_NAVIGATE` | 0 | リンクのクリックにより開始されたナビゲーション、ユーザーエージェントのアドレスバーへの URL 入力、フォーム送信、または下記の TYPE\_RELOAD および TYPE\_BACK\_FORWARD の使用によるもの以外のスクリプト操作を通した初期化。 |
| `TYPE_RELOAD` | 1 | 再読み込み操作を通したナビゲーションまたは location.reload() メソッド。 |
| `TYPE_BACK_FORWARD` | 2 | 履歴をたどる操作を通したナビゲーション。 Navigation through a history traversal operation. |
| `TYPE_UNDEFINED` | 255 | 上記に定義されていない形式の任意のナビゲーション。 |

`window.performance.navigation.redirectCount` は、リダイレクトが発生した場合の、最終的なページへ到達するまでの間のリダイレクト数を示します。

Navigation Timing API は、クライアント側でパフォーマンスデータを収集して XHR 経由でサーバーへ送信することに使用できます。また、前のページのアンロード時間やドメインの検索時間、window.onload の合計時間など、計測が困難なデータの計測に使用できます。

例
-

ページの読み込みに必要な合計時間を計算します:
```

var perfData = window.performance.timing;
var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
```

リクエストの応答時間を計算します:
```

var connectTime = perfData.responseEnd - perfData.requestStart;
```

### 仕様

* https://w3c.github.io/navigation-timing/
ブラウザーの実装状況
----------

{{Compat}}


FileSystemHandle.requestPermission() - Web API

FileSystemHandle.requestPermission()
====================================

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

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

`FileSystemHandle` インターフェイスの **`requestPermission()`** メソッドは、ファイルハンドルの読み取りまたは読み書きの許可を要求します。

構文
--

```js
requestPermission(fileSystemHandlePermissionDescriptor)
```

### 引数

FileSystemHandlePermissionDescriptor 省略可

要求する許可のモードを指定するオブジェクトです。以下のオプションが設定可能です。

* : `'mode'`: `'read'` または `'readwrite'` のいずれかの値をとります。

### 返値

`'granted'`、`'denied'`、`'prompt'` のいずれかである `PermissionStatus.state` です。

### 例外

`TypeError`

引数が指定されていないか、`mode` が `'read'` でも `'readwrite'` でもないとき投げられます。

例
-

以下の非同期関数は、許可が与えられていなければ許可を要求します。

```js
// fileHandle は FileSystemFileHandle
// withWrite は書き込みのとき true となる boolean 値

async function verifyPermission(fileHandle, withWrite) {
  const opts = {};
  if (withWrite) {
    opts.mode = "readwrite";
  }

  // 既に許可されているかを確認し、許可されていれば true を返す
  if ((await fileHandle.queryPermission(opts)) === "granted") {
    return true;
  }

  // ファイル操作の許可を要求し、ユーザーが許可したら true を返す
  if ((await fileHandle.requestPermission(opts)) === "granted") {
    return true;
  }

  // ユーザーが許可しなかったので、false を返す
  return false;
}
```

仕様書
---

| Specification |
| --- |
| File System Access # api-filesystemhandle-requestpermission |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files


FileSystemHandle.queryPermission() - Web API

FileSystemHandle.queryPermission()
==================================

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

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

`FileSystemHandle` インターフェイスの **`queryPermission()`** メソッドは、現在のハンドルの現在の許可の状態を取得します。

構文
--

```js
queryPermission(fileSystemHandlePermissionDescriptor)
```

### 引数

FileSystemHandlePermissionDescriptor 省略可

取得する対象の許可モードを指定するオブジェクトです。以下の設定ができます。

* `'mode'`: `'read'` または `'readwrite'` の値を取りえます。

### 返値

`'granted'`、`'denied'`、`'prompt'` のいずれかの `PermissionStatus.state` です。

`"prompt"` が返った場合は、ウェブサイトはハンドルを用いた操作を行う前に `requestPermission()` を呼ぶ必要があるでしょう。`"denied"` が返った場合は、すべての操作が拒否されるでしょう。通常、ローカルファイルシステムのハンドルファクトリーから返されたハンドルは、初期状態で読み取りの許可状態として `"granted"` を返すでしょう。しかし、ユーザーが許可を取り消した場合以外に、IndexedDB から取得したハンドルも `"prompt"` を返す可能性が高いでしょう。

### 例外

`TypeError`

`mode` が `'read'` でも `'readwrite'` でもない値に設定されたとき投げられます。

例
-

以下の非同期関数は、ユーザーがファイルハンドルに読み取りまたは読み書きの許可を与えた場合 `true` を返します。許可が与えられていない場合、許可を要求します。

```js
// fileHandle は FileSystemFileHandle
// withWrite は書き込みのとき true となる boolean 値

async function verifyPermission(fileHandle, withWrite) {
  const opts = {};
  if (withWrite) {
    opts.mode = "readwrite";
  }

  // 既に許可が得られているかを確認し、許可が得られていれば true を返す
  if ((await fileHandle.queryPermission(opts)) === "granted") {
    return true;
  }

  // ファイル操作の許可を要求し、ユーザーが許可を与えれば true を返す
  if ((await fileHandle.requestPermission(opts)) === "granted") {
    return true;
  }

  // ユーザーが許可しなかったので、false を返す
  return false;
}
```

仕様書
---

| Specification |
| --- |
| File System Access # api-filesystemhandle-querypermission |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files


FileSystemHandle.kind - Web API

FileSystemHandle.kind
=====================

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

`FileSystemHandle` の読み取り専用プロパティ **`kind`** は、エントリーの種類を返します。`'file'` (対応するエントリーがファイルである場合) または `'directory'` が返ります。これは、ディレクトリーの中身について反復するとき、ファイルとディレクトリーを区別するために用いられます。

値
-

以下の値を取りうる文字列です。

* `'file'`: ハンドルが `FileSystemFileHandle` の場合
* `'directory'`: ハンドルが `FileSystemDirectoryHandle` の場合
例
-

以下の関数は、ユーザーにファイルピッカーでファイルを選択させ、返されたハンドルがファイルかディレクトリーかを調べます。

```js
// ファイルハンドルへの参照を保存する
let fileHandle;

async function getFile() {
  // ファイルピッカーを開く
  [fileHandle] = await window.showOpenFilePicker();

  if (fileHandle.kind === "file") {
    // ファイルの場合のコードを実行する
  } else if (fileHandle.kind === "directory") {
    // ディレクトリーの場合のコードを実行する
  }
}
```

仕様書
---

| Specification |
| --- |
| File System Standard # ref-for-dom-filesystemhandle-kind① |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files


FileSystemHandle.name - Web API

FileSystemHandle.name
=====================

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

`FileSystemHandle` インターフェイスの読み取り専用プロパティ **`name`** は、ハンドルが表すエントリーの名前を返します。

値
-

文字列です。

例
-

以下の関数は、ユーザーにファイルピッカーでファイルを選択させ、`name` プロパティを取得します。

```js
// ファイルハンドルへの参照を保存する
let fileHandle;

async function getFile() {
  // ファイルピッカーを開く
  [fileHandle] = await window.showOpenFilePicker();

  const fileName = fileHandle.name;
}
```

仕様書
---

| Specification |
| --- |
| File System Standard # ref-for-dom-filesystemhandle-name① |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files


FileSystemHandle.isSameEntry() - Web API

FileSystemHandle.isSameEntry()
==============================

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

`FileSystemHandle` インターフェイスの **`isSameEntry()`** メソッドは、2 個の`ハンドル`を比較し、対応するエントリー (ファイルまたはディレクトリー) が一致するかを確認します。

構文
--

```js
isSameEntry(fileSystemHandle)
```

### 引数

`FileSystemHandle`

メソッドを呼び出すハンドルと比較する `FileSystemHandle` です。

### 返値

エントリーが一致するとき `true` となる `Boolean` を返します。

### 例外

例外は投げられません。

例
-

以下の関数は、1 個のエントリーをエントリーの配列と比較し、一致するエントリーを全て取り除いた新しい配列を返します。

```js
function removeMatches(fileEntry, entriesArr) {
  let newArr = entriesArr.filter((entry) => !fileEntry.isSameEntry(entry));

  return newArr;
}
```

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemhandle-issameentry |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files


FileSystemHandle.remove() - Web API

FileSystemHandle.remove()
=========================

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

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

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

`FileSystemHandle` インターフェイスの **`remove()`** メソッドは、下層のファイルシステムからハンドルが表すエントリーを除去することを要求します。

`remove()` メソッドにより、ハンドルを用いてファイルやディレクトリーを直接削除することができます。このメソッドが無い場合に削除をおこなうには、親ディレクトリーのハンドルを取得し、その親ディレクトリーで `FileSystemDirectoryHandle.removeEntry()` メソッドを呼ぶ必要があるでしょう。

オリジンプライベートファイルシステムのルートディレクトリーで `remove()` を呼ぶことで内容を全消去することもでき、これをおこなった後は新しい空の OPFS が作成されます。

構文
--

```js
remove(options)
```

### 引数

`options` 省略可

削除のオプションを指定するオブジェクトです。以下のプロパティを設定できます。

`recursive` 省略可

`boolean` 値で、デフォルトは `false` です。`true` に設定し、エントリーがディレクトリーである場合は、内容が再帰的に削除されます。

### 返値

`undefined` で解決される `Promise` を返します。

### 例外

`InvalidModificationError` `DOMException`

`recursive` が `false` に設定されており、削除するエントリーが子を持つディレクトリーであるとき投げられます。

`NoModificationAllowedError` `DOMException`

ブラウザーがエントリーの排他的ロックを得られなかったとき投げられます。

`NotAllowedError` `DOMException`

`PermissionStatus` が `granted` でないとき投げられます。

`NotFoundError` `DOMException`

エントリーが見つからないとき投げられます。

例
-

FileSystemHandle.remove() demo (ソースコードを見る) はファイル作成アプリケーションです。`<textarea>` にテキストを入力して "Save file" `<button>` を押すと、ファイルピッカーが開き、入力したテキストをローカルファイルシステム上の選択したテキストファイルに保存できます。作成したファイルを削除することを選択することもできます。

作成したファイルの内容を閲覧することはできず、ページを再読み込みしたり閉じたりすると下層のファイルシステムとの同期は失われます。すなわち、このアプリケーションで作成したファイルは、再読み込みしたりタブを閉じたりする前に削除することを選択しなければ、ファイルシステムに残り続けます。

ファイルピッカー、ファイルハンドル、そして新規ファイルを作成したときのファイル自体は、`window.showSaveFilePicker()` により作成されます。テキストは `FileSystemFileHandle.createWritable()` を用いてファイルに書き込まれます。

ファイルがファイルシステム上に作成されると、アプリケーション上でエントリーが作成されます。(ソースコード中の `processNewFile()` を参照してください)

* 後で簡単に参照できるように、ファイルハンドルへの参照が配列 `savedFileRefs` に格納されます。
* UI の中の "Saved files" という見出しの下に、ファイル名の隣に "Delete" ボタンがあるリストの項目が追加されます。

"Delete" ボタンが押されると、以下の `deleteFile()` 関数が実行されます。

```js
async function deleteFile(e) {
  for (const handle of savedFileRefs) {
    if (handle.name === e.target.id + ".txt") {
      await handle.remove();
      savedFileRefs = savedFileRefs.filter(
        (handle) => handle.name !== e.target.id + ".txt",
      );
      e.target.parentElement.parentElement.removeChild(e.target.parentElement);
    }
  }
}
```

これは以下のような処理です。

1. 配列 `savedFileRefs` に格納されている各ファイルハンドルについて、名前がイベントを発生させたボタンの属性 `id` と一致するかを調べます。
2. 一致するファイルハンドルが見つかったら、そのハンドルについて `FileSystemHandle.remove()` を呼び出し、下層のファイルシステムからそのファイルを削除します。
3. 配列 `savedFileRefs` からも一致したファイルシステムを削除します。
4. 最後に、UI からそのファイルに対応するリスト項目を削除します。
仕様書
---

#### No specification found

No specification data found for `api.FileSystemHandle.remove`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

関連情報
----

* File System Access API
* FileSystemHandle.remove() demo


CSSStyleDeclaration.length - Web API

CSSStyleDeclaration.length
==========================

読み取り専用のプロパティで、この CSS 宣言ブロックにあるスタイル宣言の数を整数で表します。

値
-

このインスタンスの親に明示的に設定されているスタイルの数を示す整数です。

例
-

次の例は、以下の HTML 要素に明示的に設定されたスタイルの数を取得します。

```html
<div
 id="div1"
 style="margin: 0 10px; background-color: #CA1; font-family: monospace"></div>
```

JavaScript コード:

```js
const myDiv = document.getElementById("div1");
const divStyle = myDiv.style;
const len = divStyle.length; // 6
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-length |

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

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


CSSStyleDeclaration.cssFloat - Web API

CSSStyleDeclaration.cssFloat
============================

**`cssFloat`** は `CSSStyleDeclaration` インターフェイスのプロパティで、 `CSSStyleDeclaration.getPropertyValue()` を `float` を引数として呼び出したときの結果を返します。

設定したときは、 `CSSStyleDeclaration.setProperty()` を `float` を第一引数、指定された値を第二引数として呼び出します。指定された値は `float` プロパティで有効な値でなければなりません。

値
-

文字列です。

例
-

以下の例では、スタイルシートには、 1 つだけのルール `.box` に `float` プロパティの値が `left` と設定されています。この値は `cssFloat` から返されます。次に、 `cssFloat` を使用して値を "right" に設定し、新しい値を返します。

```css
.box {
  float: left;
  inline-size: 300px;
}
```

```js
let myRules = document.styleSheets[0].cssRules;
let rule = myRules[0];
console.log(rule.style.cssFloat); // "left"
rule.style.cssFloat = "right";
console.log(rule.style.cssFloat); //right
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-cssfloat |

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

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


CSSStyleDeclaration.setProperty() - Web API

CSSStyleDeclaration.setProperty()
=================================

**`CSSStyleDeclaration.setProperty()`** メソッドインターフェイスは、 CSS スタイル宣言オブジェクトのプロパティに新しい値を設定します。

構文
--

```js
setProperty(propertyName, value)
setProperty(propertyName, value, priority)
```

### 引数

`propertyName`

文字列で、変更する CSS プロパティ名（ハイフン区切り）です。

`value` 省略可

文字列で、新しいプロパティ値が入ります。指定されなかった場合は、空文字列として扱われます。

**メモ:** `value` が `"!important"` を含むことはできません。これは `priority` 引数を使用して設定してください。

`priority` 省略可

文字列で、 CSS の優先度 "important" を設定することができます。指定されなかった場合は、空文字列として扱われます。以下の値を受け付けます。

* 文字列値 `"important"`
* キーワード `undefined`
* 空文字列値 `""`

### 返値

なし (`undefined`)。

### 例外

`NoModificationAllowedError` `DOMException`

このプロパティまたは宣言ブロックが読み取り専用であった場合。

代替手段
----

`priority` が省略できる場合、JavaScript にはスタイル宣言オブジェクトの CSS プロパティを設定する特別な簡単な構文があります。

```js
style.cssPropertyName = "value";
```

例
-

この例では、 3 つのボタンが用意されており、これらのボタンを押すことで、ボックス段落の境界、背景色、テキスト色をランダムな値に動的に変更することができます (この節の最後にあるライブサンプルを参照)。

変更したいルールは、このページに適用されている 2 つ目のスタイルシートに含まれていることが分かっているので、 `document.styleSheets[1]` を使ってその参照を取得します。次に、 `stylesheet.cssRules` の配列に含まれている、スタイルシート内のさまざまなルールを反復処理します。それぞれのルールについて、 `CSSStyleRule.selectorText` プロパティがセレクター `.box p` と等しいかどうかを確認します。

等しい場合、この `CSSStyleRule` オブジェクトへの参照を変数に格納します。次に、 3 つの関数を使って問題のプロパティにランダムな値を生成し、これらの値でルールを更新します。それぞれの場合において、これは `setProperty()` メソッドで行います（`boxParaRule.style.setProperty('border', newBorder);` のように）。

### HTML

```html
<div class="controls">
  <button class="border">Border</button>
  <button class="bgcolor">Background</button>
  <button class="color">Text</button>
</div>
<div class="box">
  <p>Box</p>
</div>
```

### CSS

```css
html {
  background: orange;
  font-family: sans-serif;
  height: 100%;
}

body {
  height: inherit;
  width: 80%;
  min-width: 500px;
  max-width: 1000px;
  margin: 0 auto;
}

.controls {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

div button {
  flex: 1;
  margin: 20px;
  height: 30px;
  line-height: 30px;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% - 70px);
}

.box p {
  width: 50%;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  height: 150px;
  line-height: 150px;
  background: red;
  border: 5px solid purple;
  color: white;
  transition: all 1s;
}
```

### JavaScript

```js
const borderBtn = document.querySelector(".border");
const bgColorBtn = document.querySelector(".bgcolor");
const colorBtn = document.querySelector(".color");
const box = document.querySelector(".box");

function random(min, max) {
  const num = Math.floor(Math.random() \* (max - min)) + min;
  return num;
}

function randomColor() {
  return `rgb(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)})`;
}

const stylesheet = document.styleSheets[1];
const boxParaRule = [...stylesheet.cssRules].find(
  (r) => r.selectorText === ".box p",
);

function setRandomBorder() {
  const newBorder = `${random(1, 50)}px solid ${randomColor()}`;
  boxParaRule.style.setProperty("border", newBorder);
}

function setRandomBgColor() {
  const newBgColor = randomColor();
  boxParaRule.style.setProperty("background-color", newBgColor);
}

function setRandomColor() {
  const newColor = randomColor();
  boxParaRule.style.setProperty("color", newColor);
}

borderBtn.addEventListener("click", setRandomBorder);
bgColorBtn.addEventListener("click", setRandomBgColor);
colorBtn.addEventListener("click", setRandomColor);
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-setproperty |

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

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


CSSStyleDeclaration.item() - Web API

CSSStyleDeclaration.item()
==========================

`CSSStyleDeclaration.item()` メソッドインターフェイスは、`CSSStyleDeclaration` の指定した位置の CSS プロパティ名を返します。

このメソッドは、与えた引数によって例外が発生することはありません。位置が範囲外だった場合は空文字列が返され、引数が与えられなかった場合は `TypeError` が発生します。

構文
--

```js
item(index)
```

### 引数

`index`

読み取るノードの位置です。位置は 0 から始まります。

### 返値

文字列で、指定された位置にある CSS プロパティの名前を返します。

JavaScript には、 NodeList から位置を指定して項目を取得するための簡単な特別な構文があります。

```js
const propertyName = style[index];
```

### 例外

`TypeError`

引数が与えられなかった場合に発生します。

例
-

```js
const style = document.getElementById("div1").style;
const propertyName = style.item(1); // または style[1] - リスト中の 2 番目のスタイルを返します
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-item |

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

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


CSSStyleDeclaration.getPropertyCSSValue() - Web API

CSSStyleDeclaration.getPropertyCSSValue()
=========================================

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

**CSSStyleDeclaration.getPropertyCSSValue()** メソッドインターフェイスは、プロパティの CSS 値を含む `CSSValue` を返します。プロパティ名が一括指定プロパティの場合は `null` を返すことに注意して下さい。

**メモ:** このインターフェイスは、型付けされた CSS オブジェクトモデルを作成する試みの一部でした。この試みは放棄されており、ほとんどのブラウザーは実装していません。

この目的を達成するには、以下のものを使用することができます。

* `CSSStyleDeclaration.getPropertyValue()` が型付けなしの CSS オブジェクトモデルにあり、広く対応されています。
* `Element.computedStyleMap()` が最近の CSS 型付きオブジェクトモデル API にありますが、対応が少なく実験的なものと考えられています。

構文
--

```js
getPropertyCSSValue(property)
```

### 引数

`property`

文字列で、取得するプロパティ名を表します。

### 返値

プロパティの CSS 値を含む `CSSValue` です。存在しない場合は `null` を返します。

例
-

次の JavaScript コードは、 CSS の `color` プロパティの計算済みの RGB 値を含むオブジェクトを取得します。

```js
const style = window.getComputedStyle(elem, null);
const rgbObj = style.getPropertyCSSValue("color").getRGBColorValue();
```

仕様書
---

この機能はもともと、 DOM Style Level 2 仕様書で定義されていましたが、それ以降の標準化の取り組みからは外れています。

この機能は、最新の、しかし互換性のない、 CSS 型付きオブジェクトモデル API に取って代わられ、現在は標準化されています。

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

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


CSSStyleDeclaration.getPropertyPriority() - Web API

CSSStyleDeclaration.getPropertyPriority()
=========================================

**CSSStyleDeclaration.getPropertyPriority()** メソッドインターフェイスは、その CSS プロパティに明示的に設定されたすべての優先度を文字列で返します。

構文
--

```js
getPropertyPriority(property)
```

### 引数

`property`

文字列で、チェックするプロパティ名を表します。

### 返値

 存在する場合は優先度（`"important"` など）を表します。
 存在しない場合は、空文字列を返します。

例
-

以下の JavaScript コードは、 `margin` が CSS セレクターのルールで important と記されているかどうかをチェックします。

```js
const declaration = document.styleSheets[0].cssRules[0].style;
const isImportant = declaration.getPropertyPriority("margin") === "important";
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-getpropertypriority |

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

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


CSSStyleDeclaration.parentRule - Web API

CSSStyleDeclaration.parentRule
==============================

**CSSStyleDeclaration.parentRule** は読み取り専用のプロパティで、このスタイルブロックの親である `CSSRule` を返します。例えば、 CSS セレクターのスタイルを表す `CSSStyleRule` です。

値
-

この宣言ブロックを含む CSS ルール、またはこの `CSSStyleDeclaration` が `CSSRule` に割り当てられていない場合は `null` を返します。

例
-

次の JavaScript コードは、 `CSSStyleDeclaration` から親の CSS スタイルルールを取得します。

```js
const declaration = document.styleSheets[0].rules[0].style;
const rule = declaration.parentRule;
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-parentrule |

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

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


CSSStyleDeclaration.cssText - Web API

CSSStyleDeclaration.cssText
===========================

**`cssText`** は `CSSStyleDeclaration` インターフェイスのプロパティで、その要素の**インライン**スタイル宣言のみのテキストを返したり設定したりします。

**スタイルシート**のルールを動的に設定するためには、動的なスタイル情報の利用を参照してください。

スタイルシートのスタイルルールである `CSSRule.cssText` と混同しないようにしてください。

値
-

文字列で、この要素のインラインスタイル宣言のテキストが入ります。

例
-

```html
<span id="s1" style="color: red;"> Some text </span>

<script>
 const elem = document.getElementById("s1");
 alert(elem.style.cssText); // "color: red;"
</script>
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-csstext |

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

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


CSSStyleDeclaration.removeProperty() - Web API

CSSStyleDeclaration.removeProperty()
====================================

**`CSSStyleDeclaration.removeProperty()`** メソッドインターフェイスは、 CSS スタイル宣言オブジェクトからプロパティを削除します。

構文
--

```js
removeProperty(property)
```

### 引数

* `property`
    + 文字列で、削除するプロパティ名を表します。なお、複数語からなるプロパティ名はハイフン区切りであって、キャメルケースではありません。
### 返値

文字列で、削除される前の CSS プロパティの値と等しいものです。

### 例外

`NoModificationAllowedError` `DOMException`

プロパティまたは宣言ブロックが読み取り専用の場合に発生します。

例
-

次の JavaScript コードは、 CSS の `background-color` プロパティをセレクタールールから削除します。

```js
const declaration = document.styleSheets[0].rules[0].style;
const oldValue = declaration.removeProperty("background-color");
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-removeproperty |

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

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


CSSStyleDeclaration.getPropertyValue() - Web API

CSSStyleDeclaration.getPropertyValue()
======================================

**CSSStyleDeclaration.getPropertyValue()** メソッドインターフェイスは、指定された CSS プロパティの値を含む文字列を返します。

構文
--

```js
getPropertyValue(property)
```

### 引数

`property`

文字列で、チェックするプロパティ名（ハイフン区切り）を表します。

### 返値

プロパティの値が入った文字列です。設定されていなかった場合、空文字列を返します。

例
-

次の JavaScript コードは、 CSS セレクタールールの `margin` プロパティの値を問い合わせます。

```js
const declaration = document.styleSheets[0].cssRules[0].style;
const value = declaration.getPropertyValue("margin"); // "1px 2px"
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-getpropertyvalue |

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

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


ExtendableCookieChangeEvent: ExtendableCookieChangeEvent() コンストラクター - Web API

ExtendableCookieChangeEvent: ExtendableCookieChangeEvent() コンストラクター
===================================================================

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

**`ExtendableCookieChangeEvent()`** コンストラクターは、`ServiceWorkerRegistration.oncookiechange()` に渡されるイベント型である新しい `ExtendableCookieChangeEvent` オブジェクトを生成します。このコンストラクターは、変更イベントが発生するとブラウザーによって呼ばれます。

**メモ:** このコンストラクターは、通常は製品のウェブサイトでは必要ありません。主な使用法は、このイベントのインスタンスが必要なテストです。

構文
--

```js
new ExtendableCookieChangeEvent(type)
new ExtendableCookieChangeEvent(type, options)
```

### 引数

`type`

イベントの名前を表す文字列です。大文字と小文字は区別され、ブラウザーは常に `cookiechange` に設定します。

`options` 省略可

*`ExtendableEvent()` で定義されたプロパティに加え*、以下のプロパティを持ちうるオブジェクトです。

`changed`

変更された Cookie が格納された配列です。

`deleted`

削除された Cookie が格納された配列です。

### 返値

新しい `ExtendableCookieChangeEvent` オブジェクトです。

仕様書
---

| Specification |
| --- |
| Cookie Store API # dom-extendablecookiechangeevent-extendablecookiechangeevent |

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

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


ExtendableCookieChangeEvent: changed プロパティ - Web API

ExtendableCookieChangeEvent: changed プロパティ
==========================================

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

`ExtendableCookieChangeEvent` インターフェイスの読み取り専用プロパティ **`changed`** は、与えられた `ExtendableCookieChangeEvent` のインスタンスで変更されたすべての Cookie を返します。

値
-

オブジェクトの配列で、変更された Cookie が格納されています。それぞれのオブジェクトは以下のプロパティを持ちます。

`name`

Cookie の名前を表す文字列です。

`value`

Cookie の値を表す文字列です。

`domain`

Cookie のドメインを表す文字列です。

`path`

Cookie のパスを表す文字列です。

`expires`

ミリ秒単位の UNIX 時間で与えられるタイムスタンプで、Cookie の有効期限を表します。

`secure`

Cookie がセキュアコンテキスト (HTTP ではなく HTTPS) のサイト由来かを表す `boolean` です。

`sameSite`

以下の `SameSite` の値のいずれかです。

`"strict"`

Cookie はファーストパーティコンテキストでのみ送信され、サードパーティのウェブサイトから発信されたリクエストでは送信されません。

`"lax"`

Cookie は通常のクロスサイトサブリクエスト (たとえば、サードパーティサイトへの画像やフレームの読み込み) では送信されませんが、ユーザーが発信元のサイト内へ移動するとき (すなわち、リンクをたどるとき) は送信されます。

`"none"`

Cookie はすべてのコンテキストで送信されます。

例
-

この例では、Cookie が設定されると、イベントリスナーがコンソールに `changed` プロパティを記録します。この配列の最初の要素には、今設定されたばかりの Cookie を表すオブジェクトが格納されています。

```js
self.addEventListener("cookiechange", (event) => {
  console.log(event.changed[0]);
});

const one_day = 24 \* 60 \* 60 \* 1000;
cookieStore.set({
  name: "cookie1",
  value: "cookie1-value",
  expires: Date.now() + one_day,
  domain: "example.com",
});
```

仕様書
---

| Specification |
| --- |
| Cookie Store API # dom-extendablecookiechangeevent-changed |

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

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


ExtendableCookieChangeEvent: deleted プロパティ - Web API

ExtendableCookieChangeEvent: deleted プロパティ
==========================================

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

`ExtendableCookieChangeEvent` インターフェイスの読み取り専用プロパティ **`deleted`** は、与えられた `ExtendableCookieChangeEvent` のインスタンスで削除されたすべての Cookie を返します。

値
-

オブジェクトの配列で、削除された Cookie が格納されています。それぞれのオブジェクトは以下のプロパティを持ちます。

`name`

Cookie の名前を表す文字列です。

`value`

Cookie の値を表す文字列です。

`domain`

Cookie のドメインを表す文字列です。

`path`

Cookie のパスを表す文字列です。

`expires`

ミリ秒単位の UNIX 時間で与えられるタイムスタンプで、Cookie の有効期限を表します。

`secure`

Cookie がセキュアコンテキスト (HTTP ではなく HTTPS) のサイト由来かを表す `boolean` です。

`sameSite`

以下の `SameSite` の値のいずれかです。

`"strict"`

Cookie はファーストパーティコンテキストでのみ送信され、サードパーティのウェブサイトから発信されたリクエストでは送信されません。

`"lax"`

Cookie は通常のクロスサイトサブリクエスト (たとえば、サードパーティサイトへの画像やフレームの読み込み) では送信されませんが、ユーザーが発信元のサイト内へ移動するとき (すなわち、リンクをたどるとき) は送信されます。

`"none"`

Cookie はすべてのコンテキストで送信されます。

例
-

この例では、Cookie が削除されると、イベントリスナーがコンソールに `deleted` プロパティの最初の要素を記録します。これには、削除されたばかりの Cookie を表すオブジェクトが格納されています。

```js
self.addEventListener("cookiechange", (event) => {
  console.log(event.deleted[0]);
});
```

仕様書
---

| Specification |
| --- |
| Cookie Store API # dom-extendablecookiechangeevent-deleted |

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

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


ProgressEvent: lengthComputable プロパティ - Web API

ProgressEvent: lengthComputable プロパティ
=====================================

**`ProgressEvent.lengthComputable`** は読み取り専用のプロパティであり、論理値のフラグで、 `ProgressEvent` が関係するリソースに計算可能な長さがあるかどうかを示します。そうでない場合、`ProgressEvent`プロパティは重要な値を持ちません。

値
-

論理値です。

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-progressevent-lengthcomputable |

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

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

関連情報
----

* 所属先の `ProgressEvent` インターフェイス


ProgressEvent: ProgressEvent() コンストラクター - Web API

ProgressEvent: ProgressEvent() コンストラクター
=======================================

**`ProgressEvent()`** コンストラクターは、長いプロセスの現在の完了状況を表す `ProgressEvent` を新しく生成して返します。

構文
--

```js
new ProgressEvent(type)
new ProgressEvent(type, options)
```

### 引数

`type`

 このイベントの名前の文字列です。
 大文字小文字を区別し、ブラウザーは `loadstart`, `progress`, `abort`, `error`, `load`, `timeout`, `loadend` の何れかを設定します。

`options` 省略可

オブジェクトで、*`Event()` で定義されているプロパティに加え*、以下のプロパティを持つことができます。

`lengthComputable` 省略可

論理値のフラグで、基礎となるプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能であるかどうかを示します。言い換えれば、進捗が測定可能かどうかを示します。既定値は `false` です。

`loaded` 省略可

数値で、基礎となるプロセスで既に実行された作業量を表します。行われた作業の割合は、このプロパティと `ProgressEvent.total` を用いて計算することができます。 HTTP を使用してリソースをダウンロードする場合、これはヘッダーやその他のオーバーヘッドではなく、コンテンツそのものの部分のみを表します。既定値は `0` です。

`total` 省略可

基礎となるプロセスが実行中の作業の総量を表す数値です。 HTTP を使用してリソースをダウンロードする場合、これはヘッダーやその他のオーバーヘッドではなく、コンテンツそのものを表します。既定値は `0` です。

### 返値

新しい `ProgressEvent` オブジェクトです。

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-progressevent-progressevent |

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

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

関連情報
----

* 所属先の `ProgressEvent` インターフェイス


ProgressEvent: total プロパティ - Web API

ProgressEvent: total プロパティ
==========================

**`ProgressEvent.total`** は読み取り専用のプロパティであり、 64 ビット符号なし整数値で、処理または転送されるデータの全体の大きさを示します。 HTTP 通信の場合は、これはメッセージの本文の大きさ (`Content-Length`) であり、ヘッダーやその他のオーバーヘッドは含みません。

このイベントの `lengthComputable` プロパティが `false` であった場合、この値は意味がなく、無視されます。

値
-

整数です。

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-progressevent-total |

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

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

関連情報
----

* 所属先の `ProgressEvent` インターフェイス


ProgressEvent: loaded プロパティ - Web API

ProgressEvent: loaded プロパティ
===========================

**`ProgressEvent.loaded`** は読み取り専用プロパティであり、整数で基礎となるプロセスの既に行われた仕事の量を表します。進捗率は、このプロパティと `ProgressEvent.total` から計算することができます。
 HTTP を使用してリソースをダウンロードする場合、この値はバイト単位を示し（ビット単位ではありません）、ヘッダーやその他のオーバーヘッドを除いた内容物自体のみを表します。

値
-

数値です。

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-progressevent-loaded |

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

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

関連情報
----

* 所属先の `ProgressEvent` インターフェイス


ValidityState.rangeUnderflow - Web API

ValidityState.rangeUnderflow
============================

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
**`rangeUnderflow`** は **`ValidityState`** オブジェクトの読み取り専用プロパティで、 `<input>` の値がユーザーに変更された後、その要素の `min` 属性に設定された制約に適合しないことを示します。

フィールドが数値の性質を持つ場合、例えば date, month, week, time, datetime-local, number, range の何れかの型であり、 `min` が設定されており、値が `min` の値に設定された制約に適合しない場合、 `rangeUnderflow` プロパティが true になります。

次のようになっていたとします。

```html
<input type="number" min="20" max="40" step="2" />
```

`value < 20` であれば、 `rangeUnderflow` は true になります。 `true` の場合、その要素は CSS の `:invalid` および `:out-of-range` 擬似クラスに一致します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-validitystate-rangeunderflow |

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

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

関連情報
----

* `ValidityState.rangeOverflow`
* 制約検証
* フォーム: データフォームの検証
* `step` 属性
* `max` 属性


ValidityState.tooShort - Web API

ValidityState.tooShort
======================

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
**`tooShort`** は **`ValidityState`** オブジェクトの読み取り専用プロパティで、 `<input>`, `<button>`, `<select>`, `<output>`, `<fieldset>`, `<textarea>` の何れかの値がユーザーによって変更された後、要素の `minlength` 属性で指定されたコード単位長よりも短くなったことを示します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-validitystate-tooshort-dev |

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

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

関連情報
----

* ガイド: 制約検証
* チュートリアル: フォームデータの検証


ValidityState.patternMismatch - Web API

ValidityState.patternMismatch
=============================

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
**`patternMismatch`** は **`ValidityState`** オブジェクトの読み取り専用プロパティで、 `<input>` 要素の値がユーザーによって編集された後で、その要素の `pattern` 属性で設定された制約に適合するかどうかを示します。

`patternMismatch` プロパティは、以下の条件がすべて真である場合にのみ、true となります。

* そのフィールドが `pattern` 属性に対応している場合 — つまり、 `<input>` の `type` が text, tel, email, url, password, search のいずれかであった場合
* `pattern` 属性の値が有効な正規表現に設定されていた場合
* `<input>` 値が `pattern` の値で設定された制約に適合していない場合
例
-

以下のものがあったとします。

```html
<p>
  <label
 >電話番号を (123)456-7890 の形で入力してください (<input
 name="tel1"
 type="tel"
 pattern="[0-9]{3}"
 placeholder="###"
 aria-label="3 桁の市外局番"
 size="2" />)-
    <input
 name="tel2"
 type="tel"
 pattern="[0-9]{3}"
 placeholder="###"
 aria-label="3 桁の市内局番"
 size="2" />
    -
    <input
 name="tel3"
 type="tel"
 pattern="[0-9]{4}"
 placeholder="####"
 aria-label="4 桁の加入者番号"
 size="3" />
  </label>
</p>
```

ここでは、北米の電話番号のための 3 つの部分があり、電話番号の 3 つの構成要素すべてを包含する暗黙のラベルが、それぞれ 3 桁、3 桁、4 桁を期待しています。それぞれが `pattern` 属性によってそのように定義されています。

値が長すぎたり短すぎたり、数字ではない文字が含まれていたりすると、 `patternMismatch` が true になります。 `true` の場合、要素は CSS の `:invalid` 擬似クラスに一致します。

```css
input:invalid {
  border: red solid 3px;
}
```

この場合、値の長さを決定するのはパターンであるため、値が長すぎたり短すぎたりした場合に発生するのは `patternMismatch` であり、 `validityState.tooLong` や `validityState.tooShort` ではないことに注意してください。代わりに `minlength` と `maxlength` 属性を使用していたら、 `validityState.tooLong` または `validityState.tooShort` が true になるかもしれません。

**メモ:** pattern 属性がない場合、 `email` 入力型は、少なくとも `x@y` に一致する必要があり、 `url` 型は、少なくとも x: に一致する必要があります。無効な場合、pattern 属性がない場合（またはその入力型で pattern 属性が無効な場合）は `validityState.typeMismatch` が true になります。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-validitystate-patternmismatch |

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

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

関連情報
----

* 制約検証
* フォーム: データフォームの検証
* 正規表現


ValidityState.tooLong - Web API

ValidityState.tooLong
=====================

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
**`tooLong`** は **`ValidityState`** オブジェクトの読み取り専用のプロパティで、 `<input>` や `<textarea>` の値がユーザーに変更された後、その要素の `maxlength` 属性で設定された最大コード単位長を超えているかどうかを示します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-validitystate-toolong-dev |

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

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

関連情報
----

* 制約検証
* フォーム: データフォームの検証


ValidityState.badInput - Web API

ValidityState.badInput
======================

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
**`badInput`** は ValidityState オブジェクトの読み取り専用のプロパティで、ブラウザーが変換できない入力をユーザーが行ったかどうかを示します。例えば、数値の入力欄に文字列がある場合です。

値
-

論理値です。

例
-

```html
<input type="number" id="age" />
```

```js
const input = document.getElementById("age");
if (input.validity.badInput) {
  console.log("Bad input detected…");
} else {
  console.log("Content of input OK.");
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-validitystate-badinput-dev |

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

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

関連情報
----

* ガイド: 制約検証
* チュートリアル: フォームデータの検証


ValidityState.typeMismatch - Web API

ValidityState.typeMismatch
==========================

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
**`typeMismatch`** は **`ValidityState`** オブジェクトの読み取り専用プロパティで、 `<input>` の値がユーザーによって変更された後、その要素の `type` 属性で設定された制約に適合していないことを示します。

`type` 属性が特定の文字列を期待している場合、例えば email や url 型で、型で設定された制約に適合しない値である場合は、 `typeMismatch` プロパティが true になります。

email 入力型は `multiple` 属性が存在するかどうかに応じて、1 つ以上の有効なメールアドレスを期待します。有効なメールアドレスには、メールの先頭部分と、トップレベルドメインの有無にかかわらず、ドメインが含まれます。email 入力の値が、空の文字列、単一の有効なメールアドレス、または、`multiple` 属性が存在する場合はカンマで区切られた 1 つ以上のメールアドレスでない場合は、`typeMismatch` となります。

url 入力型は、`multiple` 属性が存在するかどうかに応じて、 1 つ以上の有効な URL を想定しています。有効な URL には、プロトコル、任意で IP アドレス、または任意でサブドメイン、ドメイン、トップレベルドメインの組み合わせが含まれます。 URL 入力の値が空の文字列、単一の有効な URL、または `multiple` 属性が存在する場合はカンマで区切られた 1 つまたは複数の URL でない場合は、 `typeMismatch` となります。

| 入力型 | 値 | 期待される値 |
| --- | --- | --- |
| email | `x@y` や `x@y.z` | [TLD] の有無にかかわらず、メールアドレス |
| url | `x:` や `x://y.z` | プロトコルやプロトコル付きの完全 URL |

例
-

次のような例があったとします。

```html
<p>
  <label>
    Enter an email address:
    <input type="email" value="example.com" />
  </label>
</p>
<p>
  <label>
    Enter a URL:
    <input type="url" value="example.com" />
  </label>
</p>
```

```css
input:invalid {
  border: red solid 3px;
}
```

上記のものは、メールアドレスが単なるドメインであり、 URL にプロトコルがないため、`typeMismatch`が発生します。

`typeMismatch` は、 `type` 属性で期待される `value` の値と、実際に存在するデータとの間に不一致がある場合に発生します。 `typeMismatch` は数あるエラーのひとつで、 email と url の入力型にのみ関係します。他の入力型では、提供された値が型に基づく期待値と一致しない場合、異なるエラーが発生します。例えば、 number の入力値が浮動小数点数でない場合、 `badInput` が `true` になります。メールが `required` であるにもかかわらず空の場合は、 `valueMissing` が `true` になります。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-validitystate-typemismatch |

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

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

関連情報
----

* 制約検証
* フォーム: データフォームの検証
* 正規表現


ValidityState.stepMismatch - Web API

ValidityState.stepMismatch
==========================

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
**`stepMismatch`** は **`ValidityState`** オブジェクトの読み取り専用プロパティで、 `<input>` の値がユーザーに変更された後、その要素の `step` 属性に設定された制約に適合しないことを示します。

フィールドが数値の性質を持つ場合、例えば date, month, week, time, datetime-local, number, range の何れかの型であり、 step の値が `any` ではなく、値が `step` と `min` の値に設定された制約に適合しない場合に、 `stepMismatch` が true になります。フォームコントロールの値から `min` の値を引き、 `step` 値 (省略時は既定で 1) がゼロでない場合、一致しないと言えます。

次のようになっていたとします。

```html
<input type="number" min="20" max="40" step="2" />
```

`(value - min) % 2 != 0` であれば、 `stepMismatch` は true になります。

`true` の場合、その要素は CSS の `:invalid` および `:out-of-range` 擬似クラスに一致します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-validitystate-stepmismatch |

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

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

関連情報
----

* 制約検証
* フォーム: データフォームの検証
* `step` 属性


ValidityState.valueMissing - Web API

ValidityState.valueMissing
==========================

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
**`valueMissing`** は **`ValidityState`** オブジェクトの読み取り専用プロパティで、必須 (`required`) のコントロール、例えば `<input>`, `<select>`, `<textarea>` の値が空であることを示します。

`required` 属性が設定されており、`<option>` が選択されていない場合、または `<textarea>` やユーザーが編集できる `<input>` が空の場合、 `valueMissing` 属性は `true` になります。このプロパティは、フィールドが必須かつ値がない場合にのみ `true` となります。フィールドが必須でない場合、またはフィールドが必須でも値がある場合には、値は `false` となります。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-validitystate-valuemissing-dev |

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

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

関連情報
----

* 制約検証
* フォーム: データフォームの検証
* 正規表現


ValidityState.rangeOverflow - Web API

ValidityState.rangeOverflow
===========================

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
**`rangeOverflow`** は **`ValidityState`** オブジェクトの読み取り専用プロパティで、 `<input>` の値がユーザーに変更された後、その要素の `max` 属性に設定された制約に適合しないことを示します。

フィールドが数値の性質を持つ場合、例えば date, month, week, time, datetime-local, number, range の何れかの型であり、 `max` が設定されており、値が `max` の値に設定された制約に適合しない場合、 `rangeOverflow` プロパティが true になります。

次のようになっていたとします。

```html
<input type="number" min="20" max="40" step="2" />
```

`value > 40` であれば、 `rangeOverflow` は true になります。 `true` の場合、その要素は CSS の `:invalid` および `:out-of-range` 擬似クラスに一致します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-validitystate-rangeoverflow |

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

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

関連情報
----

* `ValidityState.rangeUnderflow`
* 制約検証
* フォーム: データフォームの検証
* `step` 属性
* `min` 属性


ShadowRoot.delegatesFocus - Web API

ShadowRoot.delegatesFocus
=========================

**`delegatesFocus`** は `ShadowRoot` インターフェイスの読み取り専用プロパティで、シャドウルートがフォーカスを委任する場合は `true`、そうでなければ `false` を返します。

`true` の場合、シャドウ DOM のフォーカスを受け取れない部分がクリックさると、フォーカスを受け取ることができる最初の部分がフォーカスを受け取り、シャドウホストが `:focus` のスタイルになります。

このプロパティの値は `Element.attachShadow()`) に渡されたオブジェクトの `delegatesFocus` プロパティを使用して設定します。

### 値

```js
let customElem = document.querySelector('my-shadow-dom-element');
let shadow = customElem.shadowRoot;

  ...

// Does it delegate focus?
let hostElem = shadow.delegatesFocus;
```

仕様書
---

| Specification |
| --- |
| DOM Standard # shadowroot-delegates-focus |

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

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


ShadowRoot.styleSheets - Web API

ShadowRoot.styleSheets
======================

**`styleSheets`** は `ShadowRoot` インターフェイスの読み取り専用プロパティで、シャドウツリーに明示的にリンクされるか埋め込まれたスタイルシートを表す `CSSStyleSheet` オブジェクトの `StyleSheetList` を返します。

構文
--

```js
shadowRoot.styleSheets;
```

### 値

`CSSStyleSheet` オブジェクトの `StyleSheetList` です。

例
-

```js
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;
let styleSheets = shadow.styleSheets;
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-documentorshadowroot-stylesheets |

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

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


ShadowRoot.getAnimations() - Web API

ShadowRoot.getAnimations()
==========================

**`getAnimations()`** は `ShadowRoot` のメソッドで、ターゲット要素がシャドウツリーの子孫である、現在有効なすべての `Animation` オブジェクトの配列を返します。この配列には CSS アニメーション、CSS トランジション、ウェブアニメーション が含まれています。

構文
--

```js
getAnimations();
```

### 引数

なし。

### 返値

`Animation` オブジェクトの配列 (`Array`) で、それぞれが呼び出された `ShadowRoot` の子孫である要素に現在関連付けられた 1 つのアニメーションを表します。

例
-

次のコードでは、シャドウツリーにあるすべてのアニメーションの `Animation.playbackRate` を半分にすることで、アニメーションの速度を下げます。

```js
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;
shadow.getAnimations().forEach(function (animation) {
  animation.playbackRate \*= 0.5;
});
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-documentorshadowroot-getanimations |

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

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

関連情報
----

* Web Animations API
* CSS アニメーション
* CSS トランジション
* `Element.getAnimations()` - 単一の
 `Element` とその配下のアニメーションのみを読み取ります。
* `Animation`


ShadowRoot.innerHTML - Web API

ShadowRoot.innerHTML
====================

**`innerHTML`** は `ShadowRoot` インターフェイスのプロパティで、 `ShadowRoot` の内部の DOM ツリーに対する参照を設定したり返したりします。

構文
--

```js
var domString = shadowRoot.innerHTML;
shadowRoot.innerHTML = domString;
```

### 値

`DOMString` です。

例
-

```js
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;

shadow.innerHTML = "<strong>This element should be more important!</strong>";
```

仕様書
---

| Specification |
| --- |
| DOM Parsing and Serialization # ref-for-dom-innerhtml-innerhtml-2 |

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

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


ShadowRoot.mode - Web API

ShadowRoot.mode
===============

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
**`mode`** は `ShadowRoot` の読み取り専用プロパティで、モードを `open` と `closed` のどちらかで示します。これはシャドウルートの内部機能を JavaScript からアクセスできるかどうかを定義します。

シャドウルートの `mode` が "`closed`" であった場合、シャドウルートの内部的な実装は JavaScript からアクセスできず、変更できなくなります。例えば、 `<video>` の内部の実装は JavaScript からアクセスも変更もできないのと同様になります。

構文
--

```js
var mode = shadowRoot.mode;
```

### 値

`ShadowRootMode` 列挙型で定義された値です。 `open` か `closed` のどちらかです。

例
-

```js
  // アクセスできない closed のシャドウルートを作成します
  let element = document.createElement("div");
  element.attachShadow({ mode: "closed" });
  element.shadowRoot // シャドウルートが closed なので null

  // アクセスできる open のシャドウルートを作成します
  let element2 = document.createElement("div");
  element2.attachShadow({ mode: "open" });
  console.log("The shadow is" + element2.shadowRoot.mode) // "The shadow is open" と出力
  element2.shadowRoot.innerHTML("

Opened shadow

") // シャドウは open なので、外部からアクセスできます
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-shadowroot-mode |

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

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