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

初心者向けにJavaScriptでbeforeunloadイベントを使ってページ移動前にアラートを表示する方法について解説しています。beforeunloadイベントはページを離れる際に発生するイベントになります。beforeunloadイベントの使い方の例と基本構文、処理の流れを学習しましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

 

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

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

beforeunloadイベントを使ってページ移動前にアラートを表示する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

beforeunloadイベントとは

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

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

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

 

beforeunloadイベントの使い方

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

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

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

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

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

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

解説

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

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

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

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

 

監修してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

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

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