TypeScript: BlobをDataURLに変換する6行の関数

こんにちは！今回は、TypeScriptでBlobオブジェクトをDataURLに変換するシンプルな関数を紹介します。この関数は、ファイルのアップロードや画像のプレビュー表示など、様々な場面で役立ちます。さっそくコードを見てみましょう。

const blobToDataUrl = (blob: Blob): Promise<string> =>
  new Promise((resolve, reject) => {
    const reader = new FileReader(); // (1)
    reader.onloadend = () => resolve(reader.result as string); // (2)
    reader.onerror = reject; // (3)
    reader.readAsDataURL(blob); // (4)
  });

この関数は、わずか6行ですが、その中に重要な処理が詰まっています。それぞれの行について解説していきましょう。

1. const reader = new FileReader();
FileReaderオブジェクトを生成します。これにより、Blobオブジェクトを読み込むことができます。詳細についてはMDNのFileReaderドキュメントを参照してください。
2. reader.onloadend = () => resolve(reader.result as string);
FileReaderのonloadendイベントハンドラに、結果を解決するコールバック関数を設定します。reader.resultはstring型にキャストされ、Promiseが解決されます。
3. reader.onerror = reject;
   エラーが発生した場合、onerrorイベントハンドラにreject関数を設定し、Promiseがリジェクトされます。
4. reader.readAsDataURL(blob);
   最後に、FileReaderのreadAsDataURLメソッドを使って、引数で渡されたBlobオブジェクトを読み込みます。これにより、データがDataURLとしてエンコードされ、onloadendイベントが発生します。

この関数を使用すれば、Blobオブジェクトを簡単にDataURLに変換することができます。この投稿が役に立てば幸いです。もし質問や懸念があれば、お気軽にコメントください。