ストップウォッチ & タイマー（ラップ記録、タイムスタンプ精度）

作ったもの

Stopwatch & Timer — https://sen.ltd/portfolio/stopwatch-timer/

• 2 モード: ストップウォッチ + カウントダウンタイマー
• ラップ記録（ベスト / ワーストをハイライト）
• ミリ秒精度
• キーボード: Space / R / L
• タイマー完了時の Web Audio ビープ + 通知
• タイムスタンプベースでドリフトしない

vanilla JS、ゼロ依存、ビルド不要。node --test で 64 ケース。

タイムスタンプベースの正確な時間追跡

// accumulated: 過去の run segments の合計
// startedAt: 現在 segment の開始時刻

pauseStopwatch: accumulated += now - startedAt; startedAt = null;
getElapsed:     return running ? accumulated + (now - startedAt) : accumulated;

タブバックグラウンドでも正確。レンダー頻度に依存しない。

ラップの時間分解

const cumulative = getElapsed(state, now);
const previous = laps.at(-1)?.cumulative || 0;
const time = cumulative - previous;

各ラップは「このラップの時間」と「累積」の両方を保持。UI は両方表示してインターバル練習や繰り返しタスクに使える。

parseTimeString は寛容に

1:30:45    → 時:分:秒
5m         → 5 分
1h30m      → 1 時間 30 分
90         → 90 秒

ユーザが実際に打ちそうな形式は全部受け付ける。「正しい形式で入力してください」エラーは敵意を感じる UX。

シリーズ

100+ 公開ポートフォリオ シリーズの #90 です。

• 📦 リポジトリ: https://github.com/sen-ltd/stopwatch-timer
• 🌐 デモ: https://sen.ltd/portfolio/stopwatch-timer/
• 🏢 会社: https://sen.ltd/