recursal/MDN huggingface dataset:
ScriptProcessorNode.bufferSize
==============================

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

`ScriptProcessorNode` インターフェイスの `bufferSize` プロパティは、入力と出力両方のバッファーサイズを表す整数をサンプルフレーム数単位で返します。この値は `256` 〜 `16384` の範囲の 2 のべき乗を取りえます。

**メモ:** この機能は AudioWorklets および `AudioWorkletNode` インターフェイスに置き換えられました。

値
-

整数です。

例
-

サンプルコードは `BaseAudioContext.createScriptProcessor()` を参照してください。

仕様書
---

2014 年 8 月 29 日の Web Audio API specification の発行以降、この機能は非推奨になりました。この機能は標準化を検討されていません。

この機能は AudioWorklets および `AudioWorkletNode` インターフェイスに置き換えられました。

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

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

関連情報
----

* Web Audio API の使用
USBConfiguration: configurationValue プロパティ
==========================================

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

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

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

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

`USBConfiguration` インターフェイスの読み取り専用プロパティ **`configurationValue`** は、このコンフィギュレーションのコンフィギュレーション番号を返します。これはデバイスによって提供されたこのコンフィギュレーションを定義しているコンフィギュレーションディスクリプターの `bConfigurationValue` フィールドと一致します。

値
-

現在の `USBConfiguration` インスタンスで指定された `USBDevice` の コンフィギュレーションディスクリプターです。

仕様書
---

| Specification |
| --- |
| WebUSB API # ref-for-dom-usbconfiguration-configurationvalue |

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

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

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

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

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

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

`USBConfiguration` インターフェイスの読み取り専用プロパティ **`configurationName`** は、デバイスによって提供されたこのコンフィギュレーションを説明する名前を返します。これはこのコンフィギュレーションを定義しているコンフィギュレーションディスクリプターの `iConfiguration` フィールドで提供されるインデックスのストリングディスクリプターの値と一致します。

値
-

デバイスによって提供されたこのコンフィギュレーションを説明する名前です。

仕様書
---

| Specification |
| --- |
| WebUSB API # ref-for-dom-usbconfiguration-configurationname |

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

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

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

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

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

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

**`USBConfiguration()`** コンストラクターは、渡された `USBDevice` の指定のコンフィギュレーション番号のコンフィギュレーションの情報が格納された新しい `USBConfiguration` オブジェクトを生成します。

構文
--


```js
new USBConfiguration(device, configurationValue)
```

### 引数

`device`

設定を行う `USBDevice` を指定します。

`configurationValue`

読み取りを行うコンフィギュレーションディスクリプターを指定します。これは 0 から 255 の符号なし整数です。

仕様書
---

| Specification |
| --- |
| WebUSB API # dom-usbconfiguration-usbconfiguration |

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

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

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

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

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

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

`USBConfiguration` インターフェイスの読み取り専用プロパティ **`interfaces`** は、このコンフィギュレーションが対応しているそれぞれのインターフェイスを表す `USBInterface` のインスタンスが格納された配列を返します。

値
-

`USBInterface` のインスタンスが格納された配列です。

仕様書
---

| Specification |
| --- |
| WebUSB API # ref-for-dom-usbconfiguration-interfaces |

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

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

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

**`toSum()`** は `CSSNumericValue` インターフェイスのメソッドで、 `CSSMathSum` (en-US) オブジェクトの値を、指定した単位の値に変換するものです。

構文
--


```js
toSum(units);
```

### 引数

`units`

変換先の単位です。

### 返値

`CSSNumericValue` です。

### 例外

`TypeError`

無効な型がメソッドに渡された場合に発生します。

例
-


```js
let v = CSS.px("23").add(CSS.percent("4")).add(CSS.cm("3")).add(CSS.in("9"));
v.toString(); // => "calc(23px + 4% + 3cm + 9in)"
v.toSum("px", "percent").toString(); // => "calc(1000.39px + 4%)"
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-tosum |

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

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

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

**`div()`** は `CSSNumericValue` インターフェイスのメソッドで、 `CSSNumericValue` を指定された値で除算します。

構文
--


```js
div(number);
```

### 引数

`number`

数値または `CSSNumericValue` です。

### 返値

`CSSMathProduct` (en-US) です。

### 例外

`TypeError`

無効な型がメソッドに渡された場合に発生します。

例
-


```js
let mathProduct = CSS.px("24").div(CSS.percent("4"));
// Prints "calc(24px / 4%)"
mathProduct.toString();
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-div |

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

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

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

**`add()`** は `CSSNumericValue` インターフェイスのメソッドで、指定された値を `CSSNumericValue` に加算します。

構文
--


```js
add(number);
```

### 引数

`number`

数値または `CSSNumericValue` です。

### 返値

`CSSMathSum` (en-US) です。

### 例外

`TypeError`

無効な型がメソッドに渡された場合に発生します。

例
-


```js
let mathSum = CSS.px("23")
  .add(CSS.percent("4"))
  .add(CSS.cm("3"))
  .add(CSS.in("9"));
// Prints "calc(23px + 4% + 3cm + 9in)"
console.log(mathSum.toString());
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-add |

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

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

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

**`max()`** は `CSSNumericValue` インターフェイスのメソッドで、渡された値の中から最も大きい値を返します。渡された値は同じ型でなければなりません。

構文
--


```js
max(number1, /\* ..., \*/ numberN);
```

### 引数

`number1`, …, `numberN`

数値または `CSSNumericValue` です。

### 返値

A `CSSUnitValue` (en-US).

### 例外

`TypeError`

無効な型がメソッドに渡された場合に発生します。

例
-

先に述べたように、渡される値はすべて同じ型と値でなければなりません。以下のいくつかの例では、それらが異なる場合に何が起こるかを説明しています。


```js
// Prints "2cm"
console.log(CSS.cm("1").max(CSS.cm("2")).toString());

// Prints "max(1cm, 0.393701in)"
console.log(CSS.cm("1").max(CSS.in("0.393701")).toString());
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-max |

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

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

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

**`min()`** は `CSSNumericValue` インターフェイスのメソッドで、渡された値のうちで最も小さい値を返します。渡された値は同じ型でなければなりません。

構文
--


```js
min(number1, /\* ..., \*/ numberN);
```

### 引数

`number1`, …, `numberN`

数値または `CSSNumericValue` です。

### 返値

A `CSSUnitValue` (en-US).

### 例外

`TypeError`

無効な型がメソッドに渡された場合に発生します。

例
-

先に述べたように、渡される値はすべて同じ型と値でなければなりません。以下のいくつかの例では、それらが異なる場合に何が起こるかを説明しています。


```js
// Prints "1cm"
console.log(CSS.cm("1").min(CSS.cm("2")).toString());

// Prints "max(1cm, 0.393701in)"
console.log(CSS.cm("1").max(CSS.in("0.393701")).toString());
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-min |

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

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

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

**`parse()`** は `CSSNumericValue` インターフェイスのメソッドで、値の文字列をメンバーが値と単位となっているオブジェクトに変換します。

構文
--


```js
parse(cssText);
```

### 引数

`cssText`

数値と単位の部分を持つ文字列です。

### 返値

`CSSNumericValue` です。

### 例外

`SyntaxError` `DOMException`

TBD

例
-

以下は、`unit` プロパティが `"px"` で、`value` プロパティが `42` である `CSSUnitValue` (en-US) オブジェクトを返すものです。


```js
let numValue = CSSNumericValue.parse("42.0px");
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-parse |

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

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

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

**`to()`** は `CSSNumericValue` インターフェイスのメソッドで、数値をある単位から他の単位へ変換します。

構文
--


```js
to(unit);
```

### 引数

`unit`

変換先の単位です。

### 返値

`CSSMathSum` (en-US) です。

### 例外

`SyntaxError` `DOMException`

無効な型がメソッドに渡された場合に発生します。

`TypeError`

渡された値が加算できない場合に発生します。

例
-


```js
// Prints "0.608542cm"
console.log(CSS.px("23").to("cm").toString());
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-to |

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

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

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

**`equals()`** は `CSSNumericValue` インターフェイスのメソッドで、渡された値が厳密に等しいかどうかを示す論理値を返します。 `true` の値を返すのは、渡されたすべての値が同じ型と値であり、かつ同じ順序である場合です。これにより、構造的な等価性を素早く検査することができます。

構文
--


```js
equals(number);
```

### 引数

`number`

数値または `CSSNumericValue` です。

### 返値

論理値です。

### 例外

なし。

例
-

先に述べたように、渡される値はすべて同じ型、同じ値でなければならず、また同じ順序でなければなりません。以下のいくつかの例では、それらが異なる場合に何が起こるかを説明しています。


```js
let cssMathSum = new CSSMathSum(CSS.px(1), CSS.px(2));
let matchingCssMathSum = new CSSMathSum(CSS.px(1), CSS.px(2));
// Prints true
console.log(cssMathSum.equals(matchingCssMathSum));

let otherCssMathSum = CSSMathSum(CSS.px(2), CSS.px(1));
// Prints false
console.log(cssMathSum.equals(otherCssMathSum));

// Also prints false
console.log(CSS.cm("1").equal(CSS.in("0.393701")));
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-equals |

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

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

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

**`mul()`** は `CSSNumericValue` インターフェイスのメソッドで、この `CSSNumericValue` に指定された値を乗算します。

構文
--


```js
mul(number);
```

### 引数

`number`

数値または `CSSNumericValue` です。

### 返値

`CSSMathProduct` (en-US) です。

### 例外

`TypeError`

無効な型がメソッドに渡された場合に発生します。

例
-


```js
let mathSum = CSS.px("23")
  .mul(CSS.percent("4"))
  .mul(CSS.cm("3"))
  .mul(CSS.in("9"));
// Prints "calc(23px \* 4% \* 3cm \* 9in)"
console.log(mathSum.toString());
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-mul |

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

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

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

**`type()`** は `CSSNumericValue` インターフェイスのメソッドで、 `CSSNumericValue` の型をf `angle`, `flex`,
 `frequency`, `length`, `resolution`,
 `percent`, `percentHint`, `time` の何れかで返します。

構文
--


```js
type();
```

### 引数

なし。

### 返値

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

### 例外

なし。

例
-


```js
let mathSum = CSS.px("23")
  .sub(CSS.percent("4"))
  .sub(CSS.cm("3"))
  .sub(CSS.in("9"));
// Returns an object with the structure: {length: 1, percentHint: "length"}
let cssNumericType = mathSum.type();
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-type |

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

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

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

**`sub()`** は `CSSNumericValue` インターフェイスのメソッドで、この `CSSNumericValue` から指定された値を減算します。

構文
--


```js
sub(number);
```

### 引数

`number`

数値または `CSSMathSum` (en-US) です。

### 返値

`CSSMathSum` (en-US) です。

### 例外

`TypeError`

無効な型がメソッドに渡された場合に発生します。

例
-


```js
let mathSum = CSS.px("23")
  .sum(CSS.percent("4"))
  .sum(CSS.cm("3"))
  .sum(CSS.in("9"));
// Prints "calc(23px - 4% - 3cm - 9in)"
console.log(mathSum.toString());
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-sub |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
グローバル間フェッチの使用
=============

この記事では、フェッチ（および潜在的に同種のリソース取得の振る舞いを示す他の API）で発生するエッジケースについて説明します。 相対 URL を含む オリジン間フェッチ（cross-origin fetch）が `<iframe>` から開始される場合、相対 URL は iframe の位置ではなく現在のグローバルな位置に対して解決していました。

エッジケース
------

多くのサイトは、このエッジケースに出くわすことはないでしょう。条件は以下の通りです。

* 同一オリジン (same-origin) の iframe が必要です。
* その同一オリジンの iframe には、異なるベース URL を持つ位置が必要です。
* フェッチ関数をグローバル間 (cross-global) で使用する必要があります。 例えば、 `frame.contentWindow.fetch()` のようにします。
* フェッチするために渡す URL は相対である必要があります。
問題
--

以前は、例えば次のように、現在のグローバルに対して相対 URL を解決していました。


```js
let absolute = new URL(relative, window.location.href);
```


これ自体は問題ではありません。 この種の振る舞いを示すさまざまな API が仕様で定義されている振る舞いと矛盾してそれを実行しているだけであり、それがさらに問題を引き起こす可能性があります。

解決策
---

Firefox 60 以降では、 Mozilla は、使用している `fetch()` 関数を所有するグローバルに対して相対 URL を解決するようになりました（Firefox バグ 1432272 を参照）。 したがって、上記の場合、次のように、 iframe の位置に対して解決します。


```js
let absolute = new URL(relative, frame.contentWindow.location.href);
```


今後の潜在的な問題を軽減するために、この振る舞いの変更に合わせた新しい仕様を取得することについて、多くの議論が進行中です。
フェッチの基本概念
=========

フェッチ API は、（ネットワーク越しの場合も含めて）リソースを取得するインターフェイスを提供します。 `XMLHttpRequest` を使っていた人にはなじみ深いでしょうが、より強力で柔軟な機能を提供します。この記事では、フェッチ API の基本概念のいくつかを説明します。

**メモ:** この記事は随時加筆されます。もっと説明が必要と感じるフェッチの概念を見つけた場合、MDN ディスカッションフォーラムまたは Matrix の MDN Web Docs ルームで誰かに知らせてください。

概要
--

フェッチの核心はインターフェイスの抽象化であり、HTTP のリクエスト (`Request`)、レスポンス (`Response`)、ヘッダー (`Headers`) を抽象化するインターフェイスであり、非同期のリソースのリクエストを行うための `fetch()` メソッドで行います。 HTTP の主要部分が JavaScript オブジェクトとして抽象化されているため、他の API からそれらの機能を利用しやすくなっています。

サービスワーカーは、フェッチを多用する API の一例です。

フェッチはそれらのリクエストの非同期な性質をもう一歩先へ進めるものです。 API は完全に `Promise` ベースです。

ガード
---

ガードは `Headers` オブジェクトの機能で、ヘッダーが使用されている場所に応じて `immutable`, `request`, `request-no-cors`, `response`, `none` のいずれかの値を取ります。

新しい `Headers` オブジェクトが `Headers()` コンストラクターを使用してが生成されるとき、ガードは `none` （既定値）に設定されます。 `Request` または `Response` オブジェクトが生成された場合、関連づけられた `Headers` オブジェクトのガードは下記のとおり設定されます。

| 新しいオブジェクト型 | コンストラクター | 関連する `Headers` オブジェクトのガード設定 |
| --- | --- | --- |
| `Request` | `Request()` | `request` |
| `Request()` で `mode` に `no-cors` を設定したもの | `request-no-cors` |
| `Response` | `Response()` | `response` |
| `error()` または `redirect()` メソッド | `immutable` |

ヘッダーのガードは、ヘッダーの内容を変更する `set()`、 `delete()`、`append()` の各メソッドに影響します。 `Headers` のガードが `immutable` の場合、変更しようとすると `TypeError` が発生します。しかし、次の場合は動作します。

* ガードが `request` で、ヘッダーの *name* が禁止ヘッダー名 ではない場合。
* ガードが `request-no-cors` で、ヘッダーの *name*/*value* が単純ヘッダーである場合。
* ガードが `response` で、ヘッダーの *name* が禁止レスポンスヘッダー名ではない場合。
ReadableStreamDefaultController: close() メソッド
=============================================

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

リーダーは、以前にキューに入れられたチャンクをストリームから読み取ることができますが、それらを読み取とってしまうとストリームは閉じられます。 ストリームを完全に取り除き、キューに入れられたチャンクを破棄する場合は、`ReadableStream.cancel()` または `ReadableStreamDefaultReader.cancel()` を使用してください。

構文
--


```js
close()
```

### 引数

なし。

### 返値

なし (`undefined`)。

### 例外

`TypeError`

ソースオブジェクトは `ReadableStreamDefaultController` ではありません。

例
-

次の単純な例では、コンストラクターを使用してカスタムの `ReadableStream` を作成します（完全なコードについては、単純なランダムストリームの例を参照）。 `start()` 関数は、1 秒ごとにテキストのランダムな文字列を生成し、それをストリームのキューに入れます。 `ReadableStream.cancel()` が何らかの理由で呼び出された場合、生成を停止するための `cancel()` 関数も提供します。

ボタンが押されると、生成を停止し、`ReadableStreamDefaultController.close()` を使用してストリームを閉じ、ストリームからデータを読み取る別の関数を実行します。


```js
let interval;
const stream = new ReadableStream({
  start(controller) {
    interval = setInterval(() => {
      let string = randomChars();

      // ストリームに文字列を追加
      controller.enqueue(string);

      // それを画面に表示
      let listItem = document.createElement("li");
      listItem.textContent = string;
      list1.appendChild(listItem);
    }, 1000);

    button.addEventListener("click", () => {
      clearInterval(interval);
      fetchStream();
      controller.close();
    });
  },
  pull(controller) {
    // この例では実際には pull は必要ありません
  },
  cancel() {
    // リーダーがキャンセルされた場合に呼び出されるため、
    // 文字列の生成を停止する必要があります
    clearInterval(interval);
  },
});
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-rs-default-controller-close① |

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

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

関連情報
----

* 読み取り可能なストリームの使用
* `ReadableStreamDefaultController`
ReadableStreamDefaultController: enqueue() メソッド
===============================================

**`enqueue()`** は `ReadableStreamDefaultController` インターフェイスのメソッドで、受け取ったのチャンクを関連するストリームのキューに入れます。

構文
--


```js
enqueue(chunk)
```

### 引数

`chunk`

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

### 返値

なし (`undefined`)。

### 例外

`TypeError`

ソースオブジェクトが `ReadableStreamDefaultController` ではありません。

例
-

次の単純な例では、コンストラクターを使用してカスタムの `ReadableStream` を作成します（完全なコードについては、単純なランダムストリームの例を参照）。 `start()` 関数は、1 秒ごとにテキストのランダムな文字列を生成し、それをストリームのキューに入れます — `controller.enqueue(string)` を参照。 `ReadableStream.cancel()` が何らかの理由で呼び出された場合、生成を停止するための `cancel()` 関数も提供します。

ボタンが押されると、生成を停止し、`ReadableStreamDefaultController.close()` を使用してストリームを閉じ、ストリームからデータを読み取る別の関数を実行します。


```js
let interval;
const stream = new ReadableStream({
  start(controller) {
    interval = setInterval(() => {
      let string = randomChars();

      // ストリームに文字列を追加
      controller.enqueue(string);

      // それを画面に表示
      let listItem = document.createElement("li");
      listItem.textContent = string;
      list1.appendChild(listItem);
    }, 1000);

    button.addEventListener("click", () => {
      clearInterval(interval);
      fetchStream();
      controller.close();
    });
  },
  pull(controller) {
    // この例では実際には pull は必要ありません
  },
  cancel() {
    // リーダーがキャンセルされた場合に呼び出されるため、
    // 文字列の生成を停止する必要があります
    clearInterval(interval);
  },
});
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-rs-default-controller-enqueue① |

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

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

関連情報
----

* 読み取り可能なストリームの使用
* `ReadableStreamDefaultController`
ReadableStreamDefaultController: desiredSize プロパティ
==================================================

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

### 値

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

例
-

仕様にある基になるプッシュソースと背圧サポートのある読み取り可能なストリームの例は、`desiredSize` を使用してストリームがいっぱいになったことを手動で検出し、背圧を適用する良い例を示しています。 また、`ReadablestreamDefaultController.error()` を使用して、依存しているシステムの別の部分に障害が発生した場合に手動でストリームのエラーをトリガーします。

仕様書
---

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

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

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

関連情報
----

* 読み取り可能なストリームの使用
* `ReadableStreamDefaultController`
ReadableStreamDefaultController: error() メソッド
=============================================

**`error()`** は `ReadableStreamDefaultController` インターフェイスのメソッドで、関連づけられたストリームとの今後のやり取りをエラーにします。

**メモ:** `error()` メソッドは複数回呼び出すことができ、ストリームが読み取り可能でないときに呼び出すことができます。

構文
--


```js
error(e)
```

### 引数

`e`

今後のやり取りを失敗させるエラー。

### 返値

なし (`undefined`)。

### 例外

`TypeError`

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

例
-

仕様にある基になるプッシュソースと背圧サポートのある読み取り可能なストリームの例は、`ReadablestreamDefaultController.desiredSize` を使用してストリームがいっぱいになったことを手動で検出し、背圧を適用しています。 また、`error()` を使用して、依存しているシステムの別の部分に障害が発生した場合に手動でストリームのエラーをトリガーする良い例を示しています。

仕様書
---

| Specification |
| --- |
| Streams Standard # rs-default-controller-error |

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

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

関連情報
----

* 読み取り可能なストリームの使用
* `ReadableStreamDefaultController`
FormDataEvent: formData プロパティ
=============================

`formData` は `FormDataEvent` インターフェイスの読み取り専用プロパティで、このイベントが発行された時点のフォームに含まれていたデータを表す `FormData` オブジェクトが入っています。

### 返値

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

例
-


```js
// フォームの参照を取得

const formElem = document.querySelector("form");

// submit ハンドラー

formElem.addEventListener("submit", (e) => {
  // フォームの送信時、既定の動作を抑止
  e.preventDefault();

  // FormData オブジェクトを構築、これにより formdata イベントが発行
  new FormData(formElem);
});

// データを取得するための formdata ハンドラー

formElem.addEventListener("formdata", (e) => {
  console.log("formdata fired");

  // イベントオブジェクトからのフォームデータの取得
  let data = e.formData;
  for (const value of data.values()) {
    console.log(value);
  }

  // XHR を介してデータを送信
  const request = new XMLHttpRequest();
  request.open("POST", "/formHandler");
  request.send(data);
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # the-formdataevent-interface:dom-formdataevent-formdata-2 |

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

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

関連情報
----

* `XMLHTTPRequest`
* XMLHttpRequest の使用
* FormData オブジェクトの使用
* `<form>`
FormDataEvent: FormDataEvent() コンストラクター
=======================================

**`FormDataEvent()`** コンストラクターは、新しい `FormDataEvent` オブジェクトインスタンスを生成します。

構文
--


```js
new FormDataEvent(type, formEventInit)
```

### 引数

`type`

 文字列で、このイベントの名前を表します。
 大文字小文字を区別し、ブラウザーは常に `formdata` に設定します。


`options`

オブジェクトで、*`Event()` で定義されているプロパティに加え*、以下のプロパティを持つことができます。

`formData`

`FormDataEvent` に事前に入力する `FormData` オブジェクトです。
 これには、 `FormDataEvent.formData` プロパティを介してアクセスします。



### 返値

新しい `FormDataEvent` オブジェクトです。

例
-


```js
const fd = new FormData();
fd.append("test", "test");

const fdEv = new FormDataEvent("formdata", { formData: fd });

for (const value of fdEv.formData.values()) {
  console.log(value);
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # the-formdataevent-interface |

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

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

関連情報
----

* `FormDataEvent`
FontFaceSetLoadEvent: fontfaces プロパティ
=====================================

**`fontfaces`** は `FontFaceSetLoadEvent` インターフェイスの読み取り専用プロパティで、 `FontFace` インスタンスの配列を返します。

値
-

`FontFace` インスタンスの配列です。

仕様書
---

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfacesetloadevent-fontfaces |

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

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

**`FontFaceSetLoadEvent()`** コンストラクターは、 `FontFaceSetLoadEvent` オブジェクトを返します。これは `FontFaceSet` の読み込みのたびに発生します。

構文
--


```js
new FontFaceSetLoadEvent(type)
new FontFaceSetLoadEvent(type, options)
```

### 引数

`type`

 イベント名の文字列です。
 大文字と小文字が区別され、ブラウザーは常に `loading`、`loadingdone`、`loadingerror` のいずれかに設定します。


`options` 省略可

オブジェクトで、*`Event()` で定義されているプロパティに加え*、以下のプロパティを持つことができます。

`fontfaces` 省略可

`FontFace` の配列です。既定値は空配列です。


### 返値

新しい `FontFaceSetLoadEvent` オブジェクトです。

仕様書
---

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfacesetloadevent-fontfacesetloadevent |

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

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