タイマーアプリを作ろう

💻 この課題はPCで実際にコードを書いて取り組みましょう
1

HTMLファイルを作成しよう

タイマーの表示エリアとボタン2つを配置しましょう。

id="display" はJavaScriptから時間表示を更新するために使います。

ボタンにも id をつけてクリックイベントを設定できるようにします。

3つのファイル（HTML, CSS, JS）は必ず同じフォルダに置いてください。

<script src="script.js"> は </body> の直前に書きます。HTMLの要素が読み込まれた後にJSが実行されるようにするためです。

ブラウザで開いて「⏱ タイマー」と「03:00」が表示されることを確認しましょう。

💡 ヒント
timer.html, style.css, script.js の3ファイルを作ります
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイマー</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>⏱ タイマー</h1>
  <div id="display">03:00</div>
  <button id="start">スタート</button>
  <button id="reset">リセット</button>
  <script src="script.js"></script>
</body>
</html>
2

CSSでデザインしよう

タイマーの数字を大きく表示し、ボタンにスタイルを付けましょう。

font-family: monospace を使うと数字の幅が揃い、表示がガタつきません。

中間確認: ブラウザで開いて「03:00」が大きく中央に表示されることを確認しましょう。

スタートボタンが緑、リセットボタンがグレーになっていればOKです。

💡 ポイント: #start と #reset は id セレクタです。特定のボタンだけにスタイルを当てています。

ボタンの cursor: pointer でマウスカーソルが指マークになり、クリックできることが伝わります。

💡 ヒント
タイマー表示を大きなフォントで中央揃えにします
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

body { font-family: sans-serif; text-align: center; padding: 40px; background: #f5f5f5; }
#display { font-size: 48px; font-weight: bold; margin: 24px 0; font-family: monospace; }
button { padding: 10px 24px; font-size: 16px; border: none; border-radius: 8px; cursor: pointer; margin: 4px; }
#start { background: #0f766e; color: #fff; }
#reset { background: #ddd; }
3

残り時間を変数で管理しよう

残り秒数を変数で管理し、mm:ss 形式に変換する関数を作りましょう。

formatTime の仕組み:

Math.floor(s / 60) — 秒を60で割って分を求める（小数点切り捨て）

s % 60 — 60で割った余りが残りの秒数

padStart(2, '0') — 1桁の数字を "01" のように0埋めする

例: 125秒 → 2分5秒 → "02:05"

確認: console.log(formatTime(125)) で "02:05" が表示されればOKです。

console.log(formatTime(0)) で "00:00" になることも確認しましょう。

この関数は Step 4 で毎秒呼び出されて表示を更新します。

💡 ヒント
秒数を変数に入れ、mm:ss形式に変換する関数を作ります

参考: JS レッスン5: 関数

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

let seconds = 180; // 3分 = 180秒

function formatTime(s) {
  const m = Math.floor(s / 60);
  const sec = s % 60;
  return String(m).padStart(2, '0') + ':' + String(sec).padStart(2, '0');
}
4

スタートボタンでカウントダウンしよう

スタートボタンを押すと1秒ごとにカウントダウンし、0になったらアラートを表示しましょう。

setInterval の仕組み:

setInterval(関数, ミリ秒) は指定した間隔で関数を繰り返し実行します。

1000ミリ秒 = 1秒なので、1秒ごとに seconds を1減らします。

二重スタート防止:

if (timer) return; がないと、スタートを連打するたびにカウントダウンが加速してしまいます。

既にタイマーが動いていたら何もしないようにしています。

clearInterval(timer) は繰り返しを停止する関数です。0になったら止めてアラートを出します。

確認: スタートを押して数字が減っていくこと、0で止まることを確認しましょう。

スタートを連打しても加速しないことも確認してください。

💡 ヒント
setInterval で1秒ごとに秒数を減らし、表示を更新します
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

let timer = null;

document.getElementById('start').addEventListener('click', function() {
  if (timer) return;
  timer = setInterval(function() {
    seconds--;
    document.getElementById('display').textContent = formatTime(seconds);
    if (seconds <= 0) {
      clearInterval(timer);
      timer = null;
      alert('時間です！');
    }
  }, 1000);
});
5

リセットボタンを実装しよう

リセットボタンでタイマーを止めて初期値に戻しましょう。

clearInterval(timer) でカウントダウンを停止します。

timer = null で「タイマーは動いていない」状態に戻します。

秒数を180に戻し、表示も "03:00" に更新します。

確認: カウントダウン中にリセットを押して "03:00" に戻ることを確認しましょう。

リセット後にスタートを押して、再びカウントダウンが始まればOKです。

カウントダウン中でも停止中でも、リセットが正しく動くことを確認しましょう。

💡 ヒント
clearIntervalでタイマーを止め、秒数と表示を初期値に戻します
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

document.getElementById('reset').addEventListener('click', function() {
  clearInterval(timer);
  timer = null;
  seconds = 180;
  document.getElementById('display').textContent = formatTime(seconds);
});
6

発展: 機能を追加してみよう

余裕があれば、以下の機能に挑戦してみましょう！

一時停止ボタン: clearInterval で止めるが秒数はリセットしない

時間を変更可能に: input で分数を入力して seconds を変える

残り10秒で赤色表示: seconds <= 10 のとき文字色を変える

上の回答例は「残り10秒で赤色」の実装例です。

一時停止は「clearInterval で止めるが seconds はリセットしない」だけで実装できます。

時間変更は <input type="number"> で分数を入力し、seconds = 入力値 * 60 とします。

全部できたら友達に使ってもらいましょう！勉強タイマーとして実用的です。

5分タイマー（300秒）や10分タイマー（600秒）に変えて試してみましょう。

💡 ヒント
一時停止、時間変更、残り10秒で赤色表示などに挑戦！
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

// 残り10秒で赤色にする例（Step 4 の setInterval 内に追加）
if (seconds <= 10) {
  document.getElementById('display').style.color = 'red';
}

// リセット時に色を戻す（Step 5 に追加）
document.getElementById('display').style.color = '';
🎯

📚 使う技術を学ぶ

⚠️ つまずいたら