3日目のゴールと今日やること
引用元：なし（本教材はオリジナル解説です）
3日目のテーマは
「タイマーの動きを“画面に表示する”ための基礎をつくる」
ことです。
1日目・2日目であなたはすでに、
- setTimeout の仕組み
- clearTimeout による停止
- isRunning による状態管理
- tick 関数での「1秒ごとに動く心臓部」
ここまで理解できています。
3日目はここに、
- HTML に経過時間を表示する
- JavaScript から画面を書き換える
- 開始・停止・リセットを「画面と連動」させる
という、“アプリとしての見た目”を作る準備をします。
HTML と JavaScript の役割を理解する
HTML は「表示する場所」、JavaScript は「動かす人」
タイマーアプリは、
HTML と JavaScript が協力して動きます。
HTML
→ 「数字を表示する場所」を作る
JavaScript
→ 「数字を変える」「時間を進める」
この役割分担を理解すると、
アプリがどう動いているかが一気に分かりやすくなります。
まずは表示場所を作る
HTML に、経過時間を表示するための場所を作ります。
<div id="display">0</div>
この <div> が、
「タイマーの数字が表示される画面」になります。
JavaScript からは、
document.getElementById("display")
で、この場所を操作できます。
JavaScript から画面を書き換える方法
innerText を使って数字を更新する
画面の数字を変えるには、
innerText を使います。
document.getElementById("display").innerText = "5";
これで、画面の数字が「5」に変わります。
経過時間を表示する関数を作る
2日目で作った elapsed（ミリ秒）を
画面に表示する関数を作りましょう。
function updateDisplay() {
const seconds = elapsed / 1000;
document.getElementById("display").innerText = seconds;
}
tick の中でこれを呼べば、
1秒ごとに画面が更新されます。
tick 関数を「画面更新付き」に進化させる
2日目の tick を思い出す
2日目の tick はこうでした。
function tick() {
if (!isRunning) return;
elapsed += 1000;
console.log("経過時間:", elapsed / 1000, "秒");
timerId = setTimeout(tick, 1000);
}
これを「画面更新付き」にするとこうなります。
function tick() {
if (!isRunning) return;
elapsed += 1000;
updateDisplay();
timerId = setTimeout(tick, 1000);
}
深掘り：なぜ tick の中で updateDisplay を呼ぶのか？
tick は「1秒ごとに呼ばれる心臓部」です。
- 時間を進める
- 画面を更新する
- 次の tick を予約する
この3つをセットで行うことで、
タイマーが“動いているように見える”わけです。
開始・停止・リセットを「画面付き」で再設計する
開始：動いていなければ動かす
function startTimer() {
if (isRunning) return;
isRunning = true;
timerId = setTimeout(tick, 1000);
}
開始時は、
「最初の tick を予約する」だけで十分です。
停止：予約をキャンセルする
function stopTimer() {
if (!isRunning) return;
clearTimeout(timerId);
timerId = null;
isRunning = false;
}
停止しても elapsed は残します。
（再開したときに続きから動くため）
リセット：停止して 0 に戻す
function resetTimer() {
if (isRunning) {
clearTimeout(timerId);
}
isRunning = false;
timerId = null;
elapsed = 0;
updateDisplay();
}
リセットは、
- 止める
- 時間を 0 に戻す
- 画面も 0 に戻す
という3つの仕事をまとめて行います。
3日目のミニ完成版：画面に数字が動くタイマー
HTML
<div id="display">0</div>
<button onclick="startTimer()">開始</button>
<button onclick="stopTimer()">停止</button>
<button onclick="resetTimer()">リセット</button>
JavaScript
let timerId = null;
let isRunning = false;
let elapsed = 0;
function updateDisplay() {
document.getElementById("display").innerText = elapsed / 1000;
}
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();
}
これで、
- 開始 → 数字が動く
- 停止 → 数字が止まる
- リセット → 0 に戻る
という「画面付きタイマー」が完成します。
3日目で特に深く理解してほしいこと
1つ目：HTML と JavaScript の役割分担
HTML は「表示する場所」
JavaScript は「数字を変える人」
この構造を理解すると、
アプリがどう動いているかが一気に分かります。
2つ目：updateDisplay は「画面を更新する専用の関数」
tick の中で updateDisplay を呼ぶことで、
時間の進みと画面の更新が同期します。
3つ目：開始・停止・リセットは「画面」と連動させる
開始 → tick を予約
停止 → 次の tick をキャンセル
リセット → 停止＋0に戻す＋画面更新
この3つの役割を混同しないことが大事です。
4日目へのつなぎ
4日目からは、
- 秒数を「00:00」のように整形する
- ボタンのデザインを整える
- タイマーの見た目を“アプリっぽく”する
という方向に進みます。
今日の内容は、
タイマーアプリの「見た目が動く」ための基礎です。
ここまで来たあなたなら、
もう本物のアプリに片足突っ込んでいますね。
