recursal/MDN huggingface dataset:
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 プロパティ
=================================

`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: 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() メソッド
=================================

**`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() メソッド
================================

**`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() メソッド
==============================

**`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() コンストラクター
=========================================

**`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
=====================

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

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

**`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
======================

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

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

**`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()
================

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

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

**`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
=========================

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

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

**`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
==========================

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

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

**`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
=======================

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

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

**`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
=========================

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

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

**`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() コンストラクター
===========================================

**`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() メソッド
=============================

**`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