recursal/MDN huggingface dataset:
BackgroundFetchRegistration.match()
===================================

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

`BackgroundFetchRegistration` インターフェイスの **`match()`** メソッドは、最初にマッチした `BackgroundFetchRecord` を返します。

構文
--


```js
match(request)
match(request, options)
```

### 引数

`request`

取得したい record の `Request`。これは `Request` オブジェクトまたは URL です。

`options` 省略可

`match` 操作のオプションを指定するオブジェクトです。以下が利用可能です。

`ignoreSearch`

URL 中のクエリ文字列を無視するかどうか指定するbool 値です。例えば `true` のとき、`http://foo.com/?value=bar` の `?value=bar` 部分はマッチ処理で無視されます。デフォルトは `false` です。

`ignoreMethod`

bool 値です。`true` のとき、マッチ処理は `Request` の `http` メソッドを検証しません。`false` (デフォルト値)の場合、`GET` と `HEAD` のみ許可されます。

`ignoreVary`

bool 値です。`true` は `VARY` ヘッダーを無視することを意味します。デフォルトは `false` です。


### 返値

最初に request にマッチした `BackgroundFetchRecord` か、または何もマッチしなかった場合には `undefined` で解決される `Promise` を返します。

**メモ:** `BackgroundFetchRegistration.match()` は、基本的には `BackgroundFetchRegistration.matchAll()` と同じですが、マッチする全ての record を配列で返すのではなく、最初にマッチした record のみで解決するという違いがあります。

### 例外

`InvalidStateError` `DOMException`

進行中の fetch がないときに `match()` を呼び出すと発生します。 この状態は、`BackgroundFetchRegistration.recordsAvailable` が `false` に設定されることで反映されます。

例
-

以下の例では URL に "/ep-5.mp3" を含む record を検索しており、`BackgroundFetchRecord` が見つかると、関連する情報を取得することができます。


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

  console.log(`リクエスト： `, record.request);
  const response = await record.responseReady;
  console.log(`応答： `, response);
});
```

仕様書
---

| Specification |
| --- |
| Background Fetch # background-fetch-registration-match |

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

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

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

**`downloadTotal`** は `BackgroundFetchRegistration` インターフェイスの読み取り専用プロパティで、このダウンロード全体の容量をバイト単位で返します。このプロパティはバックグラウンドフェッチの登録時に設定されます。値が設定されなかった場合、`0` を返します。

値
-

`number`。

例
-

このプロパティをコンソールにログ出力すると、ダウンロード全体の容量(バイト単位)が出力されます。


```js
console.log(bgFetch.downloadTotal);
```

仕様書
---

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchregistration-downloadtotal |

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

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

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

**`id`** は `BackgroundFetchRegistration` インターフェイスの読み取り専用プロパティで、バックグラウンドフェッチの `ID` をコピーした文字列を返します。

値
-

文字列。

例
-

このプロパティをコンソールにログ出力すると、 fetch を登録したときに設定された識別子が出力されます。今回の場合、`"my-fetch"` が出力されます。


```js
console.log(bgFetch.id); // "my-fetch"
```

仕様書
---

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchregistration-id |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ReadableStream: getReader() メソッド
================================

**`getReader()`** は `ReadableStream` インターフェイスのメソッドで、リーダーを作成し、それでストリームをロックします。
 ストリームがロックされている間は、このリーダーが解放されるまで他のリーダーを取得できません。

構文
--


```js
getReader()
getReader(options)
```

### 引数

`options` 省略可

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

`mode` 省略可

 作成するリーダーの種類を指定するプロパティです。
 値は以下の通り。


* `"byob"`: 読み取り可能なバイトストリーム（内部ストリームバッファが空のときに、基礎となるバイトソースからリーダーへのゼロコピー転送に対応しているストリーム）を読み取ることができる `ReadableStreamBYOBReader` を作成します。
* `undefined` （または指定しない場合、既定値）。 これにより、ストリームから個々のチャンクを読み取ることができる `ReadableStreamDefaultReader` が作成されます。


### 返値

`mode` 値に応じて、`ReadableStreamDefaultReader` または `ReadableStreamBYOBReader` オブジェクトのインスタンス。

### 例外

`RangeError`

指定された `mode` 値が `"byob"` または `undefined` ではありません。

`TypeError`

 リーダーを作成しようとしているストリームが `ReadableStream` ではありません。
 これは、 BYOB リーダーが要求されたときに、ストリームコントローラーが `ReadableByteStreamController` でない（ストリームが `type="bytes"` で基礎ソースとして構築されていない）場合にも発生します。


例
-

次の簡単な例では、`getReader()` を使用して作成した `ReadableStreamDefaultReader` を使用して、以前に作成した独自の `ReadableStream` を読み取ります（完全なコードについては、単純なランダムストリームの例を参照）。 各チャンクを順番に読み取り、ストリームの読み取りが完了するまで UI に出力します。 ストリームの読み取りが完了すると、再帰関数から戻り、ストリーム全体を UI の別の部分に出力します。


```js
function fetchStream() {
  const reader = stream.getReader();
  let charsReceived = 0;

  // read() は、値を受け取ったときに解決する promise を返します
  reader.read().then(function processText({ done, value }) {
    // 結果オブジェクトには2つのプロパティが含まれます。
    // done - ストリームがすべてのデータを既に提供している場合は true。
    // value - 一部のデータ。 done が true の場合、常に undefined。
    if (done) {
      console.log("Stream complete");
      para.textContent = value;
      return;
    }

    // フェッチしたストリームの値は Uint8Array です
    charsReceived += value.length;
    const chunk = value;
    let listItem = document.createElement("li");
    listItem.textContent = `Received ${charsReceived} characters so far. Current chunk = ${chunk}`;
    list2.appendChild(listItem);

    result += chunk;

    // さらに読み、この関数を再度呼び出します
    return reader.read().then(processText);
  });
}
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-rs-get-reader⑤ |

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

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

関連情報
----

* `ReadableStream()` コンストラクター
* `ReadableStreamDefaultReader`
* `ReadableStreamBYOBReader`
* 読み取り可能なストリームの使用
* 読み取り可能なバイトストリームの使用
ReadableStream: pipeTo() メソッド
=============================

**`pipeTo()`** は `ReadableStream` インターフェイスのメソッドで、現在の `ReadableStream` を与えられた `WritableStream` にパイプ接続します。返される `Promise` は、パイプのプロセスが正常に完了した場合は履行され、エラーが発生した場合は拒否されます。

ストリームをパイプ接続すると、通常、接続している間はストリームがロックされ、他のリーダーがロックできなくなります。

構文
--


```js
pipeTo(destination)
pipeTo(destination, options)
```

### 引数

`destination`

`ReadableStream` の最終的な宛先として機能する `WritableStream`。

`options` 省略可

`writable` ストリームにパイプ接続するときに使用するオプションです。
 利用できるオプションは以下の通りです。


`preventClose`

 これを `true` に設定すると、入力元の `ReadableStream` が閉じられても、出力先の `WritableStream` が閉じられることはなくなります。
 このメソッドは、この処理が完全に終了すると履行されるプロミスを返します。ただし、出力先を閉じる際にエラーが発生した場合は、そのエラーで拒否されます。


`preventAbort`

 この値を `true` に設定すると、入力元の `ReadableStream` でエラーが発生しても、出力先の `WritableStream` を中断させることがなくなります。
 このメソッドは、出力元のエラー、または出力先を中止する際に発生したエラーで拒否されるプロミスを返します。


`preventCancel`

 この値を `true` に設定すると、出力先の `WritableStream` でエラーが発生しても、入力元の `ReadableStream` を取り消すことができなくなります。
 この場合、メソッドは、入力元のエラー、または入力元を取り消す際に発生するエラーで拒否されるプロミスを返します。
 また、出力先の書き込み可能なストリームが閉じられたり開始されたりした場合、入力元の読み取り可能なストリームは取り消されなくなります。
 この場合、メソッドは、閉じられたストリームへのパイプ処理に失敗したことを示すエラー、または入力元を取り消す際に発生するエラーとともに、拒否されるプロミスを返します。


`signal`

`AbortSignal` オブジェクトを設定すると、進行中のパイプ操作が対応する `AbortController` から中止できます。


### 返値

パイプのプロセスが完了したときに解決する `Promise` です。

### 例外

`TypeError`

`writableStream` や `readableStream` オブジェクトは、書き込み可能なストリーム/読み取り可能なストリームではないか、ストリームの一方または両方がロックされています。

例
-


```js
// 元の画像を読み取る
fetch("png-logo.png")
  // その body を ReadableStream として取得
  .then((response) => response.body)
  .then((body) => body.pipeThrough(new PNGTransformStream()))
  .then((rs) => rs.pipeTo(new FinalDestinationStream()));
```


同じ例で `await` 使用すると次のようになります。


```js
(async () => {
  // 元の画像を読み取る
  const response = await fetch("png-logo.png");
  // その body を ReadableStream として取得
  response.body
    .pipeThrough(new PNGTransformStream())
    .pipeTo(new FinalDestinationStream());
})();
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-rs-pipe-to④ |

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

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

関連情報
----

* `ReadableStream()` コンストラクター
* パイプチェーン
ReadableStream: pipeThrough() メソッド
==================================

**`pipeThrough()`** は `ReadableStream` インターフェイスのメソッドで、変換ストリームまたはその他の書き込み可能/読み取り可能なペアを介して現在のストリームを接続する連鎖可能な方法を提供します。

ストリームを接続すると、通常、接続している間はストリームがロックされ、他のリーダーがロックできなくなります。

構文
--


```js
pipeThrough(transformStream)
pipeThrough(transformStream, options)
```

### 引数

`transformStream`

読み取り可能なストリームと書き込み可能なストリームで構成され、データをある形式から別の形式に変換する `TransformStream`（または構造 `{writable, readable}` のオブジェクト）。 書き込み可能なストリーム（`writable` stream）に書き込まれたデータは、読み取り可能なストリーム（`readable` stream）によって何らかの変換された状態で読み取ることができます。 例えば、`TextDecoder` ではバイトが書き込まれ、そこから文字列が読み取られ、動画デコーダーではエンコードされたバイトが書き込まれ、非圧縮動画フレームが読み取られます。

`options` 省略可

書き込み可能な (`writable`) ストリームに接続するときに使用するオプションです。利用可能なオプションは次の通りです。

`preventClose`

 これを `true` に設定すると入力元の `ReadableStream` を閉じても、出力先の `WritableStream` が閉じられることはなくなります。
 このメソッドは、出力先を閉じる際にエラーが発生しない限り、この処理が完全に終了すると、履行されたプロミスを返します。


`preventAbort`

 これを `true` に設定すると、入力元の `ReadableStream` でエラーが発生しても、出力先の `WritableStream` を中断させることができなくなります。
 このメソッドは、入力元のエラー、または出力先を停止させる際に発生したエラーを含むプロミスを返します。


`preventCancel`

 これを `true` に設定すると、出力先の `WritableStream` でエラーが発生しても、入力元の `ReadableStream` をキャンセルすることができなくなります。
 この場合、このメソッドは、入力元のエラー、または入力元を取り消す際に発生したエラーを含む拒否されたプロミス を返します。
 さらに、出力先の書き込み可能なストリームが閉じられたり開始された場合、入力元の読み取り可能なストリームは取り消されることはありません。
 この場合、このメソッドは、閉じられたストリームへの接続に失敗したことを示すエラー、または入力元を取り消す際に発生する任意のエラーと共に、拒否されたプロミスを返します。


`signal`

`AbortSignal` オブジェクトに設定されている場合、 進行中のパイプ操作は、対応する `AbortController` を介して中断することが可能です。


### 返値

`transformStream` の `readable` 側です。

### 例外

`TypeError`

`transformStream` の `writable` や `readable` プロパティが未定義です。

例
-

次の例（ライブ実行中の完全なコードについては PNG のチャンクをアンパック、ソースコードについては png-transform-stream を参照）では、画像が取得され、その本体が `ReadableStream` として取得されます。

次に、読み取り可能なストリームのコンテンツをログに記録し、`pipeThrough()` を使用して、グレースケールバージョンのストリームを作成する新しい関数に送信し、新しいストリームのコンテンツもログに記録します。


```js
// 元の画像を取得
fetch("png-logo.png")
  // その body を ReadableStream として取得
  .then((response) => response.body)
  .then((rs) => logReadableStream("Fetch Response Stream", rs))
  // 元の画像からグレースケール PNG ストリームを作成
  .then((body) => body.pipeThrough(new PNGTransformStream()))
  .then((rs) => logReadableStream("PNG Chunk Stream", rs));
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-rs-pipe-through② |

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

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

関連情報
----

* `ReadableStream()` コンストラクター
* パイプチェーン
ReadableStream: locked プロパティ
============================

**`locked`** は `ReadableStream` インターフェイスの読み取り専用プロパティで、読み取り可能なストリームがリーダーにロックされているかどうかを返します。

 読み取り可能なストリームは、一度に最大 1 つのアクティブなリーダーを持つことができ、それが解放されるまでそのリーダーにロックされます。
 リーダーは `ReadableStream.getReader()` を使用して取得し、リーダーの `releaseLock()` メソッドを使用して解放することができます。

値
-

論理値で、読み取り可能なストリームがロックされているかどうかを示します。

例
-


```js
const stream = new ReadableStream({
  // ...
});

const reader = stream.getReader();

stream.locked;
// ストリームがリーダーにロックされているため、true が返されるはずです
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-rs-locked② |

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

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

関連情報
----

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

**`cancel()`** は `ReadableStream` インターフェイスのメソッドで、ストリームがキャンセルされたときに解決する `Promise` を返します。

キャンセルは、ストリームを完全に終了し、読み取り待ちのチャンクがキューに入れられている場合でも、それ以上データを必要としない場合に使用します。 キャンセルが呼び出された後、そのデータは失われ、ストリームは読み取り不能になります。 これらのチャンクをまだ読み取り、ストリームを完全に取り除くわけではない場合は、 `ReadableStreamDefaultController.close()` を使用してください。

構文
--


```js
cancel()
cancel(reason)
```

### 引数

`reason` 省略可

人間が読むことができるキャンセルの理由を提供する文字列です。

### 返値

`Promise` です。 `reason` 引数で指定された値で履行されます。

### 例外

`TypeError`

キャンセルしようとしているストリームは `ReadableStream` ではないか、ロックされています。

例
-

Jake Archibald によるフェッチのキャンセルの例では、ストリームを使用して、チャンクごとに WHATWG HTML 仕様をフェッチします。 各チャンクで文字列 "service workers" を検索します。 検索用語が見つかると、`cancel()` を使用してストリームをキャンセルします — 仕事は終了しているため、ストリームは不要になります。


```js
const searchTerm = "service workers";
// 一致した結果の両側を表示する文字数
const contextBefore = 30;
const contextAfter = 30;
const caseInsensitive = true;
const url = "https://html.spec.whatwg.org/";

console.log(`'${searchTerm}' を '${url}' で検索`);

fetch(url)
  .then((response) => {
    console.log("ヘッダーを受信しました");

    const decoder = new TextDecoder();
    const reader = response.body.getReader();
    const toMatch = caseInsensitive ? searchTerm.toLowerCase() : searchTerm;
    const bufferSize = Math.max(toMatch.length - 1, contextBefore);

    let bytesReceived = 0;
    let buffer = "";
    let matchFoundAt = -1;

    return reader.read().then(function process(result) {
      if (result.done) {
        console.log("一致するものが見つかりませんでした");
        return;
      }

      bytesReceived += result.value.length;
      console.log(`これまでに ${bytesReceived} バイトのデータを受信しました`);

      buffer += decoder.decode(result.value, { stream: true });

      // 一致するものが既に見つかっており、コンテキストを収集していますか？
      if (matchFoundAt === -1) {
        matchFoundAt = (
          caseInsensitive ? buffer.toLowerCase() : buffer
        ).indexOf(toMatch);
      }

      if (matchFoundAt === -1) {
        buffer = buffer.slice(-bufferSize);
      } else if (
        buffer.slice(matchFoundAt + toMatch.length).length >= contextAfter
      ) {
        console.log("これが一致したものです:");
        console.log(
          buffer.slice(
            Math.max(0, matchFoundAt - contextBefore),
            matchFoundAt + toMatch.length + contextAfter,
          ),
        );
        console.log("フェッチのキャンセル");
        reader.cancel();
        return;
      } else {
        console.log("一致が見つかりましたが、さらにコンテキストが必要です…");
      }

      // 読み続ける
      return reader.read().then(process);
    });
  })
  .catch((err) => {
    console.error(
      "失敗しました。詳細については、開発者ツールを参照してください。 レスポンスから CORS ヘッダー抜けていませんか？",
    );
    throw err;
  });
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-rs-cancel③ |

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

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

関連情報
----

* `ReadableStream()` コンストラクター
* 読み取り可能なストリームの使用
ReadableStream: tee() メソッド
==========================

`ReadableStream` インターフェイスの **`tee()`** メソッドは、現在の読み取り可能なストリームを分配し、結果の 2 つの分岐を新しい `ReadableStream` インスタンスとして含む 2 つの要素の配列を返します。

これは、2 つのリーダーがストリームを同時に、おそらく異なる速度で読み取ることができるようにする場合に便利です。 例えば、サーバーからレスポンスを取得してブラウザーにストリーム入力したいが、サービスワーカーのキャッシュにもストリーム入力したい場合は、サービスワーカーでこれを行うことができます。レスポンスの本体を複数回使用することはできないため、これを行うには 2 つのコピーが必要です。

 分配したストリームは、 2 つの `ReadableStream` の分岐のうち、消費速度の速い方の速度で部分的に背圧の信号を出し、未読データは、制限や背圧なしに消費速度の遅い方の `ReadableStream` に内部で待ち行列に入れられます。
 つまり、両方の分岐の内部キューに未読の要素がある場合、元の `ReadableStream` のコントローラの内部キューが埋まり始め、その `desiredSize` ≤ 0 またはバイトストリームのコントローラーの `desiredSize` ≤ 0 になると、コントローラーは `pull(controller)` を呼び出すのを、新しい `new ReadableStream()` に渡された元の入力に対して停止します。一方の分岐のみが消費される場合、本文全体がメモリー上の待ち行列に入れられます。したがって、非常に大きなストリームを並列に異なる速度で読み込むために、組み込みの `tee()` を使用するべきではありません。その代わり、消費速度の遅い方の分岐の速度に完全に背圧するような実装を探しましょう。

ストリームを取り消すには、結果の分岐をどちらも取り消す必要があります。ストリームを分配すると、一般に、その間はそのストリームがロックされ、他のリーダーがロックするのを防ぎます。

構文
--


```js
tee()
```

### 引数

なし。

### 返値

2 つの `ReadableStream` インスタンスを含む `Array`。

### 例外

TypeError

ソースストリームは `ReadableStream` ではありません。

例
-

次の簡単な例では、以前に作成したストリームをティーイングした結果の両方のストリーム（生成された配列の 2 つのメンバーに含まれる）を、2 つのストリームからデータを読み取り、各ストリームのチャンクを UI の異なる部分に順番に印刷する関数に渡します。 完全なコードについては、単純な tee の例を参照してください。


```js
function teeStream() {
  const teedOff = stream.tee();
  fetchStream(teedOff[0], list2);
  fetchStream(teedOff[1], list3);
}

function fetchStream(stream, list) {
  const reader = stream.getReader();
  let charsReceived = 0;

  // read() は、値を受け取ったときに解決するプロミスを返します
  reader.read().then(function processText({ done, value }) {
    // 結果オブジェクトには 2 つのプロパティが含まれます。
    // done - ストリームがすべてのデータを既に提供している場合は true。
    // value - 一部のデータ。 done が true の場合、常に undefined。
    if (done) {
      console.log("Stream complete");
      return;
    }

    // フェッチしたストリームの値は Uint8Array です
    charsReceived += value.length;
    const chunk = value;
    let listItem = document.createElement("li");
    listItem.textContent = `Read ${charsReceived} characters so far. Current chunk = ${chunk}`;
    list.appendChild(listItem);

    // さらに読み、この関数を再度呼び出します
    return reader.read().then(processText);
  });
}
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-rs-tee② |

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

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

関連情報
----

* `ReadableStream()` コンストラクター
* ストリームの分岐
ReadableStream: from() 静的メソッド
=============================

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

**`ReadableStream.from()`** は静的メソッドで、指定された反復可能または非同期反復可能オブジェクトから `ReadableStream` を返します。

このメソッドは、配列、設定、プロミスの配列、非同期ジェネレーター、`ReadableStreams`、Node.js の `readable` ストリームなど、反復可能オブジェクトや非同期反復可能オブジェクトを読み取り可能なストリームとしてラップするために使用することができます。

構文
--


```js
ReadableStream.from(anyIterable)
```

### 引数

`anyIterable`

反復可能または非同期反復可能オブジェクトです。

### 返値

`ReadableStream` です。

### 例外

`TypeError`

 渡された引数が反復可能オブジェクトまたは非同期反復可能オブジェクトではない（`@@iterator` または `@@asyncIterator` メソッドを定義していない）場合に発生します。
 また、反復処理中に、次の反復処理の結果がオブジェクトでない場合、またはオブジェクトに解決されないプロミスである場合にも発生します。


例
-

### 非同期イテレーターを ReadableStream に変換

このライブ例では、非同期イテレーターを `ReadableStream` に変換し、このストリームをどのように使用するかを示します。

#### HTML

HTMLはログ出力に用いる単一の要素 `<pre>` で構成されています。


```html
<pre id="log"></pre>
```


#### JavaScript

例えば、このコードでは `log()` 関数を作成してログ HTML 要素に出力しています。


```js
const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText += `${text}\n`;
}
```


そして、静的メソッドが対応しているかどうかを調べ、対応していない場合はその結果をログ出力します。


```js
if (!ReadableStream.from) {
  log("ReadableStream.from() is not supported");
}
```


 非同期反復可能オブジェクトは、 3 回呼び出されると 1、2、3 の値を返す匿名ジェネレーター関数です。
 これを `ReadableStream.from()` に渡して `ReadableStream` を作成します。


```js
// 非同期イテレーターを定義
const asyncIterator = (async function\* () {
  yield 1;
  yield 2;
  yield 3;
})();

// ReadableStream をイテレーターから作成
const myReadableStream = ReadableStream.from(asyncIterator);
```


読み取り可能なストリームの使用では、ストリームを利用する何通りかの方法を示しています。
 以下のコードは `for ...await` ループを使用しています。このメソッドは最もシンプルだからです。
 ループのそれぞれの反復処理は、ストリームから現在のチャンクをログ出力します。


```js
consumeStream(myReadableStream);

// Iterate a ReadableStream asynchronously
async function consumeStream(readableStream) {
  for await (const chunk of myReadableStream) {
    // Do something with each chunk
    // Here we just log the values
    log(`chunk: ${chunk}`);
  }
}
```


#### 結果

ストリームを消費したときの出力は下記のように表示されます（`ReadableStream.from()` に対応している場合）。

### 配列から ReadableStream への変換

この例は `Array` を `ReadableStream` に変換する方法を示しています。
```

<pre id="log"></pre>
```


```
const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText += `${text}\n`;
}

if (!ReadableStream.from) {
  log("ReadableStream.from() is not supported");
}
```


#### JavaScript

反復可能オブジェクトは単なる文字列の配列で、 `ReadableStream.from()` に渡して `ReadableStream` を作成します。


```js
// 野菜の名前の配列
const vegetables = ["Carrot", "Broccoli", "Tomato", "Spinach"];

// 配列から ReadableStream を作成
const myReadableStream = ReadableStream.from(vegetables);
```


```
consumeStream(myReadableStream);

// ReadableStream を非同期に反復処理
async function consumeStream(readableStream) {
  for await (const chunk of myReadableStream) {
    // チャンクごとに何かをする
    // ここでは値をログ出力するだけ
    log(`chunk: ${chunk}`);
  }
}
```


前回の例のログ出力とストリームの利用と同じ手法を使用しているので、ここでは表示させません。

#### 結果

出力結果は次の通りです。

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-rs-from |

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

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

関連情報
----

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

**`acceleration`** プロパティは、端末によって記録された加速度の量をメートル毎秒毎秒 (m/s²)単位で返します。
 `DeviceMotionEvent.accelerationIncludingGravity` とは異なり、加速度値は重力の影響を含みません。

**メモ:** ハードウェアが加速度データから重力を除去する方法を知らない場合、`DeviceMotionEvent` にこの値が存在しないことがあります。この場合、代わりに `DeviceMotionEvent.accelerationIncludingGravity` を使用する必要があります。

値
-

`acceleration` プロパティは 3 軸の加速度に関する情報を提供するオブジェクトです。それぞれの軸は自分自身でプロパティを使って表します。

`x`

西から東へ向かう軸である X 軸の加速度を表します。

`y`

南から北へ向かう軸である Y 軸の加速度を表します。

`z`

下から上へ向かう軸である Z 軸の加速度を表します。

仕様書
---

| Specification |
| --- |
| DeviceOrientation Event Specification # ref-for-dom-devicemotionevent-acceleration③ |

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

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

関連情報
----

* `DeviceMotionEvent.accelerationIncludingGravity`
* `devicemotion` イベント
* `deviceorientation` イベント
* `DeviceOrientationEvent`
* `LinearAccelerationSensor`
* 端末の方向の検出
* 方向および動きとして示されるデータ
DeviceMotionEvent: DeviceMotionEvent() コンストラクター
===============================================

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

構文
--


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

### 引数

`type`

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


`options` 省略可

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

`acceleration`

`DeviceMotionEventAcceleration` オブジェクトで、端末の加速度を X、Y、Z の 3 軸で表します。
 加速度は m/s² で表されます。


`accelerationIncludingGravity`

`DeviceMotionEventAcceleration` オブジェクトで、端末の加速度を X、Y、Z の 3 軸と、重力の影響で表します。
 加速度は m/s² で表されます。


`rotationRate`

`DeviceMotionEventRotationRate` オブジェクトで、端末の向きの変化率をアルファ、ベータ、ガンマの 3 方向の軸で表します。
 回転率は秒あたりの角度で表されます。


`interval` 省略可

端末からデータを取得する時間間隔をミリ秒単位で表します。既定値では `0` です。


### 返値

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

仕様書
---

| Specification |
| --- |
| DeviceOrientation Event Specification # dom-devicemotionevent-devicemotionevent |

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

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

**`accelerationIncludingGravity`** プロパティは、端末が記録した加速度をメートル毎秒毎秒 (m/s²)単位で返します。重力の影響を補正する `DeviceMotionEvent.acceleration` とは異なり、この値はユーザーによって発生させられた端末の加速度と、重力によって発生させられた加速度に反対の加速度の合計値です。言い換えれば、これは g-force を測定します。実際には、この値は加速度計によって測定された生データを表します。

この値は `DeviceMotionEvent.acceleration` ほど有益な値ではありません。しかし、ジャイロスコープを持たない端末など、加速度データから重力を解除できない端末では、この値しか利用できない場合があります。

**メモ:** `accelerationIncludingGravity` の名前は誤解を招く可能性があります。このプロパティは重力の影響を含めるために加速度を表します。例えば、機器が水平な画面に横たわり、画面が上向きになっている場合、重力は Z 軸に沿って -9.8 となり、`acceleration.z` は 0、`accelerationIncludingGravity.z` は 9.8 となります。同様に、機器が水平で画面を上に向けて自由落下している場合、重力は Z 軸に沿って -9.8 となり、`acceleration.z` は -9.8、`accelerationIncludingGravity.z` は 0 となります。

値
-

`accelerationIncludingGravity` プロパティは、3 軸の加速度に関する情報を指定されたオブジェクトです。それぞれの軸は、自分自身でプロパティを使って表します。

`x`

西から東へ向かう軸である X 軸の加速度を表します。

`y`

南から北へ向かう軸である Y 軸の加速度を表します。

`z`

下から上へ向かう軸である Z 軸の加速度を表します。

仕様書
---

| Specification |
| --- |
| DeviceOrientation Event Specification # ref-for-dom-devicemotionevent-accelerationincludinggravity④ |

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

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

関連情報
----

* `DeviceMotionEvent.acceleration`
* `devicemotion` イベント
* `deviceorientation` イベント
* `DeviceOrientationEvent`
* `Accelerometer`
* 端末の方向の検出
* 方向および動きとして示されるデータ
DeviceMotionEvent: interval プロパティ
=================================

**`DeviceMotionEvent.interval`** プロパティは、基盤となるハードウェアからデータを取得する間隔をミリ秒単位で返します。これを使用して、モーションイベントの粒度を決定することができます。

値
-

時間間隔をミリ秒で表します。

仕様書
---

| Specification |
| --- |
| DeviceOrientation Event Specification # ref-for-dom-devicemotionevent-interval① |

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

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

関連情報
----

* `DeviceMotionEvent`
* `devicemotion` イベント
* `deviceorientation` イベント
* `DeviceOrientationEvent`
* 端末の方向の検出
* 方向および動きとして示されるデータ