フロントエンド開発では、さまざまな操作をブラウザのみで完結させることが求められることが多いです。特にデータのエクスポートやファイルの生成において、サーバーサイドを介さずに実現する方法が存在します。今回は、TypeScriptを使用してブラウザのみでファイルダウンロードを実装する方法について解説します。
ブラウザでのファイル生成とダウンロード
ここで重要な役割を果たすのが、Blob（Binary Large Object）です。Blobは生データを表すオブジェクトで、ファイルのように扱うことができます。
コード例は以下の通りです：
// Blobオブジェクトを作成
const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
const url = URL.createObjectURL(blob);
// CSVファイル名を設定
const filename = 'sample.csv';
// ダウンロード用のリンクを生成し、自動的にクリックさせる
const link = document.createElement('a');
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link); // リンクを削除BlobでCSVファイルを生成し、それをユーザーがダウンロードできるように処理します。
具体的には生成したファイルをaタグへ設定し、疑似的にリンクをクリックすることでダウンロードを実行しています。