recursal/MDN huggingface dataset:
ServiceWorker: error イベント
=========================

`error` イベントは、サービスワーカーでエラーが発生するたびに発行されます。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

以下のコードでは、`ServiceWorker` オブジェクトのハンドルを `ServiceWorkerRegistration.active` で取得し、結果オブジェクトに `onerror` ハンドラーを設定しています。


```js
// 制御下にあるページで
if (navigator.serviceWorker) {
  navigator.serviceWorker.register("service-worker.js");

  navigator.serviceWorker.ready.then((registration) => {
    registration.active.onerror = (event) => {
      console.log("An error occurred in the service worker!");
    };
  });
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # handler-abstractworker-onerror |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ServiceWorker: statechange イベント
===============================

`statechange` イベントは、`ServiceWorker.state` が変化するたびに発行されます。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

このコードスニペットは、サービスワーカーの登録イベントサンプル（ライブデモ）に掲載されています。このコードは、`ServiceWorker.state` の変化を待ち受け、その値を返しています。


```js
let serviceWorker;
if (registration.installing) {
  serviceWorker = registration.installing;
  document.querySelector("#kind").textContent = "installing";
} else if (registration.waiting) {
  serviceWorker = registration.waiting;
  document.querySelector("#kind").textContent = "waiting";
} else if (registration.active) {
  serviceWorker = registration.active;
  document.querySelector("#kind").textContent = "active";
}

if (serviceWorker) {
  logState(serviceWorker.state);
  serviceWorker.addEventListener("statechange", (e) => {
    logState(e.target.state);
  });
}
```


`statechange` が発行されたとき、サービスワーカーの参照先が変わっていることがあることに注意してください。例えば次のようになります。


```js
navigator.serviceWorker.register("/sw.js").then((swr) => {
  swr.installing.state = "installing";
  swr.installing.onstatechange = () => {
    swr.installing = null;
    // この時点で、swr.waiting または swr.active が true になっているかもしれません。
    // これは、statechange イベントがキューに入れられ、その間に基盤のワーカーが
    // 待機状態になり、使用可能であればすぐに起動されるからです。
  };
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # dom-serviceworker-onstatechange |

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

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

**`state`** は `ServiceWorker` インターフェイスの読み取り専用プロパティで、サービスワーカーの現在の状態を表す文字列を返します。読み込みプロパティである は service worker の現在の状態を表す文字列を返します。これは、`parsed`、`installing`、`installed`、`activating`、`activated`、`redundant` の何れかです。

値
-

文字列で、以下の値のうちのいずれかを取ります。

`"parsed"`

 サービスワーカーがダウンロードされ、実行可能であることが確認された後の初期状態です。
 サービスワーカーがこの状態に更新されることはないので、`ServiceWorker.statechange_event` の値になることはありません。


`"installing"`

この状態のサービスワーカーは、インストール中のワーカーとみなされます。この状態の間、`ExtendableEvent.waitUntil()` は `install` イベントハンドラーの中で呼び出され、渡されたプロミスが正常に解決されるまでインストール中のワーカーを延長することができます。これは主に、コアキャッシュがすべて投入されるまでサービスワーカーがアクティブにならないようにするために使用します。

`"installed"`

この状態のサービスワーカーは、待機中のワーカーとみなされます。

`"activating"`

この状態のサービスワーカーは、アクティブワーカーとみなされます。この状態の間、`ExtendableEvent.waitUntil()` は `onactivate` イベントハンドラーの中で呼び出され、渡されたプロミスが正常に解決されるまでアクティブワーカーを延長させることができます。状態がアクティブになるまで、機能イベントは配信されません。

`"activated"`

この状態のサービスワーカーは、機能イベントを処理する準備が整ったアクティブワーカーとみなされます。

`"redundant"`

新しいサービスワーカーが現在のサービスワーカーに置き換わるか、または現在のサービスワーカーがインストールに失敗して破棄される場合です。

例
-

このコードスニペットは、サービスワーカーの登録イベントサンプル（ライブデモ）に掲載されています。このコードは、`ServiceWorker.state` の変化を待ち受け、その値を返しています。


```js
let serviceWorker;
if (registration.installing) {
  serviceWorker = registration.installing;
  document.querySelector("#kind").textContent = "installing";
} else if (registration.waiting) {
  serviceWorker = registration.waiting;
  document.querySelector("#kind").textContent = "waiting";
} else if (registration.active) {
  serviceWorker = registration.active;
  document.querySelector("#kind").textContent = "active";
}

if (serviceWorker) {
  logState(serviceWorker.state);
  serviceWorker.addEventListener("statechange", (e) => {
    logState(e.target.state);
  });
}
```

仕様書
---

| Specification |
| --- |
| Service Workers # service-worker-state |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ServiceWorker.postMessage()
===========================

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

**`postMessage()`** は `ServiceWorker` インターフェイスのメソッドで、ワーカーにメッセージを送信します。これはワーカーに送信するデータを、単一の引数として受け入れます。データは、構造化クローンアルゴリズムで処理することができる任意の JavaScript オブジェクトにすることができます。

サービスワーカーは `postMessage()` メソッドを使用して、クライアントに情報を送り返すことができます。メッセージはこの `ServiceWorker` オブジェクトではなく、関連する `ServiceWorkerContainer` に返送されます。これは`navigator.serviceWorker` から利用できます。

構文
--


```js
postMessage(message)
postMessage(message, options)
postMessage(message, transfer)
```

### 引数

`message`

ワーカーに配信するオブジェクトです。これは `message` イベントに配信されるイベントの `data` フィールドに入ります。これは 構造化クローンアルゴリズム によって扱える JavaScript オブジェクトであれば何でもかまいません。

`message` 引数は必須です。ワーカーに渡すデータが重要でない場合は、`null` または `undefined` を明示的に渡す必要があります。

`options` 省略可

オプションのオブジェクトで、`transfer` フィールドに所有権を移譲するための移譲可能オブジェクトの配列を格納したものです。

`transfer` 省略可

オプションで、所有権を移譲する移譲可能なオブジェクトの配列を渡します。オブジェクトの所有権が移譲されると、そのオブジェクトは移譲元のコンテキストでは使用できなくなり、送信先のワーカーのみで利用できるようになります。

移譲可能なオブジェクトとは、`ArrayBuffer`、`MessagePort`、`ImageBitmap` などのクラスのインスタンスであり、移譲可能なオブジェクトです。`transfer` の値として、`null` は受け入れられません。


**メモ:** パラメータ `options` と `transfer` は、同時に使用することはできません。

### 返値

なし (`undefined`)。

### 例外

`SyntaxError`

`message` 引数が提供されていない場合に発行されます。

例
-

この例では、`ServiceWorker` を作成し、すぐにメッセージを送信しています。


```js
navigator.serviceWorker.register("service-worker.js");

navigator.serviceWorker.ready.then((registration) => {
  registration.active.postMessage(
    "Test message sent immediately after creation",
  );
});
```


メッセージを受信するために、`service-worker.js` のサービスワーカーは、そのグローバルスコープで `message` イベントを待ち受けする必要があります。


```js
// これは `service-worker.s`` になる
addEventListener("message", (event) => {
  console.log(`Message received: ${event.data}`);
});
```


サービスワーカーは、`postMessage()` メソッドを用いてメインスレッドにメッセージを送り返すことができることに注意してください。これを受け取るには、メインスレッドは `message` オブジェクトの `ServiceWorkerContainer` イベントを待ち受けする必要があります。

仕様書
---

| Specification |
| --- |
| Service Workers # dom-serviceworker-postmessage |
| Service Workers # dom-serviceworker-postmessage-message-options |

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

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

関連情報
----

* 所属先の `ServiceWorker` インターフェイス。
* 反対側の `postMessage()` メソッドは、サービスワーカーがメッセージを関連する `ServiceWorkerContainer` に送り返すために使用する必要があるものです。
ServiceWorker.scriptURL
=======================

`ServiceWorkerRegistration` の一部として定義された `ServiceWorker` シリアライズスクリプトの URL を返します。
 `ServiceWorker` を登録した文書と同じオリジンである必要があります。

値
-

文字列です。

例
-


```js
const sw = navigator.serviceWorker.controller;
console.log(sw.scriptURL);
// https://example.com/scripts/service-worker.js
```

仕様書
---

| Specification |
| --- |
| Service Workers # service-worker-url |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SharedWorkerGlobalScope.close()
===============================

**`close()`** は `SharedWorkerGlobalScope` インターフェイスのメソッドで、 `SharedWorkerGlobalScope` のイベントループにキューイングされているタスクを破棄し、この具体的なスコープを効果的に閉じます。

構文
--


```js
close()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

ワーカー自体の内部からワーカーのインスタンスを閉じたい場合は、以下のように呼び出すことができます。


```js
close();
```


`close()` と `self.close()` は事実上同じです。どちらもワーカーの内部スコープから `close()` が呼び出されることを表しています。

**メモ:** メインスレッドからワーカーを停止する方法もあります。`Worker.terminate` メソッドです。

仕様書
---

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

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

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

関連情報
----

`DedicatedWorkerGlobalScope`
SharedWorkerGlobalScope: connect イベント
=====================================

**`connect`** イベントは、新しいクライアントが接続したときに共有ワーカーの `SharedWorkerGlobalScope` に発生します。

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

構文
--

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


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

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

イベント型
-----

`MessageEvent` です。 `Event` を継承しています。

Event

MessageEventイベントプロパティ
---------

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

`MessageEvent.data` 読取専用 

メッセージ送信者から送信されたデータです。

`MessageEvent.origin` 読取専用 

文字列で、メッセージ送信者のオリジンを表します。

`MessageEvent.lastEventId` 読取専用 

文字列で、このイベントの固有の ID を表します。

`MessageEvent.source` 読取専用 

`MessageEventSource` （`WindowProxy`, `MessagePort`, `ServiceWorker` の何れかのオブジェクトがなれる）で、メッセージ送信者を表します。

`MessageEvent.ports` 読取専用 

`MessagePort` オブジェクトの配列で、メッセージが送信されるチャネルに関連するポートを表します（チャネルメッセージングや共有ワーカーにメッセージを送信する場合など、必要に応じて）。

例
-

この例は共有ワーカーファイルを示しています。メインスレッドから `MessagePort` を通してわーカーへの接続が発生したとき、 `onconnect` イベントハンドラーが呼び出されます。イベントオブジェクトは `MessageEvent` です。

接続しようとしているポート番号は、イベントオブジェクトの `ports` 引数で参照することができます。この参照にはポートを通じて来るメッセージを扱うために割り当てられた `onmessage` ハンドラーがあり、その `postMessage()` メソッドにワーカーを使用してメインスレッドにメッセージを送り返すために使用することができます。


```js
self.onconnect = (e) => {
  const port = e.ports[0];

  port.onmessage = (e) => {
    const workerResult = `Result: ${e.data[0] \* e.data[1]}`;
    port.postMessage(workerResult);
  };

  port.start();
};
```


実行している例を完成させるには、 Basic shared worker example (共有ワーカーを実行) をご覧ください。

### addEventListener による同等の処理

`addEventListener()` メソッドを使用してイベントハンドラーを設定することもできます。


```js
self.addEventListener("connect", (e) => {
  const port = e.ports[0];

  port.onmessage = (e) => {
    const workerResult = `Result: ${e.data[0] \* e.data[1]}`;
    port.postMessage(workerResult);
  };
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-workerglobalscope-connect |
| HTML Standard # handler-sharedworkerglobalscope-onconnect |

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

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

関連情報
----

* ウェブワーカーの使用
* `SharedWorkerGlobalScope`
SharedWorkerGlobalScope.name
============================

**`name`** は `SharedWorkerGlobalScope` インターフェイスの読み取り専用プロパティで、 `SharedWorker` が作成されたときに（任意で）指定された名前を返します。これは `SharedWorker()` コンストラクターが `SharedWorkerGlobalScope` への参照を取得するために渡すことができる名前になります。

値
-

文字列です。

例
-

共有ワーカーが `name` オプションを持つコンストラクターで作成された場合。


```js
const myWorker = new SharedWorker("worker.js", { name: "mySharedWorker" });
```


これで `SharedWorkerGlobalScope` は "mySharedWorker" という名前になり、次のように実行すると返すことができます。


```js
self.name;
```


共有ワーカーの中で実行してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-sharedworkerglobalscope-name-dev |

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

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

関連情報
----

* `SharedWorkerGlobalScope`
IDBKeyRange.lowerOpen
=====================

`IDBKeyRange` インターフェイスの読み取り専用プロパティ **`lowerOpen`** は、下限の値がキーの範囲に含まれるかを表す `boolean` 値を返します。

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

値
-

`boolean` 値です。

| 値 | 意味 |
| --- | --- |
| `true` | 下限の値はキーの範囲に含まれません。 |
| `false` | 下限の値はキーの範囲に含まれます。 |

例
-

以下の例は、キーの範囲の使用法を示します。`keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true);` と宣言します。上限と下限の両方が開 (`true`) として宣言されているので、これは `"F"` と `"W"` の間の値を全て含むが、これらの値は含まない範囲です。(`IDBTransaction` により) トランザクションを開き、オブジェクトストアを開き、省略可能なキーの範囲の値を `keyRangeValue` として `IDBObjectStore.openCursor` でカーソルを開きます。

キーの範囲を宣言した後、その `lowerOpen` プロパティの値をコンソールに記録します。これは `"true"` になるはずです。下限は開なので、範囲には含まれないでしょう。

**メモ:** キーの範囲に関する実験ができるより完全な例は、IDBKeyRange-example レポジトリを参照してください。(動く例も見る)


```js
function displayData() {
  const keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
  console.log(keyRangeValue.lowerOpen);

  const transaction = db.transaction(["fThings"], "readonly");
  const objectStore = transaction.objectStore("fThings");
  objectStore.openCursor(keyRangeValue).onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.fThing}, ${cursor.value.fRating}`;
      list.appendChild(listItem);
      cursor.continue();
    } else {
      console.log("全エントリーを表示しました。");
    }
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbkeyrange-loweropen① |

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

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

関連情報
----

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

`IDBKeyRange` インターフェイスの **`upperBound()`** メソッドは、上限のみを持つ新しいキーの範囲を生成します。デフォルトでは、端点を含む「閉」です。

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

構文
--


```js
upperBound(upper)
upperBound(upper, open)
```

### 引数

`upper`

新しいキーの範囲の上限を指定します。

`open` 省略可

上限が端点を除くかどうかを表します。デフォルトは `false` です。

### 返値

新しく生成されたキーの範囲を表す `IDBKeyRange` です。

### 例外

`DataError` `DOMException`

引数 `upper` に割り当てられたキーが有効なキーでないとき投げられます。

例
-

以下の例は、上限が指定されたキーの範囲の使用法を示します。`keyRangeValue = IDBKeyRange.upperBound("F");` と宣言します。これは、値 `"F"` のそれより前の全てを含む範囲です。(`IDBTransaction` により) トランザクションを開き、オブジェクトストアを開き、省略可能なキーの範囲の値を `keyRangeValue` として ``IDBObjectStore.openCursor`` によりカーソルを開きます。

`IDBKeyRange.upperBound("F", true);` を使用すると、値 `"F"` は範囲に含まれず、それより前の値のみが範囲に含まれます。

**メモ:** キーの範囲に関する実験ができるより完全な例は、IDBKeyRange-example レポジトリを参照してください。(動く例も見る)


```js
function displayData() {
  const keyRangeValue = IDBKeyRange.upperBound("F");

  const transaction = db.transaction(["fThings"], "readonly");
  const objectStore = transaction.objectStore("fThings");

  objectStore.openCursor(keyRangeValue).onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.fThing}, ${cursor.value.fRating}`;
      list.appendChild(listItem);

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

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbkeyrange-upperbound① |

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

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

関連情報
----

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

`IDBKeyRange` インターフェイスの読み取り専用プロパティ **`upperOpen`** は、上限の値がキーの範囲に含まれるかを表す `boolean` 値を返します。

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

値
-

`boolean` 値です。

| 値 | 意味 |
| --- | --- |
| `true` | 上限の値はキーの範囲に含まれません。 |
| `false` | 上限の値はキーの範囲に含まれます。 |

例
-

以下の例では、キーの範囲の使用法を示します。`keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true);` と宣言します。上限と下限がともに開 (`true`) として宣言されているので、これは `"F"` と `"W"` の間の全ての値を含むが、これらの値は含まない範囲です。(`IDBTransaction` により) トランザクションを開き、オブジェクトストアを開き、省略可能なキーの範囲の値を `keyRangeValue` として `IDBObjectStore.openCursor` でカーソルを開きます。

キーの範囲を宣言した後、その `upperOpen` プロパティの値をコンソールに記録します。これは `"true"` になるはずです。上限は開なので、範囲には含まれないでしょう。

**メモ:** キーの範囲に関する実験ができるより完全な例は、IDBKeyRange-example レポジトリを参照してください。(動く例も見る)


```js
function displayData() {
  const keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
  console.log(keyRangeValue.upperOpen);

  const transaction = db.transaction(["fThings"], "readonly");
  const objectStore = transaction.objectStore("fThings");
  objectStore.openCursor(keyRangeValue).onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.fThing}, ${cursor.value.fRating}`;
      list.appendChild(listItem);
      cursor.continue();
    } else {
      console.log("全エントリーを表示しました。");
    }
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbkeyrange-upperopen① |

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

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

関連情報
----

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

`IDBKeyRange` インターフェイスの **`bound()`** メソッドは、指定の上限と下限の値を持つ新しいキーの範囲を生成します。範囲は開 (すなわち、端点の値は範囲に含まれない) とすることも、閉 (すなわち、端点の値は範囲に含まれる) とすることもできます。デフォルトでは、範囲は閉になります。

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

構文
--


```js
bound(lower, upper)
bound(lower, upper, lowerOpen)
bound(lower, upper, lowerOpen, upperOpen)
```

### 引数

`lower`

新しいキーの範囲の下限を指定します。

`upper`

新しいキーの範囲の上限を指定します。

`lowerOpen` 省略可

下限が端点の値を除くかどうかを示します。デフォルトは `false` です。

`upperOpen` 省略可

上限が端点の値を除くかどうかを示します。デフォルトは `false` です。

### 返値

新しく生成されたキーの範囲を表す `IDBKeyRange` です。

### 例外

`DataError` `DOMException`

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

* 下限または上限の引数に有効なキーが渡されなかった
* 下限のキーが上限のキーより大きい
* 下限のキーと上限のキーが一致し、いずれかの境界が開である

例
-

以下の例では、有界のキーの範囲の使用法を示します。`keyRangeValue = IDBKeyRange.bound("A", "F");` と宣言します。これは、`"A"` と `"F"` の間の値を表す範囲です。(`IDBTransaction` により) トランザクションを開き、オブジェクトストアを開き、省略可能なキーの範囲の値を `keyRangeValue` として `IDBObjectStore.openCursor` でカーソルを開きます。これにより、このカーソルは指定した範囲に含まれるキーを持つレコードのみを取り出します。端点を開として宣言していないので、この範囲は値 `"A"` および `"F"` を含みます。`IDBKeyRange.bound("A", "F", true, true);` を用いた場合は、`"A"` および `"F"` は範囲に含まれず、その間の値のみが含まれます。

**メモ:** キーの範囲に関する実験ができるより完全な例は、indexeddb-examples レポジトリの `idbkeyrange` ディレクトリを参照してください。(動く例も見る)


```js
function displayData() {
  const keyRangeValue = IDBKeyRange.bound("A", "F");

  const transaction = db.transaction(["fThings"], "readonly");
  const objectStore = transaction.objectStore("fThings");

  objectStore.openCursor(keyRangeValue).onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.fThing}, ${cursor.value.fRating}`;
      list.appendChild(listItem);

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

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbkeyrange-bound① |

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

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

関連情報
----

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

`IDBKeyRange` インターフェイスの `includes()` メソッドは、指定のキーがこのキーの範囲に含まれるかを表す `boolean` 値を返します。

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

構文
--


```js
includes(key)
```

### 引数

`key`

キーの範囲に含まれるかをチェックするキーです。任意の型を使用可能です。

### 返値

`boolean` 値です。

### 例外

`DataError` `DOMException`

指定されたキーが有効なキーでないとき投げられます。

例
-


```js
const keyRangeValue = IDBKeyRange.bound("A", "K", false, false);

keyRangeValue.includes("F");
// true を返します

keyRangeValue.includes("W");
// false を返します
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbkeyrange-includes① |

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

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

関連情報
----

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

`IDBKeyRange` インターフェイスの **`lowerBound()`** メソッドは、下限のみを持つ新しいキーの範囲を生成します。デフォルトでは、端点の値を含む「閉」です。

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

構文
--


```js
lowerBound(lower)
lowerBound(lower, open)
```

### 引数

`lower`

新しいキーの範囲の下限を指定します。

`open` 省略可

下限が端点の値を除くかどうかを表します。デフォルトは `false` です。

### 返値

新しく生成されたキーの範囲を表す `IDBKeyRange` です。

### 例外

`DataError` `DOMException`

引数 `lower` に割り当てられたキーが有効なキーでないとき投げられます。

例
-

以下の例では、下限が指定されたキーの範囲の使用法を示します。`keyRangeValue = IDBKeyRange.lowerBound("F", false);` と宣言します。これは、値 `"F"` とそれより後の全てを含む範囲です。(`IDBTransaction` により) トランザクションを開き、オブジェクトストアを開き、省略可能なキーの範囲の値を `keyRangeValue` として `IDBObjectStore.openCursor` でカーソルを開きます。これにより、このカーソルはキーの値が `"F"` のレコードと、それより後の全てのレコードのみを取得します。`IDBKeyRange.lowerBound("F", true);` を用いた場合、範囲に `"F"` は含まれず、それより後の値のみを含みます。

**メモ:** キーの範囲に関する実験ができるより完全な例は、IDBKeyRange-example リポジトリを参照してください。(動く例も見る)


```js
function displayData() {
  const keyRangeValue = IDBKeyRange.lowerBound("F");

  const transaction = db.transaction(["fThings"], "readonly");
  const objectStore = transaction.objectStore("fThings");

  objectStore.openCursor(keyRangeValue).onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.fThing}, ${cursor.value.fRating}`;
      list.appendChild(listItem);

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

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbkeyrange-lowerbound① |

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

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

関連情報
----

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

`IDBKeyRange` インターフェイスの読み取り専用プロパティ **`upper`** は、キーの範囲の上限を返します。

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

値
-

キーの範囲の上限です。(任意の型になり得ます)

例
-

以下の例では、キーの範囲の使用法を示します。`keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true);` と定義します。上限と下限の両方が開 (`true`) として宣言されているので、これは `"F"` と `"W"` の間の全ての値を含むが、これらの値は含まない範囲です。(`IDBTransaction` により) トランザクションを開き、オブジェクトストアを開き、省略可能なキーの範囲の値を `keyRangeValue` として `IDBObjectStore.openCursor` でカーソルを開きます。

キーの範囲を宣言した後、その `upper` プロパティの値をコンソールに記録します。これは `"W"` になるはずです。

**メモ:** キーの範囲に関する実験ができるより完全な例は、IDBKeyRange-example リポジトリを参照してください。(動く例も見る)


```js
function displayData() {
  const keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
  console.log(keyRangeValue.upper);

  const transaction = db.transaction(["fThings"], "readonly");
  const objectStore = transaction.objectStore("fThings");

  objectStore.openCursor(keyRangeValue).onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.fThing}, ${cursor.value.fRating}`;
      list.appendChild(listItem);

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

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbkeyrange-upper① |

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

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

関連情報
----

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