JavaScriptでbeforeunloadイベントを使ってページ移動前にアラートを表示する方法を現役エンジニアが解説【初心者向け】

JavaScriptでbeforeunloadイベントを使ってページ移動前にアラートを表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

beforeunloadイベントとは

平たく言うと、画面が閉じられる際に発生するイベントです。このイベントを使って、画面を閉じる際にアラートを出すことができます。

下記の画像はChromeでbeforeunloadイベントでアラートを表示した場合の例です。

むやみに使うと、画面を離れる際にアラートが表示される嫌なサイトになりますが入力画面などで、ユーザーが間違って閉じたり移動したりした際にアラートを出すことで、入力がやり直しになるという事態を避けることができます。

 

beforeunloadイベントの使い方

クリックイベントなどの他のイベントと同じように、イベントが発生した際の関数を設定することで実行されます。実行の際の他のイベントとの違いとして、beforeunloadイベントは確認ダイアログ（アラート）が表示されます。構文は下記のようになります。

window.addEventListener('beforeunload', 【実行する関数】);

 

[PR] フロントエンドで副業する学習方法を動画で公開中

ページ移動前にアラートを表示する方法

実際のソースコードになります。

window.addEventListener('beforeunload', (event) => {
  event.preventDefault();
  event.returnValue = '';
});

解説

基本的には画面が誤って閉じられる際の最後の確認なので、処理を記述することはあまり無いかと思います。そのためbeforeunloadのイベント時に呼ばれる関数は、アロー演算子を使って無名関数としています。

event.preventDefault()は、イベントをキャンセルするための記述です。今回のケースでは、画面を閉じる動きをキャンセルできるようにするということになります。

確認ダイアログは、ブラウザによって挙動に多少差があります。IEなどの一部のブラウザでは、event.returnValueに設定した文字が確認ダイアログに表示されます。

Chromeではここの文字は表示されず無視されて、ブラウザ独自の確認ダイアログになります。無視されるものの、event.returnValueに値が設定されないと確認ダイアログが表示されないので空文字を設定しています。

 

監修してくれたメンター

横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。