ストップウォッチ

ラップとスプリットタイム、キーボードショートカット、結果一覧のコピーに対応した高精度オンラインストップウォッチ。単調時計を使うため、バックグラウンドタブでもずれません。

ずれないストップウォッチ。 ボタンでもキーボードでも開始・一時停止・ラップ記録ができます。各ラップはそのラップ単独のタイムと累計タイムの両方を保持し、一覧はまとめてコピーできます。

00:00:00.00

スペースで開始 / 一時停止、L でラップ、R でリセット。

ラップ
# ラップ 累計

まだラップが記録されていません。

ブラウザのストップウォッチを正確にするもの

カウンタではなくタイムスタンプを使う

ストップウォッチを作るときに真っ先に思いつくのは、タイマーが発火するたびに一定量をカウンタに足す方法です。しかしそれは誤った方法でもあります。ブラウザのタイマーは時間どおりに発火する保証がないからです。別のタブに切り替えれば間隔は 1 秒に 1 回まで絞られるか完全に停止し、ノート PC をスリープさせれば止まってしまいます。そうやって作ったカウンタは時間を失い、失った分は二度と戻りません。

このストップウォッチは代わりに開始した瞬間を記録し、再描画のたびに現在の瞬間からそれを引きます。何も累積しないため、誤差も累積しようがありません。タブが絞られると表示の更新は止まりますが、裏側の時計は動き続けており、戻ってきた最初のフレームで正しい経過時間が表示されます。離席中に遅れた数字が出ることはありません。

壁時計ではなく単調時計を使う

ここで使っているのは performance.now() で、ページ読み込み時からカウントし、前にしか進みません。これが重要なのは、壁時計の時刻、つまり Date.now() が返す値は飛ぶことがあるからです。NTP の補正がわずかに動かし、夏時間の切り替えがずらし、ユーザーがシステム時計を変更すれば数時間単位でどちらの方向にも動きます。

壁時計から読むストップウォッチはこれらの飛びをそのまま引き継ぎます。計測の途中で NTP 同期が走れば、記録された区間は単純に誤りになりますが、画面上にはそれを示すものが何もありません。単調な時間源にはこの失敗モードがありません。何とも同期しておらず、調整もできず、測っているのは経過時間だけです。

ラップと累計、両方を表示する理由

各行には 2 つの数値が記録されます。累計は開始からそのラップまでの時間、ラップは前のラップからの時間です。この 2 つは別々の問いに答えるものなので、自分がどちらを見ているのかを意識する価値があります。

8 周を走るランナーを計測するとき、ラップタイムはペースを維持しているのか、垂れているのか、上げているのかを教えてくれます。つまり 1 周ごとの出来です。累計タイムは全体の目標タイムに対してどの位置にいるかを教えてくれます。累計だけを見ていると減速に気づきにくくなります。どの数字にもそれ以前のすべてが含まれているからです。逆にラップだけを見ていると全体の結果を見失います。両方を表示すれば同じ表からペースと進捗の両方を読み取れますし、書き出したデータにも 2 列とも残るので、貼り付けた先でもそのまま使えます。

すべてブラウザ内のネイティブ JavaScript で動作します。外部ライブラリなし、アップロードなし、追跡なし。

よくある質問

計測精度はどのくらいですか。
表示は 100 分の 1 秒単位で、裏側の時計はミリ秒未満の精度です。実際の限界はストップウォッチではなくボタンを押すあなたの反応時間です。
タブを切り替えても動き続けますか。
動き続けます。ブラウザがバックグラウンドタブを絞るため表示の更新は止まりますが、経過時間はタイムスタンプから計算しているので、戻った瞬間に正しい値が表示されます。
ラップと累計の違いは何ですか。
累計は開始からそのラップまで、ラップは前のラップからの時間です。ラップはペースを、累計は全体に対する進捗を示します。
再読み込みするとラップは残りますか。
残りません。すべてメモリ上にのみ保持されるため、再読み込みで消えます。残したい場合はページを離れる前にラップ一覧をコピーしてください。
キーボードショートカットは何がありますか。
スペースで開始 / 一時停止、L でラップ、R でリセットです。入力欄で文字を打っている間は無視されるため、誤って発動することはありません。
一時停止中にラップを記録できますか。
できません。ボタンは無効になります。ラップは進行中の計測における一点を刻むものなので、時計が止まっている状態で記録しても現在の累計を複製するだけです。