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

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

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

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

**`Range.compareNode()`** は `Node` の位置を示す定数を返します。

取りうる値は以下の通りです。

`NODE_BEFORE` (`0`)

Node はこの Range より前に始まる

`NODE_AFTER` (`1`)

Node はこの Range より後に終わる

`NODE_BEFORE_AND_AFTER` (`2`)

Node はこの Range より前に始まり、後に終わる

`NODE_INSIDE` (`3`)

Node はこの Range より後に始まり、前に終わる。すなわち、ノードは完全にこの Range に選択されている。

**警告:** このメソッドは Gecko 1.9 から削除され (en-US)、唯一実装していた Firefox の将来のバージョンでは存在しません。使用可能な限り早く `Range.compareBoundaryPoints()` に切り替えるべきです。

以下の関数が置き換えの関数として使用できます。

```js
function rangeCompareNode(range, node) {
  const nodeRange = node.ownerDocument.createRange();
  try {
    nodeRange.selectNode(node);
  } catch (e) {
    nodeRange.selectNodeContents(node);
  }
  const nodeIsBefore =
    range.compareBoundaryPoints(Range.START\_TO\_START, nodeRange) === 1;
  const nodeIsAfter =
    range.compareBoundaryPoints(Range.END\_TO\_END, nodeRange) === -1;

  if (nodeIsBefore && !nodeIsAfter) return 0;
  if (!nodeIsBefore && nodeIsAfter) return 1;
  if (nodeIsBefore && nodeIsAfter) return 2;

  return 3;
}
```

構文
--

```js
compareNode(referenceNode)
```

### 引数

`referenceNode`

この `Range` と比較する `Node` です。

### 返値

`Node` の位置を示す定数。

例
-

```js
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
returnValue = range.compareNode(document.getElementsByTagName("p").item(0));
```

メモ
--

このメソッドは廃止されました。W3C DOM `Range.compareBoundaryPoints()` メソッドを使用しましょう。

仕様書
---

このメソッドは標準ではないため、どの仕様にも属しません。

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

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

関連情報
----

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


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

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

**`Range.setEnd()`** メソッドは `Range` の終了位置を指定されたノードの指定されたオフセットに設定します。 終点を始点より上（文書内の高い位置）に設定すると、始点と終点の両方が指定した終点位置に設定された、折りたたまれた範囲になります。

構文
--

```js
setEnd(endNode, endOffset)
```

### 引数

`endNode`

中で `Range` が終わる `Node` です。

`endOffset`

0 以上の整数で、 `endNode` の始点から `Range` の終点のオフセットを表します。

### 返値

なし (`undefined`)。

### 例外

`InvalidNodeTypeError` `DOMException`

`endNode` で指定されたノードは doctype ノードです。範囲の終点は doctype ノード内に配置することはできません。

`IndexSizeError` `DOMException`

`endOffset` で指定された値は、ノードの長さ以上であるか、 0 未満です。

使用上の注意
------

`endNode` が `Text`、`Comment`、`CDataSection` のいずれかの型の `Node` である場合、 `endOffset` は `endNode` の開始位置からの文字数です。他の型の `Node` である場合、 `endOffset` は `endNode` の始点からの子ノードの数を指定します。

例
-

```js
const range = document.createRange();
const endNode = document.getElementsByTagName("p").item(3);
const endOffset = endNode.childNodes.length;
range.setEnd(endNode, endOffset);
```

**メモ:** `setEnd()` は `setStart()` と組み合わせて使用するのが一般的です。

仕様書
---

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

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

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

関連情報
----

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


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

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

**`Range.compareBoundaryPoints()`** メソッドは、 `Range` の境界点を別の範囲のものと比較します。

構文
--

```js
compareBoundaryPoints(how, sourceRange)
```

### 引数

`how`

定数で、比較メソッドを説明します。

* `Range.END_TO_END` は *sourceRange* の終わりの境界点と `Range` の終わりの境界点を比較します。
* `Range.END_TO_START` は *sourceRange* の終わりの境界点と `Range` の始まりの境界点を比較します。
* `Range.START_TO_END` は *sourceRange* の始まりの境界点と `Range` の終わりの境界点を比較します。
* `Range.START_TO_START` は *sourceRange* の始まりの境界点と `Range` の始まりの境界点を比較します。

`sourceRange`

範囲との境界点を比較するための `Range` です。

### 返値

`-1`, `0`, `1` のいずれかの数値で、 `Range` の対応する境界点が *sourceRange* の対応する境界点より前か、等しいか、後かを示します。

### 例外

`NotSupportedError` `DOMException`

`how` 引数の値が無効な場合に発生します。

例
-

```js
const range = document.createRange();
range.selectNode(document.querySelector("div"));
const sourceRange = document.createRange();
sourceRange.selectNode(document.getElementsByTagName("div")[1]);
const compare = range.compareBoundaryPoints(Range.START\_TO\_END, sourceRange);
```

仕様書
---

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

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

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

関連情報
----

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


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

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

**`Range.detach()`** メソッドは何もしません。使用するのは `Range` オブジェクトを無効にして、ブラウザーが関連リソースを解放できるようにするためです。このメソッドは互換性のために維持されています。

構文
--

```js
detach()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

```js
const range = document.createRange();

range.selectNode(document.getElementsByTagName("div").item(0));
range.detach();
```

仕様書
---

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

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

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

関連情報
----

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


Range: collapsed プロパティ - Web API

Range: collapsed プロパティ
======================

**`Range.collapsed`** は読み取り専用プロパティで、 `Range` の開始点と終了点が同じ位置にあるかどうかを示す論理型フラグを返します。 `Range` の開始境界点と終了境界点が DOM 上で同じ位置であれば `true` を、そうでなければ `false` を返します。

折りたたまれた `Range` は空であり（内容を含まない）、 DOM ツリー内の 1 つの点を指定します。範囲を折りたたむには、 `Range.collapse()` メソッドを参照してください。

値
-

論理値。

例
-

```js
let range = document.createRange();

range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
isCollapsed = range.collapsed;
```

仕様書
---

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

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

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

関連情報
----

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


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

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

**`Range.getClientRects()`** メソッドは、範囲が占める画面の領域を表す `DOMRect` オブジェクトのリストを返します。これは、 `Element.getClientRects()` を呼び出した結果を集約して作成されます。

構文
--

```js
getClientRects()
```

### 引数

None.

### 返値

反復可能な `DOMRect` オブジェクトの並びです。

例
-

### 選択されたクライアント矩形のサイズのログ記録

#### HTML

```html
<div></div>
<pre id="output"></pre>
```

#### CSS

```css
div {
  height: 80px;
  width: 200px;
  background-color: blue;
}
```

#### JavaScript

```js
const range = document.createRange();
range.selectNode(document.querySelector("div"));
rectList = range.getClientRects();

const output = document.querySelector("#output");
for (const rect of rectList) {
  output.textContent = `${output.textContent}\n${rect.width}:${rect.height}`;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-range-getclientrects |

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

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

関連情報
----

* `Range`


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

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

The **`Range.selectNode()`** メソッドは `Range` に `Node` とその内容を格納するように設定します。 `Range` の始めと終わりの親 `Node` は *referenceNode* の親と同じになります。

構文
--

```js
selectNode(referenceNode)
```

### 引数

`referenceNode`

`Range` の中にある選択する `Node` です。

### 返値

なし (`undefined`)。

例
-

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

range.selectNode(referenceNode);
```

仕様書
---

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

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

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

関連情報
----

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


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

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

**`Range.comparePoint()`** メソッドは、 `-1`、`0`、`1` を返します。それぞれ、 `referenceNode` が `Range` の前か、同じか、後かを返します。

参照ノードが `Text`、`Comment`、`CDATASection`型の `Node` の場合、 offset は参照ノードの先頭からの文字数です。他の `Node` 型の場合、 offset は参照ノードの先頭からの子ノードの数です。

構文
--

```js
comparePoint(referenceNode, offset)
```

### 引数

`referenceNode`

`Range` と比較する `Node` です。

`offset`

0 以上の整数で、 *referenceNode* 内のオフセットを表します。

### 返値

Returns `-1`, `0`, or `1`.

例
-

```js
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
returnValue = range.comparePoint(document.getElementsByTagName("p").item(0), 1);
```

仕様書
---

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

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

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

関連情報
----

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


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

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

**`Range()`** コンストラクターは、グローバルな `Document` オブジェクトを始点および終点とする、新しく作成された `Range` オブジェクトを返します。

構文
--

```js
new Range()
```

### 引数

なし。

例
-

この例では、 `Range()` コンストラクターで新しい範囲を作成し、 `Range.setStartBefore()` メソッドと `Range.setEndAfter()` メソッドを使用してその開始位置と終了位置を設定します。そして、 `window.getSelection()` と `Selection.addRange()` (en-US) を使用して範囲を選択します。

### HTML

```html
<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>
<p>Fourth paragraph.</p>
```

### JavaScript

```js
const paragraphs = document.querySelectorAll("p");

// 新しい範囲を作成
const range = new Range();

// 範囲を 2 つ目の段落から開始
range.setStartBefore(paragraphs[1]);

// 範囲を 3 つ目の段落で終了
range.setEndAfter(paragraphs[2]);

// window の選択範囲を取得
const selection = window.getSelection();

// window の選択範囲に範囲を追加
selection.addRange(range);
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-range② |

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

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

関連情報
----

* DOM インターフェイス索引
* `Document.createRange()`


Range: endOffset プロパティ - Web API

Range: endOffset プロパティ
======================

**`Range.endOffset`** は読み取り専用プロパティで、 `Range.endContainer` の `Range` が終了する場所を表す数値を返します。

もし `endContainer` が `Text`, `Comment`, `CDATASection` 型のノード (`Node`) であれば、オフセットとは `endContainer` の先頭から `Range` の境界までの文字数です。その他の `Node` 型の場合、 `endOffset` は `endContainer` の開始点から `Range` の境界点までの子ノードの数となります。このプロパティは読み取り専用です。 `Range` の `endOffset` を変更するには、 `Range.setEnd` 系メソッドのいずれかを使用してください。

値
-

数値です。

例
-

```js
const range = document.createRange();

range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
endRangeOffset = range.endOffset;
```

仕様書
---

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

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

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

関連情報
----

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


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

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

**`Range.surroundContents()`** メソッドは `Range` の内容を新しいノードに移動し、新しいノードを指定された範囲の先頭に配置します。

 このメソッドは `newNode.appendChild(range.extractContents()); range.insertNode(newNode)` とほぼ同じです。
 囲んだ後の `range` の境界点は `newNode` を含みます。

ただし、`Range` が`Text` でないノードをその境界点の 1 つだけで分割した場合は例外が発生します。つまり、上記の代案とは異なり、部分的に選択されたノードがある場合、それらのノードは複製されず、代わりに処理が失敗します。

構文
--

```js
surroundContents(newParent)
```

### 引数

`newParent`

コンテンツを囲む`Node` です。

### 返値

なし (`undefined`)。

例
-

### HTML

```html
<span class="header-text">Put this in a headline</span>
```

### JavaScript

```js
const range = document.createRange();
const newParent = document.createElement("h1");

range.selectNode(document.querySelector(".header-text"));
range.surroundContents(newParent);
```

### 結果

仕様書
---

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

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

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

関連情報
----

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


Range: endContainer プロパティ - Web API

Range: endContainer プロパティ
=========================

**`Range.endContainer`** は読み取り専用プロパティで、 `Range` の終了位置にあるノード (`Node`) を返します。ノードの終了位置を変更するために `Range.setEnd()` または同様のメソッドを利用します。

値
-

`Node` オブジェクト。

例
-

```js
const range = document.createRange();

range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
endRangeNode = range.endContainer;
```

仕様書
---

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

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

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

関連情報
----

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


Range: startOffset プロパティ - Web API

Range: startOffset プロパティ
========================

**`Range.startOffset`** は読み取り専用プロパティで、 `startContainer` の `Range` の開始位置を表す数値を返します。

`startContainer` の `Node` が `Text`、`Comment`、`CDATASection` 型であった場合、そのオフセットは `startContainer` の先頭から `Range` の境界点までの文字数です。他の `Node` 型の場合、 `startOffset` は `startContainer` の開始点と `Range` の境界点の間の子ノードの数です。

`Range` の `startOffset` を変更するには、 `Range.setStart` メソッドを使用してください。

値
-

数値です。

例
-

```js
const range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
const startRangeOffset = range.startOffset;
```

仕様書
---

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

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

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

関連情報
----

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


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

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

**`Range.intersectsNode()`** メソッドは、指定された `Node` が `Range` と交差しているかどうかを示す論理値を返します。

構文
--

```js
intersectsNode(referenceNode)
```

### 引数

`referenceNode`

この `Range` と比較する `Node` です。

### 返値

論理値です。

例
-

```js
const range = document.createRange();

range.selectNode(document.getElementsByTagName("div").item(0));
const intersectingNode = range.intersectsNode(
  document.getElementsByTagName("p").item(0),
);
```

仕様書
---

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

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

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

関連情報
----

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


オリジンプライベートファイルシステム - Web API

オリジンプライベートファイルシステム
==================

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

オリジンプライベートファイルシステム (OPFS) は、ファイルシステム API の一部として提供されるストレージエンドポイントです。これは、パフォーマンスのために高度に最適化され、その内容へのその場での書き込みアクセスを提供する特別な種類のファイルへのアクセスを提供します。

ファイルシステムアクセス API を使用したファイルでの作業
------------------------------

ファイルシステムアクセス API は、ファイルシステム API を拡張したもので、は、ピッカーメソッドを使ったファイルへのアクセスを提供します。例えば、

1. `Window.showOpenFilePicker()` では、ユーザがアクセスするファイルを選択することができ、その結果、 `FileSystemFileHandle` オブジェクトが返されます。
2. `FileSystemFileHandle.getFile()` を呼び出してファイルの内容にアクセスし、 `FileSystemFileHandle.createWritable()` / `FileSystemWritableFileStream.write()` を使用して内容を変更します。
3. `FileSystemHandle.requestPermission({mode:'readwrite'})` は、変更を保存する許可をユーザーにリクエストするために使用されます。
4. ユーザーが許可リクエストを受け入れると、変更は元のファイルに保存されます。

これは機能しますが、いくつかの制限があります。これらの変更はユーザーから見えるファイルシステムに対して行われるため、悪意のあるコンテンツがファイルシステムに書き込まれないように、多くのセキュリティチェックが行われています（例えば、 Chrome のセーフブラウジング）。これらの書き込みはその場で行われるのではなく、一時ファイルを使用します。すべてのセキュリティチェックに合格しない限り、元のファイルは変更されません。

その結果、これらの操作はかなり遅くなります。小さなテキストを更新するときにはそれほど気になりませんが、 SQLite データベースの変更など、より重要で大規模なファイルを更新するときにはパフォーマンスが低下します。

OPFS はそのような問題をどのように解決するのか
-------------------------

OPFSは低レベルのバイト単位のファイルアクセスを提供し、ページのオリジンには非公開でユーザーには見えません。そのため、一連のセキュリティチェックや 権限付与を必要とせず、ファイルシステムアクセス API を呼び出すよりも高速です。また、メインスレッドをブロックしないようにウェブワーカーの中だけで実行できる一連の同期呼び出しも利用できます（他のファイルシステム API 呼び出しは非同期です）。

OPFS がユーザーから見えるファイルシステムと異なる点をまとめると、次のようになります。

* OPFS は、他のオリジン分割されたストレージメカニズム（IndexedDB API など）と同様に、ブラウザーストレージ容量制限の対象となります。 OPFS が使用しているストレージ空間の大きさは `navigator.storage.estimate()` で知ることができます。
* サイトのストレージデータをクリアすると、 OPFS が削除されます。
* OPFS のファイルにアクセスするために、その許可のプロンプトやセキュリティチェックは要求されません。
* ブラウザーは OPFS の内容をディスクのどこかに保持しますが、作成したファイルを 1 対 1 で照合して探すことはできません。 OPFS はユーザーから見えることを意図していません。
OPFS にはどのようにアクセスするのか
--------------------

最初の OPFS にアクセスするには、 `navigator.storage.getDirectory()` メソッドを呼び出します。これは、 OPFS のルートを表す `FileSystemDirectoryHandle` オブジェクトへの参照を返します。

メインスレッドからの OPFS の操作
-------------------

メインスレッドから OPFS にアクセスする場合は、非同期の `Promise` ベースの API を使用します。ファイル（`FileSystemFileHandle`）とディレクトリー（`FileSystemDirectoryHandle`）のハンドルにアクセスするには、 `FileSystemDirectoryHandle.getFileHandle()` と `FileSystemDirectoryHandle.getDirectoryHandle()` をそれぞれ、 OPFS ルート（および作成された子ディレクトリー）を表す `FileSystemDirectoryHandle` オブジェクト上で呼び出します。

**メモ:** 上記のメソッドに `{ create: true }` を渡すと、ファイルやフォルダー内が存在しない場合に作成されます。

```js
// ファイルとフォルダー内の階層を作成
const fileHandle = await opfsRoot.getFileHandle("my first file", {
  create: true,
});
const directoryHandle = await opfsRoot.getDirectoryHandle("my first folder", {
  create: true,
});
const nestedFileHandle = await directoryHandle.getFileHandle(
  "my first nested file",
  { create: true },
);
const nestedDirectoryHandle = await directoryHandle.getDirectoryHandle(
  "my first nested folder",
  { create: true },
);

// 既存のファイル名やフォルダー内にアクセス
const existingFileHandle = await opfsRoot.getFileHandle("my first file");
const existingDirectoryHandle =
  await opfsRoot.getDirectoryHandle("my first folder");
```

### ファイルの読み取り

1. `FileSystemDirectoryHandle.getFileHandle()` を呼び出すと `FileSystemFileHandle` オブジェクトが返ります。
2. `FileSystemFileHandle.getFile()` を呼び出すと `File` オブジェクトが返ります。これは `Blob` の特化した型なので、他の `Blob` と同じように操作できます。例えば、 `Blob.text()` で直接テキストコンテンツにアクセスすることができます。
### ファイルへの書き込み

1. `FileSystemDirectoryHandle.getFileHandle()` を呼び出すと `FileSystemFileHandle` オブジェクトが返ります。
2. `FileSystemFileHandle.createWritable()` を呼び出すと `FileSystemWritableFileStream` オブジェクトが返ります。これは `WritableStream` の特化した型です。
3. `FileSystemWritableFilestream.write()` を呼び出して内容を書き込みます。
4. `WritableStream.close()` を使用してストリームを閉じます。
### ファイルまたはフォルダーの削除

親ディレクトリーで `FileSystemDirectoryHandle.removeEntry()` を呼び出して、削除したい項目の名前を渡します。

```js
directoryHandle.removeEntry("my first nested file");
```

また、 `FileSystemHandle.remove()` を `FileSystemFileHandle` または `FileSystemDirectoryHandle` で呼び出すこともできます。すべてのサブフォルダーを含めてフォルダー内を削除するには、 `{ recursive: true }` オプションを渡してください。

```js
await fileHandle.remove();
await directoryHandle.remove({ recursive: true });
```

以下は、 OPFS 全体をクリアする簡単な方法です：

```js
await (await navigator.storage.getDirectory()).remove({ recursive: true });
```

### フォルダーの内容の一覧出力

`FileSystemDirectoryHandle` は非同期イテレーターです。そのため、 `for await…of` ループや、`entries()`, `values()`, `keys()` などの標準メソッドで反復処理することができます。

例えば次のようにします。

```js
for await (let [name, handle] of directoryHandle) {
}
for await (let [name, handle] of directoryHandle.entries()) {
}
for await (let handle of directoryHandle.values()) {
}
for await (let name of directoryHandle.keys()) {
}
```

ウェブワーカーにおける OPFS の操作
--------------------

ウェブ ワーカーはメインスレッドをブロックしないので、このコンテキストで同期ファイル アクセス API を使用することができます。同期 API はプロミスを扱う必要がないため、より高速です。

同期的にファイルにアクセスするには、 `FileSystemFileHandle.createSyncAccessHandle()` を通常の `FileSystemFileHandle` に対して呼び出します。

**メモ:** 名前に "Sync" とあるにもかかわらず、`createSyncAccessHandle()` メソッド自体は非同期です。

```js
const opfsRoot = await navigator.storage.getDirectory();
const fileHandle = await opfsRoot.getFileHandle("my highspeed file.txt", {
  create: true,
});
const syncAccessHandle = await fileHandle.createSyncAccessHandle();
```

返される `FileSystemSyncAccessHandle` で利用できる同期メソッドがいくつかあります。

* `getSize()`: ファイルのサイズをバイト数で返します。
* `write()`: バッファーの内容を指定されたオフセットを指定してファイルに書き込み、書き込んだバイト数を返します。返された書き込みバイト数を調べることで、呼び出し側はエラーや部分的な書き込みを検出して処理することができます。
* `read()`: オプションで指定されたオフセットで、ファイルの内容をバッファーに読み込みます。
* `truncate()`: 指定されたサイズにファイルをリサイズします。
* `flush()`: `write()` によって行われたすべての変更がファイルの内容に格納されていることを保証します。
* `close()`: アクセスハンドルを閉じます。

この例では、上記のメソッドをすべて使用しています。

```js
const opfsRoot = await navigator.storage.getDirectory();
const fileHandle = await opfsRoot.getFileHandle("fast", { create: true });
const accessHandle = await fileHandle.createSyncAccessHandle();

const textEncoder = new TextEncoder();
const textDecoder = new TextDecoder();

// ファイルのサイズのための変数の初期化
let size;
// ファイルの現在のサイズ。初期値は `0`。
size = accessHandle.getSize();
// ファイルに書き込むためにコンテンツをエンコード
const content = textEncoder.encode("Some text");
// ファイルの先頭にコンテンツを書き込む
accessHandle.write(content, { at: size });
// 変更をフラッシュする
accessHandle.flush();
// ファイルの現在のサイズ、これで `9`（"Some text" の長さ）
size = accessHandle.getSize();

// ファイルに書き込むために、さらにコンテンツをエンコード
const moreContent = textEncoder.encode("More content");
// ファイルの最後にコンテンツを書き込む
accessHandle.write(moreContent, { at: size });
// 変更をフラッシュする
accessHandle.flush();
// これで現在のファイルサイズは `21`（"Some textMore content" の長さ）となる
size = accessHandle.getSize();

// ファイルの長さのデータビューを準備
const dataView = new DataView(new ArrayBuffer(size));

// ファイル全体をデータビューに読み込む
accessHandle.read(dataView);
// `"Some textMore content"` とログ出力
console.log(textDecoder.decode(dataView));

// オフセット 9 から始め、データビューに読み込む。
accessHandle.read(dataView, { at: 9 });
// `"More content"` とログ出力
console.log(textDecoder.decode(dataView));

// ファイルを 4 バイトで切り捨てる。
accessHandle.truncate(4);
```

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

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

関連情報
----

* The origin private file system (web.dev)


WritableStreamDefaultController: signal プロパティ - Web API

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

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

値
-

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

例
-

### 長い書き込み操作の中止

この例では、ローカルシンクを使用して低速処理をシミュレーションします。データが書き込まれたら何もしませんが、少し待ちます。これにより、 `writer.abort()` メソッドを呼び出してプロミスを即座に拒否するのに十分な時間が得られます。

```js
const writingStream = new WritableStream({
  // 長い処理をシミュレーションするために、低速ローカルシンクを定義します。
  write(controller) {
    return new Promise((resolve, reject) => {
      controller.signal.addEventListener("abort", () =>
        reject(controller.signal.reason),
      );

      // 何もせずにローカルシンクのデータで待ちます。
      setTimeout(resolve, 1000); // 低速処理をシミュレーションするタイムアウト
    });
  },
});

// 書き込みを実行
const writer = writingStream.getWriter();
writer.write("Lorem ipsum test data");

// 手動で書き込みを中止
await writer.abort("Manual abort!");
```

### `AbortSignal` を下層レイヤーへ移譲

この例では、フェッチ API を使用して、実際にメッセージをサーバーに送信しています。フェッチ API は `AbortSignal` にも対応しています。 `fetch` メソッドと `WritableStreamDefaultController` の両方に同じオブジェクトを使用することが可能です。

```js
const endpoint = "https://www.example.com/api"; // デモ用の架空の URL
const writingStream = new WritableStream({
  async write(chunk, controller) {
    // Write to the server using the Fetch API
    const response = await fetch(endpoint, {
      signal: controller.signal, // fetch と controller の両方で同じオブジェクトを使用
      method: "POST",
      body: chunk,
    });
    await response.text();
  },
});

// 書き込みを実行
const writer = writingStream.getWriter();
writer.write("Lorem ipsum test data");

// 手動で書き込みを中止
await writer.abort("Manual abort!");
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-ws-default-controller-signal① |

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

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


WritableStreamDefaultController: error() メソッド - Web API

WritableStreamDefaultController: error() メソッド
=============================================

`WritableStreamDefaultController` インターフェイスの **`error()`** メソッドにより、関連するストリームとの今後のやり取りがエラーになります。

通常、基になるシンクのメソッドの 1 つから拒否されたプロミスを返すだけで十分なため、このメソッドはほとんど使用されません。 ただし、基になるシンクとのやり取りの通常のライフサイクル外のイベントに応答して、ストリームを突然シャットダウンする場合に役立ちます。

構文
--

```js
error(message)
```

### 引数

`message`

文字列で、将来の操作を失敗するようにしたいエラーを表します。

### 返値

なし (`undefined`)。

### 例外

`TypeError`

エラーにしようとしているストリームは `WritableStream` ではありません。

例
-

```js
const writableStream = new WritableStream({
  start(controller) {
    // コントローラーで何かをする

    // 必要に応じてストリームをエラーにする
    controller.error("My error is broken");
  },
  write(chunk, controller) {
    // ...
  },
  close(controller) {
    // ...
  },
  abort(err) {
    // ...
  },
});
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-ws-default-controller-error① |

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

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


Gamepad: axes プロパティ - Web API

Gamepad: axes プロパティ
===================

**`Gamepad.axes`** は `Gamepad` インターフェイスのプロパティで、機器（例えばアナログスティック）上に存在する軸を持つコントロールを表す配列を返します。

配列の各要素は -1.0 〜 1.0 の範囲の浮動小数点値で、最小値 (-1.0) から最大値 (1.0) までの軸の位置を表します。

値
-

数値の配列です。

例
-

```js
function gameLoop() {
  const [gp] = navigator.getGamepads();

  let a = 0;
  let b = 0;
  if (gp.axes[0] !== 0) {
    b -= gp.axes[0];
  } else if (gp.axes[1] !== 0) {
    a += gp.axes[1];
  } else if (gp.axes[2] !== 0) {
    b += gp.axes[2];
  } else if (gp.axes[3] !== 0) {
    a -= gp.axes[3];
  }

  ball.style.left = `${a \* 2}px`;
  ball.style.top = `${b \* 2}px`;

  const start = requestAnimationFrame(gameLoop);
}
```

仕様書
---

| Specification |
| --- |
| Gamepad # dom-gamepad-axes |

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

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

関連情報
----

ゲームパッド API の使用


Gamepad: hapticActuators プロパティ - Web API

Gamepad: hapticActuators プロパティ
==============================

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

**`hapticActuators`** は `Gamepad` インターフェイスの読み取り専用プロパティで、 `GamepadHapticActuator` オブジェクトを含む配列を返します。各オブジェクトは、コントローラーで利用可能な触覚フィードバックハードウェアを表します。

### 値

`GamepadHapticActuator` オブジェクトを含む配列。

例
-

```js
const gamepad = navigator.getGamepads()[0];

gamepad.hapticActuators[0].pulse(1.0, 200);
```

仕様書
---

| Specification |
| --- |
| Gamepad Extensions # dom-gamepad-hapticactuators |

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

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

関連情報
----

* ゲームパッド API


Gamepad: displayId プロパティ - Web API

Gamepad: displayId プロパティ
========================

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

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

**`displayId`** は `Gamepad` インターフェイスの読み取り専用プロパティで、 `VRDisplay` に関連付けられた `VRDisplay.displayId` を返します。 `VRDisplay` は表示されるシーンをそのゲームパッドで操作します。

ゲームパッドは、ディスプレイのポーズと同じ空間にあるポーズを報告すると、 `VRDisplay` と関連していると見なされます。`VRDisplay.getPose` を参照してください。

**メモ:** このプロパティは、古い WebVR API に含まれていました。 WebXR Gamepads Module に取って代わられました。

このプロパティを直接置き換えるものはありません。 `XRInputSource` に関連付けられた `Gamepad` オブジェクトは、 `XRInputSource.gamepad` プロパティを使用して取得することができます。

値
-

関連する `VRDisplay.displayId` を表す数値です。 0 の場合、ゲームパッドは VR ディスプレイと関連付けられていません。

例
-

```js
window.addEventListener("gamepadconnected", (e) => {
  if (!e.gamepad.displayId) {
    console.log("Gamepad connected");
  } else {
    console.log(
      `Gamepad connected, associated with VR display ${e.gamepad.displayId}`,
    );
  }
});
```

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR 機器 API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

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

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

関連情報
----

* WebVR API


Gamepad: vibrationActuator プロパティ - Web API

Gamepad: vibrationActuator プロパティ
================================

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

**`vibrationActuator`** は `Gamepad` インターフェイスの読み取り専用プロパティで、このコントローラーで利用できる触覚フィードバックハードウェアを表す `GamepadHapticActuator` オブジェクトを返します。

値
-

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

例
-

```js
const gamepad = navigator.getGamepads()[0];

gamepad.vibrationActuator.playEffect("dual-rumble", {
  startDelay: 0,
  duration: 200,
  weakMagnitude: 1.0,
  strongMagnitude: 1.0,
});
```

仕様書
---

#### No specification found

No specification data found for `api.Gamepad.vibrationActuator`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

関連情報
----

* ゲームパッド API


Gamepad: mapping プロパティ - Web API

Gamepad: mapping プロパティ
======================

**`Gamepad.mapping`** は `Gamepad` インターフェイスのプロパティで、ブラウザーが機器のコントロールを既知のレイアウトに再マップしたかどうかを示す文字列を返します。

現在、サポートされている既知のレイアウトは次の通りです。

* "standard": 標準のゲームパッド
* "xr-standard": 標準 XR ゲームパッド。 `XRInputSource.gamepad` も参照してください。
例
-

```js
let gp = navigator.getGamepads()[0];
console.log(gp.mapping);
```

仕様書
---

| Specification |
| --- |
| Gamepad # dom-gamepad-mapping |

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

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

関連情報
----

ゲームパッド API の使用


Gamepad: pose プロパティ - Web API

Gamepad: pose プロパティ
===================

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

**`pose`** は `Gamepad` インターフェイスの読み取り専用プロパティで、 WebVR コントローラーに関連付けられたポーズ情報（3D 空間での位置と方向など）を表す `GamepadPose` (en-US) オブジェクトを返します。

### 値

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

例
-

TBC

仕様書
---

| Specification |
| --- |
| Gamepad Extensions # dom-gamepad-pose |

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

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

関連情報
----

* ゲームパッド API
* WebVR API


Gamepad: hand プロパティ - Web API

Gamepad: hand プロパティ
===================

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

**`hand`** は `Gamepad` インターフェイスの読み取り専用プロパティで、コントローラーが握られている手または、握られている可能性が最も高い手を定義する列挙型を返します。

値
-

`GamepadHand` 列挙型で、可能な値は次の通りです。

* `left` — 左手。
* `right` — 右手。
* `""` （空文字列） — この値は、他の値が適用できない場合に返されます。コントローラーは両手で持っているか、またはどちらかの可能性があります。
例
-

TBC

仕様書
---

| Specification |
| --- |
| Gamepad Extensions # dom-gamepad-hand |

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

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

関連情報
----

* ゲームパッド API


Gamepad: buttons プロパティ - Web API

Gamepad: buttons プロパティ
======================

**`Gamepad.buttons`** は `Gamepad` インターフェイスのプロパティで、機器上に存在するボタンを表す `gamepadButton` オブジェクトの配列を返します。

配列内の各要素は、ボタンが押されていない場合は 0、ボタンが押されている場合は 0 以外の値（通常は 1.0）です。それぞれの `gamepadButton` オブジェクトには、 `pressed` と `value` という 2 つのプロパティがあります。

* `pressed` プロパティはボタンが今押されているか (`true`) または押されていないか (`false`) を表す真偽値です。
* `value` プロパティは多くの最新のゲームパッドのトリガーなど、アナログボタンの表示を有効にするために使用される浮動小数点値です。 値は 0.0 〜 1.0 の範囲で正規化され、0.0 は押されていないボタンを表し、1.0 は完全に押されたボタンを表します。
値
-

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

例
-

下記のコードはゲームパッド API ボタンのデモから取得したものです。(デモのライブを見ることができ、Github でソースコードを見つけることができます)。コードをフォークする際には以降に気をつけてください — Chrome では `Navigator.getGamepads` は `webkit` 接頭辞が必要で、ボタンの値は double 値の配列として格納されますが、 Firefox は`Navigator.getGamepads` では接頭辞が不要で、ボタンの値は `GamepadButton` オブジェクトの配列に保存されます。`GamepadButton.value` または `GamepadButton.pressed` プロパティはボタンの種類に応じてアクセスする必要があります。この簡単なサンプルでは一方のみを許可しています。

```js
function gameLoop() {
  let a = 0;
  let b = 0;
  if (navigator.webkitGetGamepads) {
    const gp = navigator.webkitGetGamepads()[0];

    if (gp.buttons[0] === 1) {
      b--;
    } else if (gp.buttons[1] === 1) {
      a++;
    } else if (gp.buttons[2] === 1) {
      b++;
    } else if (gp.buttons[3] === 1) {
      a--;
    }
  } else {
    const gp = navigator.getGamepads()[0];

    if (gp.buttons[0].value > 0 || gp.buttons[0].pressed) {
      b--;
    } else if (gp.buttons[1].value > 0 || gp.buttons[1].pressed) {
      a++;
    } else if (gp.buttons[2].value > 0 || gp.buttons[2].pressed) {
      b++;
    } else if (gp.buttons[3].value > 0 || gp.buttons[3].pressed) {
      a--;
    }
  }

  ball.style.left = `${a \* 2}px`;
  ball.style.top = `${b \* 2}px`;

  const start = rAF(gameLoop);
}
```

仕様書
---

| Specification |
| --- |
| Gamepad # dom-gamepad-buttons |

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

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

関連情報
----

ゲームパッド API の使用


Gamepad: index プロパティ - Web API

Gamepad: index プロパティ
====================

**`Gamepad.index`** は `Gamepad` インターフェイスのプロパティで、現在システムに接続されているそれぞれの機器の整数の固有番号（自動採番）の整数を返します。

これは複数のコントローラーを識別するために使用することができます。接続が解除された後で再接続されたゲームパッドは、同じ番号を保持します。

値
-

数値です。

例
-

```js
window.addEventListener("gamepadconnected", () => {
  const gp = navigator.getGamepads()[0];
  gamepadInfo.textContent = `Gamepad connected at index ${gp.index}: ${gp.id}.`;
});
```

仕様書
---

| Specification |
| --- |
| Gamepad # dom-gamepad-index |

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

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

関連情報
----

ゲームパッド API の使用


Gamepad: id プロパティ - Web API

Gamepad: id プロパティ
=================

**`Gamepad.id`** は `Gamepad` インターフェイスのプロパティで、コントローラーに関するいくつかの情報を含む文字列を返します。

正確な構文は厳密には指定されていませんが、Firefox では 3 つの情報がダッシュ (`-`) で区切られています 。

* USB ベンダーとコントローラーの製品 ID を含む 2 つの 4 桁 16 進数字列
* ドライバーが提供するコントローラーの名前

例えば、PS2 のコントローラーは **810-3-USB Gamepad** を返します。

この情報は、機器上のコントロールの対応を見つけたり、ユーザーに有用なフィードバックを表示したりすることを目的としています。

値
-

文字列プリミティブです。

例
-

```js
window.addEventListener("gamepadconnected", () => {
  const gp = navigator.getGamepads()[0];
  gamepadInfo.textContent = `Gamepad connected at index ${gp.index}: ${gp.id}.`;
});
```

仕様書
---

| Specification |
| --- |
| Gamepad # dom-gamepad-id |

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

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

関連情報
----

ゲームパッド API の使用


Gamepad: connected プロパティ - Web API

Gamepad: connected プロパティ
========================

**`Gamepad.connected`** は `Gamepad` インターフェイスのプロパティで、ゲームパッドがシステムに接続されているかどうかを示す論理値を返します。

ゲームパッドが接続されている場合の値は `true`、そうでない場合は `false` となります。

値
-

論理値です。

例
-

```js
const gp = navigator.getGamepads()[0];
console.log(gp.connected);
```

仕様書
---

| Specification |
| --- |
| Gamepad # dom-gamepad-connected |

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

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

関連情報
----

ゲームパッド API の使用


Gamepad: timestamp プロパティ - Web API

Gamepad: timestamp プロパティ
========================

**`Gamepad.timestamp`** は `Gamepad` インターフェイスのプロパティで、このゲームパッドのデータが最後に更新された時刻を表す `DOMHighResTimeStamp` を返します。

このプロパティの背景にある考え方は、ハードウェアにより `axes` や `button` のデータが更新されたかどうかを開発者が判断できるようにすることです。このプロパティの値は ``PerformanceTiming`` インターフェイスの `navigationStart` 属性との相対的な値になります。値は単調増加しています。つまり、新しい値は常に古い値以上であるため、新旧の値を比較することでデータの更新を判断できます。

**メモ:** このプロパティは、現在、どこでも対応しているわけではありません。

値
-

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

例
-

```js
const gp = navigator.getGamepads()[0];
console.log(gp.timestamp);
```

仕様書
---

| Specification |
| --- |
| Gamepad # dom-gamepad-timestamp |

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

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

関連情報
----

ゲームパッド API の使用


IDBDatabase: versionchange イベント - Web API

IDBDatabase: versionchange イベント
===============================

`versionchange` イベントは、データベースの構造の変更 (`IDBOpenDBRequest` または `IDBFactory.deleteDatabase` で `upgradeneeded` イベントが送られた) が他のどこか (同じコンピューターの別のウインドウまたはタブの可能性が最も高いでしょう) で要求された時発火します。

構文
--

`addEventListener()` のようなメソッドでイベント名を使うか、イベントハンドラープロパティを設定します。

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

イベント型
-----

汎用の `Event` です。

例
-

この例ではデータベースを開き、成功時、`versionchange` のリスナーを追加します。

```js
// データベースを開きます
const dBOpenRequest = window.indexedDB.open("Nonexistent", 4);

dBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;
  // このデータベース用の objectStore を作成します
  const 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.addEventListener("success", (event) => {
  const db = event.target.result;
  db.addEventListener("versionchange", (event) => {
    console.log("このデータベースのバージョンが変更されました");
  });
});
```

`onversionchange` イベントハンドラープロパティを用いた、同じ例です。

```js
// データベースを開きます
const dBOpenRequest = window.indexedDB.open("Nonexistent", 4);

dBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;
  // このデータベース用の objectStore を作成します
  const 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 = event.target.result;
  db.onversionchange = (event) => {
    console.log("このデータベースのバージョンが変更されました");
  };
};
```

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

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

関連情報
----

* IndexedDB の使用


IDBDatabase: transaction() メソッド - Web API

IDBDatabase: transaction() メソッド
===============================

**`transaction`** は `IDBDatabase` インターフェイスのメソッドで、オブジェクトストアへのアクセスに利用できる `IDBTransaction.objectStore` メソッドを含むトランザクションオブジェクト (`IDBTransaction`) を即座に返します。

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

構文
--

```js
transaction(storeNames)
transaction(storeNames, mode)
transaction(storeNames, mode, options)
```

### 引数

`storeNames`

新しいトランザクションの対象となるオブジェクトストアの名前を表す文字列の配列です。アクセスが必要なオブジェクトストアのみを指定してください。アクセスが必要なオブジェクトストアが 1 個だけである場合は、その名前を文字列で指定できます。そのため、以下の行は等価です。

```js
db.transaction(["my-store-name"]);
db.transaction("my-store-name");
```

データベース内の全てのオブジェクトストアにアクセスする必要がある場合は、`IDBDatabase.objectStoreNames` プロパティを使用できます。

```js
const transaction = db.transaction(db.objectStoreNames);
```

空の配列を渡すと、例外が投げられます。

`mode` 省略可

トランザクション内で実行できるアクセスの種類です。トランザクションは `readonly`、`readwrite`、`readwriteflush` (非標準、Firefox のみ) の 3 種類のいずれかのモードで開始します。`versionchange` モードはここでは指定できません。この引数を指定しない場合、デフォルトのアクセスモードは `readonly` です。速度の低下を避けるため、実際にデータベースに書き込む必要がある場合以外は `readwrite` トランザクションを開始しないでください。

データを更新するためオブジェクトストアを `readwrite` モードで開く必要がある場合、以下のようにすると良いです。

```js
const transaction = db.transaction("my-store-name", "readwrite");
```

Firefox 40 以降、IndexedDB のトランザクションはパフォーマンスを向上させるために永続性を緩めています。(Firefox バグ 1112702 を参照) これは IndexedDB に対応した他のブラウザーと同様の挙動です。以前は、`readwrite` トランザクションでは `complete` イベントはすべてのデータが確実にディスクに書き込まれてからのみ発火していました。Firefox 40 以降では、`complete` イベントは OS にデータを書き込む指示を出した後に発火し、データはまだ実際にディスクに書き込まれていない可能性があります。そのため、`complete` イベントは以前より早く伝わることがありますが、データがディスクに書き込まれる前に OS がクラッシュしたりシステム電源が喪失したりすると、トランザクション全体が失われる可能性が少しあります。そのような最悪の事象はほとんどないため、ほとんどの利用者は気にしなくていいでしょう。

**メモ:** Firefox では、何らかの理由で永続性を保証したい場合 (例えば、後で再計算できない重要なデータを保存する場合)、実験的な (非標準の) `readwriteflush` モードを用いてトランザクションを開始することで、`complete` イベントを伝える前にトランザクションをディスクに書き込むことを強制できます。(`IDBDatabase.transaction` を参照) これは現在実験的であり、`about:config` で `dom.indexedDB.experimental` を `true` に設定している場合のみ利用できます。

`options` 省略可

その他のオプションが入った辞書です。以下が利用可能なオプションです。

`durability`

`"default"`、`"strict"`、`"relaxed"` のいずれかです。デフォルト値は `"default"` です。`"relaxed"` を使用するとパフォーマンスが向上しますが、保証は減ります。ウェブアプリケーションでは、キャッシュや変化が早いレコードなどの一時的なデータには `"relaxed"` を用い、パフォーマンスや電力に影響してもデータ消失のリスクを減らしたい場合は `"strict"` を用いるべきです。

### 返値

`IDBTransaction` オブジェクトを返します。

### 例外

`InvalidStateError` `DOMException`

この `IDBDatabase` のインスタンスで既に `close()` メソッドが呼ばれているとき投げられます。

`NotFoundError` `DOMException`

引数 `storeNames` で指定されたオブジェクトストアが削除されている、または取り除かれているとき投げられます。

`TypeError`

引数 `mode` の値が無効であるとき投げられます。

`InvalidAccessError` `DOMException`

関数がオブジェクトストア名の空のリストとともに呼ばれたとき投げられます。

例
-

この例では、データベースに接続し、`transaction()` を用いてデータベース上でトランザクションを開始します。完全な例は To-do Notifications アプリケーションを参照してください。(動く例を見る)

```js
let db;

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

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

  // データベースを開いた結果を変数 db に格納します。
  // これはこの先いっぱい使います。
  db = DBOpenRequest.result;

  // displayData() 関数を呼び出し、IDB に格納済の TO-DO リストの
  // データ全てをタスクリストに入れます
  displayData();
};

// 読み書き用のデータベーストランザクションを開始し、データを追加する準備をします
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");
// など
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbdatabase-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 (動く例を見る)


IDBDatabase: objectStoreNames プロパティ - Web API

IDBDatabase: objectStoreNames プロパティ
===================================

**`objectStoreNames`** は `IDBDatabase` インターフェイスのプロパティで、現在接続しているデータベースのオブジェクトストア名のリストを含む `DOMStringList` です。

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

### 値

現在接続しているデータベースのオブジェクトストア名のリストを含む `DOMStringList`。

例
-

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

// これら 2 個のイベントハンドラーは､データベースが正常に開かれたか､失敗した時に動作します｡
DBOpenRequest.onerror = (event) => {
  note.innerHTML += "<li>データベースの読み込みに失敗しました｡</li>";
};

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

  // データベースを開いた結果を変数 db に保存します｡これは後でたくさん使います｡
  db = DBOpenRequest.result;

  // この行では接続したデータベースのオブジェクトストア名を記録します｡
  // { ['my-store-name'] } のようなオブジェクトのはずです。
  console.log(db.objectStoreNames);
};
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbdatabase-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 (動く例を見る)


IDBDatabase: name プロパティ - Web API

IDBDatabase: name プロパティ
=======================

**`name`** は `IDBDatabase` インターフェイスのプロパティで、接続しているデータベース名を含む文字列です。

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

値
-

接続しているデータベース名を含む文字列です。

例
-

この例は接続しているデータベースと、DB の `version` と `name` プロパティを持つ `IDBDatabase` オブジェクトの結果、そしてログを表示します。完全な例は、To-do Notifications アプリケーション（動く例を見る）を見てください。

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

// これら 2 個のイベントハンドラーは､データベースが正常に開かれたか､失敗した時に動作します｡
DBOpenRequest.onerror = (event) => {
  note.innerHTML += "<li>データベースの読み込みに失敗しました｡</li>";
};

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

  // データベースを開いた結果を変数 db に保存します｡これは後でたくさん使います｡
  db = DBOpenRequest.result;

  // この行ではデータベースの名前をログ出力します。 "toDoList" のはずです。
  console.log(db.name);
};
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbdatabase-name① |

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

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

関連情報
----

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


IDBDatabase: createObjectStore() メソッド - Web API

IDBDatabase: createObjectStore() メソッド
=====================================

**`createObjectStore()`** は `IDBDatabase` インターフェイスのメソッドで、新しいオブジェクトストアやインデックスを生成して返します。

このメソッドは、ストアの名前をとるだけでなく、重要なオプションプロパティを定義するためのオプションオブジェクトもとります。ストアの個々のオブジェクトを一意にするために、プロパティを使用できます。 プロパティが識別子ならば、それはすべてのオブジェクトで一意であり、すべてのオブジェクトはそのプロパティを持つべきです。

このメソッドは `versionchange` トランザクション内でのみ呼び出すことができます。

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

構文
--

```js
createObjectStore(name)
createObjectStore(name, options)
```

### 引数

`name`

作成するために新しいオブジェクトストアの名前です。なお、空の名前でオブジェクトストアを作成することも可能です。

`options` 省略可

属性がメソッドのオプション引数であるオプションオブジェクトです。以下のプロパティがあります。

`keyPath` 省略可

 新しいオブジェクトストアで使用するためのキーパス。空または指定しなかった場合、オブジェクトストアはキーパスなしで作成され、アウトオブラインキーを使用します。
 keyPath として配列を渡すこともできます。

`autoIncrement` 省略可

`true` の場合、オブジェクトストアはキージェネレーターがあります。
 既定値は `false` です。

### 返値

新しい `IDBObjectStore` です。

### 例外

このメソッドは `DOMException` を発生させる可能性があり、 `name` は以下の種類のいずれかになります。

`InvalidStateError` `DOMException`

このメソッドが `versionchange` トランザクションのコールバックとして呼び出されなかった場合に発生します。

`TransactionInactiveError` `DOMException`

存在しないソースデータベースに対してリクエストが行われた場合に発生します（例えば、データベースが削除された場合など）。バージョン 41 以前の Firefox では、この場合にも `InvalidStateError` が発生し、誤解を招く可能性がありました。これは修正されました（Firefox bug 1176165 を参照）。

`ConstraintError` `DOMException`

与えられた名前のオブジェクトストア (大文字と小文字を区別する比較に基づく) が接続中のデータベースに既に存在します。

`InvalidAccessError` `DOMException`

`autoIncrement` が `true` に設定されていて、`keyPath` が空文字か空文字を含む配列の場合。

例
-

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

// このイベントハンドラーは､新しいバージョンのデータベースの作成が
// 必要なことを表すイベントを処理します｡これは､データベースが作成されて
// いないときや､上の行の新しいバージョン番号が
// window.indexedDB.open() に渡されたときです｡
// これは、最近のブラウザーでしか実装されていません。
request.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = (event) => {
    note.innerHTML += "<li>データベースの読み込みに失敗しました。</li>";
  };

  // データベースにオブジェクトストアを作成します｡

  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // オブジェクトストアにどのようなデータ項目が入るかを定義します｡

  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 });

  objectStore.createIndex("notified", "notified", { unique: false });

  note.innerHTML += "<li>オブジェクトストアが作成されました。</li>";
};
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbdatabase-createobjectstore① |

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

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

関連項目
----

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


IDBDatabase: deleteObjectStore() メソッド - Web API

IDBDatabase: deleteObjectStore() メソッド
=====================================

**`deleteObjectStore()`** は `IDBDatabase` インターフェイスのメソッドで、対象のオブジェクトストアを参照するすべてのインデックスとともに、接続しているデータベースにある指定の名前のオブジェクトストアを削除します。

`IDBDatabase.createObjectStore` と同様に、このメソッドは `versionchange` トランザクション内で *のみ* 呼び出すことができます。

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

構文
--

```js
deleteObjectStore(name)
```

### 引数

`name`

削除するオブジェクトストアの名前です。名前は大文字と小文字を区別します。

### 返値

なし (`undefined`)。

### 例外

`InvalidStateError` `DOMException`

このメソッドが `versionchange` トランザクションのコールバックとして呼び出されなかった場合に発生します。

`TransactionInactiveError` `DOMException`

存在しないソースデータベースに対してリクエストが行われた場合に発生します（例えば、データベースが削除された場合など）。

`NotFoundError` `DOMException`

存在しないオブジェクトストアを削除しようとしたとき投げられます。

例
-

```js
const dbName = "sampleDB";
const dbVersion = 2;
const request = indexedDB.open(dbName, dbVersion);

request.onupgradeneeded = (event) => {
  const db = request.result;
  if (event.oldVersion < 1) {
    db.createObjectStore("store1");
  }

  if (event.oldVersion < 2) {
    db.deleteObjectStore("store1");
    db.createObjectStore("store2");
  }

  // version < 3, 4... について同様に
};
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbdatabase-deleteobjectstore① |

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

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

関連情報
----

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


IDBDatabase: close イベント - Web API

IDBDatabase: close イベント
=======================

`close` イベントは、データベースの接続が予期せず閉じられた時 `IDBDatabase` で発火します。例えば、使用しているストレージが取り外されたり、ユーザーがブラウザーの履歴設定でデータベースを消去した場合に発生します。

データベースの接続が `IDBDatabase.close()` により正常に閉じられた場合は発火しないことに注意してください。

構文
--

`addEventListener()` のようなメソッドでイベント名を使うか、イベントハンドラープロパティを設定します。

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

イベント型
-----

汎用の `Event` です。

例
-

この例ではデータベースを開き、`close` イベントを監視します。

```js
// データベースを開きます
const dBOpenRequest = window.indexedDB.open("toDoList", 4);

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

  // このデータベース用の objectStore を作成します
  const 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.addEventListener("close", () => {
    console.log("データベースへの接続が閉じられました");
  });
};
```

`addEventListener()` のかわりに `onclose` プロパティを使った同じ例です。

```js
// データベースを開きます
const dBOpenRequest = window.indexedDB.open("toDoList", 4);

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

  // このデータベース用の objectStore を作成します
  const 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.onclose = () => {
    console.log("データベースへの接続が閉じられました");
  };
};
```

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

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

関連情報
----

* IndexedDB の使用


IDBDatabase: version プロパティ - Web API

IDBDatabase: version プロパティ
==========================

**`version`** は `IDBDatabase` インターフェイスのプロパティで、接続しているデータベースのバージョンを含む 64 ビット整数 (en-US)です。データベースを初めて生成した時、この属性は空文字です。

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

### 値

接続しているデータベースのバージョンを含む整数値。

例
-

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

// これら 2 個のイベントハンドラーは､データベースが正常に開かれたか､失敗した時に動作します｡
DBOpenRequest.onerror = (event) => {
  note.innerHTML += "<li>データベースの読み込みに失敗しました｡</li>";
};

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

  // データベースを開いた結果を変数 db に保存します｡これは後でたくさん使います｡
  db = DBOpenRequest.result;

  // この行では接続したデータベースのバージョンを記録します。"4" のはずです。
  console.log(db.version);
};
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbdatabase-version① |

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

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

関連情報
----

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


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

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

**`close()`** は `IDBDatabase` インターフェイスのメソッドで、ただちに戻り、別スレッドで接続を閉じます。

実際には、この接続を使用していて生成されたすべてのトランザクションが完了するまで、接続は閉じられません。一度このメソッドが呼び出されたら、この接続では、新しいトランザクションを生成することはできません。終了処理がペンディングされている場合は、トランザクションを生成するメソッドは、例外を発生させます。

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

構文
--

```js
close()
```

### 引数

なし。

### 返値

なし。

例
-

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

// これら 2 個のイベントハンドラーは､データベースが正常に開かれたか､失敗した時に動作します｡
DBOpenRequest.onerror = (event) => {
  note.innerHTML += "<li>データベースの読み込みに失敗しました｡</li>";
};

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

  // データベースを開いた結果を変数 db に保存します｡
  db = DBOpenRequest.result;

  // さあ、データベースを再び閉じましょう！
  db.close();
};
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbdatabase-close② |

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

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

関連項目
----

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


MediaDeviceInfo: deviceId プロパティ - Web API

MediaDeviceInfo: deviceId プロパティ
===============================

**`deviceId`** は `MediaDeviceInfo` インターフェイスの読み取り専用プロパティで、対応する機器の識別子を表す文字列を返します。この識別子はセッション間で不変です。

この識別子は他のアプリケーションからは予測できず、呼び出し元のアプリケーションのオリジンで一意です。また、クッキーを消去すると再設定されます。プライベートブラウジングでは、異なる識別子が用いられ、セッション間で不変ではありません。

値
-

文字列です。

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediadeviceinfo-deviceid |

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

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


MediaDeviceInfo: label プロパティ - Web API

MediaDeviceInfo: label プロパティ
============================

`MediaDeviceInfo` インターフェイスの読み取り専用プロパティ **`label`** は、デバイスの説明の文字列 (例：`"External USB Webcam"`) を返します。

活動中の `MediaStream` の使用中か、永続的な許可を得られているときのみ参照できます。

値
-

メディアデバイスを説明する文字列です。セキュリティ上の理由で、1 個以上のメディアデバイスを使用する許可を得られていないときは、`label` は常に空文字列 (`""`) です。この許可は、マイクまたはカメラからのストリームを開始するか、永続的な許可を得ることで得られます。

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediadeviceinfo-label |

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

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


MediaDeviceInfo: toJSON() メソッド - Web API

MediaDeviceInfo: toJSON() メソッド
==============================

`MediaDeviceInfo` インターフェイスの **`toJSON()`** メソッドは、シリアライザーです。このメソッドは、この `MediaDeviceInfo` オブジェクトの JSON 表現を返します。

構文
--

```js
toJSON()
```

### 引数

なし

### 返値

この `MediaDeviceInfo` オブジェクトをシリアライズした `JSON` オブジェクトを返します。

### 例

```js
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
  console.log("enumerateDevices() に未対応です。");
} else {
  // カメラとマイクを列挙する
  navigator.mediaDevices
    .enumerateDevices()
    .then((devices) => {
      devices.forEach((device) => {
        console.log(device.toJSON());
      });
    })
    .catch((err) => {
      console.log(`${err.name}: ${err.message}`);
    });
}
```

以下の結果になる可能性があります。

```bash
Object { deviceId: "HJtTemQTM64Bivxv3ZEyKjCi1VR8042lPNpmXKObKJE=", kind: "videoinput", label: "", groupId: "Okm2l1YZTrwy8awTxE8QSLNFoVMdIXx++wLh68tbmv0=" }
Object { deviceId: "EqDubLxPlPeW+5w/ereWTF/3EaAMVHh9QBBHkZHiP0k=", kind: "audioinput", label: "", groupId: "Okm2l1YZTrwy8awTxE8QSLNFoVMdIXx++wLh68tbmv0=" }
Object { deviceId: "CanWttL2RnHOiS7FzzYXMIvLqVFE5S06Lfy8H//nhEw=", kind: "audioinput", label: "", groupId: "nOdLNeXGIw9oL9f2wH69SssQpRVs7cmt9jqZrUWgQwI=" }
```

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediadeviceinfo-tojson |

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

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

関連情報
----

* `JSON`


MediaDeviceInfo: groupId プロパティ - Web API

MediaDeviceInfo: groupId プロパティ
==============================

**`groupId`** は `MediaDeviceInfo` インターフェイスの読み取り専用プロパティで、グループの識別子の文字列を返します。

2 つの機器が同じ物理機器に属しているならば、同じグループ識別子を持ちます。たとえば、モニターにカメラとマイクの両方が埋め込まれている場合があります。

値
-

この機器が属する関連機器のグループを一意に識別する文字列です。

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediadeviceinfo-groupid |

例
-

この例では、指定された機器と同じグループに属する機器のリストを作成します。これは、提示用に関連する機器をまとめたユーザーインターフェイスを作成したり、ユーザーが同じディスプレイに埋め込まれたカメラとマイクを同時に選択しやすくしたりするために利用できます。

```js
const getDeviceGroup = (mainDevInfo) => {
  let devList = [];

  navigator.mediaDevices.enumerateDevices().then((devices) => {
    devices.forEach((device) => {
      if (device.groupId === mainDevInfo.groupId) {
        devList.push(device);
      }
    });
  });

  return devList;
};
```

`getDeviceGroup()` 関数は、グループのリストを作成する対象の `MediaDeviceInfo` オブジェクトを入力にとります。この関数は、まずは結果の配列 `devList` を空の配列に初期化します。

そして、`navigator.mediaDevices.enumerateDevices()` を呼び出し、全メディア機器のリストを取得します。プロミスが解決したら、`forEach()` を用いてリストを走査します。それぞれの機器について、その `groupId` がメイン機器の `groupId` と一致するならば、この `MediaDeviceInfo` オブジェクトをリストに追加します。

最後に、同じグループの各機器を表す `MediaDeviceInfo` オブジェクトが入ったリストが呼び出し元に返されます。

これは、2 個のオブジェクトの `deviceId` の値を比較して一致しない場合のみ結果に機器を追加するようにすることで、渡された機器を返すリストから除いたり、リストの最初に配置したりするように簡単に変更できます。

例のこのバージョンでは、渡された機器を結果のリストの先頭に配置し、見つかったグループの他のメンバーをその後に追加します。

```js
const getDeviceGroup = (mainDevInfo) => {
  let devList = [mainDevInfo];

  navigator.mediaDevices.enumerateDevices().then((devices) => {
    devices.forEach((device) => {
      if (
        device.groupId === mainDevInfo.groupId &&
        device.deviceId !== mainDevInfo.deviceId
      ) {
        devList.push(device);
      }
    });
  });

  return devList;
};
```

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

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


MediaDeviceInfo: kind プロパティ - Web API

MediaDeviceInfo: kind プロパティ
===========================

`MediaDeviceInfo` インターフェイスの読み取り専用プロパティ **`kind`** は列挙値で、`"videoinput"`、`"audioinput"`、`"audiooutput"` のいずれかです。

値
-

文字列です。

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediadeviceinfo-kind |

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

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


CSSVariableReferenceValue.variable - Web API

CSSVariableReferenceValue.variable
==================================

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

**`variable`** は `CSSVariableReferenceValue` インターフェイスのプロパティで、カスタム名で返される組み込み CSS 値です。

構文
--
```

var fallback = CSSVariableReferenceValue.fallback;
```

### 値

`CSSUnparsedValue` です。

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssvariablereferencevalue-variable |

ブラウザーの対応
--------

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


CSSVariableReferenceValue() - Web API

CSSVariableReferenceValue()
===========================

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

**`CSSVariableReferenceValue`** は CSS Typed Object Model API のインターフェイスで、組み込み CSS 値のカスタム名を作成することができます。このオブジェクトは機能的に「CSS 変数」と呼ばれることがあり、 `var()` 関数と同じ用途を提供します。カスタム名は 2 本のダッシュで始める必要があります。

コンストラクター
--------

`CSSVariableReferenceValue.CSSVariableReferenceValue()`

新しい `CSSVariableReferenceValue` オブジェクトを生成します。

プロパティ
-----

`CSSVariableReferenceValue.variable`

コンストラクターに渡されたカスタム名を返します。

`CSSVariableReferenceValue.fallback` 読取専用

カスタム名の組み込み CSS 値を返します。

メソッド
----

なし。

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssvariablereferencevalue-cssvariablereferencevalue |

ブラウザーの対応
--------

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


CSSVariableReferenceValue.fallback - Web API

CSSVariableReferenceValue.fallback
==================================

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

**`fallback`** は `CSSVariableReferenceValue` インターフェイスの読み取り専用プロパティで、組み込み CSS 値のカスタム名を返します。

構文
--
```

var variable = CSSVariableReferenceValue.variable;
```

### 値

`CSSUnparsedValue` です。

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssvariablereferencevalue-fallback |

ブラウザーの対応
--------

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


TimeRanges.length - Web API

TimeRanges.length
=================

**`TimeRanges.length`** 読み取り専用プロパティは、オブジェクト内の範囲の数を返します。

構文
--
```

length = TimeRanges.length;
```

例
-

ID が "myVideo" の動画要素がある場合、

```js
var v = document.GetElementById("myVideo");

var buf = v.buffered;

var numRanges = buf.length;

if (buf.length == 1) {
  // 1つの範囲のみ
  if (buf.start(0) == 0 && buf.end(0) == v.duration) {
    // 1つの範囲が動画の最初から始まり、
    // 動画の最後で終わるため、すべてが読み込まれています
  }
}
```

この例では、時間範囲を見て、動画全体が読み込まれたかどうかを確認します。

仕様
--

| Specification |
| --- |
| HTML Standard # dom-timeranges-length-dev |

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

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


TimeRanges.start() - Web API

TimeRanges.start()
==================

**`start()`** は `TimeRanges` インターフェイスのメソッドで、指定した時間範囲が開始する時刻オフセットを返します。

構文
--

```js
start(index);
```

### 引数

`index`

開始時刻を返却する範囲番号です。

### 返値

数値です。

### 例外

`IndexSizeError` `DOMException`

指定されたインデックスが既存の範囲に対応していない場合に発生します。

例
-

ID が "myVideo" の動画要素がある場合、

```js
const v = document.getElementById("myVideo");

const buf = v.buffered;

const numRanges = buf.length;

if (buf.length === 1) {
  // 1 つの範囲のみ
  if (buf.start(0) === 0 && buf.end(0) === v.duration) {
    // 1 つの範囲が動画の最初から始まり、
    // 動画の最後で終わるため、すべてが読み込まれています
  }
}
```

この例では、時間範囲を調べ、動画全体が読み込まれたかどうかを調べます。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-timeranges-start-dev |

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

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


TimeRanges.end() - Web API

TimeRanges.end()
================

指定された時間範囲が終わる時間オフセットを返します。

構文
--
```

endTime = TimeRanges.end(index)
```

### パラメーター

* `index` は、終了時間を返す範囲の番号です。
### 例外

INDEX\_SIZE\_ERR

指定されたインデックスが既存の範囲に対応しない場合にスローされる `DOMException`。

例
-

ID が "myVideo" の動画要素がある場合、

```js
var v = document.getElementById("myVideo");

var buf = v.buffered;

var numRanges = buf.length;

if (buf.length == 1) {
  // 1つの範囲のみ
  if (buf.start(0) == 0 && buf.end(0) == v.duration) {
    // 1つの範囲が動画の最初から始まり、
    // 動画の最後で終わるため、すべてが読み込まれています
  }
}
```

この例では、時間範囲を見て、動画全体が読み込まれたかどうかを確認します。

仕様
--

| Specification |
| --- |
| HTML Standard # dom-timeranges-end-dev |

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

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


GeolocationPosition: timestamp プロパティ - Web API

GeolocationPosition: timestamp プロパティ
====================================

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

**`GeolocationPosition.timestamp`** は読み取り専用のプロパティで、端末が位置を測定した日時を表します。

### 値

ミリ秒単位のUnix 時刻で与えられるタイムスタンプが入った数値です。

仕様書
---

| Specification |
| --- |
| Geolocation API # timestamp-attribute |

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

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

関連情報
----

* 位置情報 API の使用
* `GeolocationPosition`


GeolocationPosition: coords プロパティ - Web API

GeolocationPosition: coords プロパティ
=================================

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

**`GeolocationPosition.coords`** は読み取り専用のプロパティで、地理的な位置を表す `GeolocationCoordinates` オブジェクトを返します。このオブジェクトには、地球上の位置（経度、緯度）、高度、速度が含まれ、グループ化して返されます。また、これらの値に関する精度情報も含まれます。

### 値

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

仕様書
---

| Specification |
| --- |
| Geolocation API # coords-attribute |

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

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

関連情報
----

* 位置情報 API の使用
* `GeolocationPosition`


Gyroscope: y プロパティ - Web API

Gyroscope: y プロパティ
==================

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

値
-

`Number` です。

例
-

ジャイロスコープは、通常 `reading` イベントコールバックで読み取られます。以下の例では、これを 1 秒に 60 回行います。

```js
let gyroscope = new Gyroscope({ frequency: 60 });

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

仕様書
---

| Specification |
| --- |
| Gyroscope # gyroscope-y |

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

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


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

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

**`Gyroscope()`** コンストラクターは、デバイスの 3 軸それぞれの角速度の計測値を提供する新しい `Gyroscope` オブジェクトを生成します。

構文
--

```js
new Gyroscope()
new Gyroscope(options)
```

### 引数

`options` 省略可

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

`frequency`

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

`referenceFrame`

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

### 例外

`SecurityError` `DOMException`

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

仕様書
---

| Specification |
| --- |
| Gyroscope # dom-gyroscope-gyroscope |

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

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

関連情報
----

* `reading` イベント


Gyroscope: x プロパティ - Web API

Gyroscope: x プロパティ
==================

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

値
-

`Number` です。

例
-

ジャイロスコープは、通常 `reading` イベントコールバックで読み取られます。以下の例では、これを 1 秒に 60 回行います。

```js
let gyroscope = new Gyroscope({ frequency: 60 });

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

仕様書
---

| Specification |
| --- |
| Gyroscope # gyroscope-x |

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

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


Gyroscope: z プロパティ - Web API

Gyroscope: z プロパティ
==================

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

値
-

`Number` です。

例
-

ジャイロスコープは、通常 `reading` イベントコールバックで読み取られます。以下の例では、これを 1 秒に 60 回行います。

```js
let gyroscope = new Gyroscope({ frequency: 60 });

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

仕様書
---

| Specification |
| --- |
| Gyroscope # gyroscope-z |

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

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


console.timeEnd() - Web API

console.timeEnd()
=================

**`console.timeEnd()`** は、以前 `console.time()` の呼び出しで開始したタイマーを停止します。

詳細や使用例については、ドキュメントのタイマーを参照して下さい。

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

構文
--

```js
timeEnd(label);
```

### 引数

`label`

停止するタイマーの名前です。停止させると、経過時間が自動的にウェブコンソールに停止した時刻を示すインジケーターと共に表示されます。

### 返値

なし (`undefined`)。

例
-

```js
console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff…");
console.timeEnd("answer time");
```

上記の例の出力結果は、ユーザーが最初のアラートボックスを解除するのにかかった時間と、その後に 2 番目のアラートを解除するのにかかった時間を示します。

![](/ja/docs/Web/API/console/timeend_static/timer_output.png)

タイマーの名前は `timeLog()` を使ってタイマーの値を記録するときに表示され、停止するときに再び表示されることに注意してください。さらに、 timeEnd() の呼び出しは、タイマーが時間を追跡しなくなったことを明確にするために、 "timer ended" という追加の情報を持っています。

仕様書
---

| Specification |
| --- |
| Console Standard # timeend |

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

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


console.assert() - Web API

console.assert()
================

**`console.assert()`** は、検査結果が false になった場合に、コンソールへエラーメッセージを出力します。検査結果が true になる場合は何も行いません。

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

構文
--

```js
assert(assertion, obj1);
assert(assertion, obj1, obj2);
assert(assertion, obj1, obj2, /\* … ,\*/ objN);

assert(assertion, msg);
assert(assertion, msg, subst1);
assert(assertion, msg, subst1, /\* … ,\*/ substN);
```

### 引数

`assertion`

任意の論理式です。結果が false になると、コンソールにメッセージを出力します。

`obj1` … `objN`

出力する JavaScript オブジェクトのリスト。各オブジェクトを文字列で表現したものを、リストの並び順に追記して出力します。

`msg`

0 個以上の置換文字列を含む JavaScript 文字列。

`subst1` … `substN`

`msg` 内の置換文字列を置き換える JavaScript オブジェクト。この引数で、出力形式を高度に制御できます。

### 返値

なし (`undefined`)。

例
-

次のコード例は、アサーションに続く JavaScript オブジェクトの使用を示しています。

```js
const errorMsg = "the # is not even";
for (let number = 2; number <= 5; number++) {
  console.log(`the # is ${number}`);
  console.assert(number % 2 === 0, { number, errorMsg });
}
// output:
// the # is 2
// the # is 3
// Assertion failed: {number: 3, errorMsg: "the # is not even"}
// the # is 4
// the # is 5
// Assertion failed: {number: 5, errorMsg: "the # is not even"}
```

詳しくは `console` のドキュメントで、コンソールへのテキストの出力をご覧ください。

仕様書
---

| Specification |
| --- |
| Console Standard # assert |

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

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


console.log() - Web API

console.log()
=============

**`console.log()`** メソッドは、メッセージをウェブコンソールに出力します。
 このメッセージは単一の文字列（オプションの置換値を含む）であることもあれば、1 つ以上の JavaScript オブジェクトであることもあります。

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

構文
--

```js
log(obj1);
log(obj1, /\* …, \*/ objN);
log(msg);
log(msg, subst1, /\* …, \*/ substN);
```

### 引数

`obj1` … `objN`

出力する JavaScript オブジェクトのリスト。各オブジェクトの文字列表現が記述順で出力されます。 Chrome や Firefox の比較的新しいバージョンを使っているなら注意が必要です。これらのブラウザーで記録されるのは*オブジェクトへの参照*です。そのため、 `console.log()` を呼び出した時点でのオブジェクトの「値」が表示されるのではなく、内容を見るために開いた時点での値が表示されます。

`msg`

0 個以上の置換文字列を含む JavaScript 文字列。

`subst1` … `substN`

JavaScript オブジェクトと `msg` 内の置換文字列を置換。これにより、出力の書式の詳細な制御が可能となります。

詳細については `console` のコンソールへのテキストの出力の節を参照して下さい。

### 返値

なし (`undefined`)。

オブジェクトのログ出力
-----------

`console.log(obj)` を使わず、 `console.log(JSON.parse(JSON.stringify(obj)))` を使用してください。

これにより、ログを記録した瞬間の `obj` の値を確実に見ることができます。こうしないと、多くのブラウザーでは値が変化したときに常に更新されるライブビューになります。これは望むことではないかもしれません。

仕様書
---

| Specification |
| --- |
| Console Standard # log |

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

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

関連情報
----

* MSDN: F12 ツールのコンソールを使ったエラーおよびステータスの表示
* NodeJS: Console API


console.warn() - Web API

console.warn()
==============

**`console.warn()`** メソッドは、ウェブコンソールに警告メッセージを出力します。

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

**メモ:** Chrome と Firefox では、警告メッセージはウェブコンソール上で小さな感嘆符の隣に表示されます。

構文
--

```js
warn(obj1);
warn(obj1, /\* …, \*/ objN);
warn(msg);
warn(msg, subst1, /\* …, \*/ substN);
```

引数
--

`obj1` … `objN`

出力する JavaScript オブジェクトのリスト。各オブジェクトを文字列で表現したものを、リストの並び順に追記して出力します。

`msg`

0 個以上の置換文字列を含む JavaScript 文字列。

`subst1` … `substN`

`msg` 内の置換文字列を置き換える JavaScript オブジェクト。これにより、出力形式を高度に制御できます。

詳しくは `console` のドキュメントで、コンソールへのテキストの出力をご覧ください。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| Console Standard # warn |

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

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

関連情報
----

* MSDN: F12 ツールのコンソールを使ったエラーおよびステータスの表示


console.info() - Web API

console.info()
==============

**`console.info()`** メソッドは、ウェブコンソールに情報メッセージを出力します。Firefox では、ウェブコンソールでこれらの項目の隣に小さな "i" のアイコンを表示します。

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

構文
--

```js
info(obj1);
info(obj1, /\* …, \*/ objN);
info(msg);
info(msg, subst1, /\* …, \*/ substN);
```

引数
--

`obj1` … `objN`

出力する JavaScript オブジェクトのリスト。各オブジェクトを文字列で表現したものを、リストの並び順に追記して出力します。

`msg`

0 個以上の置換文字列を含む JavaScript 文字列。

`subst1` … `substN`

`msg` 内の置換文字列を置き換える JavaScript オブジェクト。これにより、出力形式を高度に制御できます。

詳しくは `console` のドキュメントで、コンソールへのテキストの出力 をご覧ください。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| Console Standard # info |

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

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

関連情報
----

* MSDN: F12 ツールのコンソールを使ったエラーおよびステータスの表示


console.dir() - Web API

console.dir()
=============

**`console.dir()`** メソッドは、指定された JavaScript オブジェクトのプロパティの対話的なリストを表示します。出力は折り畳み式の階層的なリストで表示され、子オブジェクトの中身を見ることができます。

言い換えれば `console.dir()` は指定された JavaScript オブジェクトのプロパティをすべてコンソール上で見る方法であり、開発者は簡単にオブジェクトのプロパティを得ることができます。

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

![console-dir.png](/ja/docs/Web/API/console/dir_static/console-dir.png)

構文
--

```js
dir(object);
```

### 引数

`object`

プロパティを出力する JavaScript オブジェクトです。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| Console Standard # dir |

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

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

関連情報
----

* MSDN: F12 ツールのコンソールを使ったエラーおよびステータスの表示
* Chrome Console API reference


console.time() - Web API

console.time()
==============

**`console.time()`** メソッドは、長い処理がどれくらいかかるかを計測することができるタイマーを起動します。それぞれのタイマーに固有の名前を付けると、そのページに 10,000 個までのタイマーを実行させることができます。同じ名前を引数として `console.timeEnd()` を呼び出すと、タイマー開始からの経過時間がミリ秒単位で出力されます。

詳細や使用例については、 `console` のページのタイマーを参照して下さい。

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

構文
--

```js
time(label);
```

### 引数

`label`

新しいタイマーにつける名前です。それぞれのタイマーの識別に用います。同じ名前を使用して `console.timeEnd()` を呼び出すと、タイマーを終了して時間をコンソールに出力します。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| Console Standard # time |

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

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

関連情報
----

* `console.timeEnd()`
* `console.timeLog()`


console.timeStamp() - Web API

console.timeStamp()
===================

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

**`console.timeStamp`** メソッドは、単一のマーカーをブラウザーのパフォーマンスツール（Firefox, Chrome）に追加します。これにより、コード内のポイントを、タイムライン上に記録されたほかのポイント、例えばレイアウトや描画のイベントなどと結びつけることができます。

任意で、引数を指定してタイムラインにラベル付することができ、このラベルはマーカーのそばに表示されます。

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

構文
--

```js
timeStamp(label);
```

引数
--

`label`

タイムスタンプのラベル。省略可能です。

### 返値

なし (`undefined`)。

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

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

関連情報
----

* `console.time()`
* `console.timeEnd()`
* コンソール API によるマーカーの追加


console.groupCollapsed() - Web API

console.groupCollapsed()
========================

**`console.groupCollapsed()`** メソッドは、ウェブコンソールに新たなインライングループを作成します。 `console.group()` とは異なり、新しいグループは折りたたまれた状態で作成されます。グループ内に作成された項目を表示するには、グループの隣にある展開ボタンを使用する必要があります。

親グループに戻るには、`console.groupEnd()` を呼び出します。

詳細および使用例は `console` のドキュメントで、コンソールでのグループの使用 をご覧ください。

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

構文
--

```js
groupCollapsed();
groupCollapsed(label);
```

### 引数

`label`

グループのラベルです。省略可能です。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| Console Standard # groupcollapsed |

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

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


console.groupEnd() - Web API

console.groupEnd()
==================

**`console.groupEnd()`** メソッドは、ウェブコンソールで現在のインライングループから出ます。詳細および使用例は `console` のドキュメントで、コンソールでのグループの使用をご覧ください。

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

構文
--

```js
groupEnd();
```

### 引数

なし。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| Console Standard # groupend |

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

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

関連情報
----

* `console.group()`


console.timeLog() - Web API

console.timeLog()
=================

**`console.timeLog()`** メソッドは、前回 `console.time()` を呼び出すことで起動したタイマーの現在の値をコンソールに記録します。

詳細や例のドキュメントについてはタイマーを参照してください。

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

構文
--

```js
timeLog(label);
```

### 引数

`label`

コンソールに記録するタイマーの名前。

### 返値

label 引数が含まれなかった場合:
```

default: 1042ms
```

既存の `label` が指定された場合:
```

タイマー名: 1242ms
```

### 例外

動作中のタイマーがなかった場合、 `timeLog()` は次の警告を返します。
```

Timer "default" doesn't exist.
```

label 引数が指定されているものの、対応するタイマーがない場合:
```

Timer "timer name" doesn't exist.
```

例
-

```js
console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff…");
console.timeEnd("answer time");
```

上記の例の出力は、ユーザーが最初のアラートボックスを解除するのにかかった時間と、続いて 2 つ目のアラートを解除するのにかかった時間を示しています。

![](/ja/docs/Web/API/console/timelog_static/timer_output.png)

`timeLog()` を使用してタイマーの値を記録したとき、そして停止するしたに再びタイマーの名前が表示されることに注意してください。さらに、 timeEnd() を呼び出すと、タイマーが時間を追跡していないことを明らかにするために、 "timer ended" という追加の情報を保有しています。

仕様書
---

| Specification |
| --- |
| Console Standard # timelog |

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

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


console.profile() - Web API

console.profile()
=================

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

**`console.profile()`** はパフォーマンスプロファイル（例えば Firefox の パフォーマンスツール）の記録を開始します。

任意でプロファイル名を引数として与えることができ、複数のプロファイルを記録している場合に特定のプロファイルのみ停止することができます。引数の解釈方法については、`console.profileEnd()` をご覧ください。

`console.profileEnd()` を呼び出すと、記録を終了します。

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

構文
--

```js
profile(profileName);
```

### 引数

`profileName`

プロファイルにつける名前。省略可能です。

### 返値

なし (`undefined`)。

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

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

関連情報
----

* `console.profileEnd()`


console.dirxml() - Web API

console.dirxml()
================

**`console.dirxml()`** メソッドは、指定した XML/HTML 要素の子孫要素を対話式ツリーを表示します。要素として表示できない場合は、代わりに JavaScript オブジェクトのビューを表示します。出力は、子ノードの内容を見ることができる展開可能なノードの階層的なリストとして表示されます。

構文
--

```js
dirxml(object);
```

### 引数

`object`

プロパティを出力する JavaScript オブジェクト

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| Console Standard # dirxml |

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

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


console.clear() - Web API

console.clear()
===============

**`console.clear()`** メソッドは、実行環境が許可すれば、コンソールを消去します。ブラウザー上で実行されるようなグラフィカルコンソールでは、おそらく許可されます。 Node 上で実行されているような、端末上に表示されているコンソールでは、対応しておらず、何も効果がありません（エラーも発生しません）。

構文
--

```js
clear();
```

### 引数

なし。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| Console Standard # clear |

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

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


console.count() - Web API

console.count()
===============

**`console.count()`** メソッドは、 `count()` を実際に呼び出した回数を記録します。

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

構文
--

```js
count();
count(label);
```

### 引数

`label` 省略可

文字列です。指定した場合、 `count()` はそのラベルを用いて呼び出した回数を出力します。省略した場合は、 `count()` は "default" ラベルで呼び出されたように動作します。

### 返値

なし (`undefined`)。

例
-

例えば、次のようなコードがあったとします。

```js
let user = "";

function greet() {
  console.count();
  return `hi ${user}`;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count();
```

コンソールへの出力は、次のようになります。
```

"default: 1"
"default: 2"
"default: 3"
"default: 4"
```

特にラベルが指定されていないので、表示されているラベルは `default` となっています。

変数 `user` を `label` 引数として、最初の `count()` の呼び出しには文字列 "bob" を、 2 回目の呼び出しには文字列 "alice" を渡してみます。

```js
let user = "";

function greet() {
  console.count(user);
  return `hi ${user}`;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count("alice");
```

以下のように出力されます。
```

"bob: 1"
"alice: 1"
"alice: 2"
"alice: 3"
```

`label` の値のみに基づいて、個々の呼び出し回数を管理しています。

仕様書
---

| Specification |
| --- |
| Console Standard # count |

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

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


console.trace() - Web API

console.trace()
===============

**`console.trace()`** メソッドは、ウェブコンソールにスタックトレースを出力します。

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

詳細や使用例については、`console` のドキュメントのスタックトレースをご覧ください。

構文
--

```js
trace();
trace(object1, /\* …, \*/ objectN);
```

### 引数

`objects` 省略可

スタックトレースと共にコンソールに出力する 0 個以上のオブジェクトです。これらは `console.log()` メソッドに渡したのと同じ方法で構成され書式化されます。

### 返値

なし (`undefined`)。

例
-

```js
function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();
```

コンソールには次のようなトレースが表示されます。
```

bar
foo
<anonymous>
```

仕様書
---

| Specification |
| --- |
| Console Standard # trace |

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

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


console.debug() - Web API

console.debug()
===============

**`console.debug()`** メソッドは、メッセージを "debug" ログレベルでウェブコンソールに出力します。このメッセージは、デバッグ出力を表示するようにコンソールが構成されている場合にのみユーザーに表示されます。多くの場合、ログレベルはコンソールの UI の中で構成します。このログレベルは `Debug` または `Verbose` ログレベルに相当します。

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

構文
--

```js
debug(obj1);
debug(obj1, /\* …, \*/ objN);
debug(msg);
debug(msg, subst1, /\* …, \*/ substN);
```

### 引数

`obj1` … `objN`

出力する JavaScript オブジェクトのリスト。これらの各オブジェクトの文字列表現は、リストされた順に追加され、コンソールに出力されます。

`msg`

連続した順序で `subst1` から `substN` に置き換えられる 0 個以上の置換文字列を含む JavaScript 文字列です。

`subst1` … `substN`

`msg` 内の置換文字列を置換する JavaScript オブジェクト。これにより、出力の形式をさらに制御できます。置換のしくみの説明については、 `console` の文字列置換の使用を参照してください。

詳細については、`console` オブジェクトのドキュメントのコンソールへのテキストの出力を参照してください。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| Console Standard # debug |

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

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


console.group() - Web API

console.group()
===============

**`console.group()`** メソッドは、ウェブコンソールのログに、新たなインライングループを作成します。`console.groupEnd()` を呼び出すまで、以降のすべての出力を 1 段階字下げします。

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

構文
--

```js
group();
group(label);
```

### 引数

`label` 省略可

グループ用のラベルです。

### 返値

なし (`undefined`)。

例
-

ネストされたグループを使用して関連したメッセージを視覚的に結びつけることで、出力を整理する手助けができます。新しいネストのブロックを作成するには、`console.group()` を呼び出します。`console.groupCollapsed()` メソッドは類似していますが、新しいブロックが折りたたまれており、表示するには、展開ボタンをクリックする必要があります。

現在のグループを終了するには、`console.groupEnd()` を呼び出してください。例えば、以下のようなコードがあったとします。

```js
console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.log("Back to the outer level");
```

出力は以下のようになります。

![A screenshot of messages nested in the console output.](/ja/docs/Web/API/console/group_static/nesting.png)

詳しくは、`console` のドキュメントで コンソールでのグループの使用をご覧ください。

仕様書
---

| Specification |
| --- |
| Console Standard # group |

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

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

関連情報
----

* `console.groupEnd()`


console.table() - Web API

console.table()
===============

**`console.table()`** メソッドは、表形式のデータを表として表示します。

この関数には必須の引数 `data` があり、これは配列またはオブジェクトでなければなりません。また、省略可能な引数 `columns` もあります。

これは `data` を表として出力します。配列の各要素（`data` がオブジェクトである場合は、列挙可能なプロパティ）が、表の行になります。

表の 1 列目には、`(添字)` というラベルがつきます。 `data` が配列である場合、この値は配列の添字になります。 `data` がオブジェクトである場合、この値はプロパティ名になります。（Firefox では） `console.table` は表示する行が 1000 行（最初の行は見出し）に制限されていますので注意してください。

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

プリミティブ型のコレクション
--------------

引数 `data` に、配列またはオブジェクトを渡すことができます。

```js
// 文字列の配列

console.table(["apples", "oranges", "bananas"]);
```

![](/ja/docs/Web/API/console/table_static/console-table-array.png)

```js
// 文字列がプロパティであるオブジェクト

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const me = new Person("John", "Smith");

console.table(me);
```

![](/ja/docs/Web/API/console/table_static/console-table-simple-object.png)

### 複合的な型の集合

配列の要素やオブジェクトのプロパティが、それ自身配列やオブジェクトである場合、その要素やプロパティは列ごとに 1 つずつ、行に列挙されます。

```js
// 配列の配列

const people = [
  ["John", "Smith"],
  ["Jane", "Doe"],
  ["Emily", "Jones"],
];
console.table(people);
```

![配列の配列を表示している表](/ja/docs/Web/API/console/table_static/console-table-array-of-array.png)

```js
// オブジェクトの配列

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const john = new Person("John", "Smith");
const jane = new Person("Jane", "Doe");
const emily = new Person("Emily", "Jones");

console.table([john, jane, emily]);
```

配列にオブジェクトが含まれている場合、列にはプロパティ名が表示されることに注意してください。

![Table displaying array of objects](/ja/docs/Web/API/console/table_static/console-table-array-of-objects.png)

```js
// 値がオブジェクトのプロパティを持つオブジェクト

const family = {};

family.mother = new Person("Jane", "Smith");
family.father = new Person("John", "Smith");
family.daughter = new Person("Emily", "Smith");

console.table(family);
```

![オブジェクトのオブジェクトを表示している表](/ja/docs/Web/API/console/table_static/console-table-object-of-objects.png)

### 表示する列を制限する

既定では、`console.table()` はすべての要素を各行に出力します。省略可能な引数 `columns` を使用すると、表示する列のサブセットを選択することができます。

```js
// オブジェクトの配列、ただし firstName のみ表示

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const john = new Person("John", "Smith");
const jane = new Person("Jane", "Doe");
const emily = new Person("Emily", "Jones");

console.table([john, jane, emily], ["firstName"]);
```

![フィルタリングされた出力を持つオブジェクトの配列を表示する表](/ja/docs/Web/API/console/table_static/console-table-array-of-objects-firstname-only.png)

### 列で並べ替える

列の見出しをクリックすると、その列の値で表を並べ替えることができます。

構文
--

```js
table(data);
table(data, columns);
```

### 引数

`data`

表示するデータ。配列またはオブジェクトでなければなりません。

`columns`

出力に含める列の名前を含む配列。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| Console Standard # table |

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

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


console.profileEnd() - Web API

console.profileEnd()
====================

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

**警告:** console.profile() の直後に本 API を呼び出すと、本 API が動作しないことがあります。これを回避するには、 setTimeout の中で 5ms 以上遅延させて呼び出してください。 Firefox バグ 1240249 を参照してください。

**`console.profileEnd()`** メソッドは、 `console.profile()` で開始したプロファイルの記録を終了します。

任意で引数にプロファイル名を与えることができます。引数を与えると、複数のプロファイルを記録している場合に特定のプロファイルのみ停止することができます。

* `console.profileEnd()` に記録中のプロファイル名に一致する名称を渡すと、そのプロファイルを終了します。
* `console.profileEnd()` に記録中のプロファイル名に一致しない名称を渡すと、何も行いません。
* `console.profileEnd()` にプロファイル名を渡さない場合は、直近に開始したプロファイルを終了します。

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

構文
--

```js
profileEnd(profileName);
```

### 引数

`profileName`

プロファイルにつける名前。この引数は省略可能です。

### 返値

なし (`undefined`)。

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

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

関連情報
----

* `console.profile()`


console.error() - Web API

console.error()
===============

**`console.error()`** メソッドは、エラーメッセージをウェブコンソールに出力します。

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

構文
--

```js
error(obj1);
error(obj1, /\* …, \*/ objN);
error(msg);
error(msg, subst1, /\* …, \*/ substN);
```

### 引数

`obj1` … `objN`

出力する JavaScript オブジェクトのリスト。 各オブジェクトの文字列表現が記述順で出力されます。

`msg`

0 個以上の置換文字列 (substitution strings) を含む JavaScript 文字列です。

`subst1` … `substN`

`msg` 内の置換文字列を置換する JavaScript オブジェクト。これにより、出力の書式の詳細な制御が可能となります。

詳細については、`console` ドキュメント内のコンソールへのテキストの出力を参照してください。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| Console Standard # error |

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

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

関連情報
----

* MSDN: F12 ツールのコンソールを使ったエラーおよびステータスの表示
* Chrome Developer Tools: Using the Console


console.countReset() - Web API

console.countReset()
====================

**`console.countReset()`** は `console.count()` で使われたカウンターをリセットします。

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

構文
--

```js
countReset();
countReset(label);
```

### 引数

`label` 省略可

文字列です。指定した場合、 `countReset()` はそのラベルに対するカウントを 0 にリセットします。省略した場合は、 `countReset()` は default のカウンターを 0 にリセットします。

### 返値

なし (`undefined`)。

例
-

例えば、次のようなコードがあったとします。

```js
let user = "";

function greet() {
  console.count();
  return `hi ${user}`;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count();
console.countReset();
```

コンソールへの出力は、次のようになります。
```

"default: 1"
"default: 2"
"default: 3"
"default: 4"
"default: 0"
```

`console.counterReset()` の呼び出しによって default のカウンターが 0 にリセットされたことに注意してください。

変数 `user` を `label` 引数として、最初の `count()` の呼び出しには文字列 "bob" を、 2 回目の呼び出しには文字列 "alice" を渡してみます。

```js
let user = "";

function greet() {
  console.count(user);
  return `hi ${user}`;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.countReset("bob");
console.count("alice");
```

以下のように出力されます。
```

"bob: 1"
"alice: 1"
"alice: 2"
"bob: 0"
"alice: 3"
```

"bob" のカウンターをリセットしたとき他のカウンターに影響を与えません。 "alice" のカウンターは変更されません。

仕様書
---

| Specification |
| --- |
| Console Standard # countreset |

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

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


NDEFReadingEvent.message - Web API

NDEFReadingEvent.message
========================

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

**`message`** は `NDEFReadingEvent` インターフェイスのプロパティで、受信したメッセージの入った `NDEFMessage` オブジェクトを返します。

値
-

`NDEFMessage` オブジェクト。

例
-

この例では、 1 つのタグを読み込んでからポーリングを停止する便利な関数を作成し、不要な作業を減らしてバッテリーの寿命を延ばす方法を示します。この例は、与えられたミリ秒の量の後にタイムアウトするように簡単に拡張することができます。

```js
const ndefReader = new NDEFReader();

function read() {
  return new Promise((resolve, reject) => {
    const ctlr = new AbortController();
    ctlr.signal.onabort = reject;
    ndefReader.addEventListener(
      "reading",
      (event) => {
        ctlr.abort();
        resolve(event);
      },
      { once: true },
    );
    ndefReader.scan({ signal: ctlr.signal }).catch((err) => reject(err));
  });
}

read().then(({ serialNumber }) => {
  console.log(serialNumber);
});
```

仕様書
---

| Specification |
| --- |
| Web NFC API # dom-ndefreadingevent-message |

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

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


NDEFReadingEvent.serialNumber - Web API

NDEFReadingEvent.serialNumber
=============================

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

**`serialNumber`** は `NDEFReadingEvent` インターフェイスのプロパティで、衝突防止や識別に使用する機器のシリアル番号、またはシリアル番号がない場合は空文字列を返します。

値
-

機器のシリアル番号が入った文字列です。

例
-

この例では、 1 つのタグを読み込んでからポーリングを停止する便利な関数を作成し、不要な作業を減らしてバッテリーの寿命を延ばす方法を示します。この例は、与えられたミリ秒の量の後にタイムアウトするように簡単に拡張することができます。

```js
const ndefReader = new NDEFReader();

function read() {
  return new Promise((resolve, reject) => {
    const ctlr = new AbortController();
    ctlr.signal.onabort = reject;
    ndefReader.addEventListener(
      "reading",
      (event) => {
        ctlr.abort();
        resolve(event);
      },
      { once: true },
    );
    ndefReader.scan({ signal: ctlr.signal }).catch((err) => reject(err));
  });
}

read().then(({ serialNumber }) => {
  console.log(serialNumber);
});
```

仕様書
---

| Specification |
| --- |
| Web NFC API # dom-ndefreadingevent-serialnumber |

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

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


NDEFReadingEvent.NDEFReadingEvent() - Web API

NDEFReadingEvent.NDEFReadingEvent()
===================================

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

**`NDEFReadingEvent()`** コンストラクターは、新しい `NDEFReadingEvent` オブジェクトを作成します。これは `NDEFReader` によって得られる新しい NFC 読み取りに対して配信するイベントを表します。

構文
--

```js
new NDEFReadingEvent(type, options);
```

### 引数

`type`

常に `'type'` です。

`options`

以下のメンバーを持つオブジェクトです。

`serialNumber`

メッセージが読み取られた機器のシリアル番号です。

`message`

以下のメンバーを持つオブジェクトの配列です。

`data` 省略可

転送されるデータが入ります。文字列、`BufferSource`、ネストされたレコードの配列のいずれかです。

`encoding` 省略可

文字列で、レコードのエンコーディングを指定します。

`id` 省略可

レコードの開発者が定義する識別子です。

`lang` 省略可

RFC 5646: Tags for Identifying Languages （BCP 47 とも呼ばれる）による有効な言語タグです。

`mediaType` 省略可

有効な MIME タイプです。

`recordType`

`data` に格納されているデータの種類を示す文字列です。以下の値のいずれかでなければなりません。

`"absolute-url"`

データの絶対 URL です。

`"empty"`

空の `NDEFRecord` です。

`"mime"`

有効な MIME タイプです。

`"smart-poster"`

NDEF-SMARTPOSTER 仕様書で定義されているようなスマートポスターです。

`"text"`

NDEF-TEXT 仕様書で定義されているようなテキストです。

`"unknown"`

レコードの種類が不明です。

`"URL"`

NDEF-URI 仕様書で定義されているような URL です。

仕様書
---

| Specification |
| --- |
| Web NFC API # dom-ndefreadingevent-constructor |

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

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


IDBCursor.primaryKey - Web API

IDBCursor.primaryKey
====================

`IDBCursor` インターフェイスの読み取り専用プロパティ **`primaryKey`** は、カーソルの現在の実効キーを返します。カーソルが現在反復中であったり、範囲外まで反復した場合は、`undefined` になります。カーソルの主キーは任意のデータ型になり得ます。

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

値
-

任意のデータ型の値です。

例
-

このシンプルな断片では、トランザクションを作成し、オブジェクトストアを取得し、カーソルを用いてオブジェクトストア内の全レコードを走査します。それぞれの繰り返しでは、たとえば以下のような、カーソルの主キーをコンソールに記録します。(主キーである、アルバムのタイトルです)
```

Hemispheres
```

カーソルを用いる場合、データをキーで選択する必要はなく、単に全て取得できます。また、ループ中のそれぞれの繰り返しにおいて、カーソルオブジェクトが指している現在のレコードのデータを `cursor.value.foo` のようにして取得できます。動く例全体は、IDBCursor example を参照してください。(動く例を見る)

```js
function displayData() {
  const transaction = db.transaction(["rushAlbumList"], "readonly");
  const objectStore = transaction.objectStore("rushAlbumList");

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

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

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbcursor-primarykey① |

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

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

関連情報
----

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


IDBCursor.delete() - Web API

IDBCursor.delete()
==================

`IDBCursor` インターフェイスの **`delete()`** メソッドは、`IDBRequest` オブジェクトを返し、別のスレッドで、カーソルの位置を変えずにカーソルが指しているレコードを削除します。レコードが削除されると、カーソルの値は `null` になります。

注意点として、`IDBIndex.openKeyCursor()` で取得したカーソルでは `delete()` (や `IDBCursor.update()`) を呼ぶことはできません。このような用途のためには、かわりに `IDBIndex.openCursor()` を使用しないといけません。

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

構文
--

```js
delete()
```

### 引数

なし

### 返値

この操作に関して続くイベントが発火する `IDBRequest` オブジェクト。`result` 属性は `undefined` になります。

### 例外

このメソッドは、以下の種類の `DOMException` を発生させる可能性があります。

`TransactionInactiveError` `DOMException`

この `IDBCursor` のトランザクションが活性状態でないとき投げられます。

`ReadOnlyError` `DOMException`

トランザクションが読み取り専用モードのとき投げられます。

`InvalidStateError` `DOMException`

カーソルが `IDBindex.openKeyCursor` により作成されたか、現在反復中であるか、終わりまで反復済みであるとき投げられます。

例
-

このシンプルな断片ではトランザクションを作成し、オブジェクトストアを取得し、カーソルを用いてオブジェクトストア内の全レコードを走査します。カーソルが指しているレコードの `albumTitle` が `"Grace under pressure"` である場合、`const request = cursor.delete();` によりそのレコード全体を削除します。

カーソルを使用する場合、キーによりデータを選択する必要は無く、単に全てを取得できます。また、ループ中のそれぞれの繰り返しにおいて、カーソルオブジェクトが指しているレコードのデータを `cursor.value.foo` のようにして取得できます。動く例全体は、IDBCursor example を参照してください。(動く例を見る)

```js
function deleteResult() {
  list.textContent = "";
  const transaction = db.transaction(["rushAlbumList"], "readwrite");
  const objectStore = transaction.objectStore("rushAlbumList");

  objectStore.openCursor().onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      if (cursor.value.albumTitle === "Grace under pressure") {
        const request = cursor.delete();
        request.onsuccess = () => {
          console.log(
            "Deleted that mediocre album from 1984. Even Power windows is better.",
          );
        };
      } else {
        const listItem = document.createElement("li");
        listItem.textContent = `${cursor.value.albumTitle}, ${cursor.value.year}`;
        list.appendChild(listItem);
      }
      cursor.continue();
    } else {
      console.log("エントリーを表示しました。");
    }
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbcursor-delete① |

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

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

関連情報
----

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


IDBCursor.update() - Web API

IDBCursor.update()
==================

`IDBCursor` インターフェイスの **`update()`** メソッドは、`IDBRequest` オブジェクトを返し、別のスレッドで、オブジェクトストア内のカーソルが現在指している値を更新します。カーソルが削除したばかりのレコードを指している場合は、新しいレコードが作成されます。

注意点として、`IDBIndex.openKeyCursor()` で取得したカーソルで `update()` (や `IDBCursor.delete()`) を呼ぶことはできません。このような用途のためには、かわりに `IDBIndex.openCursor()` を使わなければなりません。

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

構文
--

```js
update(value)
```

### 引数

`value`

現在の位置に保存する新しい値です。

### 返値

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

### 例外

このメソッドは、以下の種類の `DOMException` を発生させる可能性があります。

`TransactionInactiveError` `DOMException`

この `IDBCursor` のトランザクションが活性状態でないとき投げられます。

`ReadOnlyError` `DOMException`

トランザクションが読み取り専用モードであるとき投げられます。

`InvalidStateError` `DOMException`

カーソルが `IDBindex.openKeyCursor` により作成されたか、現在反復中であるか、最後まで反復済みであるとき投げられます。

`DataError` `DOMException`

操作対象のオブジェクトストアがインラインキーを使用しており、オブジェクトストアのキーパスで指定された値のプロパティがこのカーソルの位置のキーと一致しないとき投げられます。

`DataCloneError` `DOMException`

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

例
-

このシンプルな断片では、トランザクションを作成し、オブジェクトストアを取得し、カーソルを用いてオブジェクトストア内の全レコードを走査します。カーソルが現在指しているレコードの `albumTitle` が `"A farewell to kings"` である場合、`const request = cursor.update();` を用いてアルバムのリリース年を更新します。

なお、データの完全性が破壊されるため、`cursor.update()` により主キーを変更することはできません。そのため、アルバムのタイトルは変更していません。このような場合、レコード全体を削除し、`IDBObjectStore.add` により新しいレコードを追加する必要があるでしょう。また、更新の呼び出しに直接 `cursor.value` を使うことはできません。そのため、以下の例では作業用に変数 `updateData` を使用しています。

カーソルを用いる場合、データをキーで選択する必要は無く、単に全てを取得できます。また、ループ中のそれぞれの繰り返しにおいて、カーソルオブジェクトが現在指しているレコードのデータを `cursor.value.foo` のようにして取得できます。動く例全体は、IDBCursor example を参照してください。(動く例を見る)

```js
function updateResult() {
  list.textContent = "";
  const transaction = db.transaction(["rushAlbumList"], "readwrite");
  const objectStore = transaction.objectStore("rushAlbumList");

  objectStore.openCursor().onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      if (cursor.value.albumTitle === "A farewell to kings") {
        const updateData = cursor.value;

        updateData.year = 2050;
        const request = cursor.update(updateData);
        request.onsuccess = () => {
          console.log("アルバムの年の改善？");
        };
      }

      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.albumTitle}, ${cursor.value.year}`;
      list.appendChild(listItem);
      cursor.continue();
    } else {
      console.log("エントリーを表示しました。");
    }
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbcursor-update① |

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

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

関連情報
----

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