recursal/MDN huggingface dataset:
WakeLock.request()
==================

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

**`request()`** は `WakeLock` インターフェイスのメソッドで、画面を暗くしたりロックしたりすることを制御することができる `WakeLockSentinel` で解決するプロミス (`Promise`) を返します。

構文
--


```js
var wakeLock = navigator.wakeLock.request(type);
```

### 引数

*type*

オプションは次の通りです。

* `'screen'`: 画面の起動ロックを要求します。端末の画面が暗くなったりロックされたりすることを防ぎます。

### 返値

`WakeLockSentinel` オブジェクトで解決する `Promise` を返します。

### 例外

`NotAllowedError`

起動ロックが利用できないときに発生します。原因は以下のようなものです。

* 文書が screen-wake-lock ポリシーにより、画面起動ロックを使用することができない。
* 文書が完全にアクティブではない。
* 文書が非表示になっている。
* ユーザーエージェントがプラットフォームの起動ロックを取得できない。

例
-

 以下の非同期関数は、 `WakeLockSentinel` オブジェクトを要求します。
 `request()` メソッドはブラウザーが何らかの理由でリクエストを拒否した場合を想定して、 `try...catch` 文で囲まれています。


```js
const requestWakeLock = async () => {
  try {
    const wakeLock = await navigator.wakeLock.request("screen");
  } catch (err) {
    // 起動ロックの要求に失敗 - 通常は、バッテリー低下などシステムに起因する。

    console.log(`${err.name}, ${err.message}`);
  }
};

requestWakeLock();
```

仕様書
---

| Specification |
| --- |
| Screen Wake Lock API # the-request-method |

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

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

関連情報
----

* `WakeLock`
* `Navigator.wakeLock`
HTMLCanvasElement: captureStream() メソッド
=======================================

`HTMLCanvasElement` の **`captureStream()`** メソッドは、 `MediaStream` を返します。これは `CanvasCaptureMediaStreamTrack` (en-US) を含んでおり、このキャンバスの内容をリアルタイムに動画キャプチャします。

構文
--


```js
captureStream(frameRate)
```

### 引数

`frameRate` 省略可

各フレームのキャプチャレートを示す倍精度浮動小数点値です。設定されていない場合、キャンバスが変化するたびに新しいフレームがキャプチャされます。`0` に設定すると、フレームは自動的にキャプチャされません。代わりに、返されたトラックの `requestFrame()` メソッドが呼び出されたときにのみ、キャプチャされます。

### 返値

`MediaStream` オブジェクトへの参照です。その中に
 `CanvasCaptureMediaStreamTrack` (en-US) が 1 つあります。

### 例外

`NotSupportedError` `DOMException`

`frameRate` が負の値であった場合に発生します。

`SecurityError` `DOMException`

 ビットマップのオリジンがクリーンではありません。
 そのコンテンツの少なくとも一部が、文書そのものが読み込まれたサイトとは別のサイトから読み込まれたものであるか、その可能性があります。


例
-


```js
// キャプチャしたい canvas 要素を取得
const canvasElt = document.querySelector("canvas");

// ストリームの取得
const stream = canvasElt.captureStream(25); // 25 FPS

// 取得したストリームに対して何らかの処理を行う
// 例：RTCPeerConnection を使って別のコンピュータに送信
// ここで pc は既に生成された RTCPeerConnection オブジェクト
stream.getTracks().forEach((track) => pc.addTrack(track, stream));
```

仕様書
---

| Specification |
| --- |
| Media Capture from DOM Elements # dom-htmlcanvaselement-capturestream |

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

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

関連情報
----

* `HTMLMediaElement.captureStream()` - メディア要素からストリームをキャプチャするメソッド
* `MediaStream`
* `Media Capture and Streams API`
HTMLCanvasElement: contextrestored イベント
=======================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

**`contextrestored`** はキャンバス API のイベtので、ユーザーエージェントが `CanvasRenderingContext2D` のバッキングストレージを復元した場合に発行されます。

このイベントを受け取った後、再描画、リソースの再取得、コンテキストの状態の再初期化などが可能です。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

次のコードは、コンテキストが復元されたイベントを検出するものです。


```js
const canvas = document.getElementById("canvas");

canvas.addEventListener(
  "contextrestored",
  (e) => {
    console.log(e);
    // redrawCanvas() などを呼び出す
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-contextrestored |

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

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

関連情報
----

* `HTMLCanvasElement: contextlost` イベント
* `CanvasRenderingContext2D.isContextLost()` (en-US)
HTMLCanvasElement: transferControlToOffscreen() メソッド
====================================================

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

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`HTMLCanvasElement.transferControlToOffscreen()`** メソッドは、メインスレッドまたはワーカーの `OffscreenCanvas` (en-US) オブジェクトへ制御を委譲します。

構文
--


```js
transferControlToOffscreen()
```

### 引数

なし。

### 返値

`OffscreenCanvas` (en-US) オブジェクト。

例
-

次の例は、メインスレッド上の `OffscreenCanvas` (en-US) オブジェクトに制御を移譲する方法です。


```js
const htmlCanvas = document.createElement("canvas");
const offscreen = htmlCanvas.transferControlToOffscreen();
const gl = offscreen.getContext("webgl");

// Some drawing using the gl context…
```


次の例は、ワーカー上の `OffscreenCanvas` (en-US) オブジェクトに制御を移す方法を示しています。


```js
const offscreen = document.querySelector("canvas").transferControlToOffscreen();
const worker = new Worker("myworkerurl.js");
worker.postMessage({ canvas: offscreen }, [offscreen]);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-canvas-transfercontroltooffscreen-dev |

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

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

関連情報
----

* このメソッドを定義しているインターフェイス、`HTMLCanvasElement`
* `OffscreenCanvas` (en-US)
HTMLCanvasElement: webglcontextcreationerror イベント
=================================================

**`webglcontextcreationerror`** は WebGL API のイベントで、ユーザーエージェントが `WebGLRenderingContext` コンテキストを作成することができない場合に発行されます。

このイベントには `WebGLContextEvent.statusMessage` (en-US) プロパティがあり、失敗に関する詳細情報を含むプラットフォーム依存の文字列を格納されることがあります。

このイベントはバブリングしません。

構文
--

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


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

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

イベント型
-----

`WebGLContextEvent` (en-US) です。`Event` を継承しています。

Event

WebGLContextEvent

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

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

`WebGLContextEvent.statusMessage` (en-US)

読み取り専用のプロパティで、イベントに関する追加情報を保持します。

例
-


```js
const canvas = document.getElementById("canvas");

canvas.addEventListener(
  "webglcontextcreationerror",
  (e) => {
    console.log(e.statusMessage || "Unknown error");
  },
  false,
);

const gl = canvas.getContext("webgl");
// logs statusMessage or "Unknown error" if unable to create WebGL context
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.15.4 |

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

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

関連情報
----

* `WebGLContextEvent` (en-US)
* `WebGLRenderingContext.isContextLost()` (en-US)
* `WEBGL_lose_context` (en-US), `WEBGL_lose_context.loseContext()` (en-US), `WEBGL_lose_context.restoreContext()` (en-US)
HTMLCanvasElement: webglcontextrestored イベント
============================================

**`webglcontextrestored`** は WebGL API インターフェイスのイベントで、ユーザーエージェントが `WebGLRenderingContext` オブジェクトの描画バッファーを復元したときに発行されます。

コンテキストが復元されると、コンテキストが失われる前に作成したテクスチャやバッファーなどの WebGL リソースは使えなくなります。WebGL アプリケーションの状態を再初期化し、リソースを再作成する必要があります。

このイベントはバブリングしません。

構文
--

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


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

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

イベント型
-----

`WebGLContextEvent` (en-US) です。`Event` を継承しています。

Event

WebGLContextEvent

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

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

`WebGLContextEvent.statusMessage` (en-US)

読み取り専用のプロパティで、イベントに関する追加情報を保持します。

例
-

`WEBGL_lose_context` (en-US) 拡張機能の助けにより、`webglcontextrestored` イベントをシミュレートすることができます。


```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");

canvas.addEventListener(
  "webglcontextrestored",
  (e) => {
    console.log(e);
  },
  false,
);

gl.getExtension("WEBGL\_lose\_context").restoreContext();

// "webglcontextrestored" event is logged.
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.15.3 |

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

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

関連情報
----

* `WebGLContextEvent` (en-US)
* `WebGLRenderingContext.isContextLost()` (en-US)
* `WEBGL_lose_context` (en-US), `WEBGL_lose_context.loseContext()` (en-US), `WEBGL_lose_context.restoreContext()` (en-US)
HTMLCanvasElement: height プロパティ
===============================

**`HTMLCanvasElement.height`** プロパティは CSS ピクセル数として解釈される正の整数であり、この `<canvas>` 要素の `height` 属性を反映します。この属性が指定されなかった場合、または負の数など、無効な値をが設定された場合、既定値の `150` が使用されます。

これはキャンバスのサイズを制御する 2 つのプロパティのうちの 1 つで、もう一方は `HTMLCanvasElement.width` です。

値
-

数値です。

例
-

この `<canvas>` 要素があったとします。


```html
<canvas id="canvas" width="300" height="300"></canvas>
```


次のコードでキャンバスの高さを取得することができます。


```js
const canvas = document.getElementById("canvas");
console.log(canvas.height); // 300
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-canvas-height |

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

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

関連情報
----

* `HTMLCanvasElement`: `HTMLCanvasElement.height` プロパティを定義しているインターフェイス
* `HTMLCanvasElement.width`: キャンバスのサイズを制御するために使用される他のプロパティ
HTMLCanvasElement: contextlost イベント
===================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

**`contextlost`** はキャンバス API のイベントで、 `CanvasRenderingContext2D` コンテキストに関連付けられたバックストレージが失われたことをユーザーエージェントが検出すると、発行されます。
 コンテキストは、ドライバーのクラッシュやアプリケーションのメモリー不足など、いくつかの理由で失われることがあります。

 既定では、ユーザーエージェントはコンテキストの復元を試み、`contextrestored` イベントを発行します。
 ユーザーコードは、イベント処理中に `Event.preventDefault()` を呼び出すことにより、コンテキストが復元されるのを防ぐことができます。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

次のコードは、`contextlost` イベントを検出するものです。


```js
const canvas = document.getElementById("canvas");

canvas.addEventListener("contextlost", (event) => {
  console.log(event);
});
```


コンテキストが復元されないようにするためのコードは次のようになります。


```js
const canvas = document.getElementById("canvas");

canvas.addEventListener("contextlost", (event) => {
  event.preventDefault();
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-contextlost |

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

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

関連情報
----

* `HTMLCanvasElement: contextrestored` イベント
* `CanvasRenderingContext2D.isContextLost()` (en-US)
HTMLCanvasElement: webglcontextlost イベント
========================================

**`webglcontextlost`** は WebGL API のイベントで、`WebGLRenderingContext` オブジェクトに関連づけられた描画バッファーが失われたことをユーザーエージェントが検出した場合に発行されます。

このイベントはバブリングしません。

構文
--

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


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

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

イベント型
-----

`WebGLContextEvent` (en-US) です。`Event` を継承しています。

Event

WebGLContextEvent

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

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

`WebGLContextEvent.statusMessage` (en-US)

読み取り専用のプロパティで、イベントに関する追加情報を保持します。

例
-

`WEBGL_lose_context` (en-US) 拡張機能の助けにより、`webglcontextlost` イベントをシミュレートすることができます。


```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");

canvas.addEventListener("webglcontextlost", (event) => {
  console.log(event);
});

gl.getExtension("WEBGL\_lose\_context").loseContext();

// "webglcontextlost" event is logged.
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.15.2 |

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

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

関連情報
----

* `WebGLContextEvent` (en-US)
* `WebGLRenderingContext.isContextLost()` (en-US)
* `WEBGL_lose_context` (en-US), `WEBGL_lose_context.loseContext()` (en-US), `WEBGL_lose_context.restoreContext()` (en-US)
HTMLCanvasElement: mozOpaque プロパティ
==================================

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

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

標準外の **`HTMLCanvasElement.mozOpaque`** プロパティは論理値で、この `<canvas>` 要素の `moz-opaque` 属性を反映します。これは、半透明の要素があるかどうかをキャンバスに知らせるものです。半透明がないことがキャンバスに伝われば、描画性能を最適化することができます。

**メモ:** これは、`HTMLCanvasElement.getContext()` で描画コンテキストを作成する際に、`alpha` オプションを `false` に設定することで標準化されました。`mozOpaque` を使用することは避けてください。Firefox は将来的に対応をやめる予定です。

値
-

論理値です。

例
-

この `<canvas>` 要素があったとします。


```html
<canvas id="canvas" width="300" height="300" moz-opaque></canvas>
```


`mozOpaque` プロパティは、取得したり設定したりすることができます。例えば、`mimeType === 'image/jpeg'` などの場合に条件付きで `true` に設定し、半透明が不要なアプリケーションでのパフォーマンスを得ることができます。


```js
const canvas = document.getElementById("canvas");
console.log(canvas.mozOpaque); // true
// deactivate it
canvas.mozOpaque = false;
```

仕様書
---

標準には含まれていません。

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

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

関連情報
----

* `HTMLCanvasElement`: `HTMLCanvasElement.mozOpaque` プロパティを定義するのに使用するインターフェイス
* `moz-opaque`: `<canvas>` 要素の HTML 属性
* Optimizing your JavaScript game for Firefox OS
HTMLCanvasElement: width プロパティ
==============================

**`HTMLCanvasElement.width`** プロパティは CSS ピクセル数として解釈される正の整数であり、この `<canvas>` 要素の `width` 属性を反映します。この属性が指定されなかった場合、または負の数など、無効な値をが設定された場合、既定値の `300` が使用されます。

これはキャンバスのサイズを制御する 2 つのプロパティのうちの 1 つで、もう一方は `HTMLCanvasElement.height` です。

値
-

数値です。

例
-

この `<canvas>` 要素があったとします。


```html
<canvas id="canvas" width="300" height="300"></canvas>
```


次のコードでキャンバスの幅を取得することができます。


```js
const canvas = document.getElementById("canvas");
console.log(canvas.width); // 300
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-canvas-height |

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

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

関連情報
----

* `HTMLCanvasElement`: `HTMLCanvasElement.width` プロパティを定義しているインターフェイス
* `HTMLCanvasElement.height`: キャンバスのサイズを制御するために使用される他のプロパティ
Accelerometer: z プロパティ
======================

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

`Accelerometer` インターフェイスの読み取り専用プロパティ **`z`** は、デバイスの z 軸方向の加速度を表す数値を返します。

値
-

`Number` です。

例
-

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


```js
const accelerometer = new Accelerometer({ frequency: 60 });

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

仕様書
---

| Specification |
| --- |
| Accelerometer # accelerometer-z |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Accelerometer: x プロパティ
======================

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

`Accelerometer` インターフェイスの読み取り専用プロパティ **`x`** は、デバイスの x 軸方向の加速度を表す数値を返します。

値
-

`Number` です。

例
-

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


```js
const accelerometer = new Accelerometer({ frequency: 60 });

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

仕様書
---

| Specification |
| --- |
| Accelerometer # accelerometer-x |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Accelerometer: y プロパティ
======================

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

`Accelerometer` インターフェイスの読み取り専用プロパティ **`y`** は、デバイスの y 軸方向の加速度を表す数値を返します。

値
-

`Number` です。

例
-

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


```js
const accelerometer = new Accelerometer({ frequency: 60 });

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

仕様書
---

| Specification |
| --- |
| Accelerometer # accelerometer-y |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Accelerometer: Accelerometer() コンストラクター
=======================================

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

**`Accelerometer()`** コンストラクターは、取得時点でデバイスの 3 軸それぞれにかかっている加速度を返す新しい `Accelerometer` オブジェクトを生成します。

構文
--


```js
new Accelerometer()
new Accelerometer(options)
```

### 引数

`options` 省略可

以下のオプションがあります。

`frequency`

1 秒あたり行いたいサンプリングの回数で、`reading` イベントが 1 秒あたり何回呼ばれるかを表します。整数または小数が利用でき、小数は 1 秒に 1 回未満の頻度を指定する際に用います。実際に計測が行われる頻度はデバイスのハードウェアに依存し、指定より少なくなる可能性があります。

`referenceFrame`

`'device'` か `'screen'` のいずれかです。デフォルトは `'device'` です。


### 例外

`SecurityError` `DOMException`

この機能の使用が Permissions Policy によりブロックされたとき投げられます。

仕様書
---

| Specification |
| --- |
| Accelerometer # dom-accelerometer-accelerometer |

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

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

関連情報
----

* `reading` イベント
IDBObjectStore: indexNames プロパティ
================================

`IDBObjectStore` インターフェイスの読み取り専用プロパティ **`indexNames`** は、オブジェクトストア内のオブジェクトに対するインデックスのリストを返します。

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

値
-

`DOMStringList` です。

例
-

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


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

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

  // データベースを開いた結果を変数 db に格納する
  // これは後でよく使う
  db = this.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.indexNames);

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

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

仕様書
---

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

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

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

`IDBObjectStore` インターフェイスの **`openKeyCursor()`** メソッドは、`result` がマッチした結果の走査に用いることができる `IDBCursor` に設定される `IDBRequest` オブジェクトを返します。カーソルを用いてオブジェクトストア内のキーを走査するのに用います。

追加を行う操作が正常に完了したかを判定するには、結果の `success` イベントを監視してください。

構文
--


```js
openKeyCursor()
openKeyCursor(query)
openKeyCursor(query, direction)
```

### 引数

`query` 省略可

問い合わせを行うキー範囲です。単一のキーが渡された場合は、そのキーのみを含むキー範囲になります。何も渡されなかった場合は、オブジェクトストア内の全レコードを選択するキー範囲になります。

`direction` 省略可

 カーソルが動く方向を決める `IDBCursorDirection` です。
 有効な値は `"next"`、`"nextunique"`、`"prev"`、`"prevunique"` です。デフォルトは `"next"` です。


### 返値

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

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

* 与えられたクエリーにマッチする最初のレコードを指す `IDBCursor` オブジェクト
* マッチするレコードが見つからなかった場合は `null`
### 例外

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

`InvalidStateError` `DOMException`

この `IDBObjectStore` または `IDBIndex` が削除済のとき投げられます。

`TransactionInactiveError` `DOMException`

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

`DataError` `DOMException`

指定のキーまたはキー範囲が無効であるとき投げられます。

例
-

このシンプルな断片では、トランザクションを生成し、オブジェクトストアを取得し、カーソルを用いてオブジェクトストア内の全レコードを走査します。


```js
const transaction = db.transaction("name", "readonly");
const objectStore = transaction.objectStore("name");
const request = objectStore.openKeyCursor();
request.onsuccess = (event) => {
  const cursor = event.target.result;
  if (cursor) {
    // cursor.key に走査中の現在のレコードのキーが入っている
    // openCursor と違って cursor.value は無いことに注意
    // ここで結果を用いて何かする
    cursor.continue();
  } else {
    // もう結果は無い
  }
};
```

仕様書
---

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

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

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

`IDBObjectStore` インターフェイスの **`index()`** メソッドは、現在のオブジェクトストアの名前付きインデックスを開きます。開くと、たとえば、カーソルを用いてレコード群をそのインデックスでソートして取得できます。

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

構文
--


```js
index(name)
```

### 引数

`name`

開くインデックスの名前です。

### 返値

指定のインデックスにアクセスするための `IDBIndex` オブジェクトです。

### 例外

`InvalidStateError` `DOMException`

元のオブジェクトストアが削除済か、オブジェクトストアのトランザクションが終了しているとき投げられます。

`NotFoundError` `DOMException`

指定の名前 (大文字と小文字を区別します) のインデックスがデータベースに存在しないとき投げられます。

例
-

以下の例では、トランザクションとオブジェクトストアを開き、シンプルな連絡先データベースからインデックス `lName` を取得します。そして、`IDBIndex.openCursor` を用いてこのインデックスで基本的なカーソルを開きます。これは、返されるレコードが主キーではなくインデックスに基づいてソートされる以外、`IDBObjectStore.openCursor` を用いて `ObjectStore` で直接カーソルを開くのと同じように動きます。

最後に、レコードを走査し、データを HTML テーブルに挿入します。動く例全体は、IndexedDB-examples デモリポジトリー内の IDBIndex 例 を参照してください。(動く例を見る)


```js
function displayDataByIndex() {
  tableEntry.innerHTML = "";
  const transaction = db.transaction(["contactsList"], "readonly");
  const objectStore = transaction.objectStore("contactsList");

  const myIndex = objectStore.index("lName");
  myIndex.openCursor().onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const tableRow = document.createElement("tr");
      tableRow.innerHTML =
        `<td>${cursor.value.id}</td>` +
        `<td>${cursor.value.lName}</td>` +
        `<td>${cursor.value.fName}</td>` +
        `<td>${cursor.value.jTitle}</td>` +
        `<td>${cursor.value.company}</td>` +
        `<td>${cursor.value.eMail}</td>` +
        `<td>${cursor.value.phone}</td>` +
        `<td>${cursor.value.age}</td>`;
      tableEntry.appendChild(tableRow);

      cursor.continue();
    } else {
      console.log("全エントリーを表示しました。");
    }
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # dom-idbobjectstore-index |

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

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

関連情報
----

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