JavaScriptで「戻る」ボタンイベントを検知する方法

ユーザーがブラウザの「戻る」ボタンを押したとき、何が起こるのでしょうか？多くの人は「戻る」というユーザー体験を単なる「ページの移動」と考えがちです。しかし、もう少し深く見てみると、この短い瞬間にさまざまなユーザー体験の問題が潜んでいることがあります。編集中の文章が消えてしまったり、決済プロセスが中断されたり、重要なデータが失われる可能性すらあります。😰

今回は、JavaScriptで「戻る」イベントを検知し、それによってどのようにユーザー体験を改善できるか をステップごとに整理してみましょう。🚀

`popstate` イベントで処理する

ブラウザはURLの変更やセッション履歴の変化があった場合に popstate イベントを発生させます。

このイベントを利用することで、ユーザーが「戻る」ボタンを押したかどうかを検知できます。

popstate イベントは、ユーザーのセッション履歴のナビゲーションによって現在アクティブな履歴エントリが変更されたときに発生します。

history.pushState() や history.replaceState() メソッドによって生成されたエントリがアクティブになった場合、popstate イベントの state プロパティにはその履歴エントリの state オブジェクトのコピーが含まれます。

以下のように使用できます！

window.addEventListener("popstate", (event) => {
  console.log("戻る操作が発生しました！", event);
});

ブラウザによって動作が異なる場合があるので注意が必要です！

popstate 互換性のスクリーンショット

ブラウザはページ読み込み時に popstate イベントを処理する方法が異なります。

Chrome（バージョン34以前）やSafariでは、ページ読み込み時にも popstate イベントが発生しますが、Firefoxでは発生しません。

`alert` のような割り込みが必要な場合は？ `beforeunload` イベントで対応

あるいは、beforeunload イベントを使って処理する方法もあります。

このイベントは、window やドキュメント、その他のリソースがアンロードされようとしているときに実行されます！ 💪

window.addEventListener("beforeunload", (e) => {
  const message = "入力中の内容が失われる可能性があります。本当に離れてもよろしいですか？";
  e.returnValue = message; // 多くのブラウザで有効
  return message;
});

状況に応じて使い分けてみてくださいね！😉