JavaScriptでは、バイナリデータを扱えるオブジェクトの1つに Blobオブジェクトが存在します。
様々な形式のデータを扱う過程で活用されている、主要なオブジェクトの1つです。
今回は、JavaScriptで Blobを扱う方法について解説していきたいと思います。
Blobとは？
Blobとは、JavaScriptで使用可能な Web APIインターフェイス（オブジェクト型）の一種です。
正式にはBinary Large Objectの略称で、テキストや画像、音声ファイルなどといったような、様々なタイプのデータを扱うために使用します。
Blobオブジェクトが保持するデータは、イミュータブル（不変）なバイナリデータとして扱われるため、後から直接内容を変更することができない特徴を持ちます。
そのため、Blobを使用してデータを管理することによって、誤ったデータ改変や破損のリスクを減らすことができるメリットがあります。
ファイルのアップロードやダウンロード、画像や動画のプレビュー機能など、様々なケースで活用されています。
Blobの使い方
Blobの具体的な使い方について、順に解説していきます。
基本構文
まずは、基本構文から見ていきましょう。
Blobオブジェクトを新たに生成する場合は、以下の構文でインスタンスを作成します。
const blob = new Blob(データ, メディアタイプ);Blobコンストラクタの第1引数には、Blobで保持するデータを要素に含む配列を指定します。
第2引数には、データの種類を示すメディアタイプ（MIMEタイプ）を任意で指定できます。
メディアタイプの種類には、例えば以下のようなものがあります。
- テキストデータ … text/plain (.txt, .text)、 text/html (.htm, .html)
- 画像データ … image/png (.png)、 image/jpeg (.jpg, .jpeg)、image/webp (.webp)
- JSONデータ … application/json (.json)
- PDFファイル … application/pdf (.pdf)
任意のテキストデータをBlobオブジェクトに変換する
Blob の実際の使い方について、簡単な例を元に確認してみましょう。
以下のサンプルコードでは、テキストデータを Blobオブジェクトに変換しています。
const blob = new Blob(['Hello world!'], {type:'text/plain'});
console.log(blob);Blob {size: 12, type: 'text/plain'}Blobオブジェクトのプロパティは、size と type の２つがあります。
sizeプロパティはデータサイズ（バイト単位）、typeプロパティはインスタンス生成時に指定したMIMEタイプを確認することができます。
Blobの活用法
続いては、Blobオブジェクトの様々な活用法について紹介します。
FileReaderでBlobのデータを読み込む
Blobオブジェクトが保持するデータを読み込む際は、FileReaderオブジェクトを使用します。
FileReaderオブジェクトには、Blobオブジェクトのデータを読み込むための様々なメソッドが用意されています。
例えば、テキストデータを読み込みたい場合には、readAsTextメソッドが利用できます。
const blob = new Blob(['Hello world!'], {type:'text/plain'});
const reader = new FileReader();
reader.onload = function() {
console.log(reader.result);
};
reader.readAsText(blob);Hello world!FileReaderオブジェクトの各メソッドは、データの読み込みが完了すると resultプロパティに結果を格納し、イベントを発生させます。
そのため、addEventListenerメソッドを使用してイベントを登録するか、対応するイベントのプロパティに関数を代入することで、読み込み完了後に任意の処理を実行させることができます。
Blobのデータをダウンロードする
Blobオブジェクトが保持するデータをダウンロード可能にしたい場合に活用できるのが、URL.createObjectURLメソッドです。
このメソッドを使用すると、対象のBlobオブジェクトのデータ内容を元にURLを作成することができるため、ダウンロードリンクとして利用することができます。
<a class="downloadBlob" download="sampleBlob.txt">Blobをダウンロード</a>const blob = new Blob(['Hello world!'], {type:'text/plain'});
const dlLink = document.querySelector('.downloadBlob');
dlLink.href = URL.createObjectURL(blob);上記のように、href属性の設定を JavaScript側で行うことによって、createObjectURLメソッドで作成したURLをリンクに指定することができます。
ダウンロード時のデフォルトのファイル名は、download属性で設定することができます。
Canvasの画像をBlobに変換して保存する
Canvas APIで描画された画像も、Blobデータに変換してダウンロードすることができます。
まずは、ダウンロードさせるための画像を描画してみましょう。
<canvas class="sampleCanvas" width="300" height="300"></canvas>// Canvasの取得
const canvas = document.querySelector('.sampleCanvas');
// Canvasからコンテキストを取得
const context = canvas.getContext('2d');
// 描画する画像の色を指定
context.fillStyle = 'red';
// 描画する画像の位置とサイズを指定
context.fillRect(50, 50, 200, 200);Canvasを使用する際は、Canvasタグを bodyタグ内の任意の場所に追加します。
width属性とheight属性で指定した数値が、Canvasのサイズとなります。
通常、要素に関するサイズ指定などはHTMLやCSS側で行いますが、Canvasで描画する画像の調整は JavaScriptで行います。
そのため、まずは画像を描画する前に、要素とコンテキストを取得するためのコードを実行する必要があります。
コンテキストとは、画像などを描画するためのメソッドや、色や透明度などの情報に関するプロパティをまとめたオブジェクトのことを言います。
getContextメソッドを使用することで、対象の要素のコンテキストを取得することができ、そのコンテキストを基に画像の描画位置などを調整して Canvas上に描画することができます。
画像の描画が完了したら、先ほどと同じように createObjectURLメソッドを使用してダウンロードリンクを作成します。
URLを生成するにあたって、画像データを Blobに変換する必要がありますが、Canvasには Blobオブジェクトを生成するためのメソッドである toBlob()が用意されています。
<a class="downloadImage" download="sampleImage.jpg">画像をダウンロード</a>const dlLink = document.querySelector('.downloadImage');
canvas.toBlob(function(blob) {
dlLink.href = URL.createObjectURL(blob);
});描画した画像が無事にダウンロードできれば OKです。
BlobとBase64を変換する
Blobオブジェクトは、base64形式のデータにも対応しています。
Blob内のデータを base64形式の文字列で取得したい場合は、FileReaderオブジェクトの readAsBinaryStringメソッドでバイナリー文字列に変換した後、btoa関数で base64形式エンコーディングすることで取得可能です。
const blob = new Blob(['Hello world!'], {type:"text/plain"});
const reader = new FileReader();
reader.onload = function() {
// base64形式の文字列に変換
const base64 = btoa(reader.result);
console.log(base64);
};
reader.readAsBinaryString(blob);SGVsbG8gd29ybGQhBase64の文字列をBlobに変換する
反対に、base64形式のデータを Blobに変換する場合は、以下のステップで処理を実行します。
- Base64文字列をバイナリー文字列に変換
- Uint8Array型の配列を作成
- バイナリー文字列を UTF-16に変換して配列に格納
- 文字列を格納した配列を Blobに変換
実際のコードは以下の通りです。
// バイナリー文字列に変換
const bin = atob(base64.replace(/^.*,/, ''));
// 配列を作成し、UTF-16に変換した文字列を格納
const buffer = new Uint8Array(bin.length).map((_, i) => bin.charCodeAt(i));
// 配列を Blobに変換
const blob = new Blob([buffer.buffer], {type:"text/plain"});UTF-16への変換は for文でも実行可能ですが、mapメソッドを使用するとより簡潔にコードを記述することができます。
まとめ
いかがでしたか？今回は、JavaScriptで Blobを扱う方法について解説しました。
ファイル操作などを頻繁に行うプロジェクトの場合には、特に重要なオブジェクトとなってくるので、しっかりと使い方を把握しておくようにしましょう。
JavaScriptの勉強方法は？
書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。
ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。
プログラミングスクールならテックマニアがおすすめ！
ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。
＜テックマニアの特徴＞
・たしかな育成実績と親身な教育 ～セカンドキャリアを全力支援～
・講師が現役エンジニア ～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート ～「わからない」を徹底解決～
・実務ベースでスキルを習得 ～実践的な凝縮カリキュラム～
このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。
