IDBObjectStore: autoIncrement プロパティ - Web API

IDBObjectStore: autoIncrement プロパティ
===================================

`IDBObjectStore` インターフェイスの読み取り専用プロパティ **`autoIncrement`** は、このオブジェクトストアのオートインクリメントフラグの値を返します。

なお、各オブジェクトストアにそれぞれ別のオートインクリメントカウンターがあります。

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

値
-

以下の論理値です。

| 値 | 意味 |
| --- | --- |
| `true` | オブジェクトストアはオートインクリメントを行います。 |
| `false` | オブジェクトストアはオートインクリメントを行いません。 |

例
-

以下のコード断片では、データベースの読み書きトランザクションを開き、`add()` を用いてデータをオブジェクトストアに追加します。オブジェクトストアの生成後、コンソールに `objectStore.autoIncrement` を記録します。動く例全体は、To-do Notifications アプリケーションを参照してください。(動く例を見る)

```js
// データベースを開く
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>データベースを初期化しました。</li>";

  // データベースを開いた結果を変数 db に格納する
  // これは後でよく使う
  db = DBOpenRequest.result;

  // addData() 関数を実行し、データをデータベースに追加する
  addData();
};

function addData() {
  // IDB に挿入できる新しいオブジェクトを生成する
  const newItem = [
    {
      taskTitle: "Walk dog",
      hours: 19,
      minutes: 30,
      day: 24,
      month: "December",
      year: 2013,
      notified: "no",
    },
  ];

  // 読み書きトランザクションを開き、データを追加する準備をする
  const transaction = db.transaction(["toDoList"], "readwrite");

  // すべて完了し、トランザクションが正常終了したら報告する
  transaction.oncomplete = (event) => {
    note.innerHTML += "<li>トランザクションが完了しました。</li>";
  };

  transaction.onerror = (event) => {
    note.innerHTML +=
      "<li>トランザクションはエラーのため開けませんでした。アイテムは重複させられません。</li>";
  };

  // トランザクション上でオブジェクトストアを生成する
  const objectStore = transaction.objectStore("toDoList");
  console.log(objectStore.autoIncrement);

  // オブジェクトストアに newItem オブジェクトを追加する要求を行う
  const objectStoreRequest = objectStore.add(newItem[0]);

  objectStoreRequest.onsuccess = (event) => {
    // 要求の成功を報告する
    note.innerHTML += "<li>要求に成功しました。</li>";
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbobjectstore-autoincrement① |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キー範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)


IDBObjectStore: clear() メソッド - Web API

IDBObjectStore: clear() メソッド
============================

`IDBObjectStore` インターフェイスの **`clear()`** メソッドは、`IDBRequest` を生成してすぐに返します。そして、別スレッドでオブジェクトストアをクリアします。これは、オブジェクトストア内のデータをすべて削除する操作です。

オブジェクトストアのクリアは、オブジェクトストアからレコードをすべて削除し、このオブジェクトストアを参照するインデックスの全レコードを削除する操作です。オブジェクトストア内の一部のレコードのみを削除するには、`IDBObjectStore.delete` にキーまたは `IDBKeyRange` を渡してください。

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

構文
--

```js
clear()
```

### 引数

なし

### 返値

この操作に関係する今後のイベントが発火する `IDBRequest` オブジェクトです。

操作に成功した場合は、この要求の `result` プロパティの値は `undefined` になります。

### 例外

`ReadOnlyError` `DOMException`

この操作に対応するトランザクションが読み取り専用モードのとき投げられます。

`TransactionInactiveError` `DOMException`

この `IDBObjectStore` のトランザクションが実行中でないとき投げられます。

例
-

以下のコード断片では、データベースの読み書きトランザクションを開き、`clear()` を用いてオブジェクトストア内の全データを消去します。動く例全体は、To-do Notifications アプリケーションを参照してください。(動く例を見る)

```js
// データベースを開く
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>データベースを初期化しました。</li>";

  // データベースを開いた結果を変数 db に格納する
  // これは後でよく使う
  db = DBOpenRequest.result;

  // オブジェクトストアから全データを消去する
  clearData();
};

function clearData() {
  // 読み書きトランザクションを開き、データを消去する準備をする
  const transaction = db.transaction(["toDoList"], "readwrite");

  // すべて完了したとき、トランザクションの正常終了を報告する
  transaction.oncomplete = (event) => {
    note.innerHTML += "<li>トランザクションが完了しました。</li>";
  };

  transaction.onerror = (event) => {
    note.innerHTML += `<li>トランザクションはエラーのため開けませんでした: ${transaction.error}</li>`;
  };

  // トランザクションでオブジェクトストアを生成する
  const objectStore = transaction.objectStore("toDoList");

  // オブジェクトストアから全データを消去する要求をする
  const objectStoreRequest = objectStore.clear();

  objectStoreRequest.onsuccess = (event) => {
    // 要求の成功を報告する
    note.innerHTML += "<li>要求に成功しました。</li>";
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbobjectstore-clear③ |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キー範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)


IDBObjectStore: transaction プロパティ - Web API

IDBObjectStore: transaction プロパティ
=================================

`IDBObjectStore` インターフェイスの読み取り専用プロパティ **`transaction`** は、このオブジェクトストアが属するトランザクションオブジェクトを返します。

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

値
-

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

例
-

以下のコード断片では、データベースの読み書きトランザクションを開き、`add()` を用いてデータをオブジェクトストアに追加します。オブジェクトストアの生成後、コンソールに `objectStore.transaction` を記録します。動く例全体は、To-do Notifications アプリケーションを参照してください。(動く例を見る)

```js
// データベースを開く
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>データベースを初期化しました。</li>";

  // データベースを開いた結果を変数 db に格納する
  // これは後でよく使う
  db = DBOpenRequest.result;

  // addData() 関数を実行し、データをデータベースに追加する
  addData();
};

function addData() {
  // IDB に挿入できる新しいオブジェクトを生成する
  const newItem = [
    {
      taskTitle: "Walk dog",
      hours: 19,
      minutes: 30,
      day: 24,
      month: "December",
      year: 2013,
      notified: "no",
    },
  ];

  // 読み書きトランザクションを開き、データを追加する準備をする
  const transaction = db.transaction(["toDoList"], "readwrite");

  // すべて完了し、トランザクションが正常終了したら報告する
  transaction.oncomplete = (event) => {
    note.innerHTML += "<li>トランザクションが完了しました。</li>";
  };

  transaction.onerror = (event) => {
    note.innerHTML +=
      "<li>トランザクションはエラーのため開けませんでした。アイテムは重複させられません。</li>";
  };

  // トランザクション上でオブジェクトストアを生成する
  const objectStore = transaction.objectStore("toDoList");
  console.log(objectStore.transaction);

  // オブジェクトストアに newItem オブジェクトを追加する要求を行う
  const objectStoreRequest = objectStore.add(newItem[0]);

  objectStoreRequest.onsuccess = (event) => {
    // 要求の成功を報告する
    note.innerHTML += "<li>要求に成功しました。</li>";
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbobjectstore-transaction① |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キー範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)


IDBObjectStore: add() メソッド - Web API

IDBObjectStore: add() メソッド
==========================

`IDBObjectStore` インターフェイスの **`add()`** メソッドは、`IDBRequest` オブジェクトを返し、別スレッドで値の構造化複製を生成し、この複製をオブジェクトストアに保存します。これはオブジェクトストアに新しいレコードを追加する操作です。

`success` イベントが発火した後でもトランザクションは失敗するかもしれないので、追加操作が正常に完了したかを判定するには、`IDBObjectStore.add` 要求の `success` イベントに加え、トランザクションの `complete` イベントも監視してください。言い換えると、`success` イベントはトランザクションをキューに追加するのに成功した時点で発火します。

`add` メソッドは *挿入のみを行う* メソッドです。引数 `key` をキーとするレコードがオブジェクトストア内に既に存在する場合、返される要求オブジェクトで `ConstraintError` のエラーイベントが発火します。既存のレコードを更新するには、かわりに `IDBObjectStore.put` を用いてください。

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

構文
--

```js
add(value)
add(value, key)
```

### 引数

`value`

保存する値です。

`key` 省略可

レコードを識別するキーです。指定されない場合は、`null` になります。

### 返値

この操作に関係する今後のイベントが発火する `IDBRequest` オブジェクトです。

操作に成功した場合は、この要求の `result` プロパティの値は新しいレコードのキーになります。

### 例外

このメソッドは、以下の種類のいずれかの `DOMException` を投げる可能性があります。

`ReadOnlyError` `DOMException`

この操作に対応するトランザクションが読み取り専用モードのとき投げられます。

`TransactionInactiveError` `DOMException`

この `IDBObjectStore` のトランザクションが実行中でないとき投げられます。

`DataError` `DOMException`

以下のいずれかの条件を満たすとき投げられます。

* オブジェクトストアがインラインキーを用いているかキージェネレーターが存在し、引数 `key` が指定されたとき。
* オブジェクトストアがアウトラインキーを用いかつキージェネレーターも存在せず、引数 `key` が指定されないとき。
* オブジェクトストアがインラインキーを用いているがキージェネレーターは存在せず、オブジェクトストアのキーパスが有効なキーを生成しないとき。
* 引数 `key` が指定されたが、有効なキーでないとき。

`InvalidStateError` `DOMException`

`IDBObjectStore` が削除されたか取り除かれたとき投げられます。

`DataCloneError` `DOMException`

保存されるデータが内部の構造化複製アルゴリズムで複製できなかったとき投げられます。

`ConstraintError` `DOMException`

主キー制約の違反により挿入操作に失敗したとき投げられます。(同じ主キーの値を持つレコードが既に存在するとき)

例
-

以下のコード断片では、データベースの読み書きトランザクションを開き、`add()` を用いてオブジェクトストアにデータを追加します。トランザクションイベントハンドラーに設定された関数により、成功時または失敗時、トランザクションを開いた結果を報告することにも注目してください。動く例全体は、To-do Notifications アプリケーションを参照してください。(動く例を見る)

```js
// データベースを開く
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>データベースを初期化しました。</li>";

  // データベースを開いた結果を変数 db に格納する
  // これは後でよく使う
  db = DBOpenRequest.result;

  // addData() 関数を実行し、データをデータベースに追加する
  addData();
};

function addData() {
  // IDB に挿入できる新規オブジェクトを生成する
  const newItem = [
    {
      taskTitle: "Walk dog",
      hours: 19,
      minutes: 30,
      day: 24,
      month: "December",
      year: 2013,
      notified: "no",
    },
  ];

  // 読み書きトランザクションを開き、データを追加する準備をする
  const transaction = db.transaction(["toDoList"], "readwrite");

  // すべて完了したとき、トランザクションの正常終了を報告する
  transaction.oncomplete = (event) => {
    note.innerHTML += "<li>トランザクションが完了しました。</li>";
  };

  transaction.onerror = (event) => {
    note.innerHTML +=
      "<li>トランザクションはエラーのため開けませんでした。アイテムは重複させられません。</li>";
  };

  // トランザクションでオブジェクトストアを生成する
  const objectStore = transaction.objectStore("toDoList");

  // オブジェクトストアに newItem オブジェクトを追加する要求をする
  const objectStoreRequest = objectStore.add(newItem[0]);

  objectStoreRequest.onsuccess = (event) => {
    // 要求の成功を報告する
    note.innerHTML += "<li>要求に成功しました。</li>";
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbobjectstore-add① |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キー範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)


IDBObjectStore: get() メソッド - Web API

IDBObjectStore: get() メソッド
==========================

`IDBObjectStore` インターフェイスの **`get()`** メソッドは、`IDBRequest` オブジェクトを返し、別スレッドで指定のキーによって選択されるオブジェクトを返します。これはオブジェクトストアから特定のレコードを取得する用です。

値が正常に見つかった場合は、その構造化複製が作成され、要求オブジェクトの `result` 属性に設定されます。

**メモ:** このメソッドは「レコードがデータベースに存在しない場合」と「レコードの値が `undefined` の場合」で同じ結果を返します。
 これらを区別するには、同じキーで `openCursor()` メソッドを呼びます。このメソッドは、レコードが存在する場合はカーソルを返し、存在しない場合はカーソルを返しません。

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

構文
--

```js
get(key)
```

### 引数

`key`

取得するレコードを特定するキーまたはキー範囲です。

### 返値

この操作に関係する今後のイベントが発火する `IDBRequest` オブジェクトです。

操作に成功した場合は、この要求の `result` プロパティの値は指定のキーまたはキー範囲にマッチする最初のレコードの値になります。

### 例外

このメソッドは、以下の種類のいずれかの `DOMException` を投げる可能性があります。

`TransactionInactiveError` `DOMException`

この `IDBObjectStore` のトランザクションが実行中でないとき投げられます。

`DataError` `DOMException`

与えられたキーまたはキー範囲に無効なキーが含まれる時投げられます。

`InvalidStateError` `DOMException`

この `IDBObjectStore` が削除されたか取り除かれたとき投げられます。

例
-

以下のコード断片では、データベースの読み書きトランザクションを開き、`get()` を用いてオブジェクトストアから特定のレコード 1 個 (キー `"Walk dog"` を持つサンプルレコード) を取得します。データオブジェクトを取得したら、通常の JavaScript により更新し、`IDBObjectStore.put` 操作によりデータベースに書き戻すことができます。動く例全体は、To-do Notifications アプリケーションを参照してください。(動く例を見る)

```js
// データベースを開く
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>データベースを初期化しました。</li>";

  // データベースを開いた結果を変数 db に格納する
  // これは後でよく使う
  db = DBOpenRequest.result;

  // getData() 関数を実行し、データベースからデータを取得する
  getData();
};

function getData() {
  // データベースの読み書きトランザクションを開き、データを所得する準備をする
  const transaction = db.transaction(["toDoList"], "readwrite");

  // すべて完了したとき、トランザクションの正常終了を報告する
  transaction.oncomplete = (event) => {
    note.innerHTML += "<li>トランザクションが完了しました。</li>";
  };

  transaction.onerror = (event) => {
    note.innerHTML += `<li>トランザクションはエラーのため開けませんでした: ${transaction.error}</li>`;
  };

  // トランザクションでオブジェクトストアを生成する
  const objectStore = transaction.objectStore("toDoList");

  // オブジェクトストアからキーで指定したレコードを取得する要求をする
  const objectStoreRequest = objectStore.get("Walk dog");

  objectStoreRequest.onsuccess = (event) => {
    // 要求の成功を報告する
    note.innerHTML += "<li>要求に成功しました。</li>";

    const myRecord = objectStoreRequest.result;
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbobjectstore-get① |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キー範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)


ResizeObserver: disconnect() メソッド - Web API

ResizeObserver: disconnect() メソッド
=================================

**`disconnect()`** は `ResizeObserver` インターフェイスのメソッドで、すべての監視されている `Element` または `SVGElement` をターゲットとした監視を解除します。

構文
--

```js
disconnect()
```

### 引数

なし。

### 返値

なし (`undefined`)。

### 例外

なし。

例
-

```js
btn.addEventListener("click", () => {
  resizeObserver.disconnect();
});
```

仕様書
---

| Specification |
| --- |
| Resize Observer # dom-resizeobserver-disconnect |

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

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


ResizeObserver: unobserve() メソッド - Web API

ResizeObserver: unobserve() メソッド
================================

**`unobserve()`** は `ResizeObserver` インターフェイスのメソッドで、指定された `Element` または `SVGElement` の監視を終了します。

構文
--

```js
unobserve(target)
```

### 引数

`target`

監視を終了する `Element` または `SVGElement` への参照。

### 返値

なし (`undefined`)。

### 例外

なし。

例
-

次のスニペットは resize-observer-text.html (ソースを表示) の例から取ったものです。

```js
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      // クロームが標準外の配列を使用しているかどうかのチェック
      if (entry.contentBoxSize[0]) {
        h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentBoxSize[0].inlineSize / 200,
 )}rem`;
        pElem.style.fontSize = `${Math.max(
 1,
 entry.contentBoxSize[0].inlineSize / 600,
 )}rem`;
      } else {
        h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentBoxSize.inlineSize / 200,
 )}rem`;
        pElem.style.fontSize = `${Math.max(
 1,
 entry.contentBoxSize.inlineSize / 600,
 )}rem`;
      }
    } else {
      h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentRect.width / 200,
 )}rem`;
      pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
    }
  }
  console.log("サイズが変更されました");
});

resizeObserver.observe(divElem);

checkbox.addEventListener("change", () => {
  if (checkbox.checked) {
    resizeObserver.observe(divElem);
  } else {
    resizeObserver.unobserve(divElem);
  }
});
```

仕様書
---

| Specification |
| --- |
| Resize Observer # dom-resizeobserver-unobserve |

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

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


ResizeObserver: observe() メソッド - Web API

ResizeObserver: observe() メソッド
==============================

**`observe()`** は `ResizeObserver` インターフェイスのメソッドで、指定された `Element` または `SVGElement` の監視を開始します。

構文
--

```js
observe(target)
observe(target, options)
```

### 引数

`target`

監視する `Element` または `SVGElement` への参照。

`options` 省略可

監視のオプションを設定することができるオプションオブジェクトです。現在、設定可能なオプションは 1 つだけです。

`box`

オブザーバーがどのボックスモデルの変更を観察するかを設定します。設定可能な値は以下の通りです。

`content-box` (既定値)

CSS　で定義されたコンテンツ領域のサイズ。

`border-box`

CSS で定義されたボックス境界領域のサイズ。

`device-pixel-content-box`

CSS で定義されたコンテンツ領域の大きさ。デバイスピクセル単位で、要素またはその祖先に対して CSS 変換を適用する前の値。

### 返値

なし (`undefined`)。

### 例外

なし。

例
-

次のスニペットは resize-observer-text.html (ソースを表示) の例から取ったものです。

```js
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      // クロームが標準外の配列を使用しているかどうかのチェック
      if (entry.contentBoxSize[0]) {
        h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentBoxSize[0].inlineSize / 200,
 )}rem`;
        pElem.style.fontSize = `${Math.max(
 1,
 entry.contentBoxSize[0].inlineSize / 600,
 )}rem`;
      } else {
        h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentBoxSize.inlineSize / 200,
 )}rem`;
        pElem.style.fontSize = `${Math.max(
 1,
 entry.contentBoxSize.inlineSize / 600,
 )}rem`;
      }
    } else {
      h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentRect.width / 200,
 )}rem`;
      pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
    }
  }
  console.log("サイズが変更されました");
});

resizeObserver.observe(divElem);
```

オプションオブジェクトを使った `observe()` の呼び出しは、次のようになります。

```js
resizeObserver.observe(divElem, { box: "border-box" });
```

仕様書
---

| Specification |
| --- |
| Resize Observer # dom-resizeobserver-observe |

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

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


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

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

**`ResizeObserver`** コンストラクターは新しい `ResizeObserver` オブジェクトを作成し、これを `Element` のコンテンツまたは境界ボックス、または `SVGElement` のバウンディングボックスに対する変更を報告するために使用することができます。

構文
--

```js
new ResizeObserver(callback)
```

### 引数

`callback`

監視中のものに寸法の変更が発生するたびに呼び出される関数です。この関数は 2 つの引数で呼び出されます。

`entries`

`ResizeObserverEntry` オブジェクトの配列で、それぞれの変更の後で要素の新しい寸法にアクセスするために使用することができます。

`observer`

`ResizeObserver` 自身への参照で、必要に応じてコールバック内から確実にアクセスできます。これは、たとえば特定の条件に達したときにオブザーバーを自動的に監視解除するために使用できますが、必要ない場合は省略することができます。

コールバックは一般に、次のパターンに従います。

```js
function callback(entries, observer) {
  for (const entry of entries) {
    // 各項目に何かをする
    // 場合によってはオブザーバー自体に何かをする
  }
}
```

例
-

次のスニペットは resize-observer-text.html (ソースを表示) の例から取ったものです。

```js
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      if (entry.contentBoxSize[0]) {
        h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentBoxSize[0].inlineSize / 200,
 )}rem`;
        pElem.style.fontSize = `${Math.max(
 1,
 entry.contentBoxSize[0].inlineSize / 600,
 )}rem`;
      } else {
        // legacy path
        h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentBoxSize.inlineSize / 200,
 )}rem`;
        pElem.style.fontSize = `${Math.max(
 1,
 entry.contentBoxSize.inlineSize / 600,
 )}rem`;
      }
    } else {
      h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentRect.width / 200,
 )}rem`;
      pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
    }
  }
  console.log("サイズが変更されました");
});

resizeObserver.observe(divElem);
```

仕様書
---

| Specification |
| --- |
| Resize Observer # dom-resizeobserver-resizeobserver |

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

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


VRDisplayEvent.reason - Web API

VRDisplayEvent.reason
=====================

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

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

**`reason`** は `VRDisplayEvent` インターフェイスの読み取り専用プロパティで、イベントが発生した理由を人間可読な形で返します。

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

値
-

文字列で、このイベントが発生した理由を表します。利用可能な理由は `VRDisplayEventReason` 列挙型で次のように定義されています。

* `mounted` — `VRDisplay` は、ユーザーがそれを装着した（または他の方法でアクティブになった）ことを検知しました。
* `navigation` — このページは、すでに VR 表示モードになっている他のサイトなど、このページをすぐに表示し始めることができるコンテキストから移動されたものです。
* `requested` — ユーザーエージェントは、 VR表示モードの開始をリクエストされました。これにより、ユーザーエージェントは様々な形で VR に入るための一貫した UI を持つことができます。
* `unmounted` — `VRDisplay` は、ユーザーがそれを外した（または、それ以外のスリープ／スタンバイ状態になった）ことを検知しました。
例
-

```js
window.addEventListener("vrdisplaypresentchange", (e) => {
  console.log(
    `Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`,
  );
});
```

仕様書
---

このプロパティは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

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

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

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

関連情報
----

* WebVR API


VRDisplayEvent.display - Web API

VRDisplayEvent.display
======================

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

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

**`display`** は `VRDisplayEvent` インターフェイスの読み取り専用プロパティで、このイベントに関連付けられた `VRDisplay` を返します。

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

値
-

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

例
-

```js
window.addEventListener("vrdisplaypresentchange", (e) => {
  console.log(
    `Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`,
  );
});
```

仕様書
---

このプロパティは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

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

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

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

関連情報
----

* WebVR API


VRDisplayEvent() - Web API

VRDisplayEvent()
================

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

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

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

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

構文
--

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

### 引数

`type`

 文字列で、イベントの名前です。
 大文字小文字の区別があり、ブラウザーは `vrdisplayconnect`、`vrdisplaydisconnect`、`vrdisplayactivate`、`vrdisplaydeactivate`、`vrdisplayblur`、`vrdisplaypointerrestricted`、`vrdisplaypointerunrestricted`、`vrdisplaypresentchange` のいずれかに設定します。

`options`

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

`display`

このイベントが関連付けられている `VRDisplay` です。

`reason`

文字列で、イベントが発行された人間可読な理由を表します（`VRDisplayEvent.reason` を参照）。

### 返値

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

例
-

```js
const myEventObject = new VRDisplayEvent("custom", {
  display: vrDisplay,
  reason: "Custom reason",
});
```

仕様書
---

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

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

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

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

関連情報
----

* WebVR API


VRFieldOfView.downDegrees - Web API

VRFieldOfView.downDegrees
=========================

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

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

**`downDegrees`** は `VRFieldOfView` インターフェイスの読み取り専用プロパティで、視野が下方向に何度広がっているかを返します。

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

値
-

倍精度浮動小数点値です。

例
-

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

仕様書
---

このプロパティは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

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

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

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

関連情報
----

* WebVR API


VRFieldOfView.rightDegrees - Web API

VRFieldOfView.rightDegrees
==========================

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

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

**`rightDegrees`** は `VRFieldOfView` インターフェイスの読み取り専用プロパティで、視野が右方向に何度広がっているかを返します。

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

値
-

倍精度浮動小数点値です。

例
-

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

仕様書
---

このプロパティは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

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

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

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

関連情報
----

* WebVR API


VRFieldOfView.upDegrees - Web API

VRFieldOfView.upDegrees
=======================

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

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

**`upDegrees`** は `VRFieldOfView` インターフェイスの読み取り専用プロパティで、視野が上方向に何度広がっているかを返します。

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

値
-

倍精度浮動小数点値です。

例
-

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

仕様書
---

このプロパティは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

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

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

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

関連情報
----

* WebVR API


VRFieldOfView.leftDegrees - Web API

VRFieldOfView.leftDegrees
=========================

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

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

**`leftDegrees`** は `VRFieldOfView` インターフェイスの読み取り専用プロパティで、視野が左方向に何度広がっているかを返します。

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

値
-

倍精度浮動小数点値です。

例
-

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

仕様書
---

このプロパティは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

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

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

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

関連情報
----

* WebVR API


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

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

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

構文
--

```js
new AbortController()
```

### 引数

なし。

例
-

次のコードでは、動画のダウンロードをフェッチ API を使用して行おうとします。

最初に `AbortController()` コンストラクターを使用してコントローラーを作成し、関連する `AbortSignal` オブジェクトへの参照を `AbortController.signal` プロパティを使用して取り込みます。

フェッチリクエストが開始されると、 `AbortSignal` をリクエストのオプションオブジェクト（下記の `{ signal }`）にオプションとして渡します。これにより、シグナルとコントローラーをそのフェッチリクエストと関連付け、 2 つ目のイベントリスナーで下記のように `AbortController.abort()` を呼び出すことでフェッチを中断できるようになります。

```js
const controller = new AbortController();
const signal = controller.signal;

const url = "video.mp4";
const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  controller.abort();
  console.log("Download aborted");
});

function fetchVideo() {
  fetch(url, { signal })
    .then((response) => {
      console.log("Download complete", response);
    })
    .catch((err) => {
      console.error(`Download error: ${err.message}`);
    });
}
```

**メモ:** `abort()` が呼び出されると、`fetch()` のプロミスは `AbortError` で拒否されます。

GitHub に完全に動作する例があります。また、ライブでの実行も確認してください。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortcontroller-abortcontroller① |

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

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

関連情報
----

* フェッチ API


AbortController: abort() メソッド - Web API

AbortController: abort() メソッド
=============================

**`abort()`** は `AbortController` インターフェイスのメソッドで、 DOM リクエストを完了前に中止します。
 これはフェッチリクエスト、あらゆるレスポンス本体の消費、ストリームを中止することができます。

構文
--

```js
abort()
abort(reason)
```

### 引数

`reason` 省略可

 処理が中断された理由。JavaScript で任意の値を指定可能。
 指定しなかった場合、理由は "AbortError" `DOMException` に設定されます。

### 返値

なし (`undefined`)。

例
-

次のコードでは、動画のダウンロードをフェッチ API を使用して行おうとします。

最初に `AbortController()` コンストラクターを使用してコントローラーを作成し、関連する `AbortSignal` オブジェクトへの参照を `AbortController.signal` プロパティを使用して取り込みます。

フェッチリクエストが開始されると、 `AbortSignal` をリクエストのオプションオブジェクト（下記の `{signal}`）にオプションとして渡します。これにより、シグナルとコントローラーをそのフェッチリクエストと関連付け、 2 つ目のイベントリスナーで下記のように `AbortController.abort()` を呼び出すことでフェッチを中断できるようになります。

```js
const controller = new AbortController();
const signal = controller.signal;

const url = "video.mp4";
const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  controller.abort();
  console.log("Download aborted");
});

function fetchVideo() {
  fetch(url, { signal })
    .then((response) => {
      console.log("Download complete", response);
    })
    .catch((err) => {
      console.error(`Download error: ${err.message}`);
    });
}
```

**メモ:** `abort()` が呼び出されると、`fetch()` のプロミスは `AbortError` という名前の `DOMExceptoin` で拒否されます。

GitHub に完全に動作する例があります。また、ライブでの実行も確認してください。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortcontroller-abortcontroller① |

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

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

関連情報
----

* フェッチ API


AbortController: signal プロパティ - Web API

AbortController: signal プロパティ
=============================

**`signal`** は `AbortController` インターフェイスの読み取り専用プロパティで、求めに応じて DOM リクエストと連携したり中止したりするために使用される `AbortSignal` オブジェクトインスタンスを返します。

値
-

`AbortSignal` オブジェクトインスタンスです。

例
-

次のコードでは、動画のダウンロードをフェッチ API を使用して行おうとします。

最初に `AbortController()` コンストラクターを使用してコントローラーを作成し、関連する `AbortSignal` オブジェクトへの参照を `AbortController.signal` プロパティを使用して取り込みます。

フェッチリクエストが開始されると、 `AbortSignal` をリクエストのオプションオブジェクト（下記の `{signal}`）にオプションとして渡します。これにより、シグナルとコントローラーをそのフェッチリクエストと関連付け、 2 つ目のイベントリスナーで下記のように `AbortController.abort()` を呼び出すことでフェッチを中断できるようになります。

```js
const controller = new AbortController();
const signal = controller.signal;

const url = "video.mp4";
const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  controller.abort();
  console.log("Download aborted");
});

function fetchVideo() {
  fetch(url, { signal })
    .then((response) => {
      console.log("Download complete", response);
    })
    .catch((err) => {
      console.error(`Download error: ${err.message}`);
    });
}
```

**メモ:** `abort()` が呼び出されると、`fetch()` のプロミスは `AbortError` で拒否されます。

GitHub に完全に動作する例があります。また、ライブでの実行も確認してください。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortcontroller-signal② |

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

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

関連情報
----

* フェッチ API


NavigatorUAData.mobile - Web API

NavigatorUAData.mobile
======================

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

**`mobile`** は `NavigatorUAData` インターフェイスの読み取り専用プロパティで、この端末がモバイル端末であるかどうかを示す値を返します。

値
-

論理値です。モバイル端末なら `true` です。

例
-

以下の例では、 `mobile` の値をコンソールに表示します。

```js
console.log(navigator.userAgentData.mobile);
```

仕様書
---

| Specification |
| --- |
| User-Agent Client Hints # dom-navigatoruadata-mobile |

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

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

関連情報
----

* `Sec-CH-UA-Mobile` (en-US) ヘッダー（低エントロピークライアントヒント）が同じ情報を保持しています。


NavigatorUAData.toJSON() - Web API

NavigatorUAData.toJSON()
========================

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

**`toJSON()`** は `NavigatorUAData` インターフェイスのメソッドで、インターフェースは、 `NavigatorUAData` オブジェクトの低エントロピーのプロパティの JSON 表現を返す *シリアライザー* です。

**メモ:** 高エントロピーと低エントロピーという用語は、これらの値がブラウザーについて明らかにする情報の量を参照します。このメソッドで返される低エントロピーの値は、ユーザーを特定できるような情報を明らかにしない値です。高エントロピーの値は `NavigatorUAData.getHighEntropyValues()` メソッドによってのみ返すことができます。

構文
--

```js
toJSON()
```

### 引数

なし。

### 返値

JSON オブジェクトです。

例
-

次の例は、 JSON オブジェクトをコンソールに表示します。

```js
console.log(navigator.userAgentData.toJSON());
```

仕様書
---

| Specification |
| --- |
| User-Agent Client Hints # dom-navigatoruadata-tojson |

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

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


NavigatorUAData.getHighEntropyValues() - Web API

NavigatorUAData.getHighEntropyValues()
======================================

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

**`getHighEntropyValues()`** は `NavigatorUAData` インターフェイスのメソッドで、、ユーザーエージェントが返す *高エントロピー* 値を格納した辞書オブジェクトで解決される `Promise` を返し案す。

**メモ:** 「高エントロピー」「低エントロピー」という用語は、これらの値がブラウザーについて明らかにする情報の量を示します。
 プロパティとして返される値は、低エントロピーであり、ユーザーを特定する可能性は低いと判断されます。
 `NavigatorUAData.getHighEntropyValues()` が返す値は、より多くの情報を明らかにする可能性があります。
 そのため、これらの値は `Promise` によって取得され、ブラウザーがユーザーの許可を求めたり、他のチェックを行ったりする時間を確保することができます。

構文
--

```js
getHighEntropyValues(hints)
```

### 引数

`hints`

返すべきヒントを格納した配列で、 1 つまたは複数を指定します。

* `"architecture"`
* `"bitness"`
* `"model"`
* `"platformVersion"`
* `"uaFullVersion"`
非推奨
* `"fullVersionList"`

### 返値

以下の値の一部またはすべてを含むオブジェクトに解決する `Promise` です（リクエストされたヒントに基づく）。

`brands`

 ブラウザーのブランドとそのバージョン (`NavigatorUAData.brands` が提供する情報と同じもの) を指定した `brand` と `version` を格納したオブジェクトの配列を返します。
 なお、この情報は `Sec-CH-UA` (en-US) ヘッダーでサーバーへ送ることができます（低エントロピークライアントヒント）。

`mobile`

 ユーザーエージェントがモバイル端末で動作している場合、 `true` を返します（`NavigatorUAData.mobile` が提供するのと同じ情報です）。
 なお、この情報は `Sec-CH-UA-Mobile` (en-US) ヘッダーでサーバーへ送ることができます（低エントロピークライアントヒント）。

`platform`

`"Windows"`のようにユーザーエージェントが動作しているプラットフォームを記述した文字列を返します（`NavigatorUAData.platform`が提供する情報と同じものです）。
 なお、この情報は `Sec-CH-UA-Platform` (en-US) ヘッダーでサーバーに送信できることができます（低エントロピークライアントヒント）。

`architecture`

 プラットフォームアーキテクチャを格納した文字列。例えば `"x86"` です。
 なお、この情報は、 `Sec-CH-UA-Arch` (en-US) ヘッダーでサーバーが明示的にリクエストされた後に、 `Accept-CH` へ送ることができることができます。

`bitness`

 アーキテクチャのビット数を格納した文字列。例えば `"32"` または `"64"` です。
 なお、この情報は、 `Accept-CH` ヘッダーでサーバーが明示的にリクエストした場合、 `Sec-CH-UA-Bitness` (en-US) ヘッダーでサーバーに送ることができます。

`model`

 モバイル端末のモデルを格納した文字列。例えば `"Pixel 2XL"` です。機器がモバイル端末でない場合、または機器のモデルが不明な場合は `model` は `""` になります。
 なお、この情報は、 `Accept-CH` ヘッダでサーバーが明示的にリクエストすれば、 `Sec-CH-UA-Model` (en-US) でサーバーに送信することができます。

`platformVersion`

 プラットフォームのバージョンを格納した文字列。プラットフォーム名自体は、常に低エントロピーのヒント `platform` として利用することができます。例えば `"10.0"` です。
 なお、この情報は、 `Accept-CH` ヘッダーでサーバーが明示的にリクエストすれば、 `Sec-CH-UA-Platform-Version` (en-US) ヘッダーでサーバーに送ることができます。

`uaFullVersion`
非推奨

 完全なブラウザーバージョンを格納した文字列。例えば `"103.0.5060.134"` です。`fullVersionList` に取って代わられ、非推奨です。
 なお、この情報は、 `Accept-CH` ヘッダーでサーバーが明示的にリクエストした場合、 `Sec-CH-UA-Full-Version` (en-US) ヘッダーでサーバーに送ることができます。

`fullVersionList`

 オブジェクトの配列であり、プロパティ `"brand"` と `"version"` はそれぞれブラウザー名とフルバージョンを表す。
 例えば、 `{"brand": "Google Chrome", "version": "103.0.5060.134"}, {"brand": "Chromium", "version": "103.0.5060.134"}` です。
 オブジェクトによっては、サイトが固定されたブラウザーのリストに依存しないようにするため、意図的に無効な情報を格納している場合があることに注意してください。
 なお、この情報は、 `Accept-CH` ヘッダーでサーバーが明示的にリクエストした場合、 `Sec-CH-UA-Full-Version-List` (en-US) ヘッダーでサーバーに送ることができます。

### 例外

`NotAllowedError` `DOMException`

ユーザーエージェントが、リクエストされた `hints` の一つまたはそれ以上を返してはいけないと判断した場合に発生します。

例
-

 以下の例では、`getHighEntropyValues()` メソッドを使用して多くのヒントがリクエストされます。
 プロミスが解決すると、この情報がコンソールに表示されます。

```js
navigator.userAgentData
  .getHighEntropyValues([
    "architecture",
    "model",
    "platformVersion",
    "fullVersionList",
  ])
  .then((values) => console.log(values));
```

仕様書
---

| Specification |
| --- |
| User-Agent Client Hints # dom-navigatoruadata-gethighentropyvalues |

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

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

関連情報
----

* これらの値は、 HTTP リクエストヘッダー経由でも利用できます。
    + 低エントロピーのクライアントヒントは自動的に送信されます。
        - `Sec-CH-UA` (en-US)
        - `Sec-CH-UA-Mobile` (en-US)
        - `Sec-CH-UA-Platform` (en-US)
    + サーバーは `Accept-CH` ヘッダーを使用して、以降のリクエストで高エントロピーのクライアントヒントを受け取るようにリクエストすることができます。
        - `Sec-CH-UA-Arch` (en-US)
        - `Sec-CH-UA-Bitness` (en-US)
        - `Sec-CH-UA-Full-Version` (en-US)
        - `Sec-CH-UA-Model` (en-US)
        - `Sec-CH-UA-Platform-Version` (en-US)


NavigatorUAData.brands - Web API

NavigatorUAData.brands
======================

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

**`brands`** は `NavigatorUAData` インターフェイスの読み取り専用プロパティで、ブランド情報の配列を返します。

値
-

各ブランドの以下の情報を含む配列です。

`brand`

ブランドの文字列です。例えば `"Google Chrome"` です。

`version`

バージョンの文字列です。例えば `"91"` です。

例
-

以下の例は、 `NavigatorUAData.brands` の値をコンソールに表示するものです。

```js
console.log(navigator.userAgentData.brands);
```

仕様書
---

| Specification |
| --- |
| User-Agent Client Hints # dom-navigatoruadata-brands |

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

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

関連情報
----

* `Sec-CH-UA` (en-US) ヘッダー（低エントロピークライアントヒント）が同じ情報を保持しています。


NavigatorUAData.platform - Web API

NavigatorUAData.platform
========================

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

**`platform`** は `NavigatorUAData` インターフェイスの読み取り専用プロパティで、プラットフォームのブランド情報を返します。

値
-

 プラットフォームのブランドを格納した文字列。
 例えば `"Windows"` です。

例
-

以下の例は、 `platform` の値をコンソールに表示するものです。

```js
console.log(navigator.userAgentData.platform);
```

仕様書
---

| Specification |
| --- |
| User-Agent Client Hints # dom-navigatoruadata-platform |

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

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

関連情報
----

* `Sec-CH-UA-Platform` (en-US) ヘッダー（低エントロピークライアントヒント）が同じ情報を保持しています。


ImageBitmap: height プロパティ - Web API

ImageBitmap: height プロパティ
=========================

読み取り専用の **`ImageBitmap.height`** プロパティは、`ImageBitmap` オブジェクトの高さを CSS ピクセル数で返します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-imagebitmap-height-dev |

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

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


ImageBitmap: close() メソッド - Web API

ImageBitmap: close() メソッド
=========================

**`ImageBitmap.close()`** メソッドは、`ImageBitmap` に関連するすべてのグラフィカルリソースを破棄します。

構文
--

```js
close()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

```js
const offscreen = new OffscreenCanvas(256, 256);
const gl = offscreen.getContext("webgl");

// gl コンテキストを使用して描画する。

const bitmap = offscreen.transferToImageBitmap();
// ImageBitmap { width: 256, height: 256 }

bitmap.close();
// ImageBitmap { width: 0, height: 0 } — 破棄
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-imagebitmap-close-dev |

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

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

関連情報
----

* このメソッドを定義しているインターフェイス、`ImageBitmap`


ImageBitmap: width プロパティ - Web API

ImageBitmap: width プロパティ
========================

読み取り専用の **`ImageBitmap.width`** プロパティは、 `ImageBitmap` オブジェクトの幅を CSS ピクセル数で返します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-imagebitmap-width-dev |

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

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


TouchEvent: altKey プロパティ - Web API

TouchEvent: altKey プロパティ
========================

**`altKey`** は `TouchEvent` インターフェイスの読み取り専用プロパティで、タッチイベントが作成されたときに `alt` (Alternate) キーが押されていたかどうかを示す論理値を返します。`alt` キーが押されていた場合、この属性の値は `true` になります。そうでなかった場合は `false` になります。

このプロパティは読取専用 です。

値
-

論理値で、 `alt` キーがこのイベントで押されていた場合は `true`、押されていなかった場合は `false` です。

例
-

この例では、 `TouchEvent` のキー修飾プロパティ、`TouchEvent.altKey`、`TouchEvent.ctrlKey`、`TouchEvent.metaKey`、`TouchEvent.shiftKey` にアクセスする方法を示します。

以下のコードでは、 `touchstart` イベントハンドラーがイベントの修飾キーの状態をログ出力しています。

```js
someElement.addEventListener(
  "touchstart",
  (e) => {
    // このイベントの修飾キーの状態をログ出力
    console.log(`altKey = ${e.altKey}`);
    console.log(`ctrlKey = ${e.ctrlKey}`);
    console.log(`metaKey = ${e.metaKey}`);
    console.log(`shiftKey = ${e.shiftKey}`);
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touchevent-altkey |

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

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


TouchEvent: shiftKey プロパティ - Web API

TouchEvent: shiftKey プロパティ
==========================

**`shiftKey`** は `TouchEvent` インターフェイスの読み取り専用プロパティで、タッチイベントが作成されたときに `shift` キーが押されていたかどうかを示す論理値を返します。このキーが押されていた場合、属性の値は `true` になります。そうでなかった場合は `false` になります。

値
-

論理値で、 `shift` キーがこのイベントで押されていた場合は `true`、 `shift` が押されていなかった場合は `false` です。

例
-

TouchEvent.altKey の例に、このプロパティの使い方の例があります。

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touchevent-shiftkey |

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

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


TouchEvent: metaKey プロパティ - Web API

TouchEvent: metaKey プロパティ
=========================

**`metaKey`** は `TouchEvent` インターフェイスの読み取り専用プロパティで、タッチイベントが作成されたときに `Meta` キーが押されていたかどうかを示す論理値を返します。このキーが押されていた場合、属性の値は `true` になります。そうでなかった場合は `false` になります。

このプロパティは読取専用 です。

**メモ:** Macintosh のキーボードでは、これは `⌘ Command` キーです。 Windows のキーボードでは、これは Windows キー (`⊞`) です。

値
-

論理値で、 `Meta` キーがこのイベントで押されていた場合は `true`、 `Meta` が押されていなかった場合は `false` です。

例
-

TouchEvent.altKey の例に、このプロパティの使い方の例があります。

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touchevent-metakey |

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

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


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

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

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

**メモ:** このコンストラクタを使用して合成イベントを作成した場合、セキュリティ上の理由から、そのイベントは信頼されません。
 ブラウザーが生成した `TouchEvent` オブジェクトのみが信頼され、信頼されたイベントのみが既定のアクションを発生させます。

構文
--

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

### 引数

`type`

 イベントの名前の文字列です。
 大文字小文字の区別があり、ブラウザーは `touchstart`, `touchend`, `touchmove`, `touchcancel` のいずれかを設定します。

`options` 省略可

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

`touches` 省略可

`TouchList` （既定値は空）で、現在面に触れているすべてのタッチ点のオブジェクトのリストです。

`targetTouches` 省略可

`TouchList` （既定値は空）で、現在のイベントの対象である要素で接触を始め、現在接触中のすべてのタッチ点のリストです。

`changedTouches` 省略可

既定値は `[]`、型は `Touch[]` で、このイベントに貢献した接触点すべてのオブジェクトのリストです。

`ctrlKey` 省略可

論理値で、既定値は `false` であり、 `ctrl` キーが同時に押されていたかどうかを示します。

`shiftKey` 省略可

論理値で、既定値は `false` であり、 `shift` キーが同時に押されていたかどうかを示します。

`altKey` 省略可

論理値で、既定値は `false` であり、 `alt` キーが同時に押されていたかどうかを示します。

`metaKey` 省略可

論理値で、既定値は `false` であり、 `meta` キーが同時に押されていたかどうかを示します。

### 返値

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

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touchevent-constructor |

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

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

関連情報
----

* `TouchEvent`, the interface of the objects it constructs.


TouchEvent: targetTouches プロパティ - Web API

TouchEvent: targetTouches プロパティ
===============================

**`targetTouches`** は読み取り専用プロパティで、タッチ面にまだ接触しているタッチ点のうち、 `touchstart` イベントが現在のターゲット要素 (`element`) と同じターゲット要素内で発生したものを表すすべての `Touch` オブジェクトを列挙する `TouchList` です。

値
-

タッチ面にまだ接触しているタッチ点のうち、 `touchstart` イベントが現在のターゲット要素 (`element`) と同じターゲット要素内で発生したものを表すすべての `Touch` オブジェクトを列挙する `TouchList` です。

例
-

この例では `TouchEvent` オブジェクトの `TouchEvent.targetTouches` プロパティを説明します。 `TouchEvent.targetTouches` プロパティは `TouchList` オブジェクトで、現在のイベントの対象となる要素で現在タッチ面に触れているタッチ点を含めるために使用します。そのため、 `targetTouches` リストは `touches` リストの厳密な部分集合です。

以下のコードでは、この関数は `touches` リストの長さと `targetTouches` リストの長さを比較し、同じであれば `true` を返し、そうでなければ `false` を返します。

```js
function touches\_in\_target(ev) {
  // すべてのタッチが対象要素内にある場合は true を返す。
  // そうでない場合は false を返す。
  return ev.touches.length === ev.targetTouches.length;
}
```

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touchevent-targettouches |

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

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


TouchEvent: ctrlKey プロパティ - Web API

TouchEvent: ctrlKey プロパティ
=========================

**`ctrlKey`** は `TouchEvent` インターフェイスの読み取り専用プロパティで、タッチイベントが作成されたときに `control` （コントロール）キーが押されていたかどうかを示す論理値を返します。このキーが押されていた場合、属性の値は `true` です。そうでなかった場合は `false` です。

このプロパティは読取専用 です。

値
-

論理値で、 `control` キーがこのイベントで押されていた場合は `true`、押されていなかった場合は `false` です。

例
-

TouchEvent.altKey の例に、このプロパティの使い方の例があります。

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touchevent-ctrlkey |

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

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


TouchEvent: changedTouches プロパティ - Web API

TouchEvent: changedTouches プロパティ
================================

**`changedTouches`** は読み取り専用プロパティで、 `TouchList` です。そのタッチ点（`Touch` オブジェクト）はイベントタイプによって以下のように異なります。

* `touchstart` イベントでは、現在のイベントでアクティブになったタッチ点のリストです。
* `touchmove` イベントでは、前回のイベント以降に変更されたタッチ点のリストです。
* `touchend` イベントでは、これはタッチ面から除去されたタッチ点のリストです（つまり、タッチ面に触れなくなった指に対応するタッチ点の集合）。
値
-

`TouchList` の `Touch` オブジェクトには、このタッチイベントに寄与したすべてのタッチ点が含まれています。

例
-

この例では、`TouchEvent` オブジェクトの `TouchEvent.changedTouches` プロパティを示します。 `TouchEvent.changedTouches` プロパティは `TouchList` オブジェクトで、イベントに貢献した各タッチ点の `Touch` オブジェクトを 1 つ格納します。

以下のコードでは、 `touchmove` イベントハンドラーが `changedTouches` リストを反復処理し、最後のイベント以降に変更された各タッチ点の識別子を出力しています。

```js
someElement.addEventListener(
  "touchmove",
  (e) => {
    // 最後のイベント以降に変更されたタッチ点のリストを反復処理し、
    // 各タッチ点の識別子を出力
    for (let i = 0; i < e.changedTouches.length; i++) {
      console.log(
        `changedTouches[${i}].identifier = ${e.changedTouches[i].identifier}`,
      );
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touchevent-changedtouches |

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

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


TouchEvent: touches プロパティ - Web API

TouchEvent: touches プロパティ
=========================

**`touches`** は読み取り専用の `TouchList` で、現在タッチ面に接触しているタッチ点の `Touch` オブジェクトをすべて列挙します。タッチ点の変更の有無や、 `touchstart` 時点で対象としていた要素が何であったかは関係ありません。

何本の別個の指が画面に触れていると識別されるか、と考えればよいでしょう。

**メモ:** 配列内のタッチは必ずしも発生順（配列の i 番目の要素が発生した i 番目のタッチ）に並んでいるとは限りません。固有の順序を想定することはできません。タッチの発生順序を決定するには、 `touch` オブジェクト ID を使用してください。

値
-

`TouchList` で、現在タッチ面に接触しているタッチ点の `Touch` オブジェクトをすべて列挙します。タッチ点の変更の有無や、 `touchstart` 時点で対象としていた要素が何であったかは関係ありません。

例
-

この例では、 `TouchEvent` オブジェクトの `TouchEvent.touches` プロパティを説明しています。 `TouchEvent.touches` プロパティは `TouchList` オブジェクトであり、現在タッチ面に接触しているすべてのタッチ点の `Touch` オブジェクトのリストを格納しています。

以下のコードでは、 `touchstart` イベントハンドラーは `TouchEvent.touches` リストの長さを調べてアクティブになったタッチ点の数を決定し、タッチ点の数に応じて異なるハンドラーを呼び出しています。

```js
someElement.addEventListener(
  "touchstart",
  (e) => {
    // タッチ点の数に応じて適切なハンドラーを呼び出す
    switch (e.touches.length) {
      case 1:
        handle\_one\_touch(e);
        break;
      case 2:
        handle\_two\_touches(e);
        break;
      case 3:
        handle\_three\_touches(e);
        break;
      default:
        console.log("未対応です");
        break;
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touchevent-touches |

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

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


FileSystemSyncAccessHandle.read() - Web API

FileSystemSyncAccessHandle.read()
=================================

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

`FileSystemSyncAccessHandle` インターフェイスの **`read()`** メソッドは、ハンドルに対応するファイルの内容を指定のバッファーに読み込みます。オフセットを指定することもできます。

構文
--

```js
read(buffer, FileSystemReadWriteOptions)
```

### 引数

`buffer`

ファイルの内容を読み込むバッファーを表す `ArrayBuffer` または (`DataView` などの) `ArrayBufferView` です。`ArrayBuffer` の内容を直接操作することはできないことに注意してください。かわりに、バッファーを特定のフォーマットで表す `Int8Array` などの型付き配列のうちの一つ、もしくは `DataView` のオブジェクトを作成し、それを用いてバッファーの内容を読み書きします。

`FileSystemReadWriteOptions` 省略可

以下のプロパティを持つオプションオブジェクトです。

`at`

ファイルをどこから読み込むかのバイト単位のオフセットを表す数値です。

### 返値

ファイルから読み込んだバイト数を表す数値で解決する `Promise` を返します。

### 例外

`InvalidStateError` `DOMException`

対応するアクセスハンドルが既に閉じられているとき投げられます。

例
-

以下の非同期のイベントハンドラー関数は、Web Worker の中にあります。メインスレッドからメッセージを受信すると、以下の動作をします。

* 同期式アクセスハンドルを作成します。
* ファイルのサイズを取得し、格納用の `ArrayBuffer` を作成します。
* ファイルの内容をバッファーに読み込みます。
* メッセージをエンコードし、ファイルの終端に書き込みます。
* 変更をディスクに書き込み、アクセスハンドルを閉じます。

```js
onmessage = async (e) => {
  // メインスクリプトからの処理対象のメッセージを取得する
  const message = e.data;

  // draft ファイルのハンドルを取得する
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // 同期式アクセスハンドルを取得する
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // ファイルのサイズを取得する
  const fileSize = accessHandle.getSize();
  // ファイルの内容をバッファーに読み込む
  const buffer = new DataView(new ArrayBuffer(fileSize));
  const readBuffer = accessHandle.read(buffer, { at: 0 });

  // メッセージをファイルの終端に書き込む
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);
  const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });

  // 変更をディスクに書き込む
  accessHandle.flush();

  // 完了したら、常に FileSystemSyncAccessHandle を閉じる
  accessHandle.close();
};
```

**メモ:** 仕様書の以前のバージョンでは、`close()`・`flush()`・`getSize()`・`truncate()` は誤って非同期のメソッドとされていました。これは現在では変更されていますが、まだ非同期バージョンをサポートしているブラウザーもあります。

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemsyncaccesshandle-read |

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

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


FileSystemSyncAccessHandle.truncate() - Web API

FileSystemSyncAccessHandle.truncate()
=====================================

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

`FileSystemSyncAccessHandle` インターフェイスの **`truncate()`** メソッドは、ハンドルに対応するファイルのサイズを指定のバイト数にします。

構文
--

```js
truncate(newSize)
```

### 引数

`newSize`

ファイルのリサイズ後のバイト数です。

### 返値

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

### 例外

`InvalidStateError` `DOMException`

対応するアクセスハンドルが既に閉じられているか、ファイルのバイナリデータの変更が失敗したとき投げられます。

`QuotaExceededError` `DOMException`

`newSize` がファイルのもとのサイズより大きく、ブラウザーのストレージ制限を超えるとき投げられます。

例
-

```js
async function truncateFile() {
  // draft ファイルのハンドルを取得する
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // 同期式アクセスハンドルを取得する
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // ファイルを 0 バイトに切り詰める
  accessHandle.truncate(0);

  // 変更をディスクに書き込む
  accessHandle.flush();

  // 完了したら、常に FileSystemSyncAccessHandle を閉じる
  accessHandle.close();
}
```

**メモ:** 仕様書の以前のバージョンでは、`close()`・`flush()`・`getSize()`・`truncate()` は誤って非同期のメソッドとされていました。これは現在では変更されていますが、まだ非同期バージョンをサポートしているブラウザーもあります。

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemsyncaccesshandle-truncate |

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

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


FileSystemSyncAccessHandle.close() - Web API

FileSystemSyncAccessHandle.close()
==================================

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

`FileSystemSyncAccessHandle` インターフェイスの **`close()`** メソッドは、開かれている同期式ファイルハンドルを閉じます。これ以降操作はできなくなり、ファイルハンドルに対応するファイルにかけた排他的ロックを解除します。

構文
--

```js
close()
```

### 引数

なし

### 返値

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

### 例外

なし

例
-

以下の非同期のイベントハンドラー関数は、Web Worker の中にあります。メインスレッドからメッセージを受信すると、以下の動作をします。

* 同期式ファイルアクセスハンドルを作成します。
* ファイルのサイズを取得し、格納用の `ArrayBuffer` を作成します。
* ファイルの内容をバッファーに読み込みます。
* メッセージをエンコードし、ファイルの終端に書き込みます。
* 変更をディスクに書き込み、アクセスハンドルを閉じます。

```js
onmessage = async (e) => {
  // メインスクリプトからの処理対象のメッセージを取得する
  const message = e.data;

  // draft ファイルのハンドルを取得する
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // 同期式アクセスハンドルを取得する
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // ファイルのサイズを取得する
  const fileSize = accessHandle.getSize();
  // ファイルの内容をバッファーに読み込む
  const buffer = new DataView(new ArrayBuffer(fileSize));
  const readBuffer = accessHandle.read(buffer, { at: 0 });

  // メッセージをファイルの終端に書き込む
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);
  const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });

  // 変更をディスクに書き込む
  accessHandle.flush();

  // 完了したら、常に FileSystemSyncAccessHandle を閉じる
  accessHandle.close();
};
```

**メモ:** 仕様書の以前のバージョンでは、`close()`・`flush()`・`getSize()`・`truncate()` は誤って非同期メソッドとされていました。これは現在では変更されていますが、まだ非同期バージョンをサポートしているブラウザーもあります。

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemsyncaccesshandle-close |

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

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


FileSystemSyncAccessHandle.getSize() - Web API

FileSystemSyncAccessHandle.getSize()
====================================

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

`FileSystemSyncAccessHandle` インターフェイスの **`getSize()`** メソッドは、ハンドルに対応するファイルのサイズをバイト単位で返します。

構文
--

```js
getSize()
```

### 引数

なし

### 返値

ファイルのバイト数を表す数値で解決する `Promise` を返します。

### 例外

`InvalidStateError` `DOMException`

対応するアクセスハンドルが既に閉じられているとき投げられます。

例
-

以下の非同期のイベントハンドラー関数は、Web Worker の中にあります。メインスレッドからメッセージを受信すると、以下の動作をします。

* 同期式ファイルアクセスハンドルを作成します。
* ファイルのサイズを取得し、格納用の `ArrayBuffer` を作成します。
* ファイルの内容をバッファーに読み込みます。
* メッセージをエンコードし、ファイルの終端に書き込みます、
* 変更をディスクに書き込み、アクセスハンドルを閉じます。

```js
onmessage = async (e) => {
  // メインスクリプトからの処理対象のメッセージを取得する
  const message = e.data;

  // draft ファイルのハンドルを取得する
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // 同期式アクセスハンドルを取得する
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // ファイルのサイズを取得する
  const fileSize = accessHandle.getSize();
  // ファイルの内容をバッファーに読み込む
  const buffer = new DataView(new ArrayBuffer(fileSize));
  const readBuffer = accessHandle.read(buffer, { at: 0 });

  // メッセージをファイルの終端に書き込む
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);
  const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });

  // 変更をディスクに書き込む
  accessHandle.flush();

  // 完了したら、常に FileSystemSyncAccessHandle を閉じる
  accessHandle.close();
};
```

**メモ:** 仕様書の以前のバージョンでは、`close()`・`flush()`・`getSize()`・`truncate()` は誤って非同期メソッドとされていました。これは現在は変更されていますが、まだ非同期バージョンをサポートしているブラウザーもあります。

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemsyncaccesshandle-getsize |

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

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


FileSystemSyncAccessHandle.flush() - Web API

FileSystemSyncAccessHandle.flush()
==================================

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

`FileSystemSyncAccessHandle` インターフェイスの **`flush()`** メソッドは、ハンドルに対応するファイルに `write()` メソッドにより行われたすべての変更をディスクに保存します。

心に留めておくべきこととして、このメソッドを呼ぶ必要があるのは変更のディスクへの書き込みを特定のタイミングで行う必要があるときのみです。そうでなければ、下層の OS に任せて都合のいいときに処理させることができ、ほとんどの場合はこれでいいでしょう。

構文
--

```js
flush()
```

### 引数

なし

### 返値

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

### 例外

なし

例
-

以下の非同期のイベントハンドラーは、Web Worker の中にあります。メインスレッドからのメッセージを受信すると、以下の動作をします。

* 同期式ファイルアクセスハンドルを作成します。
* ファイルのサイズを取得し、格納用の `ArrayBuffer` を作成します。
* ファイルの内容をバッファーに読み込みます。
* メッセージをエンコードし、ファイルの終端に書き込みます。
* 変更をディスクに書き込み、アクセスハンドルを閉じます。

```js
onmessage = async (e) => {
  // メインスクリプトからの処理対象のメッセージを取得する
  const message = e.data;

  // draft ファイルのハンドルを取得する
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // 同期式アクセスハンドルを取得する
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // ファイルのサイズを取得する
  const fileSize = accessHandle.getSize();
  // ファイルの内容をバッファーに読み込む
  const buffer = new DataView(new ArrayBuffer(fileSize));
  const readBuffer = accessHandle.read(buffer, { at: 0 });

  // メッセージをファイルの終端に書き込む
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);
  const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });

  // 変更をディスクに書き込む
  accessHandle.flush();

  // 完了したら、常に FileSystemSyncAccessHandle を閉じる
  accessHandle.close();
};
```

**メモ:** 仕様書の以前のバージョンでは、`close()`・`flush()`・`getSize()`・`truncate()` は誤って非同期メソッドとされていました。これは現在では変更されていますが、まだ非同期バージョンをサポートしているブラウザーもあります。

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemsyncaccesshandle-flush |

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

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


FileSystemSyncAccessHandle.write() - Web API

FileSystemSyncAccessHandle.write()
==================================

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

`FileSystemSyncAccessHandle` インターフェイスの **`write()`** メソッドは、指定のバッファーの内容をハンドルに対応するファイルに書き込みます。オフセットを指定することもできます。`ArrayBuffer` の内容を直接操作することはできないことに注意してください。かわりに、バッファーを指定の形式で表す `Int8Array` などの型付き配列オブジェクトの一つ、または `DataView` オブジェクトを作成し、それを用いてバッファーの内容を読み書きします。

`FileSystemSyncAccessHandle.write()` により行われる書き込みは in-place です。すなわち、変更は writer に書き込まれるのと同時に実際のファイルに書き込まれます。これは (`FileSystemFileHandle.createWritable()` などの) File System Access API で利用可能な他の書き込みの仕組みでは成り立たず、変更は書き込みストリームが閉じられるまでディスクに書き込まれません。

構文
--

```js
write(buffer, FileSystemReadWriteOptions)
```

### 引数

`buffer`

ファイルに書き込むバッファーを表す `ArrayBuffer` または (`DataView` などの) `ArrayBufferView` です。

`FileSystemReadWriteOptions` 省略可

以下のプロパティを含むオプションオブジェクトです。

`at`

バッファーを書き込むファイルの先頭からのバイト単位のオフセットを表す数値です。

### 返値

ファイルに書き込まれたバイト数を表す数値で解決する `Promise` を返します。

### 例外

`InvalidStateError` `DOMException`

対応するアクセスハンドルが既に閉じられているとき投げられます。

例
-

以下の非同期のイベントハンドラー関数は、Web Worker の中にあります。メインスレッドからメッセージを受信すると、以下の動作をします。

* 同期式ファイルアクセスハンドルを作成します。
* ファイルのサイズを取得し、格納用の `ArrayBuffer` を作成します。
* ファイルの内容をバッファーに読み込みます。
* メッセージをエンコードし、ファイルの終端に書き込みます。
* 変更をディスクに書き込み、アクセスハンドルを閉じます。

```js
onmessage = async (e) => {
  // メインスクリプトからの処理対象のメッセージを取得する
  const message = e.data;

  // draft ファイルのハンドルを取得する
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // 同期式のアクセスハンドルを取得する
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // ファイルのサイズを取得する
  const fileSize = accessHandle.getSize();
  // ファイルの内容をバッファーに読み込む
  const buffer = new DataView(new ArrayBuffer(fileSize));
  const readBuffer = accessHandle.read(buffer, { at: 0 });

  // メッセージをファイルの終端に書き込む
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);
  const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });

  // 変更をディスクに書き込む
  accessHandle.flush();

  // 完了したら、常に FileSystemSyncAccessHandle を閉じる
  accessHandle.close();
};
```

**メモ:** 仕様書の以前のバージョンでは、`close()`・`flush()`・`getSize()`・`truncate()` は誤って非同期のメソッドとされていました。これは現在は変更されていますが、まだ非同期バージョンをサポートしているブラウザーもあります。

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemsyncaccesshandle-write |

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

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


CloseEvent: code プロパティ - Web API

CloseEvent: code プロパティ
======================

**`code`** は `CloseEvent` インターフェイスの読み取り専用プロパティで、サーバーが接続を閉じた理由を示す WebSocket 接続クローズコードを返します。

値
-

整数の WebSocket 接続クローズコードであり、 `1000` - `4999` の範囲でサーバーが接続を閉じた理由を示します。

| ステータスコード | 意味 | 説明 |
| --- | --- | --- |
| `0`–`999` |  | 未使用。 |
| `1000` | 通常のクローズ | この接続は、作成された目的を正常に完了した。 |
| `1001` | 消滅 | サーバーの故障か、ブラウザーが接続を開いたページから移動しているため、エンドポイントが消えている。 |
| `1002` | プロトコルエラー | このエンドポイントはプロトコルエラーにより接続を終了した。 |
| `1003` | 未対応のデータ | エンドポイントが受け付けない種類のデータを受信したため、接続を終了した。（例えば、テキストのみのエンドポイントがバイナリデータを受信した場合など。） |
| `1004` | 予約 | **予約済み。**意味は今後定義されるかもしれない。 |
| `1005` | ステータス未受信 | **予約済み。**ステータスコードが期待されたにもかかわらず、提供されなかったことを示す。 |
| `1006` | 異常クローズ | **予約済み。**ステータスコードが期待される接続が異常終了した（close frame が送信されない）ことを示す。 |
| `1007` | フレームペイロードデータが無効 | 矛盾するデータ（テキストメッセージ内に UTF-8 ではないデータがあった場合など）を含むメッセージを受信したため、エンドポイントが接続を終了した。 |
| `1008` | ポリシー違反 | エンドポイントは、そのポリシーに違反するメッセージを受信したため、接続を終了しています。これは一般的なステータスコードで、コード 1003 や 1009 が適切でない場合に使用されます。 |
| `1009` | メッセージが大きすぎる | 大きすぎるデータフレームを受信したため、エンドポイントが接続を終了しています。 |
| `1010` | 必須の拡張機能 | クライアントが接続を終了している。サーバーが 1 つまたは複数の拡張機能を交渉することを期待したが、サーバーがそうしなかったため。 |
| `1011` | 内部エラー | サーバーが接続を終了している。リクエストを実行できない予期せぬ状況に遭遇したため。 |
| `1012` | サービス再起動 | サーバーが再起動するため、接続を終了しようとしている。 |
| `1013` | 後で再試行 | サーバーが過負荷のため、一部のクライアントを切断するなど、一時的な状態により接続を終了している。 |
| `1014` | ゲートウェイ違反 | サーバーがゲートウェイまたはプロキシーとして動作しており、上流サーバーから無効な応答を受け取った。これは、 HTTP の 502 ステータスコードと同様です。 |
| `1015` | TLS ハンドシェイク | **予約済み。** TLS ハンドシェイクの失敗（サーバー証明書の確認ができないなど）により、接続が切断されたことを示す。 |
| `1016`–`2999` |  | WebSocket プロトコル仕様の今後の改訂による定義、および拡張仕様による定義用。 |
| `3000`–`3999` |  | ライブラリー、フレームワーク、アプリケーションで使用されます。これらのステータスコードは、 IANA に直接登録されています。これらのコードの解釈は、WebSocket プロトコルでは未定義です。 |
| `4000`–`4999` |  | 私的用途向けのものであり、登録はできない。このコードは、WebSocket アプリケーション間の事前の合意により使用することができる。これらのコードの解釈は、WebSocket プロトコルでは未定義。 |

例
-

次の例は、 `code` の値をコンソールに表示します。

```js
WebSocket.onclose = (event) => {
  console.log(event.code);
};
```

仕様書
---

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-closeevent-code② |

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

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

関連情報
----

* RFC 6455 （WebSocket プロトコル仕様書）
* WebSocket Close Code Number Registry (IANA)


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

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

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

構文
--

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

### 値

`type`

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

`options` 省略可

オブジェクトで、*`Event()` で定義されているものに加え*、次のプロパティを持ちます。

`wasClean` 省略可

論理値で、接続がきれいに閉じたかどうかを示します。既定値は `false` です。

`code` 省略可

整数で、サーバーから送られる接続クローズコードを表します。。既定値は `0` です。

`reason` 省略可

文字列で、サーバーが接続を閉じる理由を人間が理解できる形で表したものです。既定値は `''` です。

返値
--

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

仕様書
---

| Specification |
| --- |
| WebSockets Standard # dom-closeevent-closeevent |

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

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

関連情報
----

* `CloseEvent`: 作成するオブジェクトのインターフェイス。


CloseEvent: wasClean プロパティ - Web API

CloseEvent: wasClean プロパティ
==========================

**`wasClean`** は `CloseEvent` インターフェイスの読み取り専用プロパティで、接続がきれいに閉じられた場合は `true` を返します。

値
-

論理値です。接続がきれいに閉じられた場合は true、そうでなければ false です。

例
-

次の例では、 `wasClean` の値をコンソールに表示します。

```js
WebSocket.onclose = (event) => {
  console.log(event.wasClean);
};
```

仕様書
---

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-closeevent-wasclean② |

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

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


CloseEvent: reason プロパティ - Web API

CloseEvent: reason プロパティ
========================

**`reason`** は `CloseEvent` インターフェイスの読み取り専用プロパティで、サーバーが接続を閉じる際に示した WebSocket 接続が閉じた理由を返します。つまり、閉じたことについての簡潔で人間が読める散文的な説明です。

値
-

文字列です。

例
-

次の例では、 `reason` の値をコンソールに表示します。

```js
WebSocket.onclose = (event) => {
  console.log(event.reason);
};
```

仕様書
---

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-closeevent-reason② |

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

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

関連情報
----

* RFC 6455（WebSocket プロトコル仕様書）


MediaStreamAudioSourceNode() - Web API

MediaStreamAudioSourceNode()
============================

ウェブオーディオ API の **`MediaStreamAudioSourceNode()`** コンストラクターは、指定された `MediaStream` の最初の音声トラックを音源として用いる新しい `MediaStreamAudioSourceNode` オブジェクトを作成して返します。

**メモ:** `MediaStreamAudioSourceNode` を作成するもう一つの方法は、音声の取得元のストリームを指定して `AudioContext.createMediaStreamSource()` メソッドを呼ぶことです。

構文
--

```js
new MediaStreamAudioSourceNode(context, options)
```

### 引数

`context`

ノードを関連付ける音声コンテキストを表す `AudioContext` です。

`options`

`MediaStreamAudioSourceNode` に持たせるプロパティを定義するオブジェクトです。

`mediaStream`

必須のプロパティで、ノードが用いる音声の取得元となる `MediaStream` を指定します。

### 返値

指定されたストリームから音声を取得する音声ノードを表す新しい `MediaStreamAudioSourceNode` オブジェクトを返します。

### 例外

`InvalidStateError` `DOMException`

指定された `MediaStream` に音声トラックが無いとき投げられます。

例
-

この例では、`getUserMedia()` を用いてユーザーのカメラにアクセスし、その `MediaStream` から新しい `MediaStreamAudioSourceNode` を作成します。

```js
// 変数を定義する
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// getUserMedia によりストリームを取得し、
// MediaStreamAudioSourceNode に入れる
if (navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices
    .getUserMedia(
      // constraints: このアプリケーションで音声と映像を用いるか
      {
        audio: true,
        video: false,
      },
    )
    .then((stream) => {
      const options = {
        mediaStream: stream,
      };

      const source = new MediaStreamAudioSourceNode(audioCtx, options);
      source.connect(audioCtx.destination);
    })
    .catch((err) => {
      console.error(`以下の gUM エラーが発生しました: ${err}`);
    });
} else {
  console.log(
    "このブラウザーでは新しい getUserMedia がサポートされていません！",
  );
}
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-mediastreamaudiosourcenode-mediastreamaudiosourcenode |

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

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


MediaStreamAudioSourceNode.mediaStream - Web API

MediaStreamAudioSourceNode.mediaStream
======================================

`MediaStreamAudioSourceNode` インターフェイスの読み取り専用プロパティ **`mediaStream`** は、このノードが音声を受信する元の音声トラックがある `MediaStream` を示します。

このストリームは、ノードが `MediaStreamAudioSourceNode()` コンストラクターまたは `AudioContext.createMediaStreamSource()` メソッドにより最初に作成されたときに指定されたものです。

値
-

コードの音源として働いている `MediaStreamTrack` があるストリームを表す `MediaStream` です。

ユーザーエージェントは、指定されたストリームで見つかった最初の音声トラックをこのノード用に用います。しかし、複数のトラックからなるストリームにおいて、どのトラックが使用されているかを確実に知る方法はありません。どのトラックが使われているかが重要な場合や、トラック自体にアクセスしたい場合は、かわりに `MediaStreamTrackAudioSourceNode` を用いるべきです。

例
-

```js
const audioCtx = new window.AudioContext();
let options = {
  mediaStream: stream,
};

let source = new MediaStreamAudioSourceNode(audioCtx, options);
console.log(source.mediaStream);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-mediastreamaudiosourcenode-mediastream |

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

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


MediaStream.getAudioTracks() - Web API

MediaStream.getAudioTracks()
============================

**`getAudioTracks()`** は `MediaStream` インターフェイスのメソッドで、そのストリームの `track set` の中から、 `MediaStreamTrack.kind` が `audio` である `MediaStreamTrack` を表すオブジェクトの配列を返します。

構文
--

```js
var mediaStreamTracks = mediaStream.getAudioTracks();
```

### 引数

なし。

### 返値

ストリームに含まれる音声トラックである `MediaStreamTrack` オブジェクトの配列です。音声トラックとは `kind` プロパティが `audio` のトラックです。ストリーム内に音声トラックがない場合は、この配列は空になります。

**メモ:** 返されるトラックの順序は仕様書では定義されておらず、実際、 `getAudioTracks()` を呼び出すごとに変わる可能性があります。

この API の初期の版では、特別な `AudioStreamTrack` インターフェイスがあり、音声ストリームのリストに含まれる各項目の型として使用されていましたが、これはその後でメインの `MediaStreamTrack` インターフェイスに統合されました。

例
-

この例では、ウェブカメラの音声と動画を `getUserMedia()` を使ってストリームとして取得し、そのストリームを `<video>` 要素に設定します。その後、終了時にストリーム内の最初の音声トラックを停止するタイマーを設定します。

```js
navigator.mediaDevices
  .getUserMedia({ audio: true, video: true })
  .then((mediaStream) => {
    document.querySelector("video").srcObject = mediaStream;
    // Stop the audio stream after 5 seconds
    setTimeout(() => {
      const tracks = mediaStream.getAudioTracks();
      tracks[0].stop();
    }, 5000);
  });
```

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-getaudiotracks |

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

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


MediaStream.active - Web API

MediaStream.active
==================

**`active`** は `MediaStream` インターフェイスの読み取り専用プロパティで、ストリームが現在アクティブであれば `true` を返し、それ以外の場合は `false` を返します。トラックの状態が `MediaStreamTrack.ended` でないトラックが 1 本でもある場合は、ストリームがアクティブであるとみなされます。すべでのトラックが終了すると、このストリームの `active` プロパティは `false` になります。

値
-

論理値で、このストリームが現在アクティブな場合は `true` を返します。それ以外は `false` を返します。

例
-

この例では、 `getUserMedia()` を用いて、要求されたユーザーのローカルのカメラとマイクをソースとする新しいストリームを取得します。ストリームが有効になると（ここでは、`Promise` が履行状態になった時）、ストリームが現在アクティブであるかどうかに応じてページにあるボタンの状態が更新されます。

```js
const promise = navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true,
});

promise.then((stream) => {
  const startBtn = document.querySelector("#startBtn");
  startBtn.disabled = stream.active;
});
```

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-active |

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

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


MediaStream: removetrack イベント - Web API

MediaStream: removetrack イベント
=============================

`removetrack` イベントは、新しい `MediaStreamTrack` オブジェクトが `MediaStream` から取り除かれたときに発行されます。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("removetrack", (event) => {});

onremovetrack = (event) => {};
```

イベント型
-----

`MediaStreamTrackEvent` (en-US) です。 `Event` から継承しています。

Event

MediaStreamTrackEvent

(en-US)イベントプロパティ
---------

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

`track` 読取専用

`MediaStreamTrack` オブジェクトで、このストリームから削除されたトラックを表します。

例
-

`addEventListener()` を使用すると次にようになります。

```js
let stream = new MediaStream();

stream.addEventListener("removetrack", (event) => {
  console.log(`${event.track.kind} track removed`);
});
```

`onremovetrack` イベントハンドラープロパティを使用すると次にようになります。

```js
let stream = new MediaStream();

stream.onremovetrack = (event) => {
  console.log(`${event.track.kind} track removed`);
};
```

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # event-mediastream-removetrack |

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

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

関連情報
----

* 関連イベント: `addtrack`
* `AudioTrackList` をターゲットとしたこのイベント: `removetrack`
* `VideoTrackList` をターゲットとしたこのイベント: `removetrack`
* メディアストリーム API
* WebRTC


MediaStream.getTracks() - Web API

MediaStream.getTracks()
=======================

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

**`getTracks()`** は `MediaStream` インターフェイスのメソッドで、このストリームの`トラックセット`にあるすべての `MediaStreamTrack` オブジェクトを `MediaStreamTrack.kind` に関係なく表す配列を返します。

構文
--

```js
var mediaStreamTracks = mediaStream.getTracks();
```

### 引数

なし。

### 返値

`MediaStreamTrack` オブジェクトの配列です。

例
-

```js
navigator.mediaDevices
  .getUserMedia({ audio: false, video: true })
  .then((mediaStream) => {
    document.querySelector("video").srcObject = mediaStream;
    // 5 秒後にストリームを停止
    setTimeout(() => {
      const tracks = mediaStream.getTracks();
      tracks[0].stop();
    }, 5000);
  });
```

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-gettracks |

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

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


MediaStream.id - Web API

MediaStream.id
==============

**`MediaStream.id()`** は読み取り専用プロパティであり、このオブジェクトの固有識別子 (GUID) である 36 文字で表現される `DOMString` を返します。

構文
--

```js
var id = mediaStream.id;
```

例
-

```js
var p = navigator.mediaDevices.getUserMedia({ audio: true, video: true });

p.then(function (stream) {
  console.log(stream.id);
});
```

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-id |

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

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

関連情報
----

* このプロパティが所属する `MediaStream` インターフェイス


MediaStream.clone() - Web API

MediaStream.clone()
===================

**`clone()`** は `MediaStream` インターフェイスのメソッドで、この `MediaStream` の複製を作成します。この新しい `MediaStream` オブジェクトは、新しい固有の `id` を持ち、 MediaStream に含まれる `MediaStreamTrack` もそれぞれ `clone()` を呼び出して得られたものになります。

構文
--

```js
var stream = MediaStream.clone();
```

### 引数

なし。

### 返値

新しい `MediaStream` インスタンスを返します。このインスタンスは新しい固有の ID を持ち、 `MediaStream` に含まれるすべての `MediaStreamTrack` を含みます。この `MediaStreamTrack` はそれぞれ `clone()` によって呼び出されたものになります。

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-clone |

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

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


MediaStream.getTrackById() - Web API

MediaStream.getTrackById()
==========================

**`MediaStream.getTrackById()`** メソッドは、指定された ID 文字列を持つトラックを表現する `MediaStreamTrack` オブジェクトを返します。指定した ID を持つトラックが存在しない場合は、 `null` を返します。

構文
--

```js
var track = MediaStream.getTrackById(id);
```

### 引数

`id`

取得したいトラックを識別する `DOMString` です。

### 返値

引数で指定した `id` の文字列と同じ `MediaStreamTrack.id` を持つトラックが見つかった場合は、その `MediaStreamTrack` オブジェクトを返します。それ以外の場合は、 `null` を返します。

例
-

この例では、動画に含まれるコメンタリートラックを有効にしています。メインのオーディオトラックの音量を 50% にしてから、コメンタリートラックを有効にしています。

```js
stream.getTrackById("primary-audio-track").applyConstraints({ volume: 0.5 });
stream.getTrackById("commentary-track").enabled = true;
```

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-gettrackbyid |

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

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

関連情報
----

* `MediaStream`
* `MediaStreamTrack.id`


MediaStream.getVideoTracks() - Web API

MediaStream.getVideoTracks()
============================

**`getVideoTracks()`** は `MediaStream` インタフェースのメソッドで、このストリームに含まれる動画トラックを表す `MediaStreamTrack` オブジェクトの配列を返します。

構文
--

```js
var mediaStreamTracks[] = mediaStream.getVideoTracks();
```

### 引数

なし。

### 返値

`MediaStreamTrack` オブジェクトの配列で、それぞれがメディアストリームに含まれるそれぞれの動画トラックを表します。動画トラックは `kind` プロパティが `video` であるトラックです。ストリームに動画トラックが含まれていない場合、配列は空となります。

**メモ:** トラックの順序は仕様で定義されておらず、 `getVideoTracks()` の呼び出しごとに同じ順序になるとは限りません。

この API の初期の版では、特別な `VideoStreamTrack` インターフェイスがあり、動画ストリームのリストに含まれる各項目の型として使用されていましたが、これはその後でメインの `MediaStreamTrack` インターフェイスに統合されました。

例
-

次の例は、 Chrome's
Image Capture / Photo Resolution Sample (英語)から抜粋したものであり、 `getVideoTracks()` を用いて取得したトラックを `ImageCapture()` (en-US) コンストラクターへ渡しています。

```js
var imageCapture;

navigator.mediaDevices.getUserMedia({ video: true }).then((mediaStream) => {
  document.querySelector("video").srcObject = mediaStream;

  const track = mediaStream.getVideoTracks()[0];
  imageCapture = new ImageCapture(track);

  return imageCapture.getPhotoCapabilities();
});
```

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-getvideotracks |

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

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


MediaStream() - Web API

MediaStream()
=============

**`MediaStream()`** コンストラクターは、新しく生成された `MediaStream` を返し、これはそれぞれが `MediaStreamTrack` オブジェクトで表されるメディアトラックのコレクションとして機能します。

何か引数が与えられた場合は、指定されたトラックが新しいストリームに追加されます。そうでなければ、ストリームはトラックを持ちません。

構文
--

```js
new MediaStream();
new MediaStream(stream);
new MediaStream(tracks);
```

### 引数

`stream`

様々な `MediaStream` オブジェクトで、そのトラックが新しく生成されたストリームに自動的に追加されます。トラックは元のストリームから除去されないので、 2 つのストリームで共用されることになります。

`tracks`

`MediaStreamTrack` オブジェクトの `Array` で、それぞれがストリームに追加するトラックです。

### 返値

生成された `MediaStream` オブジェクトで、空のトラック、もしくは指定されたトラックを持つ。

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-constructor |

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

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

関連情報
----

* `MediaStream`


MediaStream: addtrack イベント - Web API

MediaStream: addtrack イベント
==========================

`addtrack` イベントは、新しい `MediaStreamTrack` オブジェクトが `MediaStream` に追加されたときに発行されます。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("addtrack", (event) => {});

onaddtrack = (event) => {};
```

イベント型
-----

`MediaStreamTrackEvent` (en-US) です。 `Event` から継承しています。

Event

MediaStreamTrackEvent

(en-US)イベントプロパティ
---------

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

`track` 読取専用

`MediaStreamTrack` オブジェクトで、このストリームに追加されたトラックを表します。

例
-

`addEventListener()` を使用すると次にようになります。

```js
let stream = new MediaStream();

stream.addEventListener("addtrack", (event) => {
  console.log(`New ${event.track.kind} track added`);
});
```

`onaddtrack` イベントハンドラープロパティを使用すると次にようになります。

```js
let stream = new MediaStream();

stream.onaddtrack = (event) => {
  console.log(`New ${event.track.kind} track added`);
};
```

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # event-mediastream-addtrack |

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

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

関連情報
----

* 関連イベント: `removetrack`
* `AudioTrackList` をターゲットとしたこのイベント: `addtrack`
* `VideoTrackList` をターゲットとしたこのイベント: `addtrack`
* メディアストリーム API
* WebRTC


MediaStream.addTrack() - Web API

MediaStream.addTrack()
======================

**`MediaStream.addTrack()`** メソッドは、ストリームへ新しいトラックを追加します。このトラックは `MediaStreamTrack` 型の引数して指定します。

**メモ:** 指定されたトラックが既にストリームのトラックセットにあった場合、このメソッドは何もしません。

構文
--

```js
stream.addTrack(track);
```

### 引数

`track`

このストリームへ追加する `MediaStreamTrack` です。

### 返値

`undefined`例
-

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-addtrack |

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

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

関連情報
----

* `MediaStream` （所属先のインターフェイス）


Range: setEndAfter() メソッド - Web API

Range: setEndAfter() メソッド
=========================

**`Range.setEndAfter()`** メソッドは `Range` の終了位置を別の `Node` から相対的に設定します。この `Range` の終了位置の親 `Node` は `referenceNode` と同じになります。

構文
--

```js
setEndAfter(referenceNode)
```

### 引数

`referenceNode`

その後で `Range` を終わらせる `Node` です。

### 返値

なし (`undefined`)。

例
-

```js
const range = document.createRange();
const referenceNode = document.getElementsByTagName("div").item(0);

range.setEndAfter(referenceNode);
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-setendafter |

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

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

関連情報
----

* DOM インターフェイス索引


Range: setStartBefore() メソッド - Web API

Range: setStartBefore() メソッド
============================

**`Range.setStartBefore()`** メソッドは `Range` の開始位置を別の `Node` からの相対位置で設定します。 `Range` の開始位置の親 `Node` は `referenceNode` と同じになります。

構文
--

```js
setStartBefore(referenceNode)
```

### 引数

`referenceNode`

その前で `Range` を始める `Node` です。

### 返値

なし (`undefined`)。

例
-

```js
const range = document.createRange();
const referenceNode = document.getElementsByTagName("div").item(0);

range.setStartBefore(referenceNode);
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-setstartbefore |

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

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

関連情報
----

* DOM インターフェイス索引


Range: selectNodeContents() メソッド - Web API

Range: selectNodeContents() メソッド
================================

**`Range.selectNodeContents()`** メソッドは `Range` が `Node` のコンテンツを含むように設定します。

`Range` の開始と終わりの親ノード (`Node`) が参照ノードになります。 `startOffset` は 0 で、 `endOffset` は子 `Node` の数、または参照ノードに格納する文字数です。

構文
--

```js
selectNodeContents(referenceNode)
```

### 引数

`referenceNode`

`Range` 内でコンテンツが選択されるノード (`Node`) です。

### 返値

なし (`undefined`)。

例
-

```js
const range = document.createRange();
const referenceNode = document.querySelector("div");
range.selectNodeContents(referenceNode);
```

### ライブ例

 この例では、ユーザーがボタンで段落を選択・解除できるようにしています。
 `Document.createRange()`、`Range.selectNodeContents()`、`Selection.addRange()` (en-US) を使用してコンテンツを選択しています。
 選択解除には `Window.getSelection()` と `Selection.removeAllRanges()` (en-US) を使用します。

#### HTML

```html
<p id="p">
  <strong>以下のボタンを使用して</strong
 >この段落の内容を選択または選択解除してください。
</p>
<button id="select-button">段落を選択</button>
<button id="deselect-button">段落を選択解除</button>
```

#### JavaScript

```js
const p = document.getElementById("p");
const selectButton = document.getElementById("select-button");
const deselectButton = document.getElementById("deselect-button");

selectButton.addEventListener("click", (e) => {
  // Clear any current selection
  const selection = window.getSelection();
  selection.removeAllRanges();

  // Select paragraph
  const range = document.createRange();
  range.selectNodeContents(p);
  selection.addRange(range);
});

deselectButton.addEventListener("click", (e) => {
  const selection = window.getSelection();
  selection.removeAllRanges();
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-selectnodecontents |

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

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

関連情報
----

* DOM インターフェイス索引


Range: extractContents() メソッド - Web API

Range: extractContents() メソッド
=============================

**`Range.extractContents()`** は `Range` の内容をこの文書ツリーから `DocumentFragment` へ移動させます。

DOM Events を使用して追加したイベントリスナーは、抽出時に維持されません。HTML 属性のイベントは、`Node.cloneNode()` メソッドの場合と同様に維持または複製されます。HTML の `id` 属性も複製されるため、部分的に選択されたノードが抽出され文書に追加された場合、無効な文書になる可能性があります。

部分的に選択されたノードは、文書フラグメントを有効にするために必要な親タグを含めて複製されます。

構文
--

```js
extractContents()
```

### 引数

なし。

### 返値

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

例
-

### 基本的な例

```js
const range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
const documentFragment = range.extractContents();
document.body.appendChild(documentFragment);
```

### コンテナー間でアイテムを移動

 この例では、 2 つのコンテナー間でアイテムを移動させます。 1 つ以上のアイテムを選択し
 をクリックすると、反対側のコンテナーに移動されます。

#### HTML

```html
<p id="list1">123456</p>
<button id="swap">選択されたアイテムを入れ替え</button>
<p id="list2">abcdef</p>
```

#### CSS

```css
body {
  pointer-events: none;
}

p {
  border: 1px solid;
  font-size: 2em;
  padding: 0.3em;
}

button {
  font-size: 1.2em;
  padding: 0.5em;
  pointer-events: auto;
}
```

#### JavaScript

```js
const list1 = document.getElementById("list1");
const list2 = document.getElementById("list2");
const button = document.getElementById("swap");

button.addEventListener("click", (e) => {
  selection = window.getSelection();

  for (let i = 0; i < selection.rangeCount; i++) {
    const range = selection.getRangeAt(i);

    if (
      range.commonAncestorContainer === list1 ||
      range.commonAncestorContainer.parentNode === list1
    ) {
      const documentFragment = range.extractContents();
      list2.appendChild(documentFragment);
    } else if (
      range.commonAncestorContainer === list2 ||
      range.commonAncestorContainer.parentNode === list2
    ) {
      const documentFragment = range.extractContents();
      list1.appendChild(documentFragment);
    }
  }
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-extractcontents |

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

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

関連情報
----

* DOM インターフェイス索引


Range: getBoundingClientRect() メソッド - Web API

Range: getBoundingClientRect() メソッド
===================================

**`Range.getBoundingClientRect()`** メソッドは、範囲のコンテンツを囲む `DOMRect` オブジェクトを返します。これは、範囲内のすべての要素の外接長方形の和を囲む長方形です。

このメソッドは、テキストボックス内のカーソルまたは選択範囲のビューポート座標を決定するのに有益です。返値の詳細については `Element.getBoundingClientRect()` を参照してください。

構文
--

```js
getBoundingClientRect()
```

### 引数

なし。

### 返値

範囲内のすべての要素の外接長方形の和を囲む `DOMRect` オブジェクトです。

例
-

### HTML

```html
<div id="highlight"></div>
<p>
  この例では、範囲のコンテンツの後ろに「ハイライト」長方形を配置しています。
  範囲のコンテンツは<em>ここから始まり</em>、<em>ここで終わり</em>まで続きます。外接クライアント長方形は、範囲内で選択されたすべてのものを格納します。
</p>
```

### CSS

```css
#highlight {
  background: yellow;
  position: absolute;
  z-index: -1;
}

p {
  width: 200px;
}
```

### JavaScript

```js
const range = document.createRange();
range.setStartBefore(document.getElementsByTagName("em").item(0));
range.setEndAfter(document.getElementsByTagName("em").item(1));

const clientRect = range.getBoundingClientRect();
const highlight = document.getElementById("highlight");
highlight.style.left = `${clientRect.x}px`;
highlight.style.top = `${clientRect.y}px`;
highlight.style.width = `${clientRect.width}px`;
highlight.style.height = `${clientRect.height}px`;
```

### 結果

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-range-getboundingclientrect |

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

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

関連情報
----

* `Range.getClientRects()` - 矩形以外の範囲（選択範囲が次の行に折り返される場合など）に対する、より細かい結果
* `Element.getBoundingClientRect()`
* `Document.caretPositionFromPoint()` - ビューポート座標から（ノード、オフセット）を取得


Range: insertNode() メソッド - Web API

Range: insertNode() メソッド
========================

**`Range.insertNode()`** メソッドは `Range` の先頭にノードを挿入します。

新しいノードは `Range` の始まりの境界点に挿入されます。新しいノードがテキスト `Node` に追加される場合、その `Node` は挿入点で分割され、挿入は 2 つのテキストノードの間に行われます。

新しいノードが文書フラグメントの場合、代わりにその文書フラグメントの子が挿入されます。

構文
--

```js
insertNode(newNode)
```

### 引数

`newNode`

`Range` の先頭に挿入する `Node` です。

### 返値

なし (`undefined`)。

例
-

```js
range = document.createRange();
newNode = document.createElement("p");
newNode.appendChild(document.createTextNode("New Node Inserted Here"));
range.selectNode(document.getElementsByTagName("div").item(0));
range.insertNode(newNode);
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-insertnode |

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

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

関連情報
----

* DOM インターフェイス索引


Range: setStart() メソッド - Web API

Range: setStart() メソッド
======================

**`Range.setStart()`** メソッドは、 `Range` の開始位置を設定します。

`startNode` の `Node` の型が `Text`, `Comment`, `CDataSection` のいずれかであるとき、 `startOffset` は `startNode` の開始位置からの文字数です。その他の `Node` 型の場合、 `startOffset` は `startNode` からの子ノード数です。

始点を終点より下（文書の下層側）に設定すると、始点と終点の両方が指定された開始位置に設定され、折りたたまれた範囲となります。

構文
--

```js
setStart(startNode, startOffset)
```

### 引数

`startNode`

`Range` を開始する `Node`。

`startOffset`

`startNode` の始点からの `Range` のオフセットを表す 0 以上の整数。

### 返値

なし (`undefined`)。

例
-

### 要素の一部を強調表示

この例では、 `Range.setStart()` と `Range.setEnd()` メソッドを使用して、住所の一部を範囲に追加しています。そして、選択された範囲は `Range.surroundContents()` を使用して強調表示します。

住所は、 5 つのテキストノードと、 4 つの `<br>` 要素の合計 9 つのノードを含んでいます。

#### HTML

```html
<p id="address">
  Wyatt Earp<br />
  101 E. Main St.<br />
  Dodge City, KS<br />
  67801<br />
  USA
</p>

<hr />
<p>Nodes in the original address:</p>
<ol id="log"></ol>
```

#### JavaScript

```js
const address = document.getElementById("address");
const log = document.getElementById("log");

// Log info
address.childNodes.forEach((node) => {
  const li = document.createElement("li");
  li.textContent = `${node.nodeName}, ${node.nodeValue}`;
  log.appendChild(li);
});

// Highlight the street and city
const startOffset = 2; // Start at third node: 101 E. Main St.
const endOffset = 5; // End at fifth node: Dodge City, KS
const range = document.createRange();
range.setStart(address, startOffset);
range.setEnd(address, endOffset);

const mark = document.createElement("mark");
range.surroundContents(mark);
```

#### 結果

### テキストノードから文字を取得する

この例では、`Range.setStart()` と `Range.setEnd()` メソッドを使用して、範囲の内容を定義しています。結果として得られる範囲は、テキストノード内の 1 文字目から 5 文字目を含んでいます。

#### HTML

```html
<p id="content">0123456789</p>
<p id="log"></p>
```

#### JavaScript

```js
const element = document.getElementById("content");
const textNode = element.childNodes[0];
const range = document.createRange();
range.setStart(textNode, 0); // Start at first character
range.setEnd(textNode, 5); // End at fifth character
document.getElementById("log").textContent = range;
```

#### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-setstart |

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

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

関連情報
----

* DOM インターフェイスの索引


Range: cloneContents() メソッド - Web API

Range: cloneContents() メソッド
===========================

**`Range.cloneContents()`** は、 `Range` に含まれる `Node` 型のオブジェクトをコピーした `DocumentFragment` を返します。

`addEventListener()` を使用して追加されたイベントリスナーは、クローン作成中には複製されません。 HTML 属性のイベントは、 `Node.cloneNode()` メソッドの場合と同様に複製されます。メソッドと同じです。 HTML の `id` 属性も複製されますが、これは複製によって無効な文書になる可能性があります。

部分的に選択されたノードは、文書フラグメントを有効にするために必要な親タグが含まれます。

構文
--

```js
cloneContents()
```

### 引数

なし。

### 返値

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

例
-

```js
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
documentFragment = range.cloneContents();
document.body.appendChild(documentFragment);
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-clonecontents |

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

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

関連情報
----

* DOM インターフェイスの索引


Range: collapse() メソッド - Web API

Range: collapse() メソッド
======================

**`Range.collapse()`** メソッドは、 `Range` を境界点の一つに折りたたみます。

折りたたまれた `Range` は空で、コンテンツを含まず、 DOM ツリーの単一の点を指定します。 `Range` が既に折りたたまれているかどうかを調べるには、 `Range.collapsed` プロパティを参照してください。

構文
--

```js
collapse()
collapse(toStart)
```

### 引数

`toStart` 省略可

論理値です。 `true` の場合は `Range` を先頭側に、`false` の場合は末尾側に折りたたみます。省略すると既定で `false`
Experimental
 となります。

### 返値

なし (`undefined`)。

例
-

```js
const range = document.createRange();

const referenceNode = document.getElementsByTagName("div").item(0);
range.selectNode(referenceNode);
range.collapse(true);
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-collapse |

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

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

関連情報
----

* DOM インターフェイス索引


Range: isPointInRange() メソッド - Web API

Range: isPointInRange() メソッド
============================

**`Range.isPointInRange()`** メソッドは、指定されたこの点が `Range` 内にあるかどうかを示す論理値を返します。このメソッドは `ReferenceNode` 内の `offset` にある点（カーソル位置）がこの範囲内にある場合に `true` を返します。

構文
--

```js
isPointInRange(referenceNode, offset)
```

### 引数

`referenceNode`

`Range` と比較する `Node` です。

`offset`

`Range` と比較するこの点の `Node` 内のオフセットです。

### 返値

論理値です。

例
-

```js
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
bool = range.isPointInRange(document.getElementsByTagName("p").item(0), 1);
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-ispointinrange |

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

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

関連情報
----

* DOM インターフェイス索引


Range: deleteContents() メソッド - Web API

Range: deleteContents() メソッド
============================

**`Range.deleteContents()`** メソッドは `Range` のコンテンツを `Document` から取り除きます。

`Range.extractContents()` とは異なり、このメソッドは削除されたコンテンツを含む `DocumentFragment` を返しません。

構文
--

```js
deleteContents()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

```js
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
range.deleteContents();
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-deletecontents |

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

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

関連情報
----

* DOM インターフェイス索引


Range: toString() メソッド - Web API

Range: toString() メソッド
======================

**`Range.toString()`** メソッドは文字列化で、 `Range` のテキストを返します。

`Range` の内容を alert で表示すると、暗黙のうちに `toString()` を呼び出すので、アラートダイアログで範囲とテキストを比較しても効果がありません。

構文
--

```js
toString()
```

### 引数

なし。

### 返値

文字列です。

例
-

### HTML

```html
<p>
  This example logs <em>everything</em> between the emphasized <em>words</em>.
  Look at the output below.
</p>
<p id="log"></p>
```

### JavaScript

```js
const range = document.createRange();

range.setStartBefore(document.getElementsByTagName("em").item(0), 0);
range.setEndAfter(document.getElementsByTagName("em").item(1), 0);
document.getElementById("log").textContent = range.toString();
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-stringifier |

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

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

関連情報
----

* DOM インターフェイス索引


Range: setStartAfter() メソッド - Web API

Range: setStartAfter() メソッド
===========================

**`Range.setStartAfter()`** メソッドは `Node` に対する `Range` の開始位置を設定します。 `Range` の開始位置の親 `Node` は `referenceNode` と同じになります。

構文
--

```js
setStartAfter(referenceNode)
```

### 引数

`referenceNode`

その後で `Range` を始める `Node` です。

### 返値

なし (`undefined`)。

例
-

```js
const range = document.createRange();
const referenceNode = document.getElementsByTagName("div").item(0);

range.setStartAfter(referenceNode);
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-setstartafter |

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

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

関連情報
----

* DOM インターフェイス索引


Range: commonAncestorContainer プロパティ - Web API

Range: commonAncestorContainer プロパティ
====================================

**`Range.commonAncestorContainer`** は読み取り専用のプロパティで、この `Range` の両方の境界点を含む、最も深い — または文書ツリー内で最も遠い — ノード (`Node`) を返します。つまり、`Range.startContainer` と `Range.endContainer` 両方が同じノードを参照する場合は、このノードは**共通の祖先コンテナー**です。

`Range` は連続している必要はなく、ノードを部分的に選択する場合もあり、これは `Range` を囲っている `Node` を見つけるときに便利な方法です。

このプロパティは読み取り専用です。 `Node` の共通の祖先コンテナーを変更するには、 `Range` の開始位置と終了位置を設定するために利用できるメソッド、例えば `Range.setStart()` と `Range.setEnd()` を使用することを検討してください。

値
-

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

例
-

この例では、リスト上の `pointerup` イベントを取り扱うためイベントリスナーを作ります。このリスナーは選択したテキストの共通の祖先を取得して、それらを強調するアニメーションを起動します。

### HTML

```html
<ul>
  <li>
    Strings
    <ul>
      <li>Cello</li>
      <li>
        Violin
        <ul>
          <li>First Chair</li>
          <li>Second Chair</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    Woodwinds
    <ul>
      <li>Clarinet</li>
      <li>Oboe</li>
    </ul>
  </li>
</ul>
```

### CSS

以下で作成した `.highlight` クラスは、フェードするアウトラインを動かすために一連の `@keyframes` を使用します。

```css
.highlight {
  animation: highlight linear 1s;
}

@keyframes highlight {
  from {
    outline: 1px solid #f00f;
  }
  to {
    outline: 1px solid #f000;
  }
}
```

```
body {
  padding: 1px;
}
```

### JavaScript

```js
document.addEventListener("pointerup", (e) => {
  const selection = window.getSelection();

  if (selection.type === "Range") {
    for (let i = 0; i < selection.rangeCount; i++) {
      const range = selection.getRangeAt(i);
      playAnimation(range.commonAncestorContainer);
    }
  }
});

function playAnimation(el) {
  if (el.nodeType === Node.TEXT\_NODE) {
    el = el.parentNode;
  }

  el.classList.remove("highlight");
  setTimeout(() => {
    el.classList.add("highlight");
  }, 0);
}
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-commonancestorcontainer② |

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

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

関連情報
----

* DOM インターフェイス索引


Range: createContextualFragment() メソッド - Web API

Range: createContextualFragment() メソッド
======================================

**`Range.createContextualFragment()`** メソッドは、範囲の先頭ノード（選択されたノードの親）をコンテキストノードとして、 HTML フラグメント構文解析アルゴリズムまたは XML フラグメント構文解析アルゴリズムを呼び出して `DocumentFragment` を返します。 HTML フラグメント解釈アルゴリズムは、範囲が HTMLness ビットが設定された `Document` に属している場合に使用します。 HTML では、コンテキストノードが `html` である場合、歴史的な理由から、フラグメント解釈アルゴリズムは `body` をコンテキストとして呼び出されます。

構文
--

```js
createContextualFragment(tagString)
```

### 引数

`tagString`

文書フラグメントに変換するテキストとタグを格納するテキストです。

### 返値

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

例
-

```js
const tagString = "<div>I am a div node</div>";
const range = document.createRange();

// 文書内の最初の div の親をコンテキストノードにします。
range.selectNode(document.getElementsByTagName("div").item(0));
const documentFragment = range.createContextualFragment(tagString);
document.body.appendChild(documentFragment);
```

仕様書
---

| Specification |
| --- |
| DOM Parsing and Serialization # ref-for-dom-range-createcontextualfragment-2 |

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

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

関連情報
----

* DOM インターフェイス索引


Range: cloneRange() メソッド - Web API

Range: cloneRange() メソッド
========================

**`Range.cloneRange()`** メソッドは、複製された `Range` と同じ境界点を持つ `Range` オブジェクトを返します。

返されるクローンは参照ではなく値でコピーされるので、どちらの `Range` を変更しても、もう一方に影響はありません。

構文
--

```js
cloneRange()
```

### 引数

なし。

### 返値

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

例
-

```js
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
clone = range.cloneRange();
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-clonerange |

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

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

関連情報
----

* DOM インターフェイス索引


Range: startContainer プロパティ - Web API

Range: startContainer プロパティ
===========================

**`Range.startContainer`** は読み取り専用プロパティで、この `Range` が開始するノード (`Node`) を返します。ノードの開始位置を変更するには、 `Range.setStart()` 系メソッドのいずれかを使用してください。

値
-

`Node` オブジェクト。

例
-

```js
range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
startRangeNode = range.startContainer;
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-startcontainer① |

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

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

関連情報
----

* DOM インターフェイス索引


Range: setEndBefore() メソッド - Web API

Range: setEndBefore() メソッド
==========================

**`Range.setEndBefore()`** メソッドは、 `Range` の終了位置を別の `Node` からの相対位置で設定します。 `Range` の終了位置の親 `Node` は `referenceNode` と同じになります。

構文
--

```js
setEndBefore(referenceNode)
```

### 引数

`referenceNode`

その前で `Range` を終わらせる `Node` です。

### 返値

なし (`undefined`)。

例
-

```js
const range = document.createRange();
const referenceNode = document.getElementsByTagName("div").item(0);

range.setEndBefore(referenceNode);
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-setendbefore |

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

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

関連情報
----

* DOM インターフェイス索引