JavaScriptでダウンロード完了を検知する5つの方法

はじめに
●ダウンロード完了検知の基本
- ○ダウンロード完了検知の仕組み
●5つの方法とサンプルコード
●応用例とサンプルコード
- ○サンプルコード6：ダウンロード速度を表示する
- ○サンプルコード7：ダウンロード進捗バーを表示する
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptでダウンロード完了を検知する方法が5つも身につくことでしょう。

ダウンロード完了を検知することで、ユーザーエクスペリエンスを向上させたり、ダウンロードの進捗状況を表示することができます。

この記事では、JavaScriptを使ってダウンロード完了を検知する方法を初心者向けに分かりやすく解説します。

さらに、サンプルコードと応用例も紹介しています。

●ダウンロード完了検知の基本

○ダウンロード完了検知の仕組み

ダウンロード完了を検知するためには、JavaScriptでファイルのダウンロード状況を監視し、完了したタイミングで特定の処理を実行する必要があります。

これを実現する方法はいくつかありますが、主にイベントリスナーやXMLHttpRequest、Fetch APIなどを利用します。

●5つの方法とサンプルコード

○サンプルコード1：イベントリスナーを使用した方法

イベントリスナーを使ってダウンロード完了を検知するコードを紹介します。

この例では、HTMLのボタンをクリックしてダウンロードが完了したら、アラートで「ダウンロード完了」と表示されます。

// HTML
<button id="downloadButton">ダウンロード</button>

// JavaScript
document.getElementById('downloadButton').addEventListener('click', function() {
  // ダウンロード処理
  setTimeout(function() {
    alert('ダウンロード完了');
  }, 3000); // 3秒後にダウンロード完了と仮定
});

○サンプルコード2：XMLHttpRequestを使用した方法

XMLHttpRequestを使ってダウンロード完了を検知するコードを紹介します。

この例では、ダウンロードが完了したらコンソールに「ダウンロード完了」と表示されます。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/file.zip', true);
xhr.responseType = 'blob';

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('ダウンロード完了');
  }
};

xhr.send();

○サンプルコード3：Fetch APIを使用した方法

Fetch APIを使ってダウンロード完了を検知するコードを紹介します。

この例では、ダウンロードが完了したらコンソールに「ダウンロード完了」と表示されます。

fetch('https://example.com/file.zip')
  .then(response => response.blob())
  .then(() => {
    console.log('ダウンロード完了');
  })
  .catch(error => {
    console.error('ダウンロード失敗:', error);
  });

○サンプルコード4：プログレスイベントを使用した方法

プログレスイベントを使用してダウンロード完了を検知するコードを紹介します。

この例では、ダウンロードが完了したらアラートで「ダウンロード完了」と表示されます。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/file.zip', true);
xhr.responseType = 'blob';

xhr.addEventListener('progress', function(event) {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    if (percentComplete === 100) {
      alert('ダウンロード完了');
    }
  }
});

xhr.send();

○サンプルコード5：ダウンロード検知のカスタム関数を作成する方法

ダウンロード検知のカスタム関数を作成する方法を紹介します。

この例では、ダウンロードが完了したらコンソールに「ダウンロード完了」と表示されます。

function downloadFile(url, callback) {
  fetch(url)
    .then(response => response.blob())
    .then(() => {
      callback(null, 'ダウンロード完了');
    })
    .catch(error => {
      callback(error, null);
    });
}

downloadFile('https://example.com/file.zip', function(error, message) {
  if (error) {
    console.error('ダウンロード失敗:', error);
  } else {
    console.log(message);
  }
});

●応用例とサンプルコード

○サンプルコード6：ダウンロード速度を表示する

ダウンロード速度を表示するコードを紹介します。

この例では、ダウンロード中にコンソールにダウンロード速度が表示されます。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/file.zip', true);
xhr.responseType = 'blob';
let startTime;

xhr.addEventListener('progress', function(event) {
  if (!startTime) {
    startTime = new Date().getTime();
  }
  const currentTime = new Date().getTime();
  const elapsedTime = (currentTime - startTime) / 1000;
  const downloadSpeed = event.loaded / elapsedTime;
  console.log('ダウンロード速度:', downloadSpeed, 'バイト/秒');
});

xhr.send();

○サンプルコード7：ダウンロード進捗バーを表示する

ダウンロード進捗バーを表示するコードを紹介します。

この例では、ダウンロード中にHTMLのプログレスバーが進行状況を反映して更新されます。

<!-- HTML -->
<progress id="progressBar" value="0" max="100"></progress>

<script>
  // JavaScript
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://example.com/file.zip', true);
  xhr.responseType = 'blob';

  xhr.addEventListener('progress', function(event) {
    if (event.lengthComputable) {
      const progressBar = document.getElementById('progressBar');
      const percentComplete = (event.loaded / event.total) * 100;
      progressBar.value = percentComplete;
    }
  });

  xhr.send();
</script>