[JavaScript] ReadableStream とその他の型の相互変換

ReadableStream とその他の型の間で変換を行いたいとき、Blob や Response を利用することで簡単にできる場合があります。

1. ReadableStream への変換

Blob は Blob.prototype.stream メソッドを使用することで ReadableStream へ変換できます。

文字列や ArrayBuffer、TypedArray (Uint8Array 等) は Blob を経由して ReadableStream へ変換できます。

Blob を使う方法

// Blob -> ReadableStream
const readableStream = blob.stream();

// 文字列 -> Blob -> ReadableStream
const readableStream = new Blob([string]).stream();

// ArrayBuffer -> Blob -> ReadableStream
const readableStream = new Blob([arrayBuffer]).stream();

// TypedArray -> Blob -> ReadableStream
const readableStream = new Blob([typedArray]).stream();

参考「Blob - Web API | MDN」
参考「Blob() - Web API | MDN」
参考「Blob.stream() - Web API | MDN」

Response は Response.prototype.body プロパティにアクセスすることで ReadableStream を得られます。

文字列や ArrayBuffer、TypedArray (Uint8Array 等) は Response を経由して ReadableStream へ変換できます。

Response を使う方法

// Response -> ReadableStream
const readableStream = response.body;

// 文字列 -> Response -> ReadableStream
const readableStream = new Response(string).body;

// ArrayBuffer -> Response -> ReadableStream
const readableStream = new Response(arrayBuffer).body;

// TypedArray -> Response -> ReadableStream
const readableStream = new Response(typedArray).body;

参考「Response() - Web API | MDN」
参考「Response.body - Web API | MDN」

2. ReadableStream からの変換

Response はコンストラクタに ReadableStream を渡すことでインスタンス化することができます。

文字列や ArrayBuffer、Blob は Response を経由して ReadableStream から変換できます。

Response を使う方法

// ReadableStream -> Response
const response = new Response(readableStream);

// ReadableStream -> Response -> 文字列
const string = await new Response(readableStream).text();

// ReadableStream -> Response -> ArrayBuffer
const arrayBuffer = await new Response(readableStream).arrayBuffer();

// ReadableStream -> Response -> Blob
const blob = await new Response(readableStream).blob();

参考「Response - Web API | MDN」
参考「Response() - Web API | MDN」

TypedArray (Uint8Array 等) は ArrayBuffer から TypedArray コンストラクタを用いてインスタンス化して下さい。

ArrayBuffer から TypedArray に変換する例

// ArrayBuffer -> Uint8Array
const uint8Array = new Uint8Array(arrayBuffer);

参考「コンストラクター - TypedArray - JavaScript | MDN」