createObjectURLは、ブラウザ上でBlobやFile APIを使用してオブジェクトURLを生成するためのJavaScript関数です。この記事では、createObjectURLの基本的な使い方から実践的な活用方法まで解説します。

createObjectURLとは

createObjectURLは、BlobやFileオブジェクトから一時的なURLを生成する関数です。生成されたURLは、画像やファイルをブラウザ上で表示・ダウンロードする際に使用できます。

const url = URL.createObjectURL(blob);

基本的な使い方

画像ファイルからURLを生成する例：

// input要素からファイルを取得
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (e) => {
    const file = e.target.files[0];
    const url = URL.createObjectURL(file);
    
    // 画像を表示
    const img = document.createElement('img');
    img.src = url;
    document.body.appendChild(img);
});

メモリリークを防ぐ

createObjectURLで生成されたURLは、明示的に解放するまでメモリに残り続けます。メモリリークを防ぐため、不要になったURLは`revokeObjectURL()`で解放することが重要です。

const url = URL.createObjectURL(blob);

// URLを使用後に解放
URL.revokeObjectURL(url);

実践的な使用例

画像プレビューの実装

function createImagePreview() {
    const input = document.querySelector('#imageInput');
    const preview = document.querySelector('#preview');
    
    input.addEventListener('change', () => {
        const file = input.files[0];
        if (file) {
            const url = URL.createObjectURL(file);
            preview.src = url;
            
            // 画像読み込み完了後にURLを解放
            preview.onload = () => {
                URL.revokeObjectURL(url);
            };
        }
    });
}

ファイルダウンロードの実装

function downloadFile(content, filename) {
    const blob = new Blob([content], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    link.click();
    
    // URLを解放
    setTimeout(() => {
        URL.revokeObjectURL(url);
    }, 100);
}

注意点

  • createObjectURLは一時的なURLを生成するため、ページをリロードすると無効になります
  • 大量のURLを生成する場合は、適切なタイミングでrevokeObjectURLを呼び出してメモリを解放する必要があります
  • 生成されたURLはブラウザのメモリ内に保存されるため、大きなファイルを扱う際は注意が必要です

対応ブラウザ

createObjectURLは、主要なモダンブラウザで広くサポートされています：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Opera

まとめ

createObjectURLは、ブラウザ上でファイルを扱う際に非常に便利な機能です。適切なメモリ管理を行いながら使用することで、効率的なファイル操作が可能になります。画像のプレビューやファイルのダウンロードなど、様々なユースケースで活用できます。