recursal/MDN huggingface dataset:
Clipboard.readText()
====================

**`Clipboard`** インターフェイスの **`readText()`** メソッドは、システムクリップボードのテキストの内容のコピーに解決されるプロミス (`Promise`) を返します。

クリップボードからデータを読み込むには、権限 API の `"clipboard-read"` 権限を得る必要があります。

構文
--


```js
readText();
```

### 引数

なし。

### 返値

クリップボードのテキストの内容を持つ文字列に解決される、プロミス (`Promise`) オブジェクト。クリップボードが空であったり、テキストがないか、クリップボードの内容を表す `DataTransfer` オブジェクトがテキストの表現を持たない場合は、空文字列を返します。

テキストでない内容をクリップボードから読むためには、代わりに `read()` メソッドを使ってください。クリップボードへのテキストの書き込みには、`writeText()` を使ってください。

例
-

この使用例は、クリップボードからテキストの内容を取得し、ある要素の内容にその取得されたテキストを設定します。


```js
navigator.clipboard
  .readText()
  .then((clipText) => (document.getElementById("outbox").innerText = clipText));
```

仕様書
---

| Specification |
| --- |
| Clipboard API and events # dom-clipboard-readtext |

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

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

関連情報
----

* クリップボード API
* Async Clipboard API demo on Glitch
* Image support for Async Clipboard article
* `Clipboard.writeText()`
* `Clipboard.write()`
StaticRange: StaticRange() コンストラクター
===================================

**`StaticRange()`** コンストラクターは、 DOM 内のコンテンツの範囲を表す新しい `StaticRange` オブジェクトを作成します。

このコンストラクターは、範囲の開始位置と終了位置を示すプロパティと、範囲が**折りたたまれている**（つまり空である）かどうかを示す論理値を含みます。

構文
--


```js
new StaticRange(rangeSpec)
```

### 引数

`rangeSpec`

要求される `rangeSpec` 引数は、以下の 4 つのプロパティを格納したオブジェクトです。

`startContainer`

範囲の始点がある `Node` です。

`startOffset`

範囲の最初の文字が見つかる開始ノード内のオフセットです。

`endContainer`

範囲の終点がある `Node` です。

`endOffset`

`endOffset` で示される、ノード内で範囲内の最後の文字がある位置のオフセットです。


### 返値

`rangeSpec` オブジェクトで指定された値で初期化された新しい `StaticRange` オブジェクト。

### 例外

`InvalidNodeTypeError`

`startContainer` と `endContainer` のどちらか、または両方が範囲を含めることができないノード種別である場合に `DOMException` が発生します。これらのノード種別は `Node.DOCUMENT_TYPE_NODE` （例えば、HTMLの `doctype` プリアンブルを使用して識別された DTD から派生した `DocumentType` ノードを表します）と DOM 上の要素の属性を記述する `Attr` ノードです。

仕様書
---

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

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

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

**`startContainer`** は `StaticRange` インターフェイスの読み取り専用プロパティで、範囲の先頭の `Node` を返します。

値
-

範囲の開始位置が内部にある `Node` です。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-startcontainer① |

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

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

**`endOffset`** は `StaticRange` インターフェイスの読み取り専用プロパティで、範囲の終了位置の最後のノードの中のオフセットを返します。

値
-

範囲の最後の文字が位置する `endContainer` が示す `Node` 内の文字数を示す整数値です。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-endoffset① |

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

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

**`endContainer`** は `StaticRange` インターフェイスの読み取り専用プロパティで、範囲の末尾がある `Node` を返します。

値
-

範囲の最後の文字を含む `Node` です。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-endcontainer① |

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

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

**`collapsed`** は `StaticRange` インターフェイスの読み取り専用プロパティで、範囲の開始位置と終了位置が同じであれば `true` を返します。

値
-

論理値で、範囲が折りたたまれている場合に `true` となります。折りたたまれた範囲とは、開始位置と終了位置が同じで、 0 文字の長さの範囲です。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-collapsed① |

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

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

**`startOffset`** は `StaticRange` インターフェイスの読み取り専用プロパティで、開始ノードにおける範囲の開始位置のオフセットを返します。

値
-

範囲の最初の文字が位置を `startContainer` が示す `Node` 内の文字数で示す整数値です。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-startoffset① |

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

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

**`window.requestAnimationFrame()`** メソッドは、ブラウザーにアニメーションを行いたいことを知らせ、指定した関数を呼び出して次の再描画の前にアニメーションを更新することを要求します。このメソッドは、再描画の前に呼び出されるコールバック 1 個を引数として取ります。

**メモ:** 次の再描画時に別のフレームをアニメーションさせたいときは、コールバックルーチン自身で `requestAnimationFrame()` を呼び出さなければなりません。 `requestAnimationFrame()` は 1 ショットです。

このメソッドは、いつでも画面上でアニメーションの更新準備が整った時に呼び出してください。これにより、ブラウザーの次の再描画が実行される前にアニメーション関数が呼び出されることを要求します。このコールバックの回数は、たいてい毎秒 60 回ですが、一般的に多くのブラウザーでは W3C の勧告に従って、ディスプレイのリフレッシュレートに合わせて行われます。ただし、コールバックの確率は、バックグラウンドのタブや隠れた `<iframe>` では、パフォーマンス向上やバッテリー消費を減らすために低くなるでしょう。

 コールバックメソッドには、1 個の引数 `DOMHighResTimeStamp` が渡されます。これは現在の時刻を（time originからの経過ミリ秒数で）示します。
 `requestAnimationFrame()` によってキューに入れられた複数のコールバックが 1 つのフレームで起動し始めると、以前のすべてのコールバックのワークロードの計算中に時間が経過しても、それぞれが同じタイムスタンプを受け取ります（以下のコード例では、タイムスタンプが変化したとき、つまり最初のコールバックでフレームを動作させています）。このタイムスタンプは、ミリ秒単位の小数ですが、最小精度は 1ms（1000μs）です。

**警告:** アニメーションが 1 フレームでどれだけ進んだかを計算する場合、常に第 1 引数（または現在時刻を取得する他の方法）を使用するようにしてください、**そうしないと、アニメーションはリフレッシュレートの高い画面では速く実行されます**。これを行う方法については、以下の例を参照してください。

構文
--


```js
requestAnimationFrame(callback)
```

### 引数

`callback`

次の再描画でアニメーションを更新する時に呼び出す関数を指定します。コールバック関数は 1 個の引数 `DOMHighResTimeStamp` を受け取ります。この引数は、`requestAnimationFrame` がコールバックの呼び出しを開始した時点の時刻、すなわち `performance.now()` から返された時刻を示します。

返値
--

`long` の整数値で、リクエスト ID、コールバックリスト内のエントリーを一意に識別するためのリクエスト ID を返します。この値は非ゼロ値ですが、値そのものを推定することはできないでしょう。この値を `window.cancelAnimationFrame()` に渡すことで、コールバック関数の更新を中止できます。

例
-

この例では、ある要素を 2 秒間（2000 ミリ秒）動作させています。要素は 0.1px/ms の速度で右に移動するので、その相対位置（CSS ピクセル単位）はアニメーションの開始からの経過時間（ミリ秒）の関数として `0.1 * elapsed` で計算することができます。要素の最終的な位置は、初期位置から右へ 200px （`0.1 * 2000`）となります。


```js
const element = document.getElementById("some-element-you-want-to-animate");
let start, previousTimeStamp;
let done = false;

function step(timestamp) {
  if (start === undefined) {
    start = timestamp;
  }
  const elapsed = timestamp - start;

  if (previousTimeStamp !== timestamp) {
    // ここで Math.min() を使用して、要素がちょうど 200px で止まるようにします。
    const count = Math.min(0.1 \* elapsed, 200);
    element.style.transform = `translateX(${count}px)`;
    if (count === 200) done = true;
  }

  if (elapsed < 2000) {
    // Stop the animation after 2 seconds
    previousTimeStamp = timestamp;
    if (!done) {
      window.requestAnimationFrame(step);
    }
  }
}

window.requestAnimationFrame(step);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-animationframeprovider-requestanimationframe |

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

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

関連情報
----

* `Window.cancelAnimationFrame()`
* mozRequestAnimationFrame - ブログ投稿
* requestAnimationFrame for smart animating - ブログ投稿
* Animating with JavaScript: from setInterval to requestAnimationFrame - ブログ投稿
* TestUFO: Test your web
browser for requestAnimationFrame() Timing Deviations
* Paul Irish: requestAnimationFrame API: now with sub-millisecond precision
* ポリフィル
LinearAccelerationSensor: LinearAccelerationSensor() コンストラクター
=============================================================

**`LinearAccelerationSensor()`** コンストラクターは、デバイスの 3 軸それぞれにかかっている加速度の測定値を、重力の影響を除いて提供する新しい `LinearAccelerationSensor` オブジェクトを生成します。

構文
--


```js
new LinearAccelerationSensor()
new LinearAccelerationSensor(options)
```

### 引数

`options` 省略可

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

`frequency`

1 秒間にサンプルを何回取得したいかであり、`reading` イベントが呼ばれる 1 秒あたりの回数になります。整数または小数が使用でき、小数は 1 秒に 1 回未満の頻度を設定するのに用います。実際の取得頻度はデバイスハードウェアに依存するので、要求値より少なくなる可能性があります。

`referenceFrame`

`'device'` または `'screen'` です。デフォルトは `'device'` です。


### 例外

`SecurityError` `DOMException`

この機能の使用が Permissions Policy によりブロックされました。

仕様書
---

| Specification |
| --- |
| Accelerometer # dom-linearaccelerationsensor-linearaccelerationsensor |

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

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

関連情報
----

* `reading` イベント
IDBTransaction: commit() メソッド
=============================

`IDBTransaction` インターフェイスの **`commit()`** メソッドは、実行中のトランザクションで呼ばれると、トランザクションをコミットします。

なお、`commit()` は通常呼ばれる *必要は* ありません。未完了の要求がすべて完了し、新しい要求がなされないとき、トランザクションは自動でコミットされます。`commit()` は未完了の要求に関するイベントが発火するのを待たずにコミットプロセスを開始するために使用できます。

実行中でないトランザクションで呼ばれたときは、`InvalidStateError` `DOMException` を投げます。

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

構文
--


```js
commit()
```

### 引数

なし

### 返値

なし (`undefined`)

### 例外

`InvalidStateError` `DOMException`

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

例
-


```js
const note = document.getElementById("notifications");

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

// トランザクションを開くのに成功したら報告する
transaction.oncomplete = (event) => {
  note.innerHTML +=
    "<li>トランザクション完了: データベースの変更が完了しました。</li>";
};

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

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

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

objectStoreRequest.onsuccess = (event) => {
  // 要求の成功を報告する (これは、アイテムがデータベースにに正常に格納されたことを意味しません。
  // これを知るには、transaction.onsuccess を用いる必要があります)
  note.innerHTML += "<li>要求に成功しました。</li>";
};

// 今すぐ変更をデータベースにコミットさせる
transaction.commit();
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbtransaction-commit② |

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

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

関連情報
----

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

`IDBTransaction` インターフェイスの **`IDBTransaction.error`** プロパティは、トランザクションが失敗したときにエラーの種類を返します。

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

値
-

関連するエラーが入った `DOMException` を返すか、エラーが無いときは `null` を返します。

エラーを発生させた要求オブジェクトと同じエラーの参照であることも、トランザクションの失敗 (`QuotaExceededError` など) であることもあります。

トランザクションが完了していないか、正常にコミットして完了した場合は、このプロパティは `null` です。

例
-

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


```js
const note = document.getElementById("notifications");

// IDB データを保存する db オブジェクトのインスタンス
let db;

// データベースを開く
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>以下のエラーによりトランザクションを開けませんでした: ${transaction.error}</li>`;
  };

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

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

  objectStoreRequest.onsuccess = (event) => {
    // 要求の成功を報告する (これは、アイテムがデータベースにに正常に格納されたことを意味しません。
    // これを知るには、transaction.onsuccess を用いる必要があります)
    note.innerHTML += "<li>要求に成功しました。</li>";
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbtransaction-error① |

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

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

関連情報
----

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

`IDBTransaction` インターフェイスの読み取り専用プロパティ **`objectStoreNames`** は、`IDBObjectStore` オブジェクトの名前の `DOMStringList` を返します。

値
-

`IDBObjectStore` オブジェクトの名前の `DOMStringList` を返します。

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbtransaction-objectstorenames① |

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

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

関連情報
----

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

`IDBTransaction` インターフェイスの読み取り専用プロパティ **`mode`** は、トランザクションの対象におけるオブジェクトストア内のデータにアクセスする現在のモードを返します。(すなわち、モードが読み取り専用なのか、オブジェクトストアに書き込みを行いたいか) デフォルト値は `readonly` です。

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

値
-

 現在のオブジェクトストア内のデータへのアクセスを分離するためのモードを定義するオブジェクトです。
 すなわち、現在のオブジェクトストア内のデータへのアクセスを分離するためのモードを定義する文字列です。
 以下の値をとりえます。

`readonly`

データの読み込みはできますが、変更はできません。

`readwrite`

変更対象の既存のデータストア内のデータの読み書きができます。

`versionchange`

 オブジェクトストアやインデックスの削除と作成を含む、任意の操作ができます。
 このモードは、`IDBDatabase.setVersion()` により開始されたトランザクションでバージョン番号を更新する用です。
 このモードのトランザクションは、他のトランザクションと並行で実行することはできません。
 このモードのトランザクションは、*アップグレードトランザクション* として知られています。


例
-

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


```js
const note = document.getElementById("notifications");

// IDB データを保存する用の db オブジェクトのインスタンス
let db;

// データベースを開く
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) => {
    // 要求の成功を報告する (これは、アイテムがデータベースにに正常に格納されたことを意味しません。
    // これを知るには、transaction.onsuccess を用いる必要があります)
    note.innerHTML += "<li>要求に成功しました。</li>";
  };

  // トランザクションが開かれたモードを返す (この場合は "readwrite" のはず)
  transaction.mode;
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbtransaction-mode① |

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

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

関連情報
----

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

`IDBTransaction` インターフェイスの **`abort()`** メソッドは、このトランザクションに関連するデータベース内のオブジェクトへのすべての変更をロールバックします。

このトランザクション中に生成されたすべての実行待ちの `IDBRequest` オブジェクトは、`IDBRequest.error` 属性を `AbortError` `DOMException` に設定されます。

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

構文
--


```js
abort()
```

### 引数

なし

### 返値

なし (`undefined`)

### 例外

`InvalidStateError` `DOMException`

トランザクションが既にコミットまたはアボートされているとき投げられます。

例
-

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


```js
const note = document.getElementById("notifications");

// IDB データを保存する用の db オブジェクトのインスタンス
let db;

// データベースを開く
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) => {
    // 要求の成功を報告する (これは、アイテムがデータベースにに正常に格納されたことを意味しません。
    // これを知るには、transaction.onsuccess を用いる必要があります)
    note.innerHTML += "<li>要求に成功しました。</li>";
  };

  // 今行ったトランザクションをアボートする
  transaction.abort();
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbtransaction-abort② |

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

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

関連情報
----

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

`IDBTransaction` インターフェイスの読み取り専用プロパティ **`db`** は、このトランザクションが紐づいたデータベース接続を返します。

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

値
-

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

例
-

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


```js
const note = document.getElementById("notifications");

// IDB データを保存する用の db オブジェクトのインスタンス
let db;

// データベースを開く
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) => {
    // 要求の成功を報告する (これは、アイテムがデータベースにに正常に格納されたことを意味しません。
    // これを知るには、transaction.onsuccess を用いる必要があります)
    note.innerHTML += "<li>要求に成功しました。</li>";
  };

  // このトランザクションが紐づいているデータベース (IDBDatabase) 接続を返す
  transaction.db;
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbtransaction-db① |

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

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

関連情報
----

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

`complete` イベントはトランザクションが成功裏に終了した場合に発生します。

|  |  |
| --- | --- |
| バブリング | なし |
| キャンセル | 不可 |
| インターフェイス | `Event` |
| イベントハンドラープロパティ | `oncomplete` (en-US) |

例
-

`addEventListener()` を使用:


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

DBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = () => {
    console.log("データベース作成エラー");
  };

  // このデータベースの objectStore を作成
  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });

  // define what data items the objectStore will contain
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};

DBOpenRequest.onsuccess = (event) => {
  const db = DBOpenRequest.result;

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

  // `complete` のためのリスナーを追加
  transaction.addEventListener("complete", (event) => {
    console.log("トランザクション完了");
  });

  const objectStore = transaction.objectStore("toDoList");
  const newItem = {
    taskTitle: "my task",
    hours: 10,
    minutes: 10,
    day: 10,
    month: "January",
    year: 2019,
  };
  const objectStoreRequest = objectStore.add(newItem);
};
```


`oncomplete` (en-US) プロパティを使用:


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

DBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = () => {
    console.log("データベース作成エラー");
  };

  // このデータベースの objectStore を作成
  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });

  // objectStore がどのようなデータアイテムを含むかを定義
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};

DBOpenRequest.onsuccess = (event) => {
  const db = DBOpenRequest.result;

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

  // `complete` のためのリスナーを追加
  transaction.oncomplete = (event) => {
    console.log("トランザクション完了");
  };

  const objectStore = transaction.objectStore("toDoList");
  const newItem = {
    taskTitle: "my task",
    hours: 10,
    minutes: 10,
    day: 10,
    month: "January",
    year: 2019,
  };
  const objectStoreRequest = objectStore.add(newItem);
};
```

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

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

関連情報
----

* IndexedDB の使用
* `oncomplete` (en-US) イベントハンドラープロパティ