このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
ReadableStream: from() 静的メソッド
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
Want more support for this feature? Tell us why.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
ReadableStream.from() は静的メソッドで、指定された反復可能または非同期反復可能オブジェクトから ReadableStream を返します。
このメソッドは、配列、設定、プロミスの配列、非同期ジェネレーター、ReadableStreams、Node.js の readable ストリームなど、反復可能オブジェクトや非同期反復可能オブジェクトを読み取り可能なストリームとしてラップするために使用することができます。
構文
ReadableStream.from(anyIterable)
引数
返値
ReadableStream です。
例外
TypeError-
渡された引数が反復可能オブジェクトまたは非同期反復可能オブジェクトではない(
@@iteratorまたは@@asyncIteratorメソッドを定義していない)場合に発生します。 また、反復処理中に、次の反復処理の結果がオブジェクトでない場合、またはオブジェクトに解決されないプロミスである場合にも発生します。
例
非同期イテレーターを ReadableStream に変換
このライブ例では、非同期イテレーターを ReadableStream に変換し、このストリームをどのように使用するかを示します。
HTML
HTMLはログ出力に用いる単一の要素 <pre> で構成されています。
<pre id="log"></pre>
JavaScript
例えば、このコードでは log() 関数を作成してログ HTML 要素に出力しています。
const logElement = document.getElementById("log");
function log(text) {
logElement.innerText += `${text}\n`;
}
そして、静的メソッドが対応しているかどうかを調べ、対応していない場合はその結果をログ出力します。
if (!ReadableStream.from) {
log("ReadableStream.from() is not supported");
}
非同期反復可能オブジェクトは、 3 回呼び出されると 1、2、3 の値を返す匿名ジェネレーター関数です。
これを ReadableStream.from() に渡して ReadableStream を作成します。
// 非同期イテレーターを定義
const asyncIterator = (async function* () {
yield 1;
yield 2;
yield 3;
})();
// ReadableStream をイテレーターから作成
const myReadableStream = ReadableStream.from(asyncIterator);
読み取り可能なストリームの使用では、ストリームを利用する何通りかの方法を示しています。
以下のコードは for ...await ループを使用しています。このメソッドは最もシンプルだからです。
ループのそれぞれの反復処理は、ストリームから現在のチャンクをログ出力します。
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 を作成します。
// 野菜の名前の配列
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}`);
}
}
前回の例のログ出力とストリームの利用と同じ手法を使用しているので、ここでは表示させません。
結果
出力結果は次の通りです。
仕様書
| 仕様書 |
|---|
| Streams # rs-from |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。