Webサイトのタブ、見られていますか？ visibilitychange イベントで賢く制御しよう
こんにちは、「インターライフメディア ブログ」へようこそ！Webサイトを制作していると、「ユーザーがこのページをタブで開いているけど、今見ているのかな？」と気になる瞬間はありませんか？
例えば、動画を再生中にユーザーが別のタブに切り替えたら、動画は自動で一時停止してほしいですよね。また、非表示のタブで重いアニメーションが動き続けていると、ユーザーのPCリソースを無駄に消費させてしまうかもしれません。
そんな「タブの表示・非表示」状態を検知できる便利なJavaScriptのイベントが、今回ご紹介する「visibilitychange イベント」です。
visibilitychange イベントとは？
visibilitychange イベントは、ブラウザのタブのコンテンツがユーザーに見える状態（表示状態）になったり、見えない状態（非表示状態）になったりしたタイミングで発生するイベントです。
このイベントと合わせて、document.visibilityState というプロパティをチェックします。このプロパティには、現在のタブの状態が以下のいずれかの文字列で格納されています。
visible: タブのコンテンツが少なくとも部分的に表示されています。（例：タブが前面にある）hidden: タブのコンテンツがユーザーから見えていません。（例：別のタブが選択されている、またはブラウザが最小化されている）
※ 以前は prerender などの値もありましたが、現在は visible と hidden の2つを主に意識すれば問題ありません。
基本的な使い方（コード例）
使い方はとてもシンプルです。document に対してイベントリスナーを追加します。
document.addEventListener("visibilitychange", () => {
// visibilityState プロパティで現在の状態をチェック
if (document.visibilityState === "visible") {
console.log('タブが表示されました（こんにちは！）');
// 例：一時停止していた動画を再生する
} else {
console.log('タブが非表示になりました（また後で…）');
// 例：動画を一時停止する
}
});このコードをWebサイトに記述しておけば、ユーザーがタブを切り替えるたびに、コンソールにログが出力されます。とても簡単ですね。
なぜ visibilitychange が重要なのか？（活用シーン）
このイベントを活用することで、Webサイトのパフォーマンスとユーザー体験 (UX) を大きく向上させることができます。
📈 パフォーマンスの最適化
ユーザーに見えていないタブで、リソースを消費する処理（複雑なアニメーション、スライドショーの自動送り、サーバーへの定期的なデータ問い合わせなど）を実行し続けるのは非効率です。
visibilitychange を使ってタブが hidden になったらこれらの処理を一時停止し、visible に戻ったら再開させることで、ユーザーのPCの負荷を軽減し、バッテリー消費を抑えることにも貢献できます。
👍 ユーザー体験 (UX) の向上
最も分かりやすい例が「動画や音声の制御」です。
ユーザーが動画を見ている途中で調べ物のために別のタブを開いたとき、元のタブの動画が自動で一時停止してくれたら親切だと思いませんか？ visibilitychange を使えば、まさにその「おもてなし」を実装できます。
逆に、タブを戻したときに自動で再生を再開させることも可能です。
blur / focus イベントとの違い
「あれ？ブラウザのフォーカスを検知するなら window.blur や window.focus イベントでも良いのでは？」と思った方もいるかもしれません。
これらは似ていますが、明確な違いがあります。
blur/focus: ウィンドウ全体のフォーカスを検知します。例えば、ユーザーがブラウザ（例: Chrome）から別のアプリ（例: メモ帳）に切り替えた場合に発生します。ブラウザ内でタブを切り替えただけでは発生しません。visibilitychange: タブごとの表示状態を検知します。ブラウザがアクティブなままでも、別のタブに切り替えれば発生します。
「タブが裏側に行ったこと」を検知したい場合は、visibilitychange を使うのが最適解です。
まとめ
visibilitychange イベントは、ユーザーが今あなたのWebサイトを見ているかどうかを知るための強力な手段です。
目立たない機能かもしれませんが、適切に使うことで「リソースに優しく、気が利くWebサイト」を作ることができます。ぜひあなたの次のプロジェクトで活用してみてください。
よくある質問（FAQ）
Q1: visibilitychange は、具体的にどんな処理を停止するのに使えますか？
A1: 主に、ユーザーが直接見ていなくても困らない処理や、リソースを消費する処理の停止に使われます。例えば、自動で切り替わるカルーセル（スライドショー）、チャットの新規メッセージをリアルタイムで取得するポーリング（定期通信）、CSSやJavaScriptによる複雑なアニメーションなどです。
Q2: すべてのブラウザで使えますか？
A2: はい、IE 10以降、Chrome、Firefox、Safariなど、現在使われている主要なモダンブラウザのほとんどでサポートされています。Web制作者やWebサイト運営初心者の皆さんがターゲットとする現代のユーザー環境では、ほぼ問題なく使用できると考えて良いでしょう。
Q3: ユーザーがタブを閉じたことを検知できますか？
A3: visibilitychange はタブが「非表示」になることを検知しますが、「閉じた（アンロードされた）」ことを確実に検知するものではありません。タブを閉じる直前の処理を行いたい場合は、beforeunload イベントや pagehide イベントを検討するのが一般的です。ただし、visibilitychange で hidden になった直後にタブが閉じられるケースも多いため、非表示になったタイミングでデータの自動保存などを行うのは有効な使い方の一つです。