2日目のゴールと今日やること
引用元：なし（本教材はオリジナル解説です）
2日目のテーマは
「setTimeout を使って“動き続けるタイマー”の仕組みを理解し、開始・停止・リセットの動きを頭と手でつかむ」
ことです。
1日目では、
- setTimeout は「あとで実行する処理の予約」
- clearTimeout で予約をキャンセルできる
- isRunning で「今動いているかどうか」を管理する
ここまで来ました。
今日はここに、
- 経過時間（elapsed）を変数で管理する
- setTimeout を繰り返し呼び出して“疑似タイマー”を作る
- 開始・停止・リセットを「時間付き」で理解する
という、タイマーアプリの“心臓部”を作っていきます。
setTimeout を「1回だけ」から「繰り返し」へ進化させる
setTimeout の本質をもう一度整理する
setTimeout は、
setTimeout(実行したい処理, 待つ時間ミリ秒);
という形で使い、
- 今すぐ実行されるわけではない
- 指定した時間が経ってから実行される
- 実行されるのは 1回だけ
という特徴があります。
ここが重要です。
タイマーアプリは「1秒ごとに動き続ける」必要があります。
つまり、setTimeout を自分で繰り返し呼び出す必要があるのです。
経過時間（elapsed）を変数で管理する
時間は「ただの数値」として扱える
タイマーアプリでは、
- 今何秒経ったか
- 停止したときの時間
- リセットしたら 0 に戻す
といった動きが必要です。
そのために、まずは変数を用意します。
let elapsed = 0; // 経過時間（ミリ秒）
1秒ごとに 1000 ミリ秒を足していけば、
0 → 1000 → 2000 → 3000 → …
と増えていきます。
時間を増やす処理はこう書く
elapsed += 1000;
これは、
elapsed = elapsed + 1000;
と同じ意味です。
「tick」関数を作る：タイマーの心臓部
tick は「1秒ごとに呼ばれる処理」
タイマーの中心になるのが、この tick 関数です。
function tick() {
if (!isRunning) {
return;
}
elapsed += 1000;
console.log("経過時間:", elapsed / 1000, "秒");
timerId = setTimeout(tick, 1000);
}
ここでの重要ポイントを深掘りします。
深掘り①：isRunning が安全装置になる
if (!isRunning) return;
これは、
- タイマーが止まっているのに tick が動いてしまう
- その結果、勝手に時間が増えてしまう
という事故を防ぐための“安全装置”です。
深掘り②：elapsed を増やす
elapsed += 1000;
1秒ごとに 1000 ミリ秒を足すことで、
「経過時間」を自分で管理できます。
深掘り③：setTimeout を自分で呼び直す
timerId = setTimeout(tick, 1000);
これが “動き続けるタイマー”の正体 です。
- tick が実行される
- その中で「1秒後の tick」を予約する
- 1秒後に tick が実行される
- また予約する
このループが続くことで、
setTimeout だけで「1秒ごとに動くタイマー」が作れます。
開始機能 startTimer を時間付きで作る
「動いていなければ、心臓を動かす」
function startTimer() {
if (isRunning) {
console.log("すでにタイマーは動いています。");
return;
}
console.log("タイマー開始");
isRunning = true;
timerId = setTimeout(tick, 1000);
}
ここでのポイントは、
- すでに動いているなら何もしない
- 動いていなければ isRunning を true にする
- 最初の tick を予約する
という流れです。
停止機能 stopTimer を時間付きで作る
「予約されている次の tick をキャンセルする」
function stopTimer() {
if (!isRunning) {
console.log("タイマーは動いていません。");
return;
}
clearTimeout(timerId);
timerId = null;
isRunning = false;
console.log("タイマーを停止しました。現在の経過時間:", elapsed / 1000, "秒");
}
ここでの深掘りポイント。
深掘り①：clearTimeout は「次の tick を止める」
tick は「1秒後の tick」を予約し続けています。
つまり、止めたいときは 次の予約をキャンセルする 必要があります。
深掘り②：elapsed はそのまま残す
停止は「時間を止める」だけで、
「時間を0に戻す」わけではありません。
リセット機能 resetTimer を時間付きで作る
「止める」と「0に戻す」を両方やる
function resetTimer() {
if (isRunning) {
clearTimeout(timerId);
console.log("動作中のタイマーを停止しました。");
}
isRunning = false;
timerId = null;
elapsed = 0;
console.log("リセットしました。経過時間は 0 秒です。");
}
ここでの深掘りポイント。
深掘り①：リセットは「停止＋初期化」
- 動いていたら止める
- 状態を「停止中」にする
- 経過時間を 0 に戻す
という3つの仕事をまとめて行います。
2日目のミニ完成版：コンソールで動くタイマー
ここまでを全部つなげたコード
let timerId = null;
let isRunning = false;
let elapsed = 0; // ミリ秒
function tick() {
if (!isRunning) {
return;
}
elapsed += 1000;
console.log("経過時間:", elapsed / 1000, "秒");
timerId = setTimeout(tick, 1000);
}
function startTimer() {
if (isRunning) {
console.log("すでにタイマーは動いています。");
return;
}
console.log("タイマー開始");
isRunning = true;
timerId = setTimeout(tick, 1000);
}
function stopTimer() {
if (!isRunning) {
console.log("タイマーは動いていません。");
return;
}
clearTimeout(timerId);
timerId = null;
isRunning = false;
console.log("タイマーを停止しました。現在の経過時間:", elapsed / 1000, "秒");
}
function resetTimer() {
if (isRunning) {
clearTimeout(timerId);
console.log("動作中のタイマーを停止しました。");
}
isRunning = false;
timerId = null;
elapsed = 0;
console.log("リセットしました。経過時間は 0 秒です。");
}
ブラウザのコンソールで、
startTimer();
と打つと、1秒ごとに
経過時間: 1 秒
経過時間: 2 秒
経過時間: 3 秒
と増えていきます。
2日目で特に深く理解してほしいこと
setTimeout を「自分で繰り返す」とタイマーになる
setTimeout は本来「1回だけ」ですが、
tick の中で自分自身を予約することで、
“動き続けるタイマー” になります。
経過時間は「ただの数値」
elapsed を増やすだけで、
時間を自由に扱えるようになります。
開始・停止・リセットは役割が違う
開始 → 動き始める
停止 → 動きを止める（時間は残す）
リセット → 止めて時間を0に戻す
この3つを混同しないことが大事です。
3日目へのつなぎ
3日目からは、
- HTML に「秒数表示」を出す
- ボタン（開始・停止・リセット）と連動させる
- 見た目が“アプリ”になる
という方向に進みます。
今日のコードが「タイマーの心臓」なので、
ここをしっかり理解しておくと、
3日目以降が一気に楽になります。
次のステップに進む準備はできていますね。
