recursal/MDN huggingface dataset:
XMLHttpRequestUpload: abort イベント
================================

`abort` は `XMLHttpRequestUpload` で発生するイベントで、例えばプログラムが `XMLHttpRequest.abort()` を呼び出したためにリクエストが中断されたときに発行されます。

構文
--

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


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

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

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

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

*親である `Event` からプロパティを継承しています。*

`ProgressEvent.lengthComputable` 読取専用 

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`ProgressEvent.loaded` 読取専用 

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`ProgressEvent.total` 読取専用 

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-

### `abort` イベントの使用

`abort` イベントを使用すると、アップロードが完了する前に停止させることができます。ファイルをアップロードして進捗バーを表示する完全なコード例については、メインの `XMLHttpRequestUpload` ページを参照してください。


```js
// 中止の場合、プログレスバーを非表示にする
// これらのイベントは xhr オブジェクトでも待ち受けすることができることに注意
function errorAction(event) {
  progressBar.classList.remove("visible");
  log.textContent = `Upload failed: ${event.type}`;
}
xhr.upload.addEventListener("abort", errorAction);
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-abort |
| XMLHttpRequest Standard # handler-xhr-onabort |

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

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

関連情報
----

* 関連イベント: `loadstart`, `load`, `progress`, `error`, `loadend`, `timeout`
* `XMLHttpRequestUpload`
XMLHttpRequestUpload: loadstart イベント
====================================

**`loadstart`** イベントは、リクエストがデータの読み込みを始めたときに発行されます。

構文
--

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


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

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

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

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

*親である `Event` からプロパティを継承しています。*

`lengthComputable` 読取専用 

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用 

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用 

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-

`loadstart` イベントの使用
-------------------

`loadstart` イベントを使用すると、アップロードの開始を検出することができます。ファイルをアップロードして進捗バーを表示する完全なコード例については、メインの `XMLHttpRequestUpload` ページを参照してください。


```js
// アップロードを開始する時に、進捗バーを表示する
xhr.upload.addEventListener("loadstart", (event) => {
  progressBar.classList.add("visible");
  progressBar.value = 0;
  progressBar.max = event.total;
  log.textContent = "Uploading (0%)…";
  abortButton.disabled = false;
});
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-loadstart |
| XMLHttpRequest Standard # handler-xhr-onloadstart |

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

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

関連情報
----

* 関連イベント: `load`, `progress`, `error`, `loadend`, `abort`, `timeout`
* `XMLHttpRequestUpload`
XMLHttpRequestUpload: error イベント
================================

`error` イベントは、リクエストがエラーになったときに発行されます。

構文
--

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


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

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

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

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

*親である `Event` からプロパティを継承しています。*

`lengthComputable` 読取専用 

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用 

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用 

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-

### `error` イベントの使用

`error` イベントを使用すると、アップロードの問題を検出することができます。ファイルをアップロードしてプログレスバーを表示する完全なコード例については、メインの `XMLHttpRequestUpload` ページを参照してください。


```js
// エラーの場合、プログレスバーを非表示にする
// これらのイベントは xhr オブジェクトでも待ち受けすることができることに注意
function errorAction(event) {
  progressBar.classList.remove("visible");
  log.textContent = `Upload failed: ${event.type}`;
}
xhr.upload.addEventListener("error", errorAction);
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-error |
| XMLHttpRequest Standard # handler-xhr-onerror |

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

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

関連情報
----

* 関連イベント: `loadstart`, `load`, `progress`, `abort`, `loadend`, `timeout`
* `XMLHttpRequestUpload`
XMLHttpRequestUpload: load イベント
===============================

`load` イベントは `XMLHttpRequestUpload` トランザクションが完全に完了したときに発行されます。

構文
--

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


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

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

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

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

*親である `Event` からプロパティを継承しています。*

`lengthComputable` 読取専用 

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用 

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用 

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

### 例

`load` イベントの使用
--------------

`load` イベントを使用すると、アップロードが正常に終了したことを検出することができます。ファイルをアップロードしてプログレスバーを表示する完全なコード例については、メインの `XMLHttpRequestUpload` ページを参照してください。


```js
// アップロードが完了したら、プログレスバーを非表示にする
xhr.upload.addEventListener("load", (event) => {
  progressBar.classList.remove("visible");
  log.textContent = "Upload finished.";
  abortButton.disabled = true;
});
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-load |
| XMLHttpRequest Standard # handler-xhr-onload |

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

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

関連情報
----

* 関連イベント: `loadstart`, `progress`, `error`, `loadend`, `abort`, `timeout`
* `XMLHttpRequestUpload`
XMLHttpRequestUpload: progress イベント
===================================

**`progress`** イベントはリクエストがより多くのデータを受信したときに定期的に発行されます。

構文
--

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


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

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

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

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

*親である `Event` からプロパティを継承しています。*

`lengthComputable` 読取専用 

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用 

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用 

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-

`progress` イベントの使用
------------------

`progress` イベントを使用することで、長時間のアップロードの進捗情報を取得することができます。ファイルをアップロードして進捗バーを表示する完全なコード例については、メインの `XMLHttpRequestUpload` ページを参照してください。


```js
// 進捗イベントを受信するたびに、進捗バーと進捗メッセージを更新
xhr.upload.addEventListener("progress", (event) => {
  progressBar.value = event.loaded; // 進捗バーを更新
  log.textContent = `Uploading (${((event.loaded / event.total) \* 100).toFixed(
 2,
 )}%)…`;
});
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-progress |
| XMLHttpRequest Standard # handler-xhr-onprogress |

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

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

関連情報
----

* 関連イベント: `loadstart`, `load`, `error`, `loadend`, `timeout`, `abort`
* 進捗の監視
* `XMLHttpRequestUpload`
XMLHttpRequestUpload: loadend イベント
==================================

**`loadend`** イベントは、リクエストが完全に完了したとき（`load` の後、または失敗したとき（`abort` の後）、または（`error` の後）に発行されます。

`loadend` イベントは、リクエストが中断されたとき（`timeout`、`abort`、`error`）にも送られます。このような場合、イベントの `loaded` と `total` の値はどちらも 0 になります。

構文
--

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


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

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

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

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

*親である `Event` からプロパティを継承しています。*

`lengthComputable` 読取専用 

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用 

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用 

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-

`loadend` イベントの使用
-----------------

`loadend` イベントを使用して、アップロードの終了（成功または失敗）を検出することができます。ファイルをアップロードして進捗バーを表示する完全なコード例については、メインの `XMLHttpRequestUpload` ページを参照してください。


```js
// アップロードが完了したら、進捗バーを非表示にする
xhr.upload.addEventListener("loadend", (event) => {
  progressBar.classList.remove("visible");
  if (event.loaded !== 0) {
    // 成功裏に完了
    log.textContent = "アップロードが完了しました。";
  }
  abortButton.disabled = true;
});
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-loadend |
| XMLHttpRequest Standard # handler-xhr-onloadend |

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

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

関連情報
----

* 関連イベント: `loadstart`, `progress`, `error`, `load`, `abort`, `timeout`
* `XMLHttpRequestUpload`
XMLHttpRequestUpload: timeout イベント
==================================

**`timeout`** イベントはあらかじめ設定された時間が過ぎて進行が終了したときに発行されます。

構文
--

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


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

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

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

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

*親である `Event` からプロパティを継承しています。*

`lengthComputable` 読取専用 

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用 

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用 

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-

### `timeout` イベントの使用

`timeout` イベントを使用することで、アップロードに時間がかかりすぎて停止したことを検出することができます。ファイルをアップロードして進捗バーを表示する完全なコード例については、メインの `XMLHttpRequestUpload` ページを参照してください。

タイムアウトは `XMLHttpRequest` オブジェクトで `XMLHttpRequest.timeout` プロパティを使用して設定します。


```js
// タイムアウトの場合、プログレスバーを非表示にする
// これらのイベントは xhr オブジェクトでも待ち受けすることができることに注意
function errorAction(event) {
  progressBar.classList.remove("visible");
  log.textContent = `Upload failed: ${event.type}`;
}
xhr.upload.addEventListener("timeout", errorAction);
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-timeout |
| XMLHttpRequest Standard # handler-xhr-ontimeout |

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

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

関連情報
----

* 関連イベント: `loadstart`, `load`, `progress`, `error`, `loadend`, `abort`
* `XMLHttpRequestUpload`
* `XMLHttpRequest.timeout`
AbsoluteOrientationSensor: AbsoluteOrientationSensor() コンストラクター
===============================================================

**`AbsoluteOrientationSensor()`** コンストラクターは、地球の参照用座標系に対するデバイスの物理的な向きを表す新しい `AbsoluteOrientationSensor` オブジェクトを生成します。

構文
--


```js
new AbsoluteOrientationSensor()
new AbsoluteOrientationSensor(options)
```

### 引数

`options` 省略可

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

`frequency`

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

`referenceFrame`

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


仕様書
---

| Specification |
| --- |
| Orientation Sensor # dom-absoluteorientationsensor-absoluteorientationsensor |

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

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

関連情報
----

* `reading` イベント
PannerNode.coneOuterAngle
=========================

`coneOuterAngle` は `PannerNode` インターフェイスのプロパティで、倍精度実数値で円錐の外側の体積を一定値だけ減少させる角度を、度単位で記述します。

`coneOuterAngle` プロパティの既定の値は `0` です。

値
-

倍精度浮動小数点数。

例
-

`PannerNode.orientationX` の例で、 `PannerNode` の向きの引数を `coneInnerAngle` と `coneOuterAngle` の組み合わせで変更した場合の音量への影響の例を示しています。

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-pannernode-coneouterangle |

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

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

関連情報
----

* ウェブオーディオ API の使用
* ウェブオーディオ空間化の基礎知識 (en-US)
PannerNode.coneInnerAngle
=========================

`coneInnerAngle` は `PannerNode` インターフェイスのプロパティで、倍精度実数値で音量が低減しない範囲を内側にもつ円錐体の角度を示します。

`coneInnerAngle` プロパティの既定の値は `360` で、無指向性の音源に適しています。

値
-

倍精度浮動小数点数。

例
-

`PannerNode.orientationX` の例で、 `PannerNode` の向きの引数を `coneInnerAngle` と `coneOuterAngle` の組み合わせで変更した場合の音量への影響の例を示しています。

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-pannernode-coneinnerangle |

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

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

関連情報
----

* ウェブオーディオ API の使用
* ウェブオーディオ空間化の基礎知識 (en-US)
CSSRuleList.item()
==================

**`item()`** は `CSSRuleList` インターフェイスのメソッドで、 `index` で指定された `CSSRule` オブジェクトを返します。指定された `index` が存在しなければ `null` を返します。

構文
--


```js
CSSRuleList.item(index);
```

### 引数

`index`

整数です。

### 返値

`CSSRule` です。

例
-

以下の例では、 `myRules` という名前の `CSSRuleList` の最初のアイテムをコンソールに出力します。


```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0]);
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssrulelist-item |

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

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

**`length`** は `CSSRuleList` インターフェイスのプロパティで、リスト内の `CSSRule` オブジェクトの数を返します。

構文
--


```js
let length = CSSRuleList.length;
```

### 値

整数です。

例
-

以下の例では、 `myRules` という名前の `CSSRuleList` にあるアイテムの数をコンソールに出力します。


```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules.length);
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssrulelist-length |

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

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

**`type`** は `Blob` オブジェクトのプロパティで、ファイルの MIME タイプを返します。

### 値

ファイルの MIME タイプを含む文字列、または型が特定できなかった場合は空文字列を指定します。

例
-

この例では、ユーザーにいくつかのファイルを選択してもらい、各ファイルが指定された画像ファイルタイプのセットのいずれかであるかどうかを確認します。

### HTML


```html
<input type="file" id="input" multiple />
<output id="output">画像ファイルを選択してください…</output>
```


```
output {
  display: block;
  margin-top: 16px;
}
```

### JavaScript


```js
// このアプリケーションは GIF, PNG, JPEG 画像のみを許可します
const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];

const input = document.getElementById("input");
const output = document.getElementById("output");

input.addEventListener("change", (event) => {
  const files = event.target.files;

  if (files.length === 0) {
    output.innerText = "画像ファイルを選択してください…";
    return;
  }

  const allAllowed = Array.from(files).every((file) =>
    allowedFileTypes.includes(file.type),
  );
  output.innerText = allAllowed
    ? "すべてのファイルが合格です!"
    : "画像ファイルのみを選択してください。";
});
```

### 結果

仕様書
---

| Specification |
| --- |
| File API # dfn-type |

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

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

関連情報
----

* `Blob`
* ウェブアプリケーションからのファイルの使用
Blob.stream()
=============

`Blob` インターフェイスの **`stream()`** メソッドは、`ReadableStream` を返します。これは、読み取り時に、`Blob` に含まれるデータを返します。

構文
--


```js
stream()
```

### 引数

なし。

### 返値

読み取り時に、`Blob` の内容を `ReadableStream` で返します。

使用上のメモ
------

`stream()` と返された `ReadableStream` を使用すると、いくつかの興味深い機能を得ることができます。

* 返されたストリーム上で`getReader()` を呼び出すと、 `ReadableStreamDefaultReader` インターフェイスの`read()` メソッドのようなメソッドを使用して、Blob からデータを読み取るために使用するオブジェクトを取得できます。
* 返されたストリームの `pipeTo()` メソッドを呼び出すと、Blob のデータを書き込み可能なストリームにパイプ接続します。
* 返されたストリームの `tee()` メソッドを呼び出すと、読み取り可能なストリームを**分岐**します。これは、2 つの新しい `ReadableStream` オブジェクトを含む配列を返し、それぞれが `Blob` の内容を返します。
* 返されたストリームの `pipeThrough()` メソッドを呼び出すと、ストリームを `TransformStream` またはその他の読み取り可能なもの、および書き込み可能ものの組にパイプ接続します。
仕様書
---

| Specification |
| --- |
| File API # dom-blob-stream |

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

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

関連情報
----

* `Response.body`
* ストリーム API
Blob.arrayBuffer()
==================

**`arrayBuffer()`** は `Blob` インターフェイスのメソッドで、 `ArrayBuffer` 内のバイナリーデータとした Blob の内容を解決する `Promise` を返します。

構文
--


```js
arrayBuffer()
```

### 引数

なし

### 返値

Blob のデータをバイナリー形式で含む `ArrayBuffer` で解決するプロミスです。

### 例外

このメソッドでは例外が発生しませんが、プロミスを拒否することがあります。例えば、Blob のデータを取得するために使用されたリーダーで例外が発生した場合などです。データの取得中に発生した例外はすべて拒否に変換されます。

使用上のメモ
------

`FileReader.readAsArrayBuffer()` メソッドに似ていますが、`arrayBuffer()` は、`FileReader` インターフェイスのメソッドのようにイベントベースの API ではなく、Promise を返します。

仕様書
---

| Specification |
| --- |
| File API # dom-blob-arraybuffer |

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

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

関連情報
----

* `Response.arrayBuffer()`
* ストリーム API
* `FileReader.readAsArrayBuffer()`
Blob()
======

**`Blob()`** コンストラクターは、新たな `Blob` オブジェクトを返します。その blob の中身は、引数 `array` で与えられた値を連結したものから構成されています。

構文
--


```js
new Blob(array)
new Blob(array, options)
```

### 引数

`array`

反復可能オブジェクト、例えば `Array` などです。その中身が `ArrayBuffer`、`TypedArray`、`DataView`、`Blob`、文字列などのオブジェクト、またはそのようなオブジェクトの何れかが混合したもので、それが `Blob` の中に入れられます。ここで文字列は UTF-8 で符号化されたものであり、 JavaScript におけるふつうの UTF-16 の文字列ではありません。

`options` 省略可

以下のいずれかのプロパティを指定することができるオブジェクトです。

`type` 省略可

blob に格納されるデータの MIME タイプです。既定値は空文字列 (`""`) です。

`endings` 省略可 
Non-standard

データがテキストの場合、コンテンツ内の改行文字 (`\n`) の解釈方法を示します。既定値は `transparent` であり、改行文字を変換することなく blob に格納します。改行文字をホストシステムの慣行に合わせるには、 `native` を指定してください。


### 返値

指定されたデータを含む `Blob` オブジェクトです。

例
-


```js
const array = ['<q id="a"><span id="b">hey!</span></q>']; // 単一の文字列からなる配列
const blob = new Blob(array, { type: "text/html" }); // blob
```

仕様書
---

| Specification |
| --- |
| File API # constructorBlob |

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

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

**`text()`** は `Blob` インターフェイスのメソッドで、 `Promise` を返しますが、それは Blob の内容を含む文字列で解決され、 UTF-8 として解釈されます。

構文
--


```js
text()
```

### 引数

なし。

### 返値

Blob のデータをテキスト文字列として含む文字列で解決するプロミス。データは*常に* UTF-8 形式であると推定されます。

使用上のメモ
------

`FileReader` の `readAsText()` メソッドは、同様の機能を実行する古いメソッドです。これは、`Blob` と `File` オブジェクトの両方で動作します。主な違いは 2 つあります。

* `Blob.text()` がプロミスを返すのに対し、 `FileReader.readAsText()` はイベントベースの API です
* `Blob.text()` は常にエンコーディングとして UTF-8 を使用しますが、`FileReader.readAsText()` は Blob の種類と指定されたエンコーディング名に応じて、異なるエンコーディングを使用することができます
仕様書
---

| Specification |
| --- |
| File API # dom-blob-text |

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

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

関連情報
----

* `Response.text()`
* ストリーム API
* `FileReader.readAsText()`
Blob.size
=========

`Blob` インターフェイスの **`size`** プロパティは、 `Blob` または `File` の大きさをバイト単位で返します。

### 値

`Blob` （または `Blob` ベースのオブジェクト、例えば `File`）内に含まれるデータのバイト数です。

例
-

この例では、 `<input>` 要素の `file` 型を使用して、ユーザーにファイルのグループを尋ね、それらのファイルを繰り返し処理して、その名前と長さをバイト単位で出力しています。

### HTML


```html
<input type="file" id="input" multiple />
<output id="output">ファイルを選択してください…</output>
```


```
output {
  display: block;
  margin-top: 16px;
}
```

### JavaScript


```js
const input = document.getElementById("input");
const output = document.getElementById("output");

input.addEventListener("change", (event) => {
  output.innerText = "";

  for (const file of event.target.files) {
    output.innerText += `${file.name} の大きさは ${file.size} バイトです。\n`;
  }
});
```

### 結果

仕様書
---

| Specification |
| --- |
| File API # dfn-size |

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

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

関連情報
----

* `Blob`
* ウェブアプリケーションからのファイルの使用
Blob.slice()
============

`Blob` インターフェイスの **`slice()`** メソッドは、呼び出された blob のサブセットのデータを含む新しい `Blob` オブジェクトを作成して返します。

構文
--


```js
slice()
slice(start)
slice(start, end)
slice(start, end, contentType)
```

### 引数

`start` 省略可

新しい `Blob` に入れる最初のバイトを示す `Blob` 内の位置です。負の値を指定すると、`Blob` の末尾から先頭へのオフセットとして扱われます。例えば、 -10 は `Blob` の最後のバイトから 10 番目になります。既定値は 0 です。`start` にもとの `Blob` のサイズよりも大きい値を指定すると、返される `Blob` のサイズは 0 で、データは何も含まれません。

`end` 省略可

新しい `Blob` に**含まれない**最初のバイトを示す `Blob` 内の位置です（つまり、ちょうどこの位置にあるバイトは含まれません）。負の値を指定すると、`Blob` の末尾から先頭へのオフセットとして扱われます。例えば、-10 は `Blob` の最後のバイトから 10 番目になります。既定値は `size` です。

`contentType` 省略可

新しい `Blob` に割り当てるコンテンツの型。これはその `type` プロパティの値になります。既定値は空文字列です。

### 返値

このメソッドが呼び出された Blob 内に含まれるデータの指定されたサブセットを含む新しい `Blob` オブジェクトです。元の Blob は変更されません。

仕様書
---

| Specification |
| --- |
| File API # dfn-slice |

ブラウザの実装状況
---------

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

関連情報
----

* `Blob`
* ウェブアプリケーションからのファイルの使用
BackgroundFetchRecord.responseReady
===================================

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

**`responseReady`** は、 `BackgroundFetchRecord` インターフェイスの読み取り専用プロパティで、 `Response` によって解決される `Promise` を返します。

値
-

`Response` によって解決される `Promise` 。

例
-

以下の例では、 `BackgroundFetchManager.fetch()` の使用によって生成された `BackgroundFetchRecord` から `responseReady` の値を受け取り、コンソールにログ出力しています。


```js
bgFetch.match("/ep-5.mp3").then(async (record) => {
  if (!record) {
    console.log("recordは見つかりませんでした");
    return;
  }

  const response = await record.responseReady;
  console.log(`応答：`, response);
});
```

仕様書
---

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchrecord-responseready |

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

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

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

**`request`** は `BackgroundFetchRecord` インターフェイスの読み取り専用プロパティで、フェッチするリソースの詳細を返します。

値
-

`Request` 。

例
-

以下の例では、 `BackgroundFetchManager.fetch()` の使用によって生成された `BackgroundFetchRecord` から `request` の値を受け取り、コンソールにログ出力しています。


```js
bgFetch.match("/ep-5.mp3").then(async (record) => {
  if (!record) {
    console.log("recordは見つかりませんでした");
    return;
  }

  console.log(`リクエスト：`, record.request);
});
```

仕様書
---

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchrecord-request |

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

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