ポモドーロタイマーを自作する方法｜HTML・CSS・JavaScriptで作る基本を解説

「ポモドーロタイマーを自作してみたい」「JavaScriptの練習としてタイマーを作りたい」。

ポモドーロタイマーは、Webアプリ開発の題材として比較的取り組みやすいテーマです。

基本となるのは、

25分集中 → 5分休憩

というタイマーです。

最初は、

残り時間の表示
開始
一時停止
リセット

だけでもポモドーロタイマーを作れます。

慣れてきたら、

集中と休憩の自動切り替え
長い休憩
セット数
終了音
ブラウザ通知
時間設定
自動開始

などを追加できます。

この記事では、HTML・CSS・JavaScriptを使ってポモドーロタイマーを自作するときの基本的な考え方を紹介します。

ポモドーロタイマーは自作できる？

ポモドーロタイマーは自作できます。

基本的には、

残り時間を管理する

↓

1秒ごとに表示を更新する

↓

0になったらタイマーを終了する

という仕組みです。

そこへ、

集中25分

と

休憩5分

という状態を追加すれば、基本的なポモドーロタイマーになります。

最初に作る機能

いきなり高機能なタイマーを作る必要はありません。

まずは、

25分を表示する
スタートできる
1秒ずつ減る
一時停止できる
リセットできる

という5つ程度から始めると分かりやすいでしょう。

これだけでも、実際に集中時間を測れるタイマーになります。

HTMLで画面を作る

まずHTMLでタイマーの画面を作ります。

例えば、

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

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

というシンプルな構成です。

最初はデザインよりも、

タイマーとして動くこと

を優先すると作りやすくなります。

CSSで見た目を整える

次にCSSでタイマーを見やすくします。

例えば、

.timer {
  text-align: center;
  max-width: 400px;
  margin: 80px auto;
}

#time {
  font-size: 64px;
  font-weight: bold;
  margin: 24px 0;
}

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

などです。

タイマーでは残り時間が最も重要なので、数字を大きく表示すると分かりやすくなります。

JavaScriptで残り時間を管理する

次にJavaScriptで残り時間を管理します。

25分は、

25 × 60 = 1500秒

です。

そのため、

let timeLeft = 25 * 60;

のように秒単位で持つと扱いやすくなります。

分と秒に変換する

1500という数字をそのまま表示するのではなく、

25:00

の形式へ変換します。

例えば、

function formatTime(seconds) {
  const minutes = Math.floor(seconds / 60);
  const secs = seconds % 60;

  return `${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
}

とすれば、

25:00
24:59
24:58

のように表示できます。

タイマーを開始する

シンプルな実装では、setInterval()を使って1秒ごとに残り時間を減らせます。

例えば、

let timerId = null;

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

  timerId = setInterval(() => {
    timeLeft -= 1;

    document.getElementById("time").textContent =
      formatTime(timeLeft);

    if (timeLeft <= 0) {
      clearInterval(timerId);
      timerId = null;
    }
  }, 1000);
}

という形です。

開始ボタンを押したら、この処理を呼び出します。

一時停止を作る

一時停止では、動いているタイマーを止めます。

例えば、

function pauseTimer() {
  clearInterval(timerId);
  timerId = null;
}

とします。

残り時間自体は変更しないため、再び開始すれば続きから動かせます。

リセットを作る

集中時間を25分へ戻すなら、

function resetTimer() {
  clearInterval(timerId);
  timerId = null;

  timeLeft = 25 * 60;

  document.getElementById("time").textContent =
    formatTime(timeLeft);
}

のようにできます。

これで、

開始

一時停止

リセット

という基本操作が揃います。

5分休憩を追加する

次は休憩モードを追加します。

例えば、

const focusTime = 25 * 60;
const breakTime = 5 * 60;

let mode = "focus";

のように、

集中

と

休憩

の状態を管理します。

集中タイマーが終了したら、

mode = "break";
timeLeft = breakTime;

として休憩へ切り替えます。

集中と休憩を切り替える

タイマー終了時に、

function switchMode() {
  if (mode === "focus") {
    mode = "break";
    timeLeft = breakTime;
  } else {
    mode = "focus";
    timeLeft = focusTime;
  }

  document.getElementById("mode").textContent =
    mode === "focus" ? "集中" : "休憩";

  document.getElementById("time").textContent =
    formatTime(timeLeft);
}

のような処理を呼び出します。

これで、

25分集中

↓

5分休憩

↓

25分集中

という基本的なポモドーロの流れを作れます。

長い休憩を追加する

ポモドーロでは、数セットごとに長い休憩を取る方法があります。

例えば、

const longBreakTime = 15 * 60;
let completedSessions = 0;

として、集中を完了した回数を管理します。

集中が終了するたびに、

completedSessions += 1;

と増やします。

4回終了したら、

if (completedSessions % 4 === 0) {
  timeLeft = longBreakTime;
}

として長い休憩へ切り替えられます。

終了音を追加する

タイマーが0になったら音を鳴らすこともできます。

例えば、HTMLに音源を用意して、

<audio id="alarm" src="alarm.mp3"></audio>

JavaScriptから、

document.getElementById("alarm").play();

と再生します。

ただし、ブラウザでは音声の自動再生に制限があるため、実際に公開する場合はブラウザの仕様も確認する必要があります。

ブラウザ通知を追加する

別のタブで作業している場合は、ブラウザ通知があると便利です。

Web Notifications APIを利用すれば、

集中時間が終了しました

などの通知を表示できます。

ただし、通知にはユーザーの許可が必要です。

また、ブラウザによって動作が異なる場合があるため、複数環境で確認しましょう。

時間を変更できるようにする

25分固定ではなく、

集中時間
短い休憩
長い休憩

を変更できるようにすると実用性が上がります。

例えば、

<input type="number" id="focusMinutes" value="25">

のような入力欄を用意します。

ユーザーが入力した値を取得し、

focusTime = Number(input.value) * 60;

のように秒へ変換します。

1秒ずつ減らすだけだとズレることがある

簡単なタイマーならsetInterval()で作れます。

ただし、実際のWebブラウザでは、

必ず正確に1秒ごとに処理される

とは限りません。

タブがバックグラウンドになった場合などに、処理間隔が変化することがあります。

そのため、より正確なタイマーを作る場合は、

終了予定時刻を保存する

方法を検討します。

終了予定時刻から計算する

例えば、現在時刻から25分後を終了予定時刻として保存します。

const endTime = Date.now() + 25 * 60 * 1000;

そして、

const remaining =
  Math.max(0, Math.ceil((endTime - Date.now()) / 1000));

のように、

終了予定時刻 − 現在時刻

から残り時間を計算します。

この方式なら、単純に1秒ずつ減らす方法よりも実際の時刻とのズレを補正しやすくなります。

ページを再読み込みした場合

実用的なタイマーを作るなら、

ページを再読み込みするとタイマーが最初に戻る

問題も考える必要があります。

例えば、localStorageへ、

モード
終了予定時刻
残り時間
設定

などを保存する方法があります。

再読み込み後に保存データを読み込めば、タイマーの状態を復元できます。

タブタイトルに残り時間を表示する

PCで使うなら、ブラウザタブに残り時間を表示すると便利です。

例えば、

document.title = `${formatTime(timeLeft)} - 集中`;

とすれば、

24:32 - 集中

のように表示できます。

別のタブで作業していても残り時間を確認しやすくなります。

自動開始を追加する

さらに発展させるなら、

集中終了

↓

自動で休憩開始

↓

休憩終了

↓

自動で集中開始

という機能も作れます。

ただし、自動開始が不要なユーザーもいるため、実際のサービスではオン・オフできるようにすると使いやすくなります。

スキップ機能を追加する

休憩を飛ばしたい場合などに、スキップ機能もあると便利です。

例えば、

集中

↓

スキップ

↓

短い休憩

のように、現在のタイマーを終了して次のモードへ移動します。

タイマーが0になる処理と、モードを切り替える処理を分離しておくと実装しやすくなります。

Reactで自作する方法

Reactを使ってポモドーロタイマーを作ることもできます。

例えば、

const [timeLeft, setTimeLeft] = useState(25 * 60);
const [isRunning, setIsRunning] = useState(false);
const [mode, setMode] = useState("focus");

のようにstateで状態を管理します。

タイマー処理はuseEffectなどを利用して実装できます。

Reactで作りたい場合は、Reactでポモドーロタイマーを作る方法も参考にしてください。

GitHubで実装例を探す

自作するときは、GitHubで公開されているポモドーロタイマーも参考になります。

例えば、

pomodoro timer javascript

pomodoro timer react

などで検索すると、さまざまな実装を確認できます。

ただし、公開されているコードを利用するときはライセンスを確認しましょう。

詳しくは、GitHubでポモドーロタイマーを探す方法も参考にしてください。

自作するなら最初から全部作らない

ポモドーロタイマーを自作すると、

タスク管理も欲しい

統計も欲しい

ログインも欲しい

と機能を増やしたくなることがあります。

しかし、最初は、

25分を測れる

だけでも十分です。

おすすめの順番は、

残り時間表示
開始
一時停止
リセット
5分休憩
モード切り替え
長い休憩
終了通知
時間変更
状態保存

です。

一つずつ動作確認しながら追加すると、問題が起きた場所も見つけやすくなります。

自作するメリット

ポモドーロタイマーを自作するメリットは、

自分の好きな仕様にできること

です。

例えば、

集中は40分にしたい

休憩は7分にしたい

4回ではなく3回で長い休憩にしたい

といった設定も自由です。

また、プログラミング学習としても、

DOM操作
イベント
時刻計算
状態管理
localStorage
Web API

などを学べます。

自作するデメリット

一方、自分で作る場合は、

バグ修正
ブラウザ対応
タイマー精度
通知
データ保存
スマートフォン対応

なども自分で考える必要があります。

単にポモドーロを使いたいだけなら、既存サービスを利用したほうが早いでしょう。

物理的なポモドーロタイマーを自作する方法もある

「自作」はWebアプリだけとは限りません。

電子工作が好きなら、

Arduino
Raspberry Pi
ESP32
ディスプレイ
LED
ブザー
ボタン

などを使って物理的なポモドーロタイマーを作る方法もあります。

例えば、

ボタンを押す

↓

25分カウント

↓

LED点灯

↓

5分休憩

といった専用ガジェットを作れます。

ただし、電子工作では電源や部品の扱いにも注意しましょう。

自作と既存サービスはどちらがいい？

目的によって変わります。

プログラミングを勉強したい

なら、自作する価値があります。

一方、

仕事や勉強で今すぐ集中したい

なら、既存のポモドーロタイマーを使うほうが簡単です。

自作は「タイマーを作ること」が目的になりやすいため、本来やりたかった作業との違いを意識しましょう。

実際のポモドーロタイマーを参考にする

自作する前に、実際のポモドーロタイマーを触ってみるのも参考になります。

例えば、

どのボタンが必要か
残り時間をどう見せるか
集中と休憩をどう区別するか
設定をどこに置くか
終了時にどう知らせるか

などを確認できます。

Pomolikaはブラウザで使えるポモドーロタイマーです。

自分でタイマーを作る場合のUIや必要機能を考える参考にもできます。

Pomolikaのタイマーを使う

まとめ

ポモドーロタイマーは、HTML・CSS・JavaScriptを使って自作できます。

まずは、

25分表示

↓

開始

↓

一時停止

↓

リセット

というシンプルなタイマーから作りましょう。

そのあと、

5分休憩
長い休憩
自動切り替え
終了音
ブラウザ通知
時間変更
タブタイトル
localStorage

などを追加すると、本格的なポモドーロタイマーになります。

また、単純に1秒ずつ残り時間を減らすだけでなく、終了予定時刻から残り時間を計算する方法を使えば、ブラウザで動かすタイマーとしてより実用的な設計を考えられます。

プログラミング学習が目的なら、まず小さく作り、必要な機能を一つずつ追加していくのがおすすめです。