beforeunload

ビフォーアンロード（イベント）

意味ページが閉じられる前のイベント。

beforeunloadとは？

ページが閉じられる、または新しいページへの遷移が始まる前に発火するイベント。このイベントはユーザーに確認を求めるダイアログを表示するために使われることが多い。

beforeunloadの具体的な使い方

フォームの未保存変更をチェックしてページ離脱を警告する例

<form id="myForm">
  <input type="text" id="name" name="name">
  <button type="submit">送信</button>
</form>

<script>
let formChanged = false;

document.getElementById('myForm').addEventListener('input', function() {
  formChanged = true;
});

window.addEventListener('beforeunload', function(event) {
  if (formChanged) {
    event.preventDefault();
    event.returnValue = '';
  }
});

document.getElementById('myForm').addEventListener('submit', function() {
  formChanged = false;
});
</script>

フォームに変更があった場合、ページを離れる前に警告を表示します。フォームが送信されると警告は表示されません。

ページ滞在時間を記録する例

const startTime = new Date().getTime();

window.addEventListener('beforeunload', function() {
  const endTime = new Date().getTime();
  const timeSpent = (endTime - startTime) / 1000;
  console.log('ページ滞在時間：' + timeSpent + '秒');
  
  // 実際のアプリケーションでは、ここでデータを送信するなどの処理を行います
  // 注意: beforeunloadイベントでの非同期処理は保証されません
});

👇出力結果

ページ滞在時間：30.5秒

ページの滞在時間を計測し、ユーザーがページを離れる際にコンソールに出力します。

beforeunloadに関するよくある質問

Q. beforeunloadの使用目的は？

A. 主に、ユーザーが誤ってページを離れることを防ぐために使用されます。例えば、フォームに未保存のデータがある場合に警告を表示するのに適しています。

Q. カスタムメッセージは設定できる？

A. セキュリティ上の理由から、最新のブラウザではカスタムメッセージを表示できません。event.returnValueに文字列を設定しても、ブラウザのデフォルトメッセージが表示されます。

Q. イベントをキャンセルできますか？

A. はい、event.preventDefault()を呼び出すか、event.returnValueに空でない文字列を設定することで、ブラウザにページ遷移の確認ダイアログを表示させることができます。

Q. 過剰な使用の問題点は？

A. beforeunloadイベントの過剰な使用は、ユーザーエクスペリエンスを損なう可能性があります。本当に必要な場合（未保存のデータがある場合など）にのみ使用することが推奨されます。

beforeunloadが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのbeforeunloadやreset、blur、mouseout、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。