BlobをJavaScriptで使う方法を現役エンジニアが解説【初心者向け】

初心者向けにBlobをJavaScriptで使う方法について解説しています。最初にバイナリデータとは何か、Blobの特徴とメリットについて説明します。次に、Blobを使って作成したファイルのダウンロードリンクを表示させる例についてみていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

BlobをJavaScriptで使う方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

Blobを使う方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

Blobとは

Blobとは、BLOB(Binary Large Object)を扱うためJavaScriptのオブジェクトです。

コンピュータの中では、全て0と1でデータが管理されており、この0と1で表すデータがバイナリデータです。

また、Blobは非常に様々なデータを使用することができます。

 

Blobの特徴や利用メリット

Blobはバイナリデータであるため、テキストファイルだけではなく画像やPDFなどいろいろな形式のファイルを扱うことができます。

また、JavaScriptのデータをBlobにすることで、ファイルにすることが可能です。

そのため、処理結果などをダウンロードさせたい場合などには使用しやすいといえるでしょう。

処理結果のデータをBlobにして、ダウンロードリンクのリンク先に指定することで、結果のデータファイルをダウンロード可能です。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

Blobの使い方

Blobは下記のコードで作成することが可能です。

new Blob(【ファイルの内容の配列】,【ファイルの種類(MIMEタイプ)】);

第1引数にファイルの内容となる配列のオブジェクト、第2引数にファイルの種類となるMIMEタイプを指定しましょう。

 

 

実際に書いてみよう

テキストファイルを作成して、ブラウザにダウンロードリンクを表示する例を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div id="result"></div>
  <script>
    let blob = new Blob(['あいうえお'],{type:"text/plan"});
    let link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '作ったファイル.txt';
    link.innerText = 'ダウンロードします';
    const result = document.getElementById('result');
    result.appendChild(link);
  </script>
</body>
</html>

解説

<div id=”result”></div>にて、ダウンロードリンクを表示するための場所をdivタグで用意しました。

new Blob([‘あいうえお’],{type:”text/plan”})で、Blobを作成しています。

そのため、第1引数で指定した「あいうえお」と書かれたファイルが第2引数で指定したテキストファイルで作成されるでしょう。

document.createElement(‘a’)で、HTMLのaタグを作成しました。

 

link.href = URL.createObjectURL(blob)では、aタグのリンク先に作成したファイルを設定しました。

link.download = ‘作ったファイル.txt’では、ダウンロードするファイルの名前を設定しています。

link.innerText = ‘ダウンロードします’では、表示するリンクの文面を設定しています。

document.getElementById(‘result’)で、表示するdivタグを取得しappendChild(link)でリンクを表示しました。

このコードでは、表示したリンクをクリックすると作成したテキストファイルがダウンロードされます。

 

執筆してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。

サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。

TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

BlobをJavaScriptで使う方法がよく分かったので良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。