JavaScript | 1 日 90 分 × 7 日アプリ学習：タイマーアプリ（初級編）

JavaScript
スポンサーリンク

1日目のゴールと今日やること

この「JavaScript タイマーアプリ（基礎） 初級編」では、
最終的に「スタート」「ストップ」「リセット」ができる、
シンプルなタイマーアプリを作ることを目指します。

でも、1日目のゴールはもっと小さくていいです。

  • setTimeout で「時間が経ってから処理を実行する」感覚をつかむ
  • 「今タイマーが動いているのか？」という“状態”を変数で持つイメージをつかむ
  • 「開始」「停止」「リセット」という3つの機能の“考え方”だけ先に理解する

今日はまだ「完成アプリ」にはしません。
タイマーの“心臓”になる部分と、“頭の中の設計図”を作る日 です。

setTimeout ってそもそも何者？

「○秒後にこれやって」を JavaScript に頼む道具

JavaScript は、基本的に「上から順番にすぐ実行」されます。
でも、タイマーアプリを作るときに欲しいのは、

「3秒後に何かしたい」
「1秒後にこの処理を実行したい」

という、「時間が経ってから実行する」仕組みです。

そこで登場するのが setTimeout です。

基本の形はこうです。

setTimeout(実行したい処理, 待つ時間ミリ秒);
JavaScript

例えば、「3秒後にアラートを出す」ならこう書きます。

setTimeout(function () {
  alert("3秒たちました！");
}, 3000);
JavaScript

ここでのポイントは、

  • 第1引数：あとで実行したい関数（処理）
  • 第2引数：何ミリ秒後に実行するか（1000ミリ秒 = 1秒）

という役割になっていることです。

「あとで実行する関数」という考え方

setTimeout の第1引数に渡す関数は、
「今すぐ実行される」のではなく、

「指定した時間が経ってから実行される」

という点が重要です。

例えば、こう書いたとします。

console.log("スタート");

setTimeout(function () {
  console.log("2秒後のメッセージ");
}, 2000);

console.log("エンド");
JavaScript

実行すると、表示される順番はこうなります。

スタート
エンド
（2秒後）
2秒後のメッセージ

setTimeout の中身は、「予約」されているだけで、
その場では実行されない、という感覚を持ってください。

まずは「1回だけ鳴るタイマー」を作ってみる

3秒後に「時間です！」と表示する

タイマーアプリの超・超・入り口として、
「3秒後にメッセージを出すだけ」のコードを書いてみます。

console.log("タイマー開始");

setTimeout(function () {
  console.log("時間です！");
}, 3000);
JavaScript

これを実行すると、

タイマー開始
（3秒待つ）
時間です！

という流れになります。

ここで意識してほしいのは、

  • setTimeout は「タイマーをセットする」イメージ
  • 中の関数は「時間が来たときに実行される処理」

という役割分担です。

アロー関数で少しスッキリ書く

同じことを、アロー関数で書くとこうなります。

console.log("タイマー開始");

setTimeout(() => {
  console.log("時間です！");
}, 3000);
JavaScript

中身はまったく同じです。
「あとで実行する処理」を、短く書けるだけです。

タイマーアプリに必要な「状態管理」という考え方

「今タイマーは動いているのか？」をどう覚えておくか

タイマーアプリには、
最低でもこんな状態が存在します。

  • まだ開始していない
  • 動いている（カウント中）
  • 止まっている（停止中）
  • リセットされた（0に戻った）

人間なら「今動いてるかどうか」を感覚で分かりますが、
JavaScript は自分で覚えておかないと分かりません。

そこで必要になるのが、「状態管理」 です。

状態を変数で持つ、という発想

例えば、こんな変数を用意します。

let isRunning = false;
JavaScript

これは、

  • false → 今は動いていない
  • true → 今は動いている

という「フラグ（旗）」のような役割を持ちます。

タイマーを開始するときに true にする。
停止するときに false にする。

というふうに、
「今の状態」を変数で表現する のが状態管理の基本です。

「開始」「停止」「リセット」を頭の中で分解する

開始ボタンがやるべきこと（イメージ）

タイマーの「開始」機能は、ざっくり言うとこうです。

  • すでに動いているなら、何もしない
  • 動いていないなら、タイマーをセットする
  • 「動いている状態」に切り替える

これをコードにすると、イメージとしてはこうなります。

let isRunning = false;

function startTimer() {
  if (isRunning) {
    // すでに動いているなら何もしない
    return;
  }

  isRunning = true;

  setTimeout(() => {
    console.log("時間です！");
    isRunning = false;
  }, 3000);
}
JavaScript

ここでのポイントは、

  • isRunning で「今動いているかどうか」を管理している
  • 開始時に true にして、タイマー終了時に false に戻している

という、「状態の変化」をちゃんとコードにしていることです。

停止ボタンがやるべきこと（イメージ）

setTimeout は、「タイマーID」というものを返します。

const id = setTimeout(() => {
  console.log("時間です！");
}, 3000);
JavaScript

この id を使って、
clearTimeout(id) と呼ぶと、
「予約していたタイマーをキャンセル」できます。

つまり、「停止」はこういうイメージになります。

let timerId = null;
let isRunning = false;

function startTimer() {
  if (isRunning) return;

  isRunning = true;

  timerId = setTimeout(() => {
    console.log("時間です！");
    isRunning = false;
    timerId = null;
  }, 3000);
}

function stopTimer() {
  if (!isRunning) return;

  clearTimeout(timerId);
  isRunning = false;
  timerId = null;
}
JavaScript

ここで超重要なのは、

  • setTimeout の戻り値（タイマーID）を変数に保存しておく
  • 停止するときに clearTimeout にそのIDを渡す

という、「タイマーを止めるための手がかり」を
ちゃんと持っておくことです。

リセットボタンがやるべきこと（イメージ）

リセットは、こういう動きになります。

  • タイマーが動いていたら止める
  • カウントしている時間を 0 に戻す
  • 状態を「停止中」にする

1日目では、まだ「経過時間の表示」まではやりませんが、
頭の中ではこうイメージしておいてください。

let timerId = null;
let isRunning = false;
let elapsed = 0; // 経過時間（ミリ秒）

function resetTimer() {
  if (isRunning) {
    clearTimeout(timerId);
  }

  isRunning = false;
  timerId = null;
  elapsed = 0;

  console.log("リセットしました。時間は 0 に戻りました。");
}
JavaScript

「止める」と「0に戻す」は別の仕事
という感覚を持っておくと、
後で時間表示を足すときにスムーズです。

1日目のミニ実装：コンソール版「3秒タイマー」

まずはボタンなし、関数だけで動かしてみる

ブラウザのコンソールで試せる、
超シンプルな「開始・停止・リセット」付きタイマーの
“雰囲気だけ”を作ってみましょう。

let timerId = null;
let isRunning = false;

function startTimer() {
  if (isRunning) {
    console.log("すでにタイマーは動いています。");
    return;
  }

  console.log("タイマー開始（3秒後にメッセージ）");
  isRunning = true;

  timerId = setTimeout(() => {
    console.log("時間です！");
    isRunning = false;
    timerId = null;
  }, 3000);
}

function stopTimer() {
  if (!isRunning) {
    console.log("タイマーは動いていません。");
    return;
  }

  clearTimeout(timerId);
  console.log("タイマーを停止しました。");
  isRunning = false;
  timerId = null;
}

function resetTimer() {
  if (isRunning) {
    clearTimeout(timerId);
    console.log("動作中のタイマーを停止しました。");
  }

  isRunning = false;
  timerId = null;
  console.log("リセットしました。（時間は 0 に戻ったイメージ）");
}
JavaScript

このコードをブラウザのコンソールに貼り付けて、

startTimer();
JavaScript

と打てば「3秒後に時間です！」が出ます。
途中で

stopTimer();
JavaScript

と打てば止まります。
resetTimer() は、今のところ「状態を初期化するだけ」です。

ここで大事なのは、

  • setTimeout の戻り値を timerId に保存している
  • isRunning で「今動いているかどうか」を管理している
  • 「開始」「停止」「リセット」が、それぞれ違う“仕事”をしている

という構造を、なんとなくでも感じることです。

1日目で特に深く理解してほしいこと

1つ目：setTimeout は「あとで実行する処理の予約」

setTimeout(関数, ミリ秒) は、

「ミリ秒後に、この関数を実行してね」

という“予約”です。

その場で実行されるわけではない、
という感覚をしっかり持ってください。

2つ目：タイマーを止めるには「ID」が必要

setTimeout は「タイマーID」を返します。
それを変数に保存しておいて、
clearTimeout(そのID) で止めます。

ID を保存していないと、
「どのタイマーを止めればいいか分からない」状態になります。

3つ目：「今タイマーが動いているか？」は状態として持つ

isRunning のような変数で、

  • 動いている → true
  • 止まっている → false

という状態を持つことで、

  • すでに動いているのに「開始」しようとしたときに防げる
  • 止まっているのに「停止」しようとしたときにメッセージを出せる

といった、「ちゃんとしたアプリの振る舞い」ができます。

2日目へのつなぎ

1日目は、

  • setTimeout の基本的な使い方
  • タイマーID と clearTimeout の関係
  • isRunning という「状態管理」の考え方
  • 「開始」「停止」「リセット」の役割のイメージ

ここまでを、頭と手でなじませる日でした。

2日目からは、
この「3秒タイマー」をベースにして、

  • 実際に「経過時間」をカウントする
  • 1秒ごとに画面を更新する（setInterval との違いも少し触れる）
  • HTML のボタンと連動させて、「本物のタイマーアプリ」に近づける

という方向に進んでいきます。

最後にひとつ、聞いてみたい。

setTimeout を使った「3秒後のメッセージ」を動かしたとき、
「お、時間を扱えるってちょっと面白いな」と
少しでも感じましたか？

その感覚が、
あなたと「タイマーアプリ」の距離を一気に縮めてくれます。

次へ
1234567
スポンサーリンク
タイトルとURLをコピーしました