タイマーアプリを作ろう

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

HTMLファイルを作成しよう

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

💡 ヒント
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でデザインしよう

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

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

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

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 形式に変換する関数を作りましょう。

💡 ヒント
秒数を変数に入れ、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 で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でタイマーを止め、秒数と表示を初期値に戻します
📝 模範解答を見る

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

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

📚 使う技術を学ぶ

⚠️ つまずいたら