タブを裏にすると何が止まるか：ブラウザの省電力と時計

裏タブで遅くなるもの、止まるもの、進み続けるもの

裏タブでの扱いを、処理の種類ごとに整理します。以下は一般的な傾向であり、ブラウザや版によって異なります。

• setTimeout / setInterval（一定時間後・一定間隔で関数を呼ぶ仕組み）、裏タブでの一般的な傾向：呼ばれる間隔が引き延ばされる。長く裏に置くほど、さらに間引かれる場合がある、影響を受けやすい場面：「0.1秒ごとに1減らす」型のカウントダウン
• requestAnimationFrame（画面描画の直前に呼ばれる仕組み）、裏タブでの一般的な傾向：呼ばれなくなる、または大きく減る、影響を受けやすい場面：アニメーション、物理演算を毎フレーム進める作り
• Date.now や performance.now（時刻を読む関数）、裏タブでの一般的な傾向：時計自体は進み続ける、影響を受けやすい場面：開始時刻との差で経過時間を出す作り
• 音の再生、裏タブでの一般的な傾向：再生中のタブは制限が緩く扱われることがある。方針はブラウザ次第、影響を受けやすい場面：音楽や効果音

ここで大事なのは、「時計」と「時計を見て動く処理」を分けて考えることです。時刻を読む関数は進み続けますが、それを定期的に呼び出す側のタイマーや描画ループは間引かれます。つまり、タイマーが呼ばれた回数を数えて時間の代わりにしているゲームでは、裏にしている間は時間の数え方がずれます。

もう一つ、タブが見えていないことを知らせる仕組みがあります。Page Visibility API（ページが見えているかを知らせる機能）です。document.visibilityState が "hidden" か "visible" かを読め、切り替わるたびに visibilitychange というイベントが届きます。作る側はこれを使って、裏に回った瞬間と戻った瞬間に処理を差し込めます。

「裏」の定義も一つではありません。別のタブへの切り替え、ウィンドウの最小化、別のウィンドウで完全に覆われた状態は、ブラウザによって扱いが異なる場合があります。

戻ってきた瞬間に起きること

裏から戻った直後は、ゲームにとって危ない瞬間です。主な落とし穴は次の3つです。

• 時間の飛び：毎フレーム「前回からの経過時間」を足して動かす作りで、前回の更新が1分前だと、1分ぶんの進行が1フレームで適用されます。キャラクターが壁を突き抜けたり、カウントダウンが一気に尽きたりします。
• 回数で数える時計のずれ：「タイマーが10回呼ばれたら1秒」という数え方だと、間引かれた分だけ時間が遅れます。逆に、溜まった呼び出しがまとめて走るとは限らないので、どちらにずれるかも環境次第です。
• 見えない間の出来事：プレイヤーが見ていない間に、時間切れや失敗が確定してしまいます。

作る側の判断は、ほぼ次の2択に整理できます。

1. 裏にした時間も現実の時間として数える：開始時刻を記録し、Date.now() との差で残り時間を出します。裏にしても時間は進むので、戻ると時間切れになっていることがあります。タイムアタックや対戦のように、公平さが重要な作りに向きます。
2. 裏にしたら自動で一時停止する：visibilitychange で "hidden" を受けたら停止し、戻ったときは自動再開せず、一時停止画面を出して本人に再開してもらいます。覚えゲームやパズルのように、考える時間を奪いたくない作りに向きます。

どちらでも共通する守りが2つあります。1回の更新で進める時間に上限を設けることと、時間は回数ではなく時刻の差で測ることです。この2つがあれば、戻った瞬間の飛びはかなり防げます。

また、裏に回る瞬間は、保存のタイミングとしても使えます。ブラウザは省電力やメモリ節約のため、長く裏にあったタブを破棄することがあります（挙動は環境次第です）。破棄されれば、メモリ上だけの記録は消えます。遊んだ進行を残したい作品では、裏に回るときに保存する方が安全です。

自分で確かめる：裏タブ観察ページの設計書

ここからは、読者が自分の環境で答えを出す実験の設計です。結果は環境で変わるため、この記事には書きません。

問い：自分のブラウザでは、タブを裏にしている間に、100msごとのタイマーと描画ループはどれだけ減るか。時刻の差で測った経過時間は進み続けるか。

準備：次のコードを test.html という名前で保存し、ブラウザで開きます。外部通信は不要です。

<!doctype html>
<meta charset="utf-8">
<title>裏タブ観察</title>
<pre id="out">開始待ち</pre>
<script>
const t0 = Date.now();
let ticks = 0, frames = 0, log = [];
const sec = () => ((Date.now() - t0) / 1000).toFixed(1);
setInterval(() => ticks++, 100);
(function f() { frames++; requestAnimationFrame(f); })();
document.addEventListener("visibilitychange", () => {
  log.push(sec() + "秒 " + document.visibilityState +
    " タイマー=" + ticks + " 描画=" + frames);
  show();
});
function show() {
  out.textContent = "経過 " + sec() + "秒\n" +
    "100msタイマー: " + ticks + "回 (理論値 約" +
    Math.round((Date.now() - t0) / 100) + "回)\n" +
    "描画フレーム: " + frames + "\n\n" + log.join("\n");
}
setInterval(show, 500);
</script>

手順：

1. ページを開いて10秒ほど表のまま置きます。
2. 別のタブに切り替え、30秒待って戻ります。
3. 同じことを、2分、5分以上の長さでも行います。
4. 「最小化」「別のウィンドウで覆う」でも同様に行います。

記録の取り方：ログには、切り替わった時刻と、そのときのタイマー回数・描画回数が1行ずつ残ります。hidden の行と次の visible の行を並べ、差を取ります。記録する項目は次の3つです。

• 裏にいた秒数（2行の時刻の差）
• その間のタイマー増加数（理論値は秒数×10）
• その間の描画増加数

長さごとに最低でも3回ずつ繰り返し、ばらつきも見てください。1回だけの値は偶然かもしれません。

結果の読み方：

• タイマーの増加数が理論値よりかなり少なければ、そのブラウザは裏でタイマーを間引いています。回数で時間を数える作りは危険です。
• 長さを変えて間引きの度合いが変わるなら、時間が長いほど制限が強くなる仕組みが働いている可能性があります。
• 描画の増加数がほぼ0なら、描画ループは止まっています。毎フレーム進める物理演算も止まります。
• 画面上の「経過」が実際の待ち時間と合っていれば、時刻の差で測る方法は裏でも使えます。

起こりやすい誤り：

• 開発者ツールを開いたままにしていると、結果が変わることがあります。
• 音を鳴らしているタブや、ノートPCの電源接続・省電力モードの違いでも変わります。
• ブラウザの種類や版が違えば、結果も違って当然です。複数を比べるなら、条件を揃えてください。
• 表示の更新自体も間引かれます。裏にいる間は画面を見ずに、戻ってからログで判断してください。

公式作品で確かめる：設計から読み取れること

アソバースの公式作品には、時間を扱うものがいくつかあります。確認済みの仕様から読み取れることを整理します。

• 紙ひこうき郵便：海辺は36秒で5通、丘は40秒で8通、山は44秒で10通を集め、最後の6秒で赤い郵便受けへ向かう設計です。短い制限時間の中で進む作りなので、裏にしたときに時間がどう扱われるかは、プレイの結果に直結します。
• 時計じかけの台所：本番は1皿28秒、配膳6秒、ミス3回までです。時間制限のない見習いモードも別に用意されています。時間に追われる遊びと、追われない遊びを分けて選べる設計だと読み取れます。
• こだまの森・小さな軌道・かたちのあいだ：どれも一時停止があります。かたちのあいだは時計の一時停止、小さな軌道は一時停止から同じ位置での再開が案内されています。考える時間を保証する作りが入っていることがわかります。
• 共通の仕様：言語を切り替えたり、プレイ画面を拡大したりしても進行が保たれると案内されています。画面の状態が変わっても、ゲームの進行を別に持っていることがうかがえます。

一方で、「タブを裏にしたら自動で一時停止するか」「戻ったとき時間が進んでいるか」は、確認済みの案内にはありません。この部分は、作品を開いて確かめる項目です。たとえば紙ひこうき郵便で、開始直後に別のタブへ切り替えて30秒後に戻り、残り時間や位置がどうなっているかを見ます。比べる作品を時計じかけの台所の本番と見習いに変えれば、時間制限のあるなしによる違いも見られます。

記録の扱いにも注意点があります。保存があるのは余白の庭、WAVE / WAVE、かたちのあいだの3作品で、他の10作品の記録や録音は画面を開いている間だけです。長く裏に置いたタブが、ブラウザの判断で破棄されることがあります。その場合、残したい最高記録や録音は失われるかもしれません。長時間離れるなら、先に区切りをつけておく方が安全です。

次の行動

まず、上のコードで自分のブラウザの裏タブの挙動を測ってください。次に、紙ひこうき郵便や時計じかけの台所を開き、裏にして戻る確認をします。作る側の方は、時間を「回数」ではなく「時刻の差」で測っているか、戻った瞬間の更新量に上限があるかを点検してみてください。

参考資料

• MDN Web Docs「Page Visibility API」
• MDN Web Docs「Window: requestAnimationFrame() メソッド」
• MDN Web Docs「setTimeout() / setInterval() の使用」（バックグラウンドタブでの遅延に関する説明）