ポモドーロタイマーの作り方｜HTML・CSS・JavaScriptで自作する方法

「ポモドーロタイマーを自分で作ってみたい」「HTMLやJavaScriptで25分のタイマーを作るにはどうすればいい？」

ポモドーロタイマーは、Webアプリの中では比較的シンプルな仕組みで作れます。

基本的に必要なのは、

25分から0までカウントダウンする

↓

終了したら5分休憩へ切り替える

↓

休憩が終わったら再び集中する

という処理です。

この記事では、HTML・CSS・JavaScriptを使って、シンプルなポモドーロタイマーを自作する方法を紹介します。

ポモドーロタイマーの基本的な仕組み

まず、何を作るのか整理しましょう。

一般的なポモドーロ・テクニックでは、

25分集中 → 5分休憩

というサイクルを繰り返します。

何セットか集中したあとには、15〜30分程度の長い休憩を取る方法もあります。

そのため、ポモドーロタイマーには最低限、

集中時間
休憩時間
カウントダウン
開始
停止
リセット

があれば基本的な機能を実現できます。

まずは25分タイマーを作る

ポモドーロタイマーを自分で作る場合は、最初からすべての機能を実装する必要はありません。

まず、

25:00

から、

00:00

までカウントダウンする25分タイマーから作ります。

これが動けば、ポモドーロタイマーの中心部分は完成です。

そのあとで、

5分休憩
長い休憩
自動切り替え
通知音

などを追加していきます。

HTMLを作る

まず、タイマーを表示するHTMLを作ります。

<div class="pomodoro">
  <h1>ポモドーロタイマー</h1>

  <div id="mode">集中</div>
  <div id="timer">25:00</div>

  <button id="start">開始</button>
  <button id="pause">停止</button>
  <button id="reset">リセット</button>
</div>

表示部分と操作ボタンを分け、JavaScriptから id を使って内容を更新できるようにします。

CSSで見た目を整える

次に、タイマーを読みやすくするための最低限のCSSを追加します。

.pomodoro {
  width: min(90vw, 420px);
  margin: 48px auto;
  padding: 32px;
  text-align: center;
  border-radius: 16px;
  background: #fff7f3;
}

#timer {
  margin: 16px 0;
  font-size: 64px;
  font-variant-numeric: tabular-nums;
}

button {
  margin: 4px;
  padding: 10px 18px;
}

タイマーの数字には等幅表示を指定すると、秒が変わるたびに文字の位置が動きにくくなります。

JavaScriptでカウントダウンを作る

以下は、25分の集中と5分の休憩を切り替えるシンプルな例です。

const focusSeconds = 25 * 60;
const breakSeconds = 5 * 60;

const timer = document.querySelector("#timer");
const mode = document.querySelector("#mode");
const startButton = document.querySelector("#start");
const pauseButton = document.querySelector("#pause");
const resetButton = document.querySelector("#reset");

let isFocus = true;
let remainingSeconds = focusSeconds;
let intervalId = null;

function render() {
  const minutes = Math.floor(remainingSeconds / 60);
  const seconds = remainingSeconds % 60;
  timer.textContent = String(minutes).padStart(2, "0")
    + ":"
    + String(seconds).padStart(2, "0");
  mode.textContent = isFocus ? "集中" : "休憩";
}

function switchMode() {
  isFocus = !isFocus;
  remainingSeconds = isFocus ? focusSeconds : breakSeconds;
  render();
}

function startTimer() {
  if (intervalId !== null) return;

  intervalId = window.setInterval(() => {
    remainingSeconds -= 1;

    if (remainingSeconds <= 0) {
      switchMode();
    } else {
      render();
    }
  }, 1000);
}

function pauseTimer() {
  window.clearInterval(intervalId);
  intervalId = null;
}

function resetTimer() {
  pauseTimer();
  isFocus = true;
  remainingSeconds = focusSeconds;
  render();
}

startButton.addEventListener("click", startTimer);
pauseButton.addEventListener("click", pauseTimer);
resetButton.addEventListener("click", resetTimer);

render();

この例では、開始ボタンの連打でタイマーが重複しないようにし、停止とリセットも実装しています。

実際のWebアプリでは時刻のずれにも対応する

setInterval の呼び出しは、ブラウザの負荷やタブの状態によって遅れることがあります。学習用の最初の実装としては上のコードでも仕組みを確認できますが、公開用のタイマーでは「1秒ずつ減らす」だけでなく、終了予定時刻と現在時刻の差から残り時間を計算する方法が適しています。

また、ブラウザがバックグラウンドにあると処理間隔が変わる場合があります。別のタブを開いた状態や、PCがスリープから戻った状態でも確認しましょう。

次に追加できる機能

基本のカウントダウンが動いたら、必要に応じて次の機能を追加します。

集中時間と休憩時間の変更
4セット後の長い休憩
終了音やブラウザ通知
完了セット数の記録
ダークモード
キーボード操作

最初から全部を作るのではなく、1機能ずつ追加して動作確認すると原因を切り分けやすくなります。必要な機能の整理については、ポモドーロタイマーを作成する方法も参考にしてください。

動作確認するポイント

完成したら、次の操作を確認しましょう。

開始を複数回押しても速度が変わらない
停止後に再開できる
リセットすると25分へ戻る
0秒で集中と休憩が切り替わる
画面幅が狭くてもボタンを押せる

テスト中は focusSeconds と breakSeconds を短くすると、切り替えを素早く確認できます。公開前には25分と5分へ戻してください。

すぐ使いたいならWebタイマーも選択肢

プログラミングの練習が目的なら、自作する過程そのものが学習になります。一方、すぐ集中を始めることが目的なら、完成済みのWebタイマーを利用するほうが手軽です。

Pomolikaのタイマーを使う

まとめ

ポモドーロタイマーを自分で作る場合は、まず25分のカウントダウンから実装します。その後、5分休憩への切り替え、停止、リセット、通知などを順番に追加しましょう。

HTMLで画面、CSSで見た目、JavaScriptで時間の処理を分けると、初心者でも機能を整理しながら作れます。