🕒 JavaScriptでストップウォッチを作ってみた｜スタート・ストップ・リセット機能付き

ストップウォッチは一見シンプルなツールに見えるかもしれませんが、JavaScriptで正確なタイマー機能を実装するには、意外と多くの学びがあります。
イベント処理、時間の計算、UIの更新方法、そしてsetIntervalのドリフト問題など、さまざまな課題に直面しました。

この記事では、**JavaScript（バニラJS）**だけで構築したストップウォッチの作り方を、ソースコード付きで解説します。

🔧 ストップウォッチの基本構造（HTML）
まずは最もシンプルな構造から始めます。必要なのは、時間を表示するエリアと3つのボタン（スタート・ストップ・リセット）だけです。

html
Copy
Edit
<div id="stopwatch">00:00:00</div>
<button id="start">スタート</button>
<button id="stop">ストップ</button>
<button id="reset">リセット</button>
💻 JavaScriptでのロジック（setInterval使用）
次に、JavaScriptでストップウォッチのロジックを構築します。
主に使用するのは、setInterval()で時間の更新を行い、clearInterval()で一時停止またはリセットを行います。

javascript
Copy
Edit
let startTime;
let elapsedTime = 0;
let timerInterval;

function timeToString(time) {
const date = new Date(time);
const minutes = date.getUTCMinutes().toString().padStart(2, '0');
const seconds = date.getUTCSeconds().toString().padStart(2, '0');
const milliseconds = Math.floor(date.getUTCMilliseconds() / 10)
.toString()
.padStart(2, '0');

return ${minutes}:${seconds}:${milliseconds};
}

function start() {
startTime = Date.now() - elapsedTime;
timerInterval = setInterval(() => {
elapsedTime = Date.now() - startTime;
document.getElementById('stopwatch').textContent = timeToString(elapsedTime);
}, 10);
}

function stop() {
clearInterval(timerInterval);
}

function reset() {
clearInterval(timerInterval);
document.getElementById('stopwatch').textContent = '00:00:00';
elapsedTime = 0;
}
📌 ボタンにイベントを追加
javascript
Copy
Edit
document.getElementById('start').addEventListener('click', start);
document.getElementById('stop').addEventListener('click', stop);
document.getElementById('reset').addEventListener('click', reset);
🎨 スタイリング（CSS）
最低限のCSSでも、見た目がかなり改善されます。タイマーを中央に表示し、フォントを整えましょう。

css
Copy
Edit
#stopwatch {
font-size: 48px;
margin: 20px 0;
font-family: monospace;
text-align: center;
}

button {
margin: 5px;
padding: 10px 20px;
font-size: 16px;
}
🧠 実装で学んだこと
このプロジェクトを通じて得た学びは以下の通りです：

Date.now()は簡単に使えるが、長時間動作では微妙なズレが起こることがある。

高精度が必要な場合は、performance.now()を使うとより信頼できる。

タイマーを正しくリセットしないと、バグやメモリリークの原因になる。

ミリ秒単位の表示を入れることで、リアルタイム感が強くなる。

UIの状態管理（スタート時、停止時、リセット時）を明確にすることで、UXが向上する。

❓ よくある質問（FAQ）
Q: setTimeoutではダメですか？
A: setTimeoutを再帰的に呼び出す方法もありますが、setIntervalの方がコードが簡潔で管理しやすいです。より高精度が必要な場合はperformance.now()を検討してください。

Q: 時間の単位を「時:分:秒」に変更できますか？
A: もちろん可能です。Math.floor(elapsedTime / 1000)を使用して秒数を取得し、そこから時間や分を計算できます。

Q: 停止後に再開する方法は？
A: elapsedTimeを保持し、再スタート時にDate.now()からその時間を引くことで、正確に再開できます。

Q: ボタンのUIがシンプルすぎるのですが？
A: CSSでスタイルを加えたり、アイコンを使ってより見やすくすることもできます。今回はあえてシンプルにしています。

📘 応用アイディア（次のステップ）
このストップウォッチをさらに進化させるには：

音が鳴るタイマー機能（アラーム）の追加

ReactまたはVueでの再実装

ローカルストレージに時間を保存して履歴機能を実装

ダークモードのトグル機能

スマホ対応のレスポンシブデザイン

✅ まとめ
ストップウォッチを作ることは、JavaScriptの時間管理やUI制御を学ぶうえで非常に良い練習になります。
コードはシンプルですが、タイミングのズレ、再開の処理、見やすさなど、細かい工夫が必要です。

もしあなたがフロントエンドの勉強中なら、ぜひストップウォッチ作成を試してみてください。コードが動いて時間がカウントされるだけで、かなり達成感があります。

次回は、カウントダウンタイマーの作成や、performance.now()を使ったより正確なタイミング制御について書く予定です。