ストップウォッチ
ラップ機能付きオンラインタイマー
ストップウォッチの使い方
スタート・ストップ・ラップ・リセットの4操作だけで使えるオンラインストップウォッチです。経過時間は「スタート時刻と現在時刻(Date.now())の差分」で求め、画面の更新には requestAnimationFrame を使うため、描画が一時的に遅れても計測値そのものに誤差が積み上がりにくい方式です。計測はすべてブラウザ内で完結し、サーバーとの通信や計測結果の保存は行いません。
スタート / ストップ
再生ボタンで計測を開始し、一時停止ボタンで止めます。停止していた時間は経過時間に含まれず、再開すると停止した値から続きが計測されます。
ラップ計測
計測中にフラッグボタンを押すと、その時点の累積経過時間(Time)と、直前のラップからの区間タイム(Split)を一覧に追加します。最新のラップが一番上に並びます。
リセット
リセットボタンで経過時間を 00:00.00 に戻し、ラップ一覧も同時に消去します。計測中でも押せますが、消した記録は元に戻せません。
ブラウザのタイマー精度とバックグラウンドタブでの動作
ブラウザ上のストップウォッチには「タイマーの呼び出し回数を数える方式」と「時刻の差分を取る方式」があり、精度の性質が大きく異なります。このツールが後者を採用している理由と、非表示タブでの挙動を整理します。
| 項目 | setInterval の回数を数える方式 | 時刻差分方式(本ツール) |
|---|---|---|
| 経過時間の求め方 | 10ms ごとの呼び出しごとにカウンタを +1 | Date.now() − スタート時刻 |
| 呼び出しが遅れたとき | 遅れた分だけ実時間より短く表示され、誤差が累積する | 次の描画で実時間に追いつく(累積しない) |
| 非表示タブでの挙動 | ブラウザがタイマーを 1 秒以上の間隔に間引くため大きく遅れる | 描画は止まるが、戻った時点で正しい経過時間を表示 |
| 依存するもの | ブラウザのタイマー実行間隔 | OS の時計(時刻補正の影響を受ける) |
MDN の setTimeout の解説には、非アクティブなタブではタイマーの間隔が 1 秒以上に制限されることが「指定より遅延が長くなる理由」として明記されています。 Chrome はさらに、5 分以上非表示のタブで連鎖するタイマーを 1 分に 1 回まで間引く仕様(Chrome 88 の intensive throttling)を導入しています。 呼び出し回数を数える方式のストップウォッチは、この間引きの影響をそのまま受けます。
本ツールは画面の更新に requestAnimationFrame を使っています。 requestAnimationFrame はバックグラウンドタブでは呼び出しが停止するため、非表示中は数字が止まって見えますが、経過時間は上の式で毎回計算し直すので、タブに戻ると実時間に一致した値が表示されます。 一方で Date.now() は OS の時計を参照する値であり、ブラウザの設定によっては分解能が丸められること、計測中に OS の時刻が補正されるとその分ずれることが、この方式の限界です。
実際の使用例
3本のラップを記録する
計測中にフラッグボタンを3回押した場合の一覧です。Split は直前のラップとの差(今回の Time − 前回の Time)で、1本目だけはスタートからの時間と一致します。
INPUT
スタート 00:30.00 でラップ 01:05.50 でラップ 01:35.20 でラップ
OUTPUT
#3 01:35.20 +00:29.70 #2 01:05.50 +00:35.50 #1 00:30.00 +00:30.00
途中で一時停止を挟む
停止中の時間は経過時間に加算されません。再開時に開始時刻を「現在時刻 − 停止時点の経過時間」に置き直すことで、停止した値から続きを計測します。
INPUT
スタート 00:20.00 で一時停止 10秒待ってから再開 さらに15秒後に一時停止
OUTPUT
表示: 00:35.00 (停止していた10秒は含まれない)
1時間30分の長時間計測
表示は「分:秒.センチ秒」で、時間の桁はありません。60分を超えると分の値がそのまま積み上がります。
INPUT
スタートから1時間30分(5,400,000ミリ秒)経過
OUTPUT
表示: 90:00.00
よくある質問
表示の「.00」の桁は何を表していますか?
小数点以下の2桁は1/100秒(センチ秒)です。内部ではミリ秒単位で経過時間を保持し、表示するときに10ミリ秒単位へ切り捨てています。たとえば内部値が 1,234 ミリ秒なら「00:01.23」と表示されます。
計測の精度はどのくらいですか?
経過時間は「Date.now() − スタート時刻」の差分で求めているため、setInterval の呼び出し回数を数える方式と違い、画面更新が遅れても誤差が累積しません。ただし Date.now() は OS の時計を参照するので、計測中に OS が時刻を自動補正するとその分だけ値が動く可能性があります。また、ブラウザによってはフィンガープリント対策として Date.now() の分解能を数ミリ秒単位に丸めることがあります(MDN の Date.now() の解説を参照)。1/100秒表示は目安として扱い、競技の公式記録などには専用機器を使ってください。
別のタブに切り替えたり、ウィンドウを最小化しても計測は続きますか?
続きます。非表示のタブでは requestAnimationFrame が止まるため画面の数字は更新されませんが、経過時間はスタート時刻との差分で計算しているので、タブに戻った瞬間に正しい経過時間へ追いつきます。ただし非表示の間はラップボタンを押せないので、区間タイムを取りたい場合はタブを前面に置いたまま使ってください。ページを再読み込みしたり閉じたりすると計測値とラップは消えます。
60分を超える計測はできますか?
できます。表示は「分:秒.センチ秒」の形式で時間の桁がなく、分が60を超えてもそのまま増えていきます。たとえば1時間30分なら「90:00.00」、100分を超えると分の部分が3桁になります。
ラップ一覧の「Time」と「Split」は何が違いますか?
Time はスタートからその時点までの累積経過時間、Split は直前のラップからの区間タイム(今回の Time − 前回の Time)です。1本目のラップは前のラップがないため、Split はスタートからの時間と同じ値になります。周回ごとのペースを比べたいときは Split、通算タイムを見たいときは Time を参照してください。
記録したラップを保存したりコピーしたりできますか?
保存・書き出しの機能はありません。ラップ一覧はページを表示している間だけメモリ上に保持され、リセットや再読み込みで消えます。残しておきたい記録は、一覧に表示されている値を手動で控えてください。
役立つTips
一時停止中はラップを記録できない
ラップボタンは計測中だけ有効で、停止中は押せないようになっています。区間タイムを取りたい場合は、止めずにフラッグボタンだけを押してください。
停止していた時間は経過時間に含まれない
再開時には「現在時刻 − それまでの経過時間」を新しい開始時刻として設定し直します。そのため、途中で何度停止しても、停止中の時間は表示に加算されません。
Split の増減でペースの変化が分かる
ラップ一覧の Split(+で始まる値)が前の行より大きければ、その区間はペースが落ちています。反復練習やテストの実行時間を比べるときは、Time より Split を見ると変化が分かりやすくなります。
再読み込みや閉じる操作で記録は消える
計測値もラップもブラウザのメモリ上にだけ存在し、localStorage などへの保存は行っていません。長時間の計測中はうっかりタブを閉じたり更新したりしないよう注意してください。