ReactJSとReact Routerでユーザーのページ離脱を検知する3つの方法：メリットとデメリット

2024-04-11

ReactJSとReact Routerを使って、ユーザーがページを離脱しようとしていることを検知するにはいくつかの方法があります。このチュートリアルでは、以下の3つの主要な方法について解説します。

window.onbeforeunload イベントを使用する
React Router の onBeforeUnload フックを使用する
useBeforeunload カスタムフックを使用する

これは最も基本的な方法です。window.onbeforeunload イベントは、ユーザーがページを離脱しようとする前に発生します。このイベントにイベントリスナーを追加することで、ユーザーに確認メッセージを表示したり、離脱前に実行したい処理を行うことができます。

window.onbeforeunload = function(e) {
  // ユーザーに確認メッセージを表示
  return "このページを離脱してもよろしいですか？";
};

React Router バージョン6以降では、onBeforeUnload フックが提供されています。このフックは、Route コンポーネント内で使用することができ、ユーザーがページを離脱しようとする前に実行したい処理を記述することができます。

import { Route } from "react-router-dom";

const App = () => {
  return (
    <div>
      <Route
        path="/"
        onBeforeUnload={(e) => {
          // ユーザーに確認メッセージを表示
          return "このページを離脱してもよろしいですか？";
        }}
      >
        ...
      </Route>
    </div>
  );
};

上記2つの方法に加えて、useBeforeunload カスタムフックを作成して、複数のコンポーネントで再利用することも可能です。

import { useState } from "react";

const useBeforeunload = () => {
  const [isLeaving, setIsLeaving] = useState(false);

  useEffect(() => {
    const handleBeforeunload = (e) => {
      // ユーザーに確認メッセージを表示
      setIsLeaving(true);
      return "このページを離脱してもよろしいですか？";
    };

    window.addEventListener("beforeunload", handleBeforeunload);

    return () => {
      window.removeEventListener("beforeunload", handleBeforeunload);
    };
  }, []);

  return isLeaving;
};

各方法の比較

方法	利点	欠点
`window.onbeforeunload` イベント	シンプルで使いやすい	全てのブラウザでサポートされているわけではない
`React Router` の `onBeforeUnload` フック	`React Router` と密接に統合されている	`React Router` バージョン6以降でのみ使用可能
`useBeforeunload` カスタムフック	複数のコンポーネントで再利用可能	コード量が少し増える

ユーザーのページ離脱を検知するにはいくつかの方法があります。それぞれの方法には利点と欠点があるので、プロジェクトの要件に合わせて最適な方法を選択してください。

import { useState } from "react";

const useBeforeunload = () => {
  const [isLeaving, setIsLeaving] = useState(false);

  useEffect(() => {
    const handleBeforeunload = (e) => {
      // ユーザーに確認メッセージを表示
      setIsLeaving(true);
      return "このページを離脱してもよろしいですか？";
    };

    window.addEventListener("beforeunload", handleBeforeunload);

    return () => {
      window.removeEventListener("beforeunload", handleBeforeunload);
    };
  }, []);

  return isLeaving;
};

const App = () => {
  const isLeaving = useBeforeunload();

  return (
    <div>
      <h1>ページ離脱確認</h1>
      {isLeaving && <p>ページを離脱しようとしています。よろしいですか？</p>}
      ...
    </div>
  );
};

このコードを実行すると、ユーザーがページを離脱しようとする際に確認メッセージが表示されます。

window.onbeforeunload = function(e) {
  // ユーザーに確認メッセージを表示
  return "このページを離脱してもよろしいですか？";
};

import { Route } from "react-router-dom";

const App = () => {
  return (
    <div>
      <Route
        path="/"
        onBeforeUnload={(e) => {
          // ユーザーに確認メッセージを表示
          return "このページを離脱してもよろしいですか？";
        }}
      >
        ...
      </Route>
    </div>
  );
};

これらのサンプルコードを参考に、プロジェクトの要件に合わせてユーザーのページ離脱検知機能を実装してください。

ユーザーのページ離脱を検知するその他の方法

マウスの動きを追跡する

ユーザーがブラウザのタブを閉じたり、別のページに移動したりしようとする際に、マウスの動きが止まることがあります。この動きを検知することで、ユーザーがページを離脱しようとしている可能性を推測することができます。

ページのスクロール位置を追跡する

キーボード入力イベントを追跡する

ユーザーが Ctrl キー + W キーを押したり、Alt キー + F4 キーを押したりして、ブラウザのタブを閉じようとする場合もあります。これらのキーボード入力イベントを検知することで、ユーザーがページを離脱しようとしている可能性を推測することができます。

visibilitychange イベントは、ページが可視状態になったり、非可視状態になったりしたときに発生します。このイベントを検知することで、ユーザーが別のタブに移動したり、別のアプリケーションに切り替えたりして、ページを離脱しようとしている可能性を推測することができます。

サーバーサイドで検知する

ユーザーがページを離脱したことをサーバーサイドで検知する方法もあります。例えば、ユーザーがページにアクセスした timestamp と、最後にアクティビティがあった timestamp を記録することができます。一定時間以上アクティビティがない場合は、ユーザーがページを離脱したと推測することができます。

これらの方法の注意点

上記の方法はあくまでも推測であり、ユーザーが実際にページを離脱しているかどうかを確実に判断することはできません。また、これらの方法はユーザーのプライバシーを侵害する可能性があるため、注意して使用する必要があります。

reactjs react-router