URL.createObjectURL()とURL.revokeObjectURL()について書いていく。
URL.createObjectURL() と URL.revokeObjectURL() は、ブラウザでBlobオブジェクトやFileオブジェクトを扱うためのAPIである。通常、BlobオブジェクトやFileオブジェクトといったデータに対して使用される。
URL.createObjectURL(): このメソッドは、BlobオブジェクトやFileオブジェクトなどのデータをブラウザ内で一時的なURLに変換する。これにより、そのデータをURLを介してブラウザ内で扱うことができる。主に、画像、ビデオ、音声などのメディアファイルを表示したり、ダウンロードリンクとして提供したりするために使用される。一時的なURLは、URL.revokeObjectURL() で解放するまで有効である。
URLは「blob:http://～」になり、Blob URLと呼ばれる。
const blob = new Blob(['Hello, World!'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
// このurlを使って、Blob内のデータにアクセスできる
// url = blob:http://localhost/～
URL.revokeObjectURL(): このメソッドは、URL.createObjectURL() で生成した一時的なURLを解放し、そのURLが関連付けられたデータへのアクセスをブラウザに通知する。これにより、メモリリークを防ぎ、リソースを効果的に管理できる。通常、URLを使用し終わったら、すぐに URL.revokeObjectURL() を呼び出して解放することが推奨される。
URL.revokeObjectURL() でURLを開放すると、URL「blob:http://～」にアクセスできなくなる。
URL.revokeObjectURL(Fileオブジェクト)やURL.revokeObjectURL(Blobオブジェクト)のように使う。
URL.revokeObjectURL(url); // urlは以前にURL.createObjectURL()で生成したもの
この2つのメソッドは、Webアプリケーションでファイルを処理する際に非常に便利で、特に大きなファイルや複数のファイルを処理する場合に役立つ。ただし、適切なタイミングで URL.revokeObjectURL() を呼び出すことが重要である。
URL.revokeObjectURL(Fileオブジェクト)やURL.revokeObjectURL(Blobオブジェクト)のように使う。