カウントダウンタイマー

カウントダウンタイマーは、指定した時間からゼロに向かって減っていく時間管理ツールです。集中作業、料理、運動のインターバル、授業、会議、発表練習など、終了時刻よりも「決めた長さを守る」ことが重要な場面で役立ちます。ストップウォッチがゼロから経過時間を測るのに対し、カウントダウンは残り時間と終了点をはっきり示します。残り時間が見えると、ペース配分や切り上げの判断がしやすくなります。このページにはストップウォッチと複数タイマーもあり、ラップ計測や複数作業の並行管理にも使えます。重要な通知ではブラウザのタブを開いたままにしてください。

カウントダウンエンジンは信頼できるクロックとしてsetInterval(callback, 1000)を使用しません。その手法はHTML5イベントループ仕様が最小遅延のみを保証し固定間隔を保証しないため、ドリフトが蓄積します。代わりに、ページはDate.now()（またはサブミリ秒分解能のperformance.now()）でstartTimeを記録し、各ティックでremaining = targetDuration - (Date.now() - startTime)を計算します。表示の更新はrequestAnimationFrameで駆動され、ブラウザがディスプレイのVSYNCレート（通常60Hz/16.67ms、高リフレッシュのノートPCやスマートフォンでは120Hzの場合あり）にスロットリングします。この自己修正設計により、ガベージコレクションや長いレイアウトによるJavaScriptタスクキューの停滞後でも、表示される秒数が壁時計と整合します。 バックグラウンドスロットリングはタイマーの予期せぬ挙動の主要因です。HTML Living Standardによると、非表示タブのsetInterval/setTimeoutは最低1000msに制限されます（Chrome、Firefox、Safariはそれぞれのヒューリスティックで実装。Chromeはバッテリー駆動時に約5分経過した非アクティブタブを追加でフリーズします）。Page Visibility API（document.visibilityState、document.hidden、visibilitychangeイベント）により、タブ切り替えを検出し、タブが再びフォアグラウンドになった際にDate.now()と内部クロックを照合できます。カウントダウン終了時のサウンドはWeb Audio API（AudioContext + OscillatorNodeまたはプリロードしたAudioBuffer）で再生され、iOS Safariや最新のChromeでは自動再生ポリシーを満たすために事前のユーザージェスチャーによるアクティベーションが必要です。最善の視覚的アラートも描画され、ユーザーが事前に許可を与えていればNotification APIを介したOSレベルのトースト通知も送信できます。 複数タイマーモードでは各タイマーを独立したstartTimeを持つ独自の状態オブジェクトで管理し、単一のrequestAnimationFrameループが各フレームで配列をイテレートします。タイマーごとに別々のインターバルを回すよりもCPU負荷を一定に保てます。リロード間の永続化ではシリアライズされたendTimeをlocalStorageに保存し、マウント時に残り時間を再計算できます。OSによる壁時計補正（手動時刻変更、NTPステップ、夏時間切替）はDate.now()を瞬間的にシフトさせ、復元されたタイマーがジャンプして見える場合があることに注意してください。performance.now()は単調であり、単一ページロード内の経過時間のみが重要な場合に推奨されます。

• Date.now()またはperformance.now()を信頼できるソースとして使用。蓄積されたsetIntervalティックを信頼しないこと。
• requestAnimationFrameはディスプレイVSYNC（60Hz≈16.67ms、120Hz≈8.33ms）にリペイントを制限する。
• 非表示タブではHTML仕様によりsetIntervalが最低1000msにスロットリング。Chromeはバッテリー駆動時に約5分でページをフリーズする場合がある。
• Page Visibility API（visibilitychangeイベント）はタブがフォアグラウンドに戻った際のタイマー照合のためのフック。
• Web Audio APIはiOS SafariとChromeで自動再生ポリシーを満たすために事前のユーザージェスチャーアクティベーションが必要。
• Notification APIはNotification.requestPermission()とセキュアコンテキスト（HTTPSまたはlocalhost）を必要とする。
• performance.now()はNTPステップやDSTジャンプを跨いでも単調。Date.now()はそうではない。用途に応じて選択すること。