⏱️ ラップタイマー付きオンラインストップウォッチ

概要

内部的には、3つの状態があります。1つはミリ秒単位の累積された`elapsed`値、2つ目は「開始」を押した瞬間の`performance.now()`のスナップショットである`startAt`、3つ目は`running`というブール値のフラグです。画面に表示される数値を生成する関数は、`running`がtrueの場合、現在時刻と`startAt`の差を`elapsed`に加えたものです。`setInterval`はこの関数を30ミリ秒ごとに呼び出して表示を再描画するだけで、このインターバル自体はタイミング情報を持たず、単なる再描画トリガーです。これはストップウォッチを正しく構築する正しい方法であり、タイマーやカウンターがtickが遅延したり、スキップされたり、マージされたりした際にゆっくりとずれてしまうという一般的なバグを直接回避します。

この設計選択は、他のタブに切り替えるときにも同じように適用されます。ブラウザはバックグラウンドタブのタイマーをCPUとバッテリーを節約するために制限します。30ミリ秒ごとに`setInterval`が設定されている場合、タブが見えない間、1秒ごと、またはそれより遅く実行されることがあります。このストップウォッチでは、この制限は画面に表示される数値が再描画される頻度に影響を与えるだけで、基本的な計算（現在のタイムスタンプから開始タイムスタンプを引いたものに、すでに累積された時間を加えたもの）は再描画がスキップされた回数にかかわらず正確です。タブに戻った瞬間、次の再描画で正確な経過時間が表示されます。制限によって時間は失われたり増えたりせず、ただの表示の滑らかさが低下するだけです。

`performance.now()`を使うことがこのタスクにとって正しいプリミティブであり、偶然の詳細ではない。`Date.now()`はシステムのウォールクロックを反映しており、ウォールクロックはジャンプする可能性がある。ノートPCが睡眠から目覚めてNTPサーバーと同期し、手動で時刻を変更したり、夏時間の調整が行われたりした場合、`Date.now()`はセッション中で前進したり、場合によっては後退したりする可能性がある。`performance.now()`はモノトニッククロックとして定義されており、常に一定の速度で上昇し、これらの修正には影響されない。これはストップウォッチに必要な保証であり、普通のウォールクロックタイマにはない特性である。

このツールの誠実な制限は、永続性であり、これは存在しない。このバージョンでは、`elapsed`と`laps`配列はページメモリ内の通常のJavaScript変数として保持されており、ソースコードのどこにも`localStorage`やこのサイト独自の`Playground.store()`ヘルパーへの呼び出しがない。他のToolioツールがリロードを生き延びるために使用するものではない。つまり、ページをリロードしたり、タブを閉じたり、他のツールに切り替えたりすると、あなたの走行時間と記録されたすべてのラップが即座に永久に消えてしまう。前のセッションを再開する機能もないし、デバイス間で同期するものもないし、バックアップするものもない。なぜなら、最初からストレージに何も書き込まれていないからだ。もしラップ履歴が実際に重要であれば、ワークアウトログやプレゼンテーションのタイミングなど、数値をメモしたりスクリーンショットを撮ったりして、他のページに移動する前に保存しておく必要がある。このページはそれらをあなたの代わりに覚えておくことはできない。

使い方

1. 「開始」をクリックすると、ボタンは直ちに「一時停止」にラベルが変わり、画面の時計はリアルタイムで上昇し始め、30ミリ秒ごとに再描画される。
2. 「ラップ」を実行中の任意の時点でクリックして、現在の経過時間をスナップショットにします。新しいエントリはラップリストの上部にピン留めされ、前のラップからのスプリット（経過時間）と累積合計を表示します。
3. 同じボタンをもう一度クリックすると、今や「一時停止」とラベルされているため、表示が凍結されます。経過時間は内部的に保持され、何もないことはなく、ボタンは「開始」に戻ります。
4. 「開始」をもう一度クリックして、正確に離れた場所から再開して、ゼロからではなく。
5. 「リセット」をクリックして、表示をゼロにし、すべての記録されたラップをクリアし、両方のボタンを初期のラベルに戻します。これは、新しいセッションを開始する唯一の方法です。なぜなら、古いセッションを保護する保存機能は存在しないからです。

よくある質問

このストップウォッチは実際にどのように時間の測定を行っているのでしょうか？

「開始」を押した瞬間、`performance.now()`を1回読み取り、その数値を保存します。その後、画面に表示される値は「すでに累積された時間」に「現在の`performance.now()`から保存された開始タイムスタンプを引いた値」を加えたもので、30ミリ秒ごとの再描画のたびに再計算されます。このツールは、単に各tickで固定の+30msを累積に加えるという短絡的な方法ではなく、この方法で時間を測定しています。これは多くの自作タイマーが徐々に同期を失う原因となるものです。

他のブラウザタブに切り替えた場合、時間はどうなるのでしょうか？

バックグラウンドタブは制限されます。ブラウザは、CPUとバッテリーを節約するために、30ミリ秒ごとの`setInterval`を1秒ごと、またはそれより遅く実行する可能性があります。そのため、タブから離れている間、画面に表示される数値が一時的に凍結またはジャンプする可能性があります。しかし、このストップウォッチは、常に経過時間をタイムスタンプの差として計算しており、発火したtickの数を数えるのではなく、タブに戻った瞬間、次の再描画で正確な経過時間が表示されます。制限によって時間は失われたり増えたりせず、ただの視覚的な滑らかさが低下するだけです。

なぜ`performance.now()`ではなく`Date.now()`を使用するのでしょうか？これは実際に重要なのでしょうか？

はい。`Date.now()`はシステムのウォールクロックを反映しており、これは前進したり、後退したりする可能性があります。たとえば、ノートPCが睡眠から目覚めてNTPサーバーと同期した直後、またはシステムクロックが手動で変更された場合などです。`performance.now()`は、常に一定の速度で上昇するモノトニッククロックであり、これらの修正には影響されません。これはストップウォッチに必要な特性であり、この構築では正しいプリミティブを使用しています。

このツールは、私の経過時間やラップ履歴をどこかに保存していますか？

いいえ。他のToolioツールとは異なり、このデータにはブラウザのlocalStorageを一切使用していません。あなたが見るすべての情報は、この特定のタブが開いている限り、ページのメモリ内にのみ存在します。ページをリロードしたり、タブを閉じたり、他のツールに移動したりすると、あなたの経過時間とすべてのラップは永久に消えてしまいます。これは、最初からストレージに何も書き込まれていないためです。記録が必要であれば、数値をメモしたりスクリーンショットを撮ったりして、他のページに移動する前に保存しておく必要があります。

ラップ数には制限がありますか？また、各ラップ行の2つの数字は何を表していますか？

制限はありません。リストは単に長くなり、最新のラップは常に上部にピン留めされます。各行には2つの数字が表示されます。アクセントカラーで示されるのは、前のラップからのスプリット（経過時間）であり、灰色で示されるのは、開始から累積された時間です。この組み合わせにより、全体のランを追跡せずに、1つのワークアウトインターバルや、1つのスピーチセクションなどの個々のセグメントを評価できます。

このツールはデータをアップロードしますか？

いいえ。すべてブラウザ内で処理されるため、データが端末を離れることはありません。ページを一度読み込めばオフラインでも動作します。