オンラインストップウォッチ

オンラインストップウォッチは、ゼロから経過時間を計測する精密タイミングツールで、通常ミリ秒単位の分解能を備えています。カウントダウンタイマーとは異なり、ストップウォッチは「それにどれくらい時間がかかったか？」を測定します。スポーツトレーニング、実験、プレゼンテーション、料理、コーディングスプリントなど、固定の終了点ではなく経過時間を追跡したいあらゆる活動に最適です。このツールはブラウザ内で完全に動作し、requestAnimationFrameによるスムーズな表示更新とperformance.now()による単調な時間計測を使用しているため、システム時刻が調整されても正確さを保ちます。ラップ記録機能でスプリットタイムを取得し、最速/最遅ラップをハイライト表示します。すべてのデータはローカルに保存され、アップロードされることはありません。

ストップウォッチエンジンは、ドリフトが発生しやすいsetIntervalパターンを完全に回避しています。代わりに、表示更新にはrequestAnimationFrame（rAF）、基準となる時間源としてperformance.now()を使用しています。ユーザーが「開始」をクリックすると、エンジンは現在のperformance.now()タイムスタンプをstartTimeとして記録します。各アニメーションフレームで、elapsed = accumulated + (performance.now() - startTime)を計算します。ここでaccumulatedは直近の一時停止前の累積経過時間を保持します。この2変数モデル（累積時間 + 実行時デルタ）により、サブミリ秒の精度を失うことなく一時停止/再開サイクルを正しく処理します。 performance.now()がDate.now()よりも選ばれる理由は、単調であることです — NTP補正、手動の時刻変更、夏時間の切り替えによって後方にジャンプすることがありません。また、サブミリ秒の分解能（最新のブラウザでは通常5マイクロ秒の粒度）を提供するため、短時間・高精度の計時に適した時計です。rAFコールバックはディスプレイのリフレッシュレート（通常60 Hz ≈ 16.67 ms、高リフレッシュレートディスプレイでは最大120 Hz）に制限されるため、視覚的な更新はスムーズですが、それが真実の源ではありません — 実際の経過時間はperformance.now()の計算から得られ、継続的に正確です。 ラップ記録は、「ラップ」ボタンがクリックされた瞬間の現在のelapsedMsをキャプチャし、前のラップの合計との差を計算します。最速ラップと最遅ラップは、すべてのラップ差分をMath.min/Math.maxで比較して決定され、ディスプレイはそれぞれ緑と赤のスタイルでハイライトします。すべての状態はクライアントコンポーネント内のReact useStateフックに保持され、データの永続化や送信は行われません — ストップウォッチは設計上はかなく、ページを閉じるか「リセット」ボタンを押すと完全にリセットされます。

• performance.now()は単調でサブミリ秒のタイムスタンプを提供 — システム時刻の変更の影響を受けません。
• requestAnimationFrameがディスプレイのリフレッシュレート（60–120 Hz）で表示更新を駆動し、スムーズなレンダリングを実現。
• 累積時間 + 実行時デルタモデルが一時停止/再開を精度損失なしで処理。
• ラップ差分は currentTotal - previousTotal で計算され、正確なスプリットタイミングを実現。
• すべての計算はブラウザ内でローカルに実行され、サーバーとの通信やデータアップロードはありません。