AnalyserNode: getFloatFrequencyData() メソッド - Web API

AnalyserNode: getFloatFrequencyData() メソッド
==========================================

**`getFloatFrequencyData()`** は `AnalyserNode` インターフェイスのメソッドで、渡された `Float32Array` 配列に現在の周波数データをコピーします。配列の各値はサンプルで、それぞれの時点における信号の大きさです。

配列の各項目は、固有の周波数のデシベル値を表します。周波数はサンプルレートの 0 から 1/2 まで直線的に広がります。例えば、サンプルレートが `48000` Hz の場合、配列の最後の項目は `24000` Hz のデシベル値を表します。

より高いパフォーマンスが必要で、精度を気にしない場合は、代わりに `Uint8Array` で動作する `AnalyserNode.getByteFrequencyData()` を使用することができます。

構文
--

```js
getFloatFrequencyData(array)
```

### 引数

`array`

 周波数領域データのコピー先となる `Float32Array` です。無音のサンプルの場合、値は `-Infinity` です。
 配列の持つ要素が `AnalyserNode.frequencyBinCount` より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合は、余分な要素は無視されます。

### 返値

なし (`undefined`)。

例
-

```js
const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
// Float32Array should be the same length as the frequencyBinCount
const myDataArray = new Float32Array(analyser.frequencyBinCount);
// fill the Float32Array with data returned from getFloatFrequencyData()
analyser.getFloatFrequencyData(myDataArray);
```

### スペクトルの描画

次の例では、 `AudioContext` で `MediaElementAudioSourceNode` を作成し、 `requestAnimationFrame()` と `<canvas>` で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。

より完全な応用例/情報については、 Voice-change-O-matic のデモを調べてください（関連するコードは app.js の 108 ～ 193 行目を参照）。

```html
<!doctype html>
<body>
  <script>
 const audioCtx = new AudioContext();

 //Create audio source
 //Here, we use an audio file, but this could also be e.g. microphone input
 const audioEle = new Audio();
 audioEle.src = "my-audio.mp3"; //insert file name here
 audioEle.autoplay = true;
 audioEle.preload = "auto";
 const audioSourceNode = audioCtx.createMediaElementSource(audioEle);

 //Create analyser node
 const analyserNode = audioCtx.createAnalyser();
 analyserNode.fftSize = 256;
 const bufferLength = analyserNode.frequencyBinCount;
 const dataArray = new Float32Array(bufferLength);

 //Set up audio node network
 audioSourceNode.connect(analyserNode);
 analyserNode.connect(audioCtx.destination);

 //Create 2D canvas
 const canvas = document.createElement("canvas");
 canvas.style.position = "absolute";
 canvas.style.top = "0";
 canvas.style.left = "0";
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 document.body.appendChild(canvas);
 const canvasCtx = canvas.getContext("2d");
 canvasCtx.clearRect(0, 0, canvas.width, canvas.height);

 function draw() {
 //Schedule next redraw
 requestAnimationFrame(draw);

 //Get spectrum data
 analyserNode.getFloatFrequencyData(dataArray);

 //Draw black background
 canvasCtx.fillStyle = "rgb(0, 0, 0)";
 canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

 //Draw spectrum
 const barWidth = (canvas.width / bufferLength) \* 2.5;
 let posX = 0;
 for (let i = 0; i < bufferLength; i++) {
 const barHeight = (dataArray[i] + 140) \* 2;
 canvasCtx.fillStyle =
 "rgb(" + Math.floor(barHeight + 100) + ", 50, 50)";
 canvasCtx.fillRect(
 posX,
 canvas.height - barHeight / 2,
 barWidth,
 barHeight / 2,
 );
 posX += barWidth + 1;
 }
 }

 draw();
 </script>
</body>
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-analysernode-getfloatfrequencydata |

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

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

関連情報
----

* ウェブオーディオ API の使用


AnalyserNode: frequencyBinCount プロパティ - Web API

AnalyserNode: frequencyBinCount プロパティ
=====================================

**`frequencyBinCount`** は `AnalyserNode` インターフェイスの読み取り専用プロパティで、 `AudioContext` の `sampleRate` で利用可能なデータポイントの総数が格納されます。これは `AnalyserNode.fftSize` の `value` の半分です。 2 つのメソッドのインデックスは、0 からナイキスト周波数の間で、それらが表す周波数と線形関係にあります。

値
-

符号なし整数で、指定された `TypedArray` にコピーされる `AnalyserNode.getByteFrequencyData()` と `AnalyserNode.getFloatFrequencyData()` が値の数に等しいものです。

高速フーリエ変換を定義する方法に関する技術的な理由から，常に `AnalyserNode.fftSize` の半分の値になります．したがって、 `16`, `32`, `64`, `128`, `256`, `512`, `1024`, `2048`, `4096`, `8192`, `16384` のうちのいずれかになります。

例
-

 次の例では、 `AudioContext` で `AnalyserNode` を作成し、 `requestAnimationFrame` と `<canvas>` で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。
 より完全な応用例/情報については、 Voice-change-O-matic のデモを調べてください（関連するコードは app.js の 108 ～ 193 行目を参照）。

```js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;

// …

analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
const dataArray = new Uint8Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteFrequencyData(dataArray);

  canvasCtx.fillStyle = "rgb(0, 0, 0)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  const barWidth = (WIDTH / bufferLength) \* 2.5 - 1;
  let barHeight;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
    canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);

    x += barWidth;
  }
}

draw();
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-analysernode-frequencybincount |

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

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

関連情報
----

* ウェブオーディオ API の使用


AnalyserNode: getByteFrequencyData() メソッド - Web API

AnalyserNode: getByteFrequencyData() メソッド
=========================================

**`getByteFrequencyData()`** は `AnalyserNode` インターフェースのメソッドで、渡された `Uint8Array` （符号なしバイト配列）に現在の周波数データをコピーします．

周波数データは、 0 から 255 まで の範囲の整数で構成されます。

配列の各項目は、固有の周波数のデシベル値を表します。周波数はサンプルレートの 0 から 1/2 まで直線的に広がります。例えば、サンプルレートが `48000` の場合、配列の最後の項目は `24000` Hz のデシベル値を表します。

配列の持つ要素が `AnalyserNode.fftSize` より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合、余分な要素は無視されます。

構文
--

```js
getByteFrequencyData(array)
```

### 引数

`array`

 周波数領域データがコピーされる `Uint8Array`。無音のサンプルの場合、値は `-Infinity` です。
 配列の持つ要素が `AnalyserNode.fftSize` より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合、余分な要素は無視されます。

### 返値

なし (`undefined`)。

例
-

 次の例では、 `AudioContext` で `AnalyserNode` を作成し、 `requestAnimationFrame` と `<canvas>` で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。
 より完全な応用例/情報については、 Voice-change-O-matic のデモを調べてください（関連するコードは app.js の 108 ～ 193 行目を参照）。

```js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();

// …

analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
const dataArray = new Uint8Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteFrequencyData(dataArray);

  canvasCtx.fillStyle = "rgb(0, 0, 0)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  const barWidth = (WIDTH / bufferLength) \* 2.5;
  let barHeight;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
    canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);

    x += barWidth + 1;
  }
}

draw();
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-analysernode-getbytefrequencydata |

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

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

関連情報
----

* ウェブオーディオ API の使用


AnalyserNode: minDecibels プロパティ - Web API

AnalyserNode: minDecibels プロパティ
===============================

**`minDecibels`** は `AnalyserNode` インターフェイスのプロパティで、符号なしバイト値に変換するための、 FFT 分析データの拡大縮小する範囲の最小出力値を表す double 値です。基本的には、 `getByteFrequencyData()` を使用したときの結果の範囲の最小値を指定します。

値
-

double 値で、 FFT 解析データを拡大縮小する際の最小デシベル値を表します。`0` dB は使用可能な最も小さな音、`-10` dB はその 10 分の 1 などです。既定値は `-100` dB です。

`getByteFrequencyData()` からデータを取得した場合、振幅が `minDecibels` 以下の周波数は `0` として返されます。

**メモ:** `AnalyserNode.maxDecibels` より大きい値を設定すると、 `INDEX_SIZE_ERR` 例外が発生します。

例
-

 次の例では、 `AudioContext` で `AnalyserNode` を作成し、 `requestAnimationFrame` と `<canvas>` で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。
 より完全な応用例/情報については、 Voice-change-O-matic のデモを調べてください（関連するコードは app.js の 108 ～ 193 行目を参照）。

```js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;

// …

analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
const dataArray = new Uint8Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteFrequencyData(dataArray);

  canvasCtx.fillStyle = "rgb(0, 0, 0)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  const barWidth = (WIDTH / bufferLength) \* 2.5;
  let barHeight;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
    canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);

    x += barWidth + 1;
  }
}

draw();
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-analysernode-mindecibels |

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

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

関連情報
----

* ウェブオーディオ API の使用


AnalyserNode: smoothingTimeConstant プロパティ - Web API

AnalyserNode: smoothingTimeConstant プロパティ
=========================================

**`smoothingTimeConstant`** は `AnalyserNode` インターフェイスのプロパティで、最後の分析フレームとの平均化定数を表す double 値です。これは基本的に、現在のバッファーと `AnalyserNode` が処理した最後のバッファーとの間の平均であり、結果として、よりスムーズな時間による値の変化の集合になります。

値
-

doublet で、 `0` から `1` までの範囲内です（`0` は平均時間ではありません）。既定値は `0.8` です。

0 が設定されている場合、平均化は行われませんが、1 の値は「値を計算する間に前回と現在のバッファーがかなりオーバーラップする」ことを意味しており、実質的に `AnalyserNode.getFloatFrequencyData`/`AnalyserNode.getByteFrequencyData` 呼び出し間の変化を滑らかにします。

専門用語では、ブラックマンウィンドウを適用し、時間による値の変化を平滑化します。ほとんどの場合、既定値で十分です。

**メモ:** 0～1 の範囲の外の値を設定するには、 `INDEX_SIZE_ERR` 例外が発生します。

例
-

 次の例では、 `AudioContext` で `AnalyserNode` を作成し、 `requestAnimationFrame` と `<canvas>` で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。
 より完全な応用例/情報については、 Voice-change-O-matic のデモを調べてください（関連するコードは app.js の 108 ～ 193 行目を参照）。

`smoothingTimeConstant()` が持つ効果に興味がある場合は、上記の例を複製して、代わりに `analyser.smoothingTimeConstant = 0;` を設定してみてください。値の変化がより激しくなることがわかるでしょう。

```js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;
analyser.smoothingTimeConstant = 0.85;

// …

analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
const dataArray = new Uint8Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteFrequencyData(dataArray);

  canvasCtx.fillStyle = "rgb(0, 0, 0)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  const barWidth = (WIDTH / bufferLength) \* 2.5;
  let barHeight;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
    canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);

    x += barWidth + 1;
  }
}

draw();
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-analysernode-smoothingtimeconstant |

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

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

関連情報
----

* ウェブオーディオ API の使用


AnalyserNode: maxDecibels プロパティ - Web API

AnalyserNode: maxDecibels プロパティ
===============================

**`maxDecibels`** は `AnalyserNode` インターフェイスのプロパティで、符号なしバイト値に変換するための、 FFT 分析データの拡大縮小する範囲の最大出力値を表す double 値です。基本的には、 `getByteFrequencyData()` を使用したときの結果の範囲の最大値を指定します。

値
-

double 値で、 FFT 解析データを拡大縮小する際の最大デシベル値を表します。`0` dB は使用可能な最も大きな音、`-10` dB はその 10 分の 1 などです。既定値は `-30` dB です。

`getByteFrequencyData()` からデータを取得した場合、振幅が `maxDecibels` 以上の周波数は `255` として返されます。

### 例外

`IndexSizeError` `DOMException`

`AnalyserNode.minDecibels` 以下の値が設定されている場合に発生します。

例
-

 次の例では、 `AudioContext` で `AnalyserNode` を作成し、 `requestAnimationFrame` と `<canvas>` で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。
 より完全な応用例/情報については、 Voice-change-O-matic のデモを調べてください（関連するコードは app.js の 108 ～ 193 行目を参照）。

```js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;

// …

analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
const dataArray = new Uint8Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteFrequencyData(dataArray);

  canvasCtx.fillStyle = "rgb(0, 0, 0)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  const barWidth = (WIDTH / bufferLength) \* 2.5;
  let barHeight;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
    canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);

    x += barWidth + 1;
  }
}

draw();
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-analysernode-maxdecibels |

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

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

関連情報
----

* ウェブオーディオ API の使用


AnalyserNode: getByteTimeDomainData() メソッド - Web API

AnalyserNode: getByteTimeDomainData() メソッド
==========================================

**`getByteTimeDomainData()`** は `AnalyserNode` インターフェイスのメソッドで、渡される `Uint8Array` （符号なしバイト配列）に、現在の波形または時間領域のデータをコピーします。

配列の持つ要素が `AnalyserNode.fftSize` より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合、余分な要素は無視されます。

構文
--

```js
getByteTimeDomainData(array)
```

### 引数

`array`

 時間領域データのコピー先の `Uint8Array` です。
 配列の持つ要素が `AnalyserNode.fftSize` より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合、余分な要素は無視されます。

### 返値

なし (`undefined`)。

例
-

 次の例では、 `AudioContext` で `AnalyserNode` を作成し、 `requestAnimationFrame` と `<canvas>` で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。
 より完全な応用例/情報については、 Voice-change-O-matic のデモを調べてください（関連するコードは app.js の 108 ～ 193 行目を参照）。

```js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();

// …

analyser.fftSize = 2048;
const bufferLength = analyser.fftSize;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

// draw an oscilloscope of the current audio source
function draw() {
  drawVisual = requestAnimationFrame(draw);
  analyser.getByteTimeDomainData(dataArray);

  canvasCtx.fillStyle = "rgb(200, 200, 200)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  canvasCtx.lineWidth = 2;
  canvasCtx.strokeStyle = "rgb(0, 0, 0)";

  const sliceWidth = (WIDTH \* 1.0) / bufferLength;
  let x = 0;

  canvasCtx.beginPath();
  for (let i = 0; i < bufferLength; i++) {
    const v = dataArray[i] / 128.0;
    const y = (v \* HEIGHT) / 2;

    if (i === 0) {
      canvasCtx.moveTo(x, y);
    } else {
      canvasCtx.lineTo(x, y);
    }

    x += sliceWidth;
  }

  canvasCtx.lineTo(WIDTH, HEIGHT / 2);
  canvasCtx.stroke();
}

draw();
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-analysernode-getbytetimedomaindata |

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

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

関連情報
----

* ウェブオーディオ API の使用


AnalyserNode: getFloatTimeDomainData() メソッド - Web API

AnalyserNode: getFloatTimeDomainData() メソッド
===========================================

**`getFloatTimeDomainData()`** は `AnalyserNode` 渡された　`Float32Array`　配列に、現在の波形、つまり時間領域のデータをコピーします。配列の各値はサンプルで、それぞれの時点における信号の大きさです。

構文
--

```js
getFloatTimeDomainData(array)
```

### 引数

`array`

 時間領域データのコピー先となる `Float32Array` です。
 配列の持つ要素が `AnalyserNode.fftSize` より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合、余分な要素は無視されます。

### 返値

なし (`undefined`)。

例
-

 次の例では、 `AudioContext` で `AnalyserNode` を作成し、 `requestAnimationFrame` と `<canvas>` で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。
 より完全な応用例/情報については、 Voice-change-O-matic のデモを調べてください（関連するコードは app.js の 108 ～ 193 行目を参照）。

```js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();

// …

analyser.fftSize = 1024;
const bufferLength = analyser.fftSize;
console.log(bufferLength);
const dataArray = new Float32Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
  drawVisual = requestAnimationFrame(draw);
  analyser.getFloatTimeDomainData(dataArray);

  canvasCtx.fillStyle = "rgb(200, 200, 200)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
  canvasCtx.lineWidth = 2;
  canvasCtx.strokeStyle = "rgb(0, 0, 0)";
  canvasCtx.beginPath();

  const sliceWidth = (WIDTH \* 1.0) / bufferLength;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    const v = dataArray[i] \* 200.0;
    const y = HEIGHT / 2 + v;

    if (i === 0) {
      canvasCtx.moveTo(x, y);
    } else {
      canvasCtx.lineTo(x, y);
    }
    x += sliceWidth;
  }

  canvasCtx.lineTo(canvas.width, canvas.height / 2);
  canvasCtx.stroke();
}

draw();
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-analysernode-getfloattimedomaindata |

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

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

関連情報
----

* ウェブオーディオ API の使用


IIRFilterNode: getFrequencyResponse() メソッド - Web API

IIRFilterNode: getFrequencyResponse() メソッド
==========================================

`getFrequencyResponse()` は `IIRFilterNode` インターフェイスのメソッドで、現在のフィルタリングアルゴリズムの設定を受け取り、指定した周波数の配列で指定した周波数に対する周波数レスポンスを計算します。

2 つの出力配列 `magResponseOutput` と `phaseResponseOutput` は、このメソッドを呼び出す前に作成する必要があります。これらは、入力周波数の値の配列 (`frequencyArray`) と同じサイズでなければなりません。

構文
--

```js
getFrequencyResponse(frequencyArray, magResponseOutput, phaseResponseOutput)
```

### 引数

`frequencyArray`

`Float32Array` で、フィルターしたいヘルツ単位の周波数の配列が入ったものです。

`magResponseOutput`

`Float32Array` で、`frequencyArray` の各周波数値に対して計算された周波数レスポンスの大きさを受け取ります。

`phaseResponseOutput`

`Float32Array` で、入力 `frequencyArray` の各周波数値に対して計算された位相レスポンスの値をラジアン単位で受け取ります。

### 返値

なし (`undefined`)。

### 例外

`NotSupportedError` `DOMException`

指定された 3 つの配列がすべて同じ長さでない場合に発生します。

例
-

次の例では、メディアストリームで IIR フィルターを使用しています（完全なフルデモについては、stream-source-buffer デモをライブで参照するか、ソースを読んでください）。このデモでは、この IIR フィルターの周波数レスポンスを、5 つのサンプル周波数について取得します。入力周波数を格納するオブジェクトと、出力のマグニチュードとフェーズ値を受け取るためのオブジェクトを 2 つ、それぞれ作成する必要があります。

```js
const myFrequencyArray = new Float32Array(5);
myFrequencyArray[0] = 1000;
myFrequencyArray[1] = 2000;
myFrequencyArray[2] = 3000;
myFrequencyArray[3] = 4000;
myFrequencyArray[4] = 5000;

const magResponseOutput = new Float32Array(5);
const phaseResponseOutput = new Float32Array(5);
```

次に、結果を含む HTML に `<ul>` 要素を作成し、JavaScript でその参照を取得します。

```html
<p>IIR filter frequency response for:</p>
<ul class="freq-response-output"></ul>
```

```js
const freqResponseOutput = document.querySelector(".freq-response-output");
```

最後に、フィルターを作成した後、`getFrequencyResponse()` を使用してレスポンスデータを生成して配列に入れ、各データ集合をループ処理してページの下部に人間が読めるリストとして出力しています。

```js
const feedforwardCoefficients = [0.1, 0.2, 0.3, 0.4, 0.5];
const feedbackCoefficients = [0.5, 0.4, 0.3, 0.2, 0.1];

const iirFilter = audioCtx.createIIRFilter(
  feedforwardCoefficients,
  feedbackCoefficients,
);

// …

function calcFrequencyResponse() {
  iirFilter.getFrequencyResponse(
    myFrequencyArray,
    magResponseOutput,
    phaseResponseOutput,
  );

  for (let i = 0; i < myFrequencyArray.length; i++) {
    const listItem = document.createElement("li");
    listItem.textContent = `${myFrequencyArray[i]}Hz: Magnitude ${magResponseOutput[i]}, Phase ${phaseResponseOutput[i]} radians.`;
    freqResponseOutput.appendChild(listItem);
  }
}

calcFrequencyResponse();
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-iirfilternode-getfrequencyresponse |

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

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

関連情報
----

* ウェブオーディオ API の使用
* `IIRFilterNode`
* `AudioNode`


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

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

**`IIRFilterNode()`** はウェブオーディオ API のコンストラクターで、一般的な無限インパルス応答フィルターを実装するための `IIRFilterNode` プロセッサーとなる新しい `AudioNode` オブジェクトを作成します。

構文
--

```js
new IIRFilterNode(context, options)
```

### 引数

`context`

`AudioContext` への参照です。

`options`

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

`feedforward`

フィードフォワードの係数の列です。

`feedback`

フィードバック係数の列です。

`channelCount`

ノードへの任意の入力にアップミキシングおよびダウンミキシング接続する際に、何チャンネルを用いるか決めるために用いられる整数を表します。（詳細は`AudioNode.channelCount`を参照してください。）その使い方と正確な定義は `channelCountMode` の値に依存します。

`channelCountMode`

ノードの入力と出力の間でチャンネルを一致させる方法を記述する列挙値を表します。（既定値を含む詳細情報は `AudioNode.channelCountMode` を参照してください。）

`channelInterpretation`

 チャンネルの意味を説明する列挙値を表します。この解釈により、音声のアップミキシングおよびダウンミキシングがどう行われるかが定義されます。
 使用可能な値は `"speakers"` または `"discrete"` です。（既定値を含む詳細な情報は `AudioNode.channelCountMode` を参照してください。）

ウェブオーディオ API の他のノードとは異なり、IIR フィルターの作成時に渡されるオプションは、オプションではありません。フィルターは作業するためにこの値を必要とし、利用できるフィルターの範囲が広いため、既定値はありません。

### 返値

新しい `IIRFilterNode` オブジェクトインスタンスです。

例
-

```js
let feedForward = [0.00020298, 0.0004059599, 0.00020298];
let feedBackward = [1.0126964558, -1.9991880801, 0.9873035442];

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const iirFilter = new IIRFilterNode(audioCtx, {
  feedforward: feedForward,
  feedback: feedBackward,
});
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-iirfilternode-constructor-iirfilternode |

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

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


TreeWalker.root - Web API

TreeWalker.root
===============

**`TreeWalker.root`** は読み取り専用のプロパティで、 `TreeWalker` を作成したときに指定したルートノードを返します。

値
-

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

例
-

```js
var treeWalker = document.createTreeWalker(
  document.body, // root として document.body を指定している
  NodeFilter.SHOW\_ELEMENT,
  {
    acceptNode(node) {
      return NodeFilter.FILTER\_ACCEPT;
    },
  },
  false,
);
root = treeWalker.root; // document.body が返却される
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-treewalker-root |

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

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

関連情報
----

* `TreeWalker` インターフェイス


CSSLayerStatementRule: nameList プロパティ - Web API

CSSLayerStatementRule: nameList プロパティ
=====================================

Baseline 2022
-------------

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

* Learn more
* See full compatibility
* Report feedback
**`nameList`** は `CSSLayerStatementRule` インターフェイスの読み取り専用プロパティで、関連づけられたカスケードレイヤーの名前のリストを返します。名前は変更できません。

値
-

文字列の配列 (`Array`) で、それぞれが `@layer` 文ルールで表されるカスケードレイヤーを表します。

例
-

### HTML

```html
<div></div>
```

### CSS

```css
@layer layerName, layerName2;

@layer layerName3 {
  div {
    font-family: serif;
  }
}
```

### JavaScript

```js
const item = document.getElementsByTagName("div")[0];
const rules = document.styleSheets[1].cssRules;
// スタイルシート #1 はこの埋め込み例に関連するスタイルシートであり、
// スタイルシート #0 は MDN ページ全体に関連するスタイルシート。

const layerStatementRule = rules[0]; // CSSLayerStatementRule
const layerBlockRule = rules[1]; // CSSLayerBlockRule には nameList プロパティがない

item.textContent = `@layer は ${layer.nameList.join(
 ", ",
)} レイヤーを宣言しています。`;
```

仕様書
---

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # dom-csslayerstatementrule-namelist |

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

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

関連情報
----

* `CSSLayerBlockRule.name`
* `@layer`
* 名前付きレイヤーのための @layer 文のアットルール


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

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

**`error()`** は `ReadableByteStreamController` インターフェイスのメソッドで、関連するストリームとの今後のやり取りを、指定した理由でエラーとします。

 これは一般的に、データを取得するインターフェイスからのエラー（ファイル読み込みやソケットエラーなど）を表面化するために、基盤から呼び出されます。
 また、例えばストリームが依存しているシステムの別の部分に障害が発生した場合など、ストリームエラーを発生させるために他の場所から呼び出すこともできます。

構文
--

```js
error(errorObject)
```

### 引数

`errorObject`

今後のやり取りを失敗させるための任意のオブジェクトです。

### 返値

なし (`undefined`).

### 例外

`TypeError`

ソースオブジェクトが `ReadableByteStreamController` ではないか、何らかの理由でストリームが読み取り可能ではありません。

例
-

読み取り可能なバイトストリームの使用 > 読み取り可能なソケットプッシュバイトストリームの作成 の例では、`error()` を使用して、依存しているシステムの別の部分に障害が発生した場合に手動でストリームエラーを発生させる方法を示しています。

 具体的には、基盤ソースの `start()` メソッドは `readRepeatedly()` を呼び出して、すべてのセットアップ処理を行い、データのリクエストを行います。
 これはプロミスを返します。
 データを読み込む際に発生したエラーは、連鎖する `catch()` 関数で捕捉されます。
 `catch()` では、コントローラーの `error()` を呼び出して、その理由を基盤から渡します。

```js
function start(controller) {
  readRepeatedly().catch((e) => controller.error(e));
}

function readRepeatedly() {
  return socket.select2().then(() => {
    // …
  });
}
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-rbs-controller-error① |

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

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

関連情報
----

* 読み取り可能なバイトストリームの使用


ReadableByteStreamController: enqueue() メソッド - Web API

ReadableByteStreamController: enqueue() メソッド
============================================

**`enqueue()`** は `ReadableByteStreamController` で、指定されたチャンクを、関連する読み取り可能なバイトストリームのキューに入れます（チャンクはストリーム内部のキューにコピーされます）。

これは、 `byobRequest` が `null` である場合にのみ、キューへのデータ移譲に使用しましょう。

構文
--

```js
enqueue(chunk)
```

### 引数

`chunk`

キューに入れるチャンク。

### 返値

なし (`undefined`)。

### 例外

`TypeError`

 ソースオブジェクトが `ReadableByteStreamController` ではないか、何らかの理由でストリームを読み取れないか、チャンクがオブジェクトではないか、チャンクの内部配列バッファーが存在しないか、切り離されています。
 ストリームが既に閉じられていたときにも発生します。

例
-

読み取り可能なバイトストリームの使用 > 読み取り可能なソケットプッシュバイトストリームの作成 の例では、未処理の `byobRequest` がない場合に `enqueue()` を使用してデータをストリームにコピーする方法を示します。
 もし `byobRequest` があれば、それを使用しましょう。

下記のコードでは、「仮定の」 `socket.readInto()` メソッドを使用してデータを `ArrayBuffer` に読み込ませ、その後キューに入れています（ただし、実際にデータがコピーされた場合のみ）。

```js
const buffer = new ArrayBuffer(DEFAULT\_CHUNK\_SIZE);
bytesRead = socket.readInto(buffer, 0, DEFAULT\_CHUNK\_SIZE);
if (bytesRead === 0) {
  controller.close();
} else {
  controller.enqueue(new Uint8Array(buffer, 0, bytesRead));
}
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-rbs-controller-enqueue① |

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

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

関連情報
----

* 読み取り可能なバイトストリームの使用
* `ReadableByteStreamController`


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

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

**`close()`** は `ReadableByteStreamController` インターフェイスのメソッドで、関連するストリームを閉じます。

これは、そのデータソースが使い果たされたとき/完全に完了したときに、基盤ソースによって呼び出される可能性があります。

**メモ:** リーダーは、以前にキューに入れられたチャンクをストリームから読み取ることができますが、それらを読み取ってしまうとストリームは閉じられます。
 しかし、 `close()` が呼び出されたときに、未処理で部分的に書き込まれた `byobRequest` がある場合、ストリームはエラーになります。

構文
--

```js
close()
```

### 引数

なし。

### 返値

なし (`undefined`)。

### 例外

`TypeError`

ソースオブジェクトが `ReadableByteStreamController` ではないか、何らかの理由でストリームが読み取り可能ではありません。

例
-

読み取り可能なバイトストリームの使用 > 読み取り可能なソケットプッシュバイトストリームの作成の例で、データがなくなったときにストリームを閉じています。

 関連するコードを下記に示します。
 これは `readInto()` メソッドがデータがまだないときだけ 0 バイトを返すと仮定しています。

```js
bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
if (bytesRead === 0) {
  controller.close();
}
```

 closeを呼び出すと、ストリームは閉じられ、コンシューマーがあれば通知されます。
 例えば `ReadableStreamBYOBReader` を使用している場合、 `read()` リクエストは `done: true` で解決され、 `ReadableStreamBYOBReader.closed` からのプロミスも解決されます。

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-rbs-controller-close① |

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

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

関連情報
----

* 読み取り可能なバイトストリームの使用
* `ReadableByteStreamController`


ReadableByteStreamController: byobRequest プロパティ - Web API

ReadableByteStreamController: byobRequest プロパティ
===============================================

**`byobRequest`** は `ReadableByteStreamController` インターフェイスの読み取り専用プロパティで、現在の BYOB リクエストを返します。保留中のリクエストがない場合は `null` を返します。

 基盤となるバイトソースはこのプロパティを調べ、存在する場合はそれを使用してストリームにデータを書き込む必要があります（`ReadableByteStreamController.enqueue()`を使用するのではなく）。
 こうすることで、コンシューマーへのデータの効率的なゼロバイト移譲が実現します。

### 値

`ReadableStreamBYOBRequest` オブジェクトのインスタンス、または `null`。

例
-

読み取り可能なバイトストリームの使用 > 読み取り可能なソケットプッシュバイトストリームの作成の例では、 `byobRequest` を使用して（データが存在する場合は）データを移譲するか、 `ReadableByteStreamController.enqueue()` を使用してストリーム内部のキューにデータをコピーする方法を示しています。

 関連するコードを下記に示します。
 `byobRequest` が存在すれば、 `controller.byobRequest.view` にデータが読み込まれ、 `ReadableStreamBYOBRequest.respond()` が呼び出されて、移譲可能なデータ量を指示します。

```js
if (controller.byobRequest) {
  const v = controller.byobRequest.view;
  bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
  if (bytesRead === 0) {
    controller.close();
  }
  controller.byobRequest.respond(bytesRead);
} else {
  // Write to data using enqueue().
}
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-rbs-controller-byob-request② |

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

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

関連情報
----

* 読み取り可能なバイトストリームの使用
* `ReadableByteStreamController`


ReadableByteStreamController: desiredSize プロパティ - Web API

ReadableByteStreamController: desiredSize プロパティ
===============================================

**`desiredSize`** は `ReadableByteStreamController` インターフェイスの読み取り専用プロパティで、ストリームの内部キューを満たすために必要な「希望サイズ」を返します。

 この値は、ストリームが、基盤となるソースへの推奨する流量を示すために使用します。
 データ流入のスロットリングや一時停止に対応しているソース（すべてではありません）は、ストリームバッファの `desiredSize` が正の値で、使用可能な限りゼロに近づくように流入を制御する必要があります。

`desiredSize` は下流コンシューマーの背圧を適用するために使用します。

値
-

整数です。キューがいっぱいになった場合、これは負になる可能性があることに注意してください。

ストリームがエラーになったときは `null`、閉じられていたときは `0` になる可能性があります。

例
-

仕様書の A readable stream with an underlying push source and backpressure support の例には、ストリームが一杯になったことを手動で検出して背圧をかけるために `desiredSize` を使用する良い例が示されています。

この例では既定のソースを使用していますが、概念は読み取り可能なバイトソースとまったく同じです。

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-rbs-controller-desired-size② |

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

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

関連情報
----

* 読み取り可能なバイトストリームの使用
* `ReadableByteStreamController`


PeriodicWave() - Web API

PeriodicWave()
==============

Web Audio API の **`PeriodicWave()`** コンストラクターは、新しい `PeriodicWave` オブジェクトのインスタンスを作成します。

構文
--

```js
new PeriodicWave(context)
new PeriodicWave(context, options)
```

### 引数

`context`

ノードを関連付ける音声コンテキストを表す `BaseAudioContext` です。

`options` 省略可

`PeriodicWave` に持たせるプロパティを定義する
 `PeriodicWaveOptions`
 の辞書オブジェクトです。(辞書 PeriodicWaveConstraints で定義されるオプションも継承しています)

`real`

 波形を作るための余弦 (コサイン) の項を格納した `Float32Array` です。
 (`BaseAudioContext.createPeriodicWave` の引数 `real` に相当します)

`imag`

 波形を作るための正弦 (サイン) の項を格納した `Float32Array` です。
 (`BaseAudioContext.createPeriodicWave` の引数 `imag` に相当します)

`channelCount`

ノードへの入力のアップミキシングとダウンミキシングを行う際に何個のチャンネルを用いるかを決めるために用いる整数です。(詳しくは `AudioNode.channelCount` を参照してください) 利用法と正確な定義は `channelCountMode` の値によります。

`channelCountMode`

ノードの入力と出力でチャンネルを対応させる方法を表す列挙値です。(デフォルト値など詳しくは `AudioNode.channelCountMode` を参照してください)

`channelInterpretation`

チャンネルの意味を表す列挙値です。これによりアップミキシングとダウンミキシングをどのように行うかを決定します。取りうる値は `"speakers"` および `"discrete"` です。(デフォルト値など詳しくは `AudioNode.channelCountMode` を参照してください)

### 返値

新しい `PeriodicWave` オブジェクトのインスタンスを返します。

例
-

```js
const real = new Float32Array(2);
const imag = new Float32Array(2);
const ac = new AudioContext();

real[0] = 0;
imag[0] = 0;
real[1] = 1;
imag[1] = 0;

const wave = new PeriodicWave(ac, {
  real,
  imag,
  disableNormalization: false,
});
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-periodicwave-periodicwave |

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

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


TextDecoderStream: readable プロパティ - Web API

TextDecoderStream: readable プロパティ
=================================

**`readable`** は `TextDecoderStream` インターフェイスの読み取り専用プロパティで、`ReadableStream` を返します。

値
-

`ReadableStream` です。

例
-

次の例は、`ReadableStream` を `TextDecoderStream` オブジェクトから返す方法を示しています。

```js
stream = new TextDecoderStream();
console.log(stream.readable); //a ReadableStream
```

仕様書
---

| Specification |
| --- |
| Streams Standard # dom-generictransformstream-readable |

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

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


TextDecoderStream: ignoreBOM プロパティ - Web API

TextDecoderStream: ignoreBOM プロパティ
==================================

**`ignoreBOM`** は `TextDecoderStream` インターフェイスの読み取り専用プロパティで、バイトオーダーマーク (BOM) が無視されるかどうかを示す論理値を返します。

値
-

論理値で、初期値は `false` です。

例
-

```js
stream = new TextDecoderStream();
console.log(stream.ignoreBOM); // false を返す
```

仕様書
---

| Specification |
| --- |
| Encoding Standard # textdecoder-ignore-bom-flag |

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

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


TextDecoderStream: encoding プロパティ - Web API

TextDecoderStream: encoding プロパティ
=================================

**`encoding`** は `TextDecoderStream` インターフェイスの読み取り専用プロパティで、このデコーダーが使用するエンコーディングアルゴリズムの名前が入った文字列を返します。

エンコーダーは コンストラクター の `label` 引数で設定し、既定値は `utf-8` となります。

値
-

文字列で、エンコーディング形式の名前を表す小文字の ASCII 名が入ります。

取りうる値は `TextDecoder.encoding` に挙げられているもの（エンコーディング API のエンコーディングにあるラベル）と同じです。

例
-

`TextDecoderStream` から `encoding` の値を返します。

```js
stream = new TextDecoderStream();
console.log(stream.encoding); // 既定値の "utf-8" を返す
```

仕様書
---

| Specification |
| --- |
| Encoding Standard # dom-textdecoder-encoding |

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

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


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

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

**`TextDecoderStream()`** コンストラクターは、新しい `TextDecoderStream` オブジェクトを生成します。これは、あるバイナリーエンコーディングのテキストのストリームを文字列に変換するために使用します。

構文
--

```js
new TextDecoderStream(label)
new TextDecoderStream(label, options)
```

### 引数

`label`

 文字列で、既定値は `utf-8` です。
 何れかの有効なラベルにすることができます。

`options` 省略可

次のプロパティを持つオブジェクトです。

`fatal`

 論理値で、このオブジェクトが無効なデータをデコードした場合に `TypeError` を発生させる必要があるかどうかを示します。
 既定値では `false` であり、これはデコードする際に不正なデータを置換文字で置き換えることを意味します。

### 例外

`RangeError`

`label` の値が未知の場合、または `'replacement'` デコードアルゴリズム（`"iso-2022-cn"` または `"iso-2022-cn-ext"`）につながる値のいずれかである場合に発生します。

例
-

 次の例は、`fetch()` の呼び出しから取得したバイナリーデータをデコードする方法を示しています。
 このデータには `label` が渡されていないので、UTF-8 として解釈されます。

```js
const response = await fetch("https://example.com");
const stream = response.body.pipeThrough(new TextDecoderStream());
```

仕様書
---

| Specification |
| --- |
| Encoding Standard # ref-for-dom-textdecoderstream① |

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

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


TextDecoderStream: fatal プロパティ - Web API

TextDecoderStream: fatal プロパティ
==============================

**`fatal`** は `TextDecoderStream` インターフェイスの読み取り専用プロパティで、`TextDecoderStream` オブジェクトのエラーモードが `fatal` に設定されているかどうかを論理値で示します。

 このプロパティが `true` であった場合、デコーダーがデコード中に正しくない形のデータに遭遇した場合、`TypeError` が発生します。
 `false` であった場合、デコーダーは無効なデータを置換文字 `U+FFFD` (�) で置き換えます。
 このプロパティの値は `TextDecoderStream()` コンストラクターで設定されます。

値
-

 論理値で、エラーモードが "fatal" に設定されている場合は `true` となります。
 そうでない場合は `false` となり、エラーモードが "replacement" であることを示します。

例
-

```js
stream = new TextDecoderStream();
console.log(stream.fatal); // false を返す
```

仕様書
---

| Specification |
| --- |
| Encoding Standard # dom-textdecoder-fatal |

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

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


TextDecoderStream: writable プロパティ - Web API

TextDecoderStream: writable プロパティ
=================================

**`writable`** は `TextDecoderStream` インターフェイスの読み取り専用プロパティで、`WritableStream` を返します。

値
-

`WritableStream` です。

例
-

次の例は、`WritableStream` を `TextDecoderStream` オブジェクトから返す方法を示しています。

```js
stream = new TextDecoderStream();
console.log(stream.writable); // WritableStream
```

仕様書
---

| Specification |
| --- |
| Streams Standard # dom-generictransformstream-writable |

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

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


XMLSerializer.serializeToString() - Web API

XMLSerializer.serializeToString()
=================================

`XMLSerializer` の **`serializeToString()`** メソッドは、指定された DOM ツリーを表す XML 形式の文字列を構築します。

構文
--

```js
serializeToString(rootNode)
```

### 引数

`rootNode`

XML 表現を構築する DOM ツリーまたはサブツリーのルートとして用いる `Node` です。

### 返値

指定された DOM ツリーの XML 表現が入った文字列です。

### 例外

`TypeError`

指定された `rootNode` が対応しているノード型でないとき投げられます。ルートノードは `Node` または `Attr` でなければなりません。

`InvalidStateError` `DOMException`

ツリーが正常にシリアライズできなかったとき投げられます。おそらくコンテンツの XML シリアライズ対応に関する問題が原因です。

`SyntaxError` `DOMException`

HTML のシリアライズを要求されたが、コンテンツが良い形式でないため成功しなかったとき投げられます。

使用法の注意点
-------

### 対応しているノード型

指定するルートノードとその全ての子孫は、XML シリアライズのアルゴリズムに対応しているものでなければなりません、ルートノード自身は、`Node` または `Attr` のオブジェクトでなければなりません。

ルートノードの子孫では、`Node` と `Attr` に加えて以下の型も利用可能です。

* `DocumentType`
* `Document`
* `DocumentFragment`
* `Element`
* `Comment`
* `Text`
* `ProcessingInstruction`
* `Attr`

これ以外の型が見つかった場合、`TypeError` 例外が投げられます。

### 結果の XML に関する注意点

`serializeToString()` から出力される XML について、注意するべき点がいくつかあります。

* XML シリアライズにおいては、`Element` および `Attr` のノードの `namespaceURI` は常にそのままシリアライズされます。すなわち、指定されている `prefix` やデフォルト名前空間は消されたり変更されたりする可能性があります。
* 結果の XML は HTML パーサーに対応しています。
* HTML 名前空間にある子ノードを持たない (すなわち、空タグを表している) 要素は、空要素タグ (`"<someelement/>"`) ではなく開始タグと終了タグ (`"<someelement></someelement>"`) を用いてシリアライズされます。
仕様書
---

| Specification |
| --- |
| DOM Parsing and Serialization # dom-xmlserializer-serializetostring |

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

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

関連情報
----

* XML のパースとシリアライズ
* HTML にシリアライズする : `Element.innerHTML` と
 `Element.outerHTML`
* HTML や XML をパースして DOM ツリーを生成する : `DOMParser`


DOMTokenList: toggle() メソッド - Web API

DOMTokenList: toggle() メソッド
===========================

**`toggle()`** は `DOMTokenList` インターフェイスのメソッドで、渡されたトークンをリストから削除し、 `false` を返します。そのトークンが存在しなかった場合は、追加して `true` を返します。

構文
--

```js
toggle(token)
toggle(token, force)
```

引数
--

`token`

文字列で、トグル切り替えしたいトークンを表します。

`force` 省略可

 存在する場合は、片方の操作のみを行います。
 `false` に設定すると、 `token` を削除する*だけ*となり、追加は行いません。
 `true` に設定すると、 `token` を追加する*だけ*となり、削除は行いません。

### 返値

`true` または `false` の論理値で、呼び出し後に `token` がリストに存在するかどうかを示します。

例
-

### クリック時にクラスをトグル切り替え

以下の例では、 `<span>` 要素に設定されたクラスのリストを `DOMTokenList` として受け取るのに `Element.classList` を使用しています。それからリスト内のトークンを置き換え、リストを `<span>` の `Node.textContent` に書き込みます。

最初に HTML です。

```html
<span class="a b">classList is 'a b'</span>
```

そして JavaScript です。

```js
const span = document.querySelector("span");
const classes = span.classList;

span.addEventListener("click", () => {
  const result = classes.toggle("c");
  span.textContent = `'c' ${
 result ? "added" : "removed"
 }; classList is now "${classes}".`;
});
```

出力結果は以下のようになり、テキストをクリックするたびに変化します。

### force 引数の設定

2 番目の引数は、クラスを含めるかどうかを決定するために使用することができます。この例では、ブラウザーのウィンドウ幅が 1000 ピクセル以上の場合にのみ 'c' クラスを含めます。

```js
span.classList.toggle("c", window.innerWidth > 1000);
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-toggle① |

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

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


DOMTokenList: entries() メソッド - Web API

DOMTokenList: entries() メソッド
============================

**`entries()`** は `DOMTokenList` インターフェイスのメソッドで、このオブジェクトに含まれるすべてのキー/値の組を処理することができるイテレーターを返します。値は [キー, 値] の組を持つ配列 (`Array`) であり、それぞれが単一のトークンを表します。

構文
--

```js
entries()
```

### 返値

イテレーターを返します。

例
-

次の例では、 `<span>` 要素に設定されたクラスのリストを `DOMTokenList` として受け取るのに `Element.classList` を使用しています。 `entries()` を使用してキー/値の組を含むイテレーターを取得してから、 `for...of` ループを使用してそれぞれを反復処理し、それを `<span>` の `Node.textContent` に書き込みます。

最初に HTML です。

```html
<span class="a b c"></span>
```

そして JavaScript です。

```js
const span = document.querySelector("span");
const classes = span.classList;
const iterator = classes.entries();

for (const value of iterator) {
  span.textContent += `(${value})`;
}
```

出力結果は以下のようになります。

仕様書
---

#### No specification found

No specification data found for `api.DOMTokenList.entries`.
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.

関連情報
----

* `DOMTokenList.foreach()`, `DOMTokenList.keys`, `DOMTokenList.values`


DOMTokenList: supports() メソッド - Web API

DOMTokenList: supports() メソッド
=============================

**`supports()`** は `DOMTokenList` インターフェイスのメソッドで、渡されたトークンが関連する属性で対応しているトークンに含まれていれば `true` を返します。このメソッドは機能に対応しているかを検出するためのものです。

構文
--

```js
supports(token)
```

引数
--

`token`

問い合わせるトークンが入った文字列です。

### 返値

論理値で、トークンが見つかったかどうかを返します。

例
-

```js
const iframe = document.getElementById("display");

if (iframe.sandbox.supports("an-upcoming-feature")) {
  // support code for mystery future feature
} else {
  // fallback code
}

if (iframe.sandbox.supports("allow-scripts")) {
  // instruct frame to run JavaScript
  //
  // (NOTE: This feature is well-supported; this is just an example!)
  //
}
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-supports① |

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

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


DOMTokenList: length プロパティ - Web API

DOMTokenList: length プロパティ
==========================

**`length`** は `DOMTokenList` インターフェイスの読み取り専用プロパティで、オブジェクト内に格納されたオブジェクトの個数を整数で表します。

値
-

正の整数、またはリストが空であれ `0` です。

例
-

次の例は、 `<span>` 要素に設定されたクラスのリストを `Element.classList` を使用して `DOMTokenList` として取得し、そのリストの長さを `<span>` の `Node.textContent` の中に書き込みます。

最初に HTML です。

```html
<span class="a b c"></span>
```

そして JavaScript です。

```js
const span = document.querySelector("span");
const classes = span.classList;
const length = classes.length;

span.textContent = `classList length = ${length}`;
```

出力結果は以下のようになります。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-length① |

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

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


DOMTokenList: values() メソッド - Web API

DOMTokenList: values() メソッド
===========================

**`values()`** は `DOMTokenList` インターフェイスのメソッドで、開発者がこの `DOMTokenList` に含まれるすべての値を処理することができるイテレーターを返します。それぞれの値は文字列です。

構文
--

```js
tokenList.values()
```

引数
--

なし。

### 返値

イテレーターを返します。

例
-

次の例では、 `<span>` 要素に設定されたクラスのリストを `Element.classList` を使用して `DOMTokenList` として受け取ります。 `values()` を使用して値を含むイテレーターを取得してから、 for...of ループを使用してそれぞれを反復処理し、それを `<span>` の `Node.textContent` に書き込みます。

最初に HTML です。

```html
<span class="a b c"></span>
```

そして JavaScript です。

```js
const span = document.querySelector("span");
const classes = span.classList;
const iterator = classes.values();

for (const value of iterator) {
  span.textContent += `(${value}) `;
}
```

出力結果は以下のようになります。

仕様書
---

#### No specification found

No specification data found for `api.DOMTokenList.values`.
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.


DOMTokenList: item() メソッド - Web API

DOMTokenList: item() メソッド
=========================

**`item()`** は `DOMTokenList` インターフェイスのメソッドで、リスト内の項目をその位置から取得します。

**メモ:** このメソッドはブラケット記法と等価です。
 したがって、 `aList.item(i)` は `aList[i]` と同じです。

構文
--

```js
tokenList.item(index)
```

### 引数

`index`

返したい項目の位置を表す数値です。整数でなかった場合は、整数部分のみが使用されます。

### 返値

返された要素を表す文字列です。数値がそのリストの `length` 以上であった場合は `null` を返します。

### 例外

`TypeError`

`index` が整数に変換できなかった場合に発生します。

例
-

次の例は、 `<span>` 要素に設定されたクラスのリストを `DOMTokenList` として取得するのに `Element.classList` を使用します。それからリスト内の最後の要素を `item(tokenList.length - 1)` を使用して取得し、 `<span>` の `Node.textContent` の中に書き込みます。

最初に HTML です。

```html
<span class="a b c"></span>
```

そして JavaScript です。

```js
const span = document.querySelector("span");
const classes = span.classList;
const item = classes.item(classes.length - 1);
span.textContent = item;
```

出力結果は以下のようになります。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-item① |

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

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


DOMTokenList: replace() メソッド - Web API

DOMTokenList: replace() メソッド
============================

**`replace()`** は `DOMTokenList` インターフェイスのメソッドで、既存のトークンを新しいトークンで置き換えます。最初のトークンが存在しない場合、 `replace()` はすぐに `false` を返し、トークンリストに新しいトークンを追加しません。

構文
--

```js
replace(oldToken, newToken)
```

引数
--

`oldToken`

置き換えたいトークンを表す文字列です。

`newToken`

`oldToken` を置き換えたいトークンを表す文字列です。

### 返値

論理値で、 `oldToken` の置き換えに成功した場合は `true`、それ以外の場合は `false` です。

例
-

以下の例では、 `<span>` 要素に設定されたクラスのリストを `DOMTokenList` として受け取るのに `Element.classList` を使用しています。それからリスト内のトークンを置き換え、リストを `<span>` の `Node.textContent` に書き込みます。

最初に HTML です。

```html
<span class="a b c"></span>
```

そして JavaScript です。

```js
const span = document.querySelector("span");
const classes = span.classList;

const result = classes.replace("c", "z");

span.textContent = result ? classes : "token not replaced successfully";
```

出力結果は以下のようになります。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-replace① |

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

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


DOMTokenList: remove() メソッド - Web API

DOMTokenList: remove() メソッド
===========================

**`remove()`** は `DOMTokenList` インターフェイスのメソッドで、リストから指定されたトークンを取り除きます。

構文
--

```js
remove(token1)
remove(token1, token2)
remove(token1, token2, /\* … ,\*/ tokenN)
```

引数
--

`token1`, …, `tokenN`

 リストから取り除きたいトークンを表す文字列です。
 文字列がリストにない場合は、エラーは発生せず、何も起こりません。

### 返値

なし (`undefined`)。

例
-

以下の例では、 `<span>` 要素に設定されたクラスのリストを、 `DOMTokenList` として受け取るのに `Element.classList` を使用します。それからリストからトークンを取り除き、 `<span>` の `Node.textContent` の中にリストを書き込みます。

最初に HTML です。

```html
<div id="ab" class="a b c"></div>
<div id="a" class="a b c"></div>
```

そして JavaScript です。

```js
const span = document.getElementById("ab");
const classes = span.classList;
classes.remove("c");
span.textContent = classes;
```

複数のクラスを一度に削除するために、複数のトークンを渡すことができます。渡す順序は、リスト中に出現する順序と一致している必要はありません。

```js
const span2 = document.getElementById("a");
const classes2 = span2.classList;

classes2.remove("c", "b");
span2.textContent = classes2;
```

出力結果は以下のようになります。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-remove① |

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

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


DOMTokenList: add() メソッド - Web API

DOMTokenList: add() メソッド
========================

**`add()`** は `DOMTokenList` インターフェイスのメソッドで、指定されたトークンをリストに追加します。既に存在する場合は何もしません。

構文
--

```js
add(token0)
add(token0, token1)
add(token0, token1, /\* … ,\*/ tokenN)
```

引数
--

`tokenN`

`DOMTokenList` に追加するトークン（またはトークン群）を表す文字列です。

### 返値

なし。

### 例外

`SyntaxError` `DOMException`

引数のうちの 1 つが空文字列であった場合に発生します。

`InvalidCharacterError` `DOMException`

トークンに ASCII ホワイトスペースが含まれていた場合に発生します。

例
-

以下の例では、 `<span>` 要素に設定されたクラスのリストを `DOMTokenList` として受け取るのに `Element.classList` を使用しています。それからリストに新しいトークンを追加し、リストを `<span>` の `Node.textContent` に書き込みます。

最初に HTML です。

```html
<span class="a b c"></span>
```

そして JavaScript です。

```js
const span = document.querySelector("span");
const classes = span.classList;
classes.add("d");
span.textContent = classes;
```

出力結果は以下のようになります。

同様に、複数のトークンを追加することができます。

```js
span.classList.add("d", "e", "f");
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-add① |

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

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


DOMTokenList: value プロパティ - Web API

DOMTokenList: value プロパティ
=========================

**`value`** は `DOMTokenList` インターフェイスの文字列化プロパティで、リストの値を文字列としてシリアライズして返したり、リストを空にしたり渡された値に設定したりするためのものです。

値
-

 リストの内容をシリアライズした文字列です。
 それぞれの項目は空白で区切られます。

例
-

次の例では、 `<span>` 要素に設定されたクラスのリストを `Element.classList` を使用して `DOMTokenList` として取得し、リストの値を `<span>` の `Node.textContent` の中に書き込みます。

最初に HTML です。

```html
<span class="a b c"></span>
```

そして JavaScript です。

```js
const span = document.querySelector("span");
const classes = span.classList;
span.textContent = classes.value;
```

出力結果は以下のようになります。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-value② |

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

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


DOMTokenList: forEach() メソッド - Web API

DOMTokenList: forEach() メソッド
============================

**`forEach()`** は `DOMTokenList` インターフェイスのメソッドで、リスト中のそれぞれの値の組に対して挿入順で 1 回ずつ、引数で渡されたコールバックを呼び出します。

構文
--

```js
forEach(callback)
forEach(callback, thisArg)
```

### 引数

`callback`

それぞれの要素に対して呼び出す関数で、 3 つの引数を取ります。

`currentValue`

配列内で処理中の現在の要素です。

`currentIndex`

配列内で処理中の現在の要素の位置です。

`listObj`

`forEach()` を実行中の配列です。

`thisArg` 省略可

`callback` を実行する際に `this` として使用する値です。

### 返値

なし。

例
-

次の例では、`<pre>` 要素に設定されたクラスのリストを `DOMTokenList` として受け取るのに `Element.classList` を使用しています。`forEach()` を使用して値を含むイテレーターを取得し、それぞれの値を `<pre>` の `Node.textContent` に `forEach()` の中の関数から書き込みます。

### HTML

```html
<pre class="a b c"></pre>
```

### JavaScript

```js
const pre = document.querySelector("pre");
const classes = pre.classList;
const iterator = classes.values();

classes.forEach(function (value, key, listObj) {
  pre.textContent += `(${value} ${key})/${this}\n`;
}, "arg");
```

### 結果

仕様書
---

#### No specification found

No specification data found for `api.DOMTokenList.forEach`.
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.

関連情報
----

* `DOMTokenList.entries()`, `DOMTokenList.keys`, `DOMTokenList.values`


DOMTokenList: contains() メソッド - Web API

DOMTokenList: contains() メソッド
=============================

**`contains()`** は `DOMTokenList` インターフェイスのメソッドで、論理値を返します。 `true` は渡されたトークンがそのリストに含まれていることを表し、そうでなければ `false` になります。

構文
--

```js
contains(token)
```

引数
--

`token`

リストの中に存在するかどうかを調べたいトークンを表す文字列です。

### 返値

論理値で、 `true` は呼び出し元のリストにトークンが含まれていることを表し、そうでなければ `false` になります。

例
-

次の例は、 `<span>` 要素に設定されたクラスのリストを `DOMTokenList` として返すために `Element.classList` を使用します。 `"c"` がリスト中に存在することを確認し、その `<span>` の `Node.textContent` の中に結果を書き込みます。

最初に HTML です。

```html
<span class="a b c"></span>
```

そして JavaScript です。

```js
const span = document.querySelector("span");
span.textContent = span.classList.contains("c")
  ? "classList に 'c' が含まれています"
  : "classList に 'c' が含まれていません";
```

出力結果は以下のようになります。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-contains① |

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

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


DOMTokenList: keys() メソッド - Web API

DOMTokenList: keys() メソッド
=========================

**`keys()`** は `DOMTokenList` インターフェイスのメソッドで、このオブジェクトに含まれるすべてのキーを処理することができるイテレーターを返します。
 キーの型は符号なし整数です。

構文
--

```js
keys()
```

引数
--

なし。

### 返値

イテレーターを返します。

例
-

次の例では、 `<span>` 要素に設定されたクラスのリストを `DOMTokenList` として受け取るために、 `Element.classList` を使用しています。 `keys()` を使用してキーを含むイテレーターを取得してから、 for...of ループを使用してそれぞれを反復処理し、それを `<span>` の `Node.textContent` に書き込みます。

最初に HTML です。

```html
<span class="a b c"></span>
```

そして JavaScript です。

```js
const span = document.querySelector("span");
const classes = span.classList;
const iterator = classes.keys();

for (let value of iterator) {
  span.textContent += `(${value}) `;
}
```

出力結果は以下のようになります。

仕様書
---

#### No specification found

No specification data found for `api.DOMTokenList.keys`.
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.

関連情報
----

* `DOMTokenList.entries()`, `DOMTokenList.forEach()`, `DOMTokenList.values`


FileSystemFileHandle.getFile() - Web API

FileSystemFileHandle.getFile()
==============================

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

`FileSystemFileHandle` インターフェイスの **`getFile()`** メソッドは、ハンドルが表すエントリーのディスク上の状態を表す `File` オブジェクトで解決する `Promise` を返します。

このメソッドが呼び出されたあと、ディスク上のファイルが変更されたり削除されたりすると、返された `File` オブジェクトはおそらく読み込めなくなるでしょう。

構文
--

```js
getFile()
```

### 引数

なし

### 返値

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

### 例

NotAllowedError

読み込みモードの `PermissionStatus.state` が `granted` でないとき投げられます。

例
-

以下の非同期関数は、ファイルピッカーを開き、ファイルが選択されると `getFile()` メソッドを用いて中身を取得します。

```js
async function getTheFile() {
  // ファイルピッカーを開く
  [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // ファイルの中身を取得する
  const fileData = await fileHandle.getFile();
}
```

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemfilehandle-getfile |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files


FileSystemFileHandle.createWritable() - Web API

FileSystemFileHandle.createWritable()
=====================================

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

`FileSystemFileHandle` インターフェイスの **`createWritable()`** メソッドは、ファイルへの書き込みができる `FileSystemWritableFileStream` を作成します。このメソッドは、作成されたストリームで解決する `Promise` を返します。

ストリームに対してなされたあらゆる変更は、ストリームを閉じるまで、ファイルハンドルが表すファイルには反映されません。これは、典型的には、データを一時ファイルに書き込み、書き込み可能なファイルストリームが閉じられてはじめてファイルハンドルが表すファイルを一時ファイルで置き換えることで実装されています。

構文
--

```js
createWritable()
```

### 引数

FileSystemCreateWritableOptions

メソッドに渡すオプションを表すオブジェクトです。以下のオプションがあります。

* `keepExistingData`: `false` であるか指定されない場合、一時ファイルは空に初期化されます。
 そうでない場合、既存のファイルがまず一時ファイルにコピーされます。

### 返値

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

### 例外

NotAllowedError

ハンドルの `PermissionStatus.state` が `readwrite` モードで `'granted'` でないとき投げられます。

例
-

以下の非同期関数は、与えられた内容をファイルハンドルに書き込むことで、ディスクに書き込みます。

```js
async function writeFile(fileHandle, contents) {
  // 書き込み先の FileSystemWritableFileStream を作成する
  const writable = await fileHandle.createWritable();

  // ファイルの内容をストリームに書き込む
  await writable.write(contents);

  // ファイルを閉じ、内容をディスクに書き込む
  await writable.close();
}
```

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemfilehandle-createwritable |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files


FileSystemFileHandle.createSyncAccessHandle() - Web API

FileSystemFileHandle.createSyncAccessHandle()
=============================================

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

`FileSystemFileHandle` インターフェイスの **`createSyncAccessHandle()`** メソッドは、同期式でファイルを読み書きできる `FileSystemSyncAccessHandle` オブジェクトで解決する `Promise` を返します。
 このメソッドは同期式であることによりパフォーマンス上有利ですが、それ用の Web Workers によるオリジンプライベートファイルシステム内のファイルの操作にのみ用いることができます。

`FileSystemSyncAccessHandle` を作成すると、ファイルハンドルに対応するファイルの排他的ロックを取得します。これにより、作成したアクセスハンドルを閉じるまで、同じファイルについて `FileSystemSyncAccessHandle` や `FileSystemWritableFileStream` を作成することはできなくなります。

構文
--

```js
createSyncAccessHandle()
```

### 引数

なし

### 返値

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

### 例外

`InvalidStateError` `DOMException`

`FileSystemSyncAccessHandle` オブジェクトがオリジンプライベートファイルシステム内のファイルを表していないとき投げられます、

`NoModificationAllowedError` `DOMException`

ブラウザーがファイルハンドルに対応するファイルのロックを取得できないとき投げられます。

`NotAllowedError` `DOMException`

API レベルで許可されていないとき投げられます。(すなわち、`FileSystemHandle.requestPermission` が必要です)

例
-

以下の非同期のイベントハンドラーは、Web Worker 内にあります。そのうちのこの部分は、同期式ファイルアクセスハンドルを作成します。

```js
onmessage = async (e) => {
  // メインスクリプトから送られた処理対象のメッセージを取得する
  const message = e.data;

  // draft ファイルへのハンドルを取得する
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // 同期式アクセスハンドルを取得する
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // …

  // 完了したら、常に FileSystemSyncAccessHandle を閉じる
  accessHandle.close();
};
```

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemfilehandle-createsyncaccesshandle |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files


ServiceWorker: error イベント - Web API

ServiceWorker: error イベント
=========================

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

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

例
-

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

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

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

仕様書
---

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

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

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


ServiceWorker: statechange イベント - Web API

ServiceWorker: statechange イベント
===============================

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

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

例
-

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

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

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

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

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

仕様書
---

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

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

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


ServiceWorker.state - Web API

ServiceWorker.state
===================

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

値
-

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

`"parsed"`

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

`"installing"`

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

`"installed"`

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

`"activating"`

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

`"activated"`

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

`"redundant"`

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

例
-

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

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

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

仕様書
---

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

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

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


ServiceWorker.postMessage() - Web API

ServiceWorker.postMessage()
===========================

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

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

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

構文
--

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

### 引数

`message`

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

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

`options` 省略可

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

`transfer` 省略可

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

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

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

### 返値

なし (`undefined`)。

### 例外

`SyntaxError`

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

例
-

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

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

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

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

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

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

仕様書
---

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

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

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

関連情報
----

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


ServiceWorker.scriptURL - Web API

ServiceWorker.scriptURL
=======================

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

値
-

文字列です。

例
-

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

仕様書
---

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

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

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


SharedWorkerGlobalScope.close() - Web API

SharedWorkerGlobalScope.close()
===============================

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

構文
--

```js
close()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

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

```js
close();
```

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

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

仕様書
---

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

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

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

関連情報
----

`DedicatedWorkerGlobalScope`


SharedWorkerGlobalScope: connect イベント - Web API

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

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

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

構文
--

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

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

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

イベント型
-----

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

Event

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

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

`MessageEvent.data` 読取専用

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

`MessageEvent.origin` 読取専用

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

`MessageEvent.lastEventId` 読取専用

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

`MessageEvent.source` 読取専用

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

`MessageEvent.ports` 読取専用

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

例
-

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

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

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

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

  port.start();
};
```

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

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

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

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

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

仕様書
---

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

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

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

関連情報
----

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


SharedWorkerGlobalScope.name - Web API

SharedWorkerGlobalScope.name
============================

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

値
-

文字列です。

例
-

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

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

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

```js
self.name;
```

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

仕様書
---

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

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

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

関連情報
----

* `SharedWorkerGlobalScope`


IDBKeyRange.lowerOpen - Web API

IDBKeyRange.lowerOpen
=====================

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

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

値
-

`boolean` 値です。

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

例
-

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

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

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

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

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

仕様書
---

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

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

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

関連情報
----

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


IDBKeyRange.upperBound() - Web API

IDBKeyRange.upperBound()
========================

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

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

構文
--

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

### 引数

`upper`

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

`open` 省略可

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

### 返値

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

### 例外

`DataError` `DOMException`

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

例
-

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

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

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

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

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

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

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

仕様書
---

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

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

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

関連情報
----

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


IDBKeyRange.upperOpen - Web API

IDBKeyRange.upperOpen
=====================

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

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

値
-

`boolean` 値です。

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

例
-

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

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

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

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

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

仕様書
---

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

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

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

関連情報
----

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


IDBKeyRange.bound() - Web API

IDBKeyRange.bound()
===================

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

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

構文
--

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

### 引数

`lower`

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

`upper`

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

`lowerOpen` 省略可

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

`upperOpen` 省略可

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

### 返値

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

### 例外

`DataError` `DOMException`

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

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

例
-

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

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

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

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

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

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

仕様書
---

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

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

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

関連情報
----

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


IDBKeyRange.includes() - Web API

IDBKeyRange.includes()
======================

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

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

構文
--

```js
includes(key)
```

### 引数

`key`

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

### 返値

`boolean` 値です。

### 例外

`DataError` `DOMException`

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

例
-

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

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

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

仕様書
---

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

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

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

関連情報
----

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


IDBKeyRange.lowerBound() - Web API

IDBKeyRange.lowerBound()
========================

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

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

構文
--

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

### 引数

`lower`

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

`open` 省略可

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

### 返値

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

### 例外

`DataError` `DOMException`

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

例
-

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

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

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

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

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

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

仕様書
---

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

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

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

関連情報
----

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


IDBKeyRange.upper - Web API

IDBKeyRange.upper
=================

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

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

値
-

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

例
-

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

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

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

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

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

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

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

仕様書
---

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

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

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

関連情報
----

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


IDBKeyRange.lower - Web API

IDBKeyRange.lower
=================

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

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

値
-

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

例
-

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

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

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

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

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

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

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

仕様書
---

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

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

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

関連情報
----

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


IDBKeyRange.only() - Web API

IDBKeyRange.only()
==================

`IDBKeyRange` インターフェイスの **`only()`** メソッドは、単一の値からなる新しいキーの範囲を生成します。

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

構文
--

```js
only(value)
```

### 引数

`value`

新しいキーの範囲として用いる値です。

### 返値

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

### 例外

`DataError` `DOMException`

引数 `value` が有効なキーでないとき投げられます。

例
-

以下の例では、単一の値からなるキーの範囲の使用法を示します。`keyRangeValue = IDBKeyRange.only("A");` と宣言します。これは、値 `"A"` のみを含む範囲です。(`IDBTransaction` により) トランザクションを開き、オブジェクトストアを開き、省略可能なキーの範囲の値を `keyRangeValue` として `IDBObjectStore.openCursor` でトランザクションを開きます。これにより、このカーソルはキーの値が `"A"` であるレコードのみを取得します。

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

```js
function displayData() {
  const keyRangeValue = IDBKeyRange.only("A");

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

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

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

仕様書
---

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

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

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

関連情報
----

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


DOMPoint: y プロパティ - Web API

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

**`DOMPoint`** インターフェイスの **`y`** プロパティは、空間内の点の垂直座標 *y* を保持します。

変換によって方向が変更されていない限り、 `y` の値は下に向かって増加し、上に向かって減少します。

値
-

この点の *y* 座標の値を示す倍精度浮動小数点値。この値は**無制限**であり、無限または無効であることが許されます（つまり、その値は `NaN` または `±Infinity` であるかもしれません）。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dompointreadonly-y |

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

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

関連情報
----

* その他の座標プロパティ: `x`,
 `z`, および視点位置である `w`


DOMPoint: x プロパティ - Web API

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

**`DOMPoint`** インターフェイスの **`x`** プロパティは、空間内のある点の水平座標 x を保持します。

一般的に、変換によって軸の方向が変更されていない限り、正の値 `x` は右方向を意味し、負の値 `x` は左方向を意味します。

値
-

この点の x 座標の値を示す倍精度浮動小数点値。この値は**無制限**であり、無限または無効であることが許されます（つまり、その値は `NaN` または `±Infinity` であってもかまいません）。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dompointreadonly-x |

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

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

関連情報
----

* その他の座標プロパティ: `y`,
 `z`, および視点位置である `w`


DOMPoint.fromPoint() - Web API

DOMPoint.fromPoint()
====================

**`DOMPoint`** の静的メソッド `fromPoint()` は，元の点を与えて新しい変更可能な `DOMPoint` オブジェクトを作成し、返します。

また、 `new DOMPoint()` コンストラクターを使用して、新しい `DOMPoint` オブジェクトを作成することもできます。

 このインターフェイスは `DOMPointReadOnly` に基づいていますが、読み取り専用ではありません。
 中のプロパティを任意に変更することができます。

構文
--

```js
fromPoint(sourcePoint);
```

### 引数

`sourcePoint`

新しい点のプロパティの値を取得するための `DOMPoint` または `DOMPointReadOnly` インスタンス、または以下のプロパティを含むオブジェクトです。

`x`

空間上のこの点の `x` 座標を表す、無制限の浮動小数点数です。これは一般に水平座標であり、正の値は右側に、負の値は左側になります。既定値は `0` です。

`y`

この点の `y` 座標を表す無制限の浮動小数点数です。これは垂直座標であり、座標系に適用される変換がない限り、正の値は画面の内側へ、負の値は画面の上方へ向かいます。既定値は `0` です。

`z`

この点の `z` 座標を表す無制限の浮動小数点数です。この座標は、（状況を変えるような変換がないと仮定した場合の）奥行き座標です。正の値はユーザーにより近く、負の値は画面の内側へ引っ込んでいきます。既定値は `0` です。

`w`

この点の `w` 視点位置で、無制限の浮動小数点数として与えられます。 既定値は `1` です。

### 返値

座標と視点の位置が元の点と同じである、新しい `DOMPoint` オブジェクトです。この点のプロパティは変更可能であり、いつでも変更することができます。

例
-

### 読み取り専用の点から変更可能な点を作成

もし `DOMPointReadOnly` オブジェクトがあれば、その点の変更可能なコピーを簡単に作成することができます。

```js
var mutablePoint = DOMPoint.fromPoint(readOnlyPoint);
```

### 二次元の点の作成

このサンプルでは、 `x` と `y` に使用する値を含むインラインオブジェクトを指定し、二次元の点を作成しています。 *z* と *w* プロパティは既定値（それぞれ 0 と 1）のままにしておくことができます。

```js
var center = DOMPoint.fromPoint({ x: 75, y: -50, z: -55, w: 0.25 });
```

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dompoint-frompoint |

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

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


DOMPoint: z プロパティ - Web API

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

**`DOMPoint`** インターフェースの **`z`** プロパティは、空間内の点の奥行き座標を指定します。

変換によって方向が変更されていない限り、 `z` が 0 の場合は画面の平面となり、正の値は画面の外側に向かって伸び、負の値は画面の内側へ後退していきます。

値
-

この点の *z* 座標の値を示す倍精度浮動小数点値。この値は**無制限**であり、無限または無効であることが許されます（つまり、その値は `NaN` または `±Infinity` であってもかまいません）。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dompointreadonly-z |

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

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

関連情報
----

* その他の座標プロパティ: `x`,
 `y`, および視点位置である `w`


DOMPoint: w プロパティ - Web API

DOMPoint: w プロパティ
=================

**`DOMPoint`** インターフェースの **`w`** プロパティは、空間上のこの点の視点位置 w を保持します。

値
-

この点の視点位置 *w* を示す倍精度浮動小数点値です。この値は**無制限**であり、無限または無効であることが許されます（つまり、その値は `NaN` または `±Infinity` であるかもしれません）。既定値は 1.0 です。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dompointreadonly-w |

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

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

関連情報
----

* その他の座標のプロパティ: `x`,
 `y`, `z`


DOMPoint() - Web API

DOMPoint()
==========

**`DOMPoint()`** コンストラクターは、プロパティの一部または全部の値を指定して、新しい `DOMPoint` オブジェクトを作成し、それを返します。

また、静的関数 `DOMPoint.fromPoint()` を呼び出しても `DOMPoint` を作成することができます。この関数は、 `DOMPoint` や `DOMPointReadOnly` など、必要な引数を持つ任意のオブジェクトを受け取ることができます。

構文
--

```js
new DOMPoint();
new DOMPoint(x);
new DOMPoint(x, y);
new DOMPoint(x, y, z);
new DOMPoint(x, y, z, w);
```

### 引数

`DOMPoint.x`

新しい `DOMPoint` の水平座標である `x` です。

`DOMPoint.y`

新しい `DOMPoint` の垂直座標である `y` です。

`DOMPoint.z`

新しい `DOMPoint` の奥行き座標である `z` です。

`DOMPoint.w`

新しい `DOMPoint` の視点位置である `w` です。

例
-

この例では、現在のウィンドウの左上隅を表す `DOMPoint` を作成し、最初の点を基準にして、垂直方向と水平方向に 100 ピクセルずつずらした 2 つ目の点を作成します。

```js
var windTopLeft = new DOMPoint(window.screenX, window.screenY);
var newTopLeft = DOMPoint.fromPoint(windTopLeft);
newTopLeft.x += 100;
newTopLeft.y += 100;
```

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dompoint-dompoint |

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

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

関連情報
----

* `DOMPointReadOnly()`
* `DOMRect`
* `DOMMatrix`


ReadableStreamBYOBRequest: view プロパティ - Web API

ReadableStreamBYOBRequest: view プロパティ
=====================================

**`view`** は `ReadableStreamBYOBRequest` インターフェイスのゲッタープロパティで、現在のビューを返します。

値
-

コントローラーが生成したデータを書き込む出力先領域を表す型付き配列です。

`ReadableStreamBYOBRequest.respond()` または `ReadableStreamBYOBRequest.respondWithNewView()` の呼び出しによって、すでにリクエストが応答されていた場合は `null` になります。

例
-

`ReadableStreamBYOBRequest` の例を参照してください。

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-rs-byob-request-view① |

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

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

関連情報
----

* 読み取り可能なバイトストリームの使用


ReadableStreamBYOBRequest: respond() メソッド - Web API

ReadableStreamBYOBRequest: respond() メソッド
=========================================

**`respond()`** は `ReadableStreamBYOBRequest` インターフェイスのメソッドで、 `ReadableStreamBYOBRequest.view` に指定したバイト数が書き込まれたことを、関連する読み取り可能なバイトストリームに通知するために用いられます。

このメソッドが呼び出された後、 `view` は移譲され、変更できなくなります。

構文
--

```js
respond(bytesWritten)
```

### 引数

`bytesWritten`

`ReadableStreamBYOBRequest.view` に書き込まれたバイト数です。

### 返値

なし (`undefined`)。

### 例外

`TypeError`

リクエストが関連付けられた`ReadableByteStreamController`を持っていないか、ビューバッファが切り離されていないか、移譲できません。

例
-

下記のコードは読み取り可能なバイトストリームの使用のライブ例から引用しています。

 このメソッドは、コンシューマーからの待機中の読み取りリクエストを履行するために、データのゼロコピー移譲を行う一環として、基盤となるバイトソースによって呼び出されます。
 基盤となるバイトソースは最初に `ReadableStreamBYOBRequest.view` にデータを書き込み、次にこの `respond()` メソッドを呼び出して、バッファにコピーされたデータの量を示し、データをリーダーに移譲させます。

下記のコードはこの用途を示すもので、データをビューにコピーするために `readInto()` メソッドを使用しています。

```js
const v = controller.byobRequest.view;
bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
controller.byobRequest.respond(bytesRead);
```

処理後、 `byobRequest.view` は切り離され、リクエストは破棄されます。

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-rs-byob-request-respond① |

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

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

関連情報
----

* 読み取り可能なバイトストリームの使用


ReadableStreamBYOBRequest: respondWithNewView() メソッド - Web API

ReadableStreamBYOBRequest: respondWithNewView() メソッド
====================================================

**`respondWithNewView()`** は `ReadableStreamBYOBRequest` インターフェイスのメソッドで、 `ReadableStreamBYOBRequest.view` の代わりに、関連付けられた読み取り可能なバイトストリームの消費者が書き込むべき新しいビューを指定します。

 新しいビューは `TypedArray` または `DataView` でなければならず、 `ReadableStreamBYOBRequest.view` と同じバッキングメモリー領域にビューを提供します。
 このメソッドが呼び出された後、メソッドに渡されたビューは移譲され、変更できなくなりました。

 このメソッドは、バイト基盤がレスポンスを完了する前に `byobRequest.view` を内部的に移譲する必要がある使用する用途を意図しています。
 例えば、 BYOB ソースは BYOB ビューを別個のワーカースレッドに移譲し、それが満たされたらワーカがそれを移譲し返すのを待つことができます。

構文
--

```js
respondWithNewView(view)
```

### 引数

`view`

関連付けられた読み取り可能なバイトストリームの消費者が `ReadableStreamBYOBRequest.view` の代わりに書くべき `TypedArray` または `DataView` です。

 これは `ReadableStreamBYOBRequest.view` と同じバッキングメモリー領域上のビューでなければならず、占めるメモリーは同じかそれ以下でなければなりません。
 具体的には、ビューのバッファーか移譲されたもので、同じ `byteOffset` を保有し、`byteLength` （書き込むバイト数）がビューのバイト数以下でなければなりません。

### 返値

なし (`undefined`)。

### 例外

`TypeError`

 元のオブジェクトが `ReadableStreamBYOBRequest` でないか、関連するコントローラがないか、関連する内部配列バッファが存在しないか切り離されている場合に発生します。
 また、アクティブな読者がいるときに `view` の長さがゼロである場合や、閉じられたストリームで呼び出されたときにゼロでない場合にも発生する可能性があります。

`RangeError`

 新しい `view` が `ReadableStreamBYOBRequest.view` のバッキングメモリー領域と一致しない場合に発生します。
 例えば、同じバッファー（または移譲されたバージョン）ではない、異なる `byteOffset` を持っている、バッキングビューで利用できるメモリーより大きい、などです。

例
-

移譲するビューは、 `ReadableStreamBYOBRequest.view` と同じタイプであり、同じ基盤バッファーとバイトオフセットを保有し、同じかそれ以下のバイト長でなければなりません。

例えば、下記のようにビューとレスポンスを定義します。

```js
const v = controller.byobRequest.view;
bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
byobRequest.respondWithNewView(
  byobRequest.view.subarray(v.byteOffset, bytesRead),
);
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-rs-byob-request-respond-with-new-view① |

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

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

関連情報
----

* 読み取り可能なバイトストリームの使用


FileSystemWritableFileStream.truncate() - Web API

FileSystemWritableFileStream.truncate()
=======================================

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

`FileSystemWritableFileStream` インターフェイスの **`truncate()`** メソッドは、ストリームに対応するファイルのサイズを指定のバイト数にします。

指定したサイズがファイルの現在のサイズより大きい場合、ファイルの拡張部分は `null` のバイトで埋めます。そうでない場合、ファイルを切り詰めます。

`truncate()` が呼ばれると、ファイルカーソルも移動します。
 オフセットがサイズより小さい場合、変化しません。
 オフセットがサイズより大きい場合、オフセットがサイズに設定されます。
 これにより、この後の書き込みがエラーにならないようにします。

 ストリームが閉じられるまで、変更はディスク上の実際のファイルには一切書き込まれません。
 通常、変更はかわりに一時ファイルに書き込まれます。

構文
--

```js
truncate()
```

### 引数

size

ストリームの新しいバイト数を表す `unsigned long` 値です。

### 返値

`undefined` で解決する `Promise` を返します。

### 例外

`NotAllowedError` `DOMException`

`PermissionState` が `'granted'` でないとき返されます。

`TypeError`

`size` が定義されていないか `unsigned long` でないとき返されます。

例
-

```js
// 未稿
```

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemwritablefilestream-truncate |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files


FileSystemWritableFileStream.write() - Web API

FileSystemWritableFileStream.write()
====================================

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

`FileSystemWritableFileStream` インターフェイスの **`write()`** メソッドは、このメソッドが呼ばれたファイルの現在のファイルカーソルオフセットにデータを書き込みます。

 ストリームを閉じるまで、変更は実際のファイルには一切書き込まれません。
 通常、変更はかわりに一時ファイルに書き込まれます。このメソッドは、ストリーム内で書き込む位置を移動したり、ファイルを切り詰めてファイル全体のバイト数を変更したりすることにも使用できます。

構文
--

```js
write(data)
```

### 引数

`data`

 ファイルに書き込むデータを表す `ArrayBuffer`・`TypedArray`・
 `DataView`・`Blob`・`String` オブジェクト・文字列リテラルのいずれかです。
 もしくは、以下のプロパティを持つオブジェクトです。

`type`

`"write"`・`"seek"`・`"truncate"` のいずれかの文字列です。

`data`

 ファイルに書き込むデータです。`ArrayBuffer`・`TypedArray`・`DataView`・
 `Blob`・`String` オブジェクト・文字列リテラルのいずれかです。
 `type` が `write` に設定されているときは必須です。

`position`

`type` が `seek` のとき、現在のファイルカーソルの移動先のバイト位置を表します。
 `type` が `write` のときにも設定することができ、この場合は書き込みの開始位置を表します。

`size`

 ストリームが保持するべきバイト数を表す `unsigned long` 値です。
 `type` が `truncate` に設定されているときは必須です。

### 返値

`undefined` で解決する `Promise` を返します。

### 例外

`NotAllowedError` `DOMException`

`PermissionStatus` が `granted` でないとき返されます。

`TypeError`

`data` が `undefined` であるか、`position` または `size` が無効な値のとき返されます。

`InvalidStateError` `DOMException`

`position` が存在するバイト数より大きい値に設定されているとき返されます。

例
-

 この非同期関数は「Save File」ピッカーを開きます。このピッカーは、ファイルが選択されると `FileSystemFileHandle` を返します。
 このハンドルから、`FileSystemFileHandle.createWritable()` メソッドを用いて書き込み可能なストリームを作成します。

そして、ユーザーが指定した `Blob` がストリームに書き込まれ、ストリームが閉じられます。

```js
async function saveFile() {
  // 新しいハンドルを作成する
  const newHandle = await window.showSaveFilePicker();

  // 書き込み先の FileSystemWritableFileStream を作成する
  const writableStream = await newHandle.createWritable();

  // ファイルに書き込む
  await writableStream.write(imgBlob);

  // ファイルを閉じ、データをディスクに書き込む
  await writableStream.close();
}
```

以下では、`write()` メソッドに渡すことができる異なるオプションの例を示します。

```js
// データだけを渡す (オプションなし)
writableStream.write(data);

// ストリームに指定の位置からデータを書き込む
writableStream.write({ type: "write", position, data });

// 現在のファイルカーソルオフセットを指定の位置に移動する
writableStream.write({ type: "seek", position });

// ファイルを size バイトにする
writableStream.write({ type: "truncate", size });
```

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemwritablefilestream-write |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files


FileSystemWritableFileStream.seek() - Web API

FileSystemWritableFileStream.seek()
===================================

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

`FileSystemWritableFileStream` インターフェイスの **`seek()`** メソッドを呼ぶと、現在のファイルカーソルオフセットを (バイト単位の) 指定の位置に移動します。

構文
--

```js
seek(position)
```

### 引数

`position`

ファイルの top (最初) からのバイト単位の位置を表す `unsigned long` 値です。

### 返値

`undefined` で解決する `Promise` を返します。

### 例外

`NotAllowedError` `DOMException`

`PermissionStatus.state` が `'granted'` でないとき返されます。

`TypeError`

`position` が定義されていないか、`unsigned long` 型でないとき返されます。

例
-

未稿

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemwritablefilestream-seek |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files


ClipboardItem() - Web API

ClipboardItem()
===============

**`ClipboardItem()`** はクリップボード API のコンストラクターで、新しい `ClipboardItem` オブジェクトを生成します。これは、クリップボード API で保存・取得するデータを表し、それぞれ `clipboard.write()` と `clipboard.read()` で操作します。

**メモ:** 画像形式の対応はブラウザーによって異なります。 `Clipboard` インターフェイスについては、ブラウザーの互換性一覧表を参照してください。

構文
--

```js
new ClipboardItem(data);
new ClipboardItem(data, options);
```

### 引数

`data`

MIME タイプをキー、データを値とする `Object` です。データは `Blob`、文字列、または blob か文字列に解決する `Promise` として表現することが可能です。

`options` 省略可

以下のプロパティを持つオブジェクトです。

`presentationStyle` 省略可

`unspecified`、`inline`、`attachment` の 3 つの文字列のうちの 1 つ。既定値は `unspecified`。

**メモ:** また、 `Clipboard` インターフェイスの `Clipboard.readText()` メソッドと `Clipboard.writeText()` メソッドにより、テキストを扱うことができます。

例
-

以下の例では、 `Fetch API` を使って PNG 画像をリクエストし、 `responses' blob()` メソッドを用いて新しい `ClipboardItem` を生成しています。このアイテムは、 `Clipboard.write()` メソッドを用いて、クリップボードに書き込まれます。

**メモ:** 一度に渡すことができるクリップボードの項目は 1 つだけです。

```js
async function writeClipImg() {
  try {
    const imgURL = "/myimage.png";
    const data = await fetch(imgURL);
    const blob = await data.blob();

    await navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob,
      }),
    ]);
    console.log("Fetched image copied.");
  } catch (err) {
    console.error(err.name, err.message);
  }
}
```

仕様書
---

| Specification |
| --- |
| Clipboard API and events # dom-clipboarditem-clipboarditem |

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

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

関連情報
----

* クリップボード API
* Async Clipboard API demo on Glitch
* Image support for Async Clipboard article