Zenn
🫠

#4 タイマーのロジックを作る

に公開
Java
JavaScript
個人開発
webアプリケーション
idea

#4 タイマーのロジックを作る – JavaScriptで動かす！

今回は、いよいよこのアプリの心臓部であるタイマー機能をJavaScriptで実装していきます。

💡 こんな機能を目指します

  • 入力された時間をもとにカウントダウンする
  • 作業時間・休憩時間を交互に切り替える
  • 「Start」ボタンで動作、「Stop」「Reset」も機能

🧪 最小構成で動かす

まずは 最低限の機能で動かしてみることがゴールです。

🔧 JavaScriptの実装コード（試作版）

<script>
  const startBtn = document.getElementById("start-btn");
  const stopBtn = document.getElementById("stop-btn");
  const resetBtn = document.getElementById("reset-btn");

  let timer;
  let remainingTime = 0;
  let isRunning = false;

  function startTimer(duration) {
    clearInterval(timer);
    remainingTime = duration;
    isRunning = true;

    timer = setInterval(() => {
      if (remainingTime <= 0) {
        clearInterval(timer);
        isRunning = false;
        alert("時間終了！");
        return;
      }
      remainingTime--;
      console.log("残り秒数:", remainingTime);
    }, 1000);
  }

  startBtn.addEventListener("click", () => {
    if (!isRunning) {
      const workMinutes = parseInt(document.querySelector("input:nth-of-type(1)").value) || 0;
      startTimer(workMinutes * 60);
    }
  });

  stopBtn.addEventListener("click", () => {
    clearInterval(timer);
    isRunning = false;
  });

  resetBtn.addEventListener("click", () => {
    clearInterval(timer);
    isRunning = false;
    remainingTime = 0;
    console.clear();
  });
</script>

🧠 コード解説と意図

項目 解説
setInterval() 毎秒ごとにカウントダウンを行う基本API。タイマー用途に最適。
clearInterval() Stopボタン・Reset操作など、任意で停止できるようにする。
remainingTime 秒単位で残り時間を保持。中断・再開などに応用が効く構成。
isRunning 多重起動を防ぐ。Startボタンを連打しても1つしか動かない制御。

🧪 今後の改善余地

  • 表示が console.log のまま → HTMLに反映させたい！

  • 作業と休憩の切り替えロジック未実装（現状は1回分だけ）

  • 残り時間を「mm:ss」形式に整形するとより親切

    このあたりは、次回でまとめて改良していきます。

🔜 次回予告：「#5 ボタンを配置して挙動をつける」

次回は Start/Stop/Resetボタンが視覚的にわかりやすく動作するように改良します。
また、カウントをHTMLに表示することで「見えるタイマー」を目指します。

📌 今回の位置づけ（シリーズ進行）

最後までご覧いただきありがとうございます。次回もお待ちしております。

Discussion