4日目のゴールと今日やること
引用元：なし（本教材はオリジナル解説です）
4日目のテーマは
「タイマーの表示を“アプリらしく整える”」
ことです。
1〜3日目であなたはすでに、
- setTimeout を使って 1 秒ごとに動くタイマー
- isRunning による状態管理
- 開始・停止・リセットの基本動作
- HTML に数字を表示する仕組み
ここまで理解できています。
4日目はここに、
- 秒数を「00:00」のように整形する
- 表示の更新をより見やすくする
- タイマーの内部処理を整理して“読みやすいコード”にする
という、アプリとしての「見た目の質」を上げる作業を行います。
時間表示を「00:00」形式に整える
なぜ整形が必要なのか？
3日目までの表示はこうでした。
1
2
3
4
これは「秒数」としては正しいのですが、
タイマーアプリとしては少し味気ないですよね。
一般的なタイマーは、
00:01
00:02
00:03
のように「分:秒」で表示されます。
この整形を行うために、
「ミリ秒 → 秒 → 分と秒」
という変換を行います。
経過時間（elapsed）を「分」と「秒」に分解する
ミリ秒 → 秒 → 分・秒 の変換
elapsed はミリ秒なので、まず秒に変換します。
const totalSeconds = Math.floor(elapsed / 1000);
次に、分と秒に分けます。
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
ここでのポイントは、
Math.floorは「小数点以下を切り捨てる」%は「余り」を求める演算子
ということです。
深掘り：なぜ余り（%）を使うのか？
例えば 75 秒なら、
- 分：75 ÷ 60 = 1
- 秒：75 % 60 = 15
となり、
01:15
と表示できます。
「2桁表示」にするための関数を作る
1桁の数字を「01」のようにする
タイマー表示では、
1 → 01
5 → 05
12 → 12
のように、
必ず2桁で表示する必要があります。
そのための関数を作ります。
function pad(num) {
return num.toString().padStart(2, "0");
}
padStart(2, “0”) は、
- 2桁になるまで
- 左側に “0” を追加する
という便利なメソッドです。
updateDisplay を「00:00」形式に進化させる
3日目の updateDisplay を思い出す
3日目ではこうでした。
function updateDisplay() {
document.getElementById("display").innerText = elapsed / 1000;
}
これを「分:秒」形式に変えます。
function updateDisplay() {
const totalSeconds = Math.floor(elapsed / 1000);
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
const formatted = pad(minutes) + ":" + pad(seconds);
document.getElementById("display").innerText = formatted;
}
これで、
タイマーが「00:00」形式で動くようになります。
tick 関数を「見た目重視」に整理する
2日目の tick を振り返る
function tick() {
if (!isRunning) return;
elapsed += 1000;
updateDisplay();
timerId = setTimeout(tick, 1000);
}
これはすでに完成形に近いですが、
4日目では「読みやすさ」を意識して整理します。
読みやすい tick の形
function tick() {
if (!isRunning) return;
elapsed += 1000;
updateDisplay();
timerId = setTimeout(tick, 1000);
}
実は、ほとんど変える必要がありません。
tick は「心臓部」なので、
シンプルであることが最も重要です。
開始・停止・リセットを「表示付き」で再確認する
開始
function startTimer() {
if (isRunning) return;
isRunning = true;
timerId = setTimeout(tick, 1000);
}
停止
function stopTimer() {
if (!isRunning) return;
clearTimeout(timerId);
timerId = null;
isRunning = false;
}
リセット
function resetTimer() {
if (isRunning) {
clearTimeout(timerId);
}
isRunning = false;
timerId = null;
elapsed = 0;
updateDisplay();
}
ここでのポイントは、
- リセットは「停止＋0に戻す＋画面更新」
- 停止は「動きを止めるだけ」
- 開始は「動いていなければ動かす」
という役割の違いを明確にすることです。
4日目のミニ完成版：00:00 表示のタイマー
HTML
<div id="display">00:00</div>
<button onclick="startTimer()">開始</button>
<button onclick="stopTimer()">停止</button>
<button onclick="resetTimer()">リセット</button>
JavaScript
let timerId = null;
let isRunning = false;
let elapsed = 0;
function pad(num) {
return num.toString().padStart(2, "0");
}
function updateDisplay() {
const totalSeconds = Math.floor(elapsed / 1000);
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
const formatted = pad(minutes) + ":" + pad(seconds);
document.getElementById("display").innerText = formatted;
}
function tick() {
if (!isRunning) return;
elapsed += 1000;
updateDisplay();
timerId = setTimeout(tick, 1000);
}
function startTimer() {
if (isRunning) return;
isRunning = true;
timerId = setTimeout(tick, 1000);
}
function stopTimer() {
if (!isRunning) return;
clearTimeout(timerId);
timerId = null;
isRunning = false;
}
function resetTimer() {
if (isRunning) {
clearTimeout(timerId);
}
isRunning = false;
timerId = null;
elapsed = 0;
updateDisplay();
}
4日目で特に深く理解してほしいこと
1つ目：時間は「分」と「秒」に分けて考える
ミリ秒 → 秒 → 分・秒
という変換の流れを理解すると、
どんな時間表示でも作れるようになります。
2つ目：2桁表示は padStart が最強
「01」「09」のような表示は、
padStart を使うと一瞬で作れます。
3つ目：updateDisplay は“画面の司令塔”
tick の中で updateDisplay を呼ぶことで、
時間の進みと画面の更新が完全に同期します。
5日目へのつなぎ
5日目からは、
- ボタンのデザインを整える
- タイマーのレイアウトを整える
- スタート中はボタンを無効化するなど、UI の質を上げる
という、“アプリとしての完成度”を高めていきます。
今日の「00:00 表示」ができた時点で、
あなたのタイマーはもう「アプリの顔」を持ち始めています。
