【JavaScript入門】Blobの使い方とダウンロード・保存方法まとめ！

こんにちは、ライターのマサトです！

今回は、JavaScriptでバイナリデータを扱えるようにしてくれるBlobについて学習をしていきましょう。また、File APIと組み合わせることでブラウザ上でファイルをダウンロードすることも可能になるので便利です。

この記事では、

などの基本的な内容から、応用的な使い方に関しても解説していきます。この記事で、Blobをしっかり学習して自分のスキルアップを目指しましょう！

「Blob」とは？

それでは、まず最初に「Blob」の基本的な知識から学習を進めていきましょう。「Blob」は一般的なバイナリデータをJavaScriptで扱えるようにしたり、新しく生成することができます。

バイナリデータを簡単に説明すると「0」と「1」で表現される2進数だけでテキストや画像などをデータ化したものになります。また、Blobを拡張してブラウザ上からファイルを読み込んだりダウンロードするFile APIも一緒によく使われます。

本記事では、Blobの基本から実際の活用法を学べるように構成しているのでぜひ参考にしてみてください！

「Blob」の使い方

この章では、「Blob」の基本的な使い方について見ていきいましょう。一般的な構文から実際のプログラミング手法について学んでいきます。

Blobの構文と書き方について

まずは、基本的な構文から見ていきましょう。新規にBlobオブジェクトを生成するには、データとそのタイプを引数に設定してインスタンスを作ります。

const blob = new Blob(データ, ファイルタイプ);

「データ」には、テキストやCSV、XMLデータなどを配列で設定します。「ファイルタイプ」は設定した「データ」がどのようなタイプなのかを明示的に指定します。例えば、テキストであれば「text/plain」になり、XMLであれば「text/xml」のように記述するわけです。

テキストデータのBlobを作る方法

次に、実際のプログラミング例を見てみましょう！サンプル例として、任意のテキストデータをBlobオブジェクトに設定するには次のように記述します。

const str = 'テキストテキストテキストテキストテキスト';

const blob = new Blob([str], {type: 'text/plain'});
  
console.log(blob.size);
console.log(blob.type);

実行結果

60
text/plain

この例では、特定のテキストデータをBlobに指定するのでタイプは「text/plain」となります。また、Blobのインスタンスは「size」「type」というプロパティを持ちます。

「size」はデータのバイトサイズのことで、「type」は指定したファイルタイプになるのが実行結果からも分かりますね。

「Blob」の活用

この章では、「Blob」をさらに便利に活用する方法について見ていきましょう。主に、File APIを利用した読み込み方法やBlobデータのダウンロードについて学んでいきます。

FileReaderを使ってBlobデータを読み込む方法

まずは、File APIの1つである「FileReader」の活用について見ていきましょう！

「FileReader」を活用するとBlobデータをJavaScriptから読み込むことができるようになります。例えば、適当な文字列のBlobデータを用意します。

const str = 'こんにちは、今日は良い天気ですね！';
const blob = new Blob([str], {type: 'text/plain'});

このBlobデータを読み込むには、FileReaderのインスタンスを作成し「readAsText()」を実行します。

const reader = new FileReader();

reader.onload = function(){

    console.log(reader.result);

};

reader.readAsText(blob);

実行結果

こんにちは、今日は良い天気ですね！

インスタンスを作成したあとの「reader.onload」に注目してください。このように記述することで、Blobデータが読み込まれたあとに処理を実行することができます。

読み込み処理は「readAsText()」の引数にBlobデータを設定するだけなので簡単ですね。

Blobデータをダウンロードする方法

今度は、Blobデータをダウンロードする方法について見ていきましょう！ブラウザ上でダウンロードを行う処理を実現するには、「aタグ」に「download」属性を記述するのが簡単です。

ダウンロード

download属性にはダウンロードする「ファイル名」を記述しておきましょう。ポイントは「href」属性を記述していない点です。このhref属性にBlobデータを表すURLを指定することでダウンロードが可能になるのです。

そして、そのURLを生成するには「createObjectURL()」を次のように実行します。

const a = document.getElementById('download');

a.href = window.URL.createObjectURL(blob);

aタグを取得して、そのhref属性へBlobデータのURLを指定していますね。

「createObjectURL()」の引数に生成したBlobのインスタンスを設定するのを忘れないようにしましょう！

Canvas画像をBlobでダウンロード保存

Canvas上に描かれた画像も「Blobデータ」としてダウンロードすることが可能なので合わせてご紹介しておきます。基本的な方法は前章とよく似ていますが、Canvasで提供されている「toBlob()」を利用するのが特徴です。

まずは、ダウンロード用のa要素とCanvasを次のように用意します。

ダウンロード

download属性には実際のファイル名を設定し、任意のサイズのCanvasを配置しておきます。（CanvasのサイズはJavaScript側で設定しても構いません）

次に、JavaScript側でCanvasの初期設定とa要素の取得を行います。

const canvas = document.getElementById("imgArea");
const ctx = canvas.getContext("2d");
const a = document.getElementById('download');

Canvasの処理として、今回は単純な四角形を描画してそれをBlobデータとして取得してみましょう！

ctx.fillStyle = "#fff";
ctx.fillRect(50, 50, 100, 100);
canvas.toBlob(function(blob) {

    a.href = window.URL.createObjectURL(blob);

})

この例では、「fillRect()」を使って白色の四角形を描画しているのが分かりますね。そして、「toBlob()」を使って引数に関数を設定しています。このように記述するだけでCanvas上に描かれた画像がBlobデータとして取得できます。

あとは、a要素のhref属性へ「createObjectURL()」で生成したURLを指定すればダウンロードして保存ができるというわけです。

「Blob」と「Base64」の変換

この章では、「Base64」形式のデータについて見ていきましょう。主に、「Blob」形式への変換やその逆を行う手法について学んでいきます。

「Blob」の文字列を「Base64」に変換する方法

まずは、「Blob」データを「Base64」形式に変換する方法から見ていきましょう。そこで、これまで学んだ方法を使って単純な文字列を「Blob」データにしてみます。

const str = 'Hello World';
const blob = new Blob([str], {type: 'text/plain'});

そして、この「Blob」データを読み込むには「Filereader」の「readAsText()」を実行しましたよね？

しかし、「Base64」形式のデータとして取得したい場合は「readAsDataURL()」を次のように使います！

const reader = new FileReader();
 
reader.onload = function(){

    const b64 = reader.result;
    console.log(b64);

}
  
reader.readAsDataURL(blob);

実行結果

data:text/plain;base64,SGVsbG8gV29ybGQ=

最下行の「readAsDataURL()」に注目してください。引数にBlobデータを指定することで、Base64データとして取得できるのが実行結果を見ても分かりますね。

「Base64」の文字列を「Blob」に変換する方法

今度は逆に「Base64」データをデコードしてみましょう。これを実現するには、Windowオブジェクトのメソッドである「atob()」を利用します。次のサンプル例を見てください！

const result = window.atob(b64.replace(/^.*,/, ''));

console.log(result);

実行結果

Hello World

この例では、「atob()」の引数にBase64のデータを設定しています。

ただし、データのなかで「data:text/plain;base64,」の部分は不要なのでreplace()を使って空文字に置換しているわけです。実行結果を見ると元の文字列にデコード（復元）されているのが分かりますね？

この結果を再利用して「new Blob()」の引数に当てはめれば、またBlobデータに変換することも可能というわけです！

まとめ

今回は、JavaScriptからBlobデータを扱うことができる「Blob」について学習をしました。最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！