プログラミング 📅 2026年5月9日 🔄 更新: 2026-05-09 ⏱ 18分で読めます

夏休みにJavaScriptでタイマーアプリを作ろう【勉強用ポモドーロタイマー】

JavaScriptでポモドーロタイマーを作る方法を初心者向けに解説。夏休みのプログラミング作品にぴったりの実用アプリを1ステップずつ作ります。

2026年5月9日

導入

夏休みにJavaScriptでタイマーアプリを作ってみませんか？

この記事では、勉強に使えるポモドーロタイマーを作ります。ポモドーロタイマーとは「25分集中 → 5分休憩」を繰り返す時間管理法です。

実際に自分の勉強で使えるアプリを作れます。夏休みの自由研究やプログラミング作品としても最適です。

必要な知識は、HTMLとCSSの基本だけです。JavaScriptは1ステップずつ解説するので、初心者でも大丈夫です。

JavaScript入門を読んでおくと、さらにスムーズに進められます。

完成イメージ

完成すると、こんなアプリになります。

  • 画面中央に大きなカウントダウン表示（25:00）
  • 「スタート」「ストップ」「リセット」の3つのボタン
  • 25分が終わると自動で5分休憩に切り替わる
  • 今が「集中タイム」か「休憩タイム」かわかる表示

シンプルですが、実用的なアプリです。自分好みにカスタマイズもできます。

Step 1: HTMLでページの骨組みを作る

まず、タイマーの表示部分とボタンをHTMLで作ります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ポモドーロタイマー</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="timer-container">
    <h1>ポモドーロタイマー</h1>
    <p id="mode-display">集中タイム</p>
    <p id="time-display">25:00</p>
    <div class="buttons">
      <button id="start-btn">スタート</button>
      <button id="stop-btn">ストップ</button>
      <button id="reset-btn">リセット</button>
    </div>
    <p id="session-count">セッション: 0回</p>
  </div>
  <script src="script.js"></script>
</body>
</html>

ポイント解説

  • idをつけることで、JavaScriptから要素を操作できます
  • time-displayにカウントダウンの数字を表示します
  • mode-displayに「集中タイム」か「休憩タイム」かを表示します

このHTMLファイルをindex.htmlとして保存しましょう。VS Code Live Serverの使い方を参考に、Live Serverで表示を確認しながら進めると便利です。

Step 2: CSSでデザインを整える

次に、見た目を整えます。style.cssを作成しましょう。

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1a1a2e;
  font-family: sans-serif;
}

.timer-container {
  text-align: center;
  color: #ffffff;
  padding: 40px;
  border-radius: 20px;
  background-color: #16213e;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

#mode-display {
  font-size: 18px;
  color: #e94560;
  margin-bottom: 10px;
}

#time-display {
  font-size: 80px;
  font-weight: bold;
  margin: 20px 0;
  font-variant-numeric: tabular-nums;
}

.buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}

button {
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: #ffffff;
  background-color: #e94560;
}

button:hover {
  background-color: #ff6b6b;
}

#session-count {
  margin-top: 20px;
  font-size: 14px;
  color: #aaaaaa;
}

ポイント解説

  • display: flexで画面中央に配置しています
  • font-size: 80pxでカウントダウンを大きく表示します
  • font-variant-numeric: tabular-numsで数字の幅を揃えます（数字が動いてもガタつかない）
  • ダークカラーで目に優しいデザインにしています

Step 3: JavaScriptでタイマーを動かす

いよいよJavaScriptです。script.jsを作成します。1つずつ機能を追加していきましょう。

3-1: 変数を準備する

// タイマーの設定（秒数）
const FOCUS_TIME = 25 * 60; // 25分 = 1500秒
const BREAK_TIME = 5 * 60;  // 5分 = 300秒

// 状態を管理する変数
let timeLeft = FOCUS_TIME;   // 残り時間（秒）
let timerId = null;          // タイマーのID
let isFocusMode = true;      // 集中モードかどうか
let sessionCount = 0;        // セッション回数

// HTML要素を取得
const timeDisplay = document.getElementById("time-display");
const modeDisplay = document.getElementById("mode-display");
const sessionDisplay = document.getElementById("session-count");
const startBtn = document.getElementById("start-btn");
const stopBtn = document.getElementById("stop-btn");
const resetBtn = document.getElementById("reset-btn");

変数とは、データを入れておく箱です。letで作った変数は後から中身を変えられます。constで作った変数は中身を変えられません。

document.getElementById()は、HTMLの要素をJavaScriptで操作するための命令です。DOM操作の基本で詳しく学べます。

3-2: 時間を表示する関数を作る

// 秒数を「MM:SS」形式に変換して表示する
function updateDisplay() {
  const minutes = Math.floor(timeLeft / 60);
  const seconds = timeLeft % 60;
  const display = `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
  timeDisplay.textContent = display;
}

関数（かんすう）とは、処理をまとめたものです。名前をつけて何度でも呼び出せます。Math.floor()は小数点以下を切り捨て、%は割り算の余りを求めます。padStart(2, "0")は文字列が2文字未満なら先頭に"0"を追加します。

3-3: カウントダウンの仕組みを作る

// 1秒ごとに実行される処理
function countdown() {
  timeLeft--;
  updateDisplay();

  if (timeLeft === 0) {
    clearInterval(timerId);
    timerId = null;

    if (isFocusMode) {
      sessionCount++;
      sessionDisplay.textContent = `セッション: ${sessionCount}回`;
      isFocusMode = false;
      timeLeft = BREAK_TIME;
      modeDisplay.textContent = "休憩タイム";
    } else {
      isFocusMode = true;
      timeLeft = FOCUS_TIME;
      modeDisplay.textContent = "集中タイム";
    }
    updateDisplay();
    timerId = setInterval(countdown, 1000);
  }
}

setInterval(関数, ミリ秒)は、指定した間隔で関数を繰り返し実行します。1000ミリ秒 = 1秒です。clearInterval(ID)は、setIntervalを止める命令です。

この仕組みで「1秒ごとに残り時間を減らす → 0になったらモードを切り替える」を実現しています。

3-4: ボタンの動作を設定する

// スタートボタン
startBtn.addEventListener("click", function() {
  if (timerId !== null) return;
  timerId = setInterval(countdown, 1000);
});

// ストップボタン
stopBtn.addEventListener("click", function() {
  clearInterval(timerId);
  timerId = null;
});

// リセットボタン
resetBtn.addEventListener("click", function() {
  clearInterval(timerId);
  timerId = null;
  isFocusMode = true;
  timeLeft = FOCUS_TIME;
  modeDisplay.textContent = "集中タイム";
  updateDisplay();
});

addEventListener()は、ボタンがクリックされたときに実行する処理を登録する命令です。イベント処理の基本で詳しく学べます。

3-5: 初期表示

ページを開いたときに時間を表示するため、最後にupdateDisplay();を呼び出します。

完成コード（全体）

3つのファイルをまとめた完成版です。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ポモドーロタイマー</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="timer-container">
    <h1>ポモドーロタイマー</h1>
    <p id="mode-display">集中タイム</p>
    <p id="time-display">25:00</p>
    <div class="buttons">
      <button id="start-btn">スタート</button>
      <button id="stop-btn">ストップ</button>
      <button id="reset-btn">リセット</button>
    </div>
    <p id="session-count">セッション: 0回</p>
  </div>
  <script src="script.js"></script>
</body>
</html>

style.css

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1a1a2e;
  font-family: sans-serif;
}

.timer-container {
  text-align: center;
  color: #ffffff;
  padding: 40px;
  border-radius: 20px;
  background-color: #16213e;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

#mode-display {
  font-size: 18px;
  color: #e94560;
  margin-bottom: 10px;
}

#time-display {
  font-size: 80px;
  font-weight: bold;
  margin: 20px 0;
  font-variant-numeric: tabular-nums;
}

.buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}

button {
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: #ffffff;
  background-color: #e94560;
}

button:hover {
  background-color: #ff6b6b;
}

#session-count {
  margin-top: 20px;
  font-size: 14px;
  color: #aaaaaa;
}

script.js

// タイマーの設定（秒数）
const FOCUS_TIME = 25 * 60;
const BREAK_TIME = 5 * 60;

// 状態を管理する変数
let timeLeft = FOCUS_TIME;
let timerId = null;
let isFocusMode = true;
let sessionCount = 0;

// HTML要素を取得
const timeDisplay = document.getElementById("time-display");
const modeDisplay = document.getElementById("mode-display");
const sessionDisplay = document.getElementById("session-count");
const startBtn = document.getElementById("start-btn");
const stopBtn = document.getElementById("stop-btn");
const resetBtn = document.getElementById("reset-btn");

// 時間を表示する関数
function updateDisplay() {
  const minutes = Math.floor(timeLeft / 60);
  const seconds = timeLeft % 60;
  const display = `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
  timeDisplay.textContent = display;
}

// カウントダウン処理
function countdown() {
  timeLeft--;
  updateDisplay();

  if (timeLeft === 0) {
    clearInterval(timerId);
    timerId = null;

    if (isFocusMode) {
      sessionCount++;
      sessionDisplay.textContent = `セッション: ${sessionCount}回`;
      isFocusMode = false;
      timeLeft = BREAK_TIME;
      modeDisplay.textContent = "休憩タイム";
    } else {
      isFocusMode = true;
      timeLeft = FOCUS_TIME;
      modeDisplay.textContent = "集中タイム";
    }
    updateDisplay();
    timerId = setInterval(countdown, 1000);
  }
}

// ボタンの動作
startBtn.addEventListener("click", function() {
  if (timerId !== null) return;
  timerId = setInterval(countdown, 1000);
});

stopBtn.addEventListener("click", function() {
  clearInterval(timerId);
  timerId = null;
});

resetBtn.addEventListener("click", function() {
  clearInterval(timerId);
  timerId = null;
  isFocusMode = true;
  timeLeft = FOCUS_TIME;
  modeDisplay.textContent = "集中タイム";
  updateDisplay();
});

// 初期表示
updateDisplay();

応用：もっと便利にしよう

基本が完成したら、機能を追加してみましょう。

応用1: タイマー終了時に音を鳴らす

// 音を鳴らす関数
function playSound() {
  const audio = new Audio("https://actions.google.com/sounds/v1/alarms/beep_short.ogg");
  audio.play();
}

countdown()関数の中で、timeLeft === 0のときにplaySound()を呼び出せば、タイマー終了時に音が鳴ります。

応用2: 集中時間を変更できるようにする

HTMLにセレクトボックスを追加すれば、25分以外の時間も選べます。

<select id="focus-select">
  <option value="25">25分</option>
  <option value="15">15分</option>
  <option value="50">50分</option>
</select>

応用3: 背景色をモードで変える

// 集中モード → 暗い青、休憩モード → 暗い緑
if (isFocusMode) {
  document.body.style.backgroundColor = "#1a1a2e";
} else {
  document.body.style.backgroundColor = "#1a2e1a";
}

自分のアイデアで自由にカスタマイズしてみてください。夏休みJavaScriptゲーム制作も参考になります。

学んだことの整理

このアプリで使ったJavaScriptの知識をまとめます。

  • 変数（let, const） — 残り時間やタイマーIDの管理
  • 関数 — updateDisplay(), countdown()
  • if文 — モードの切り替え判定
  • setInterval / clearInterval — 1秒ごとのカウントダウン
  • DOM操作 — 画面の表示を書き換える
  • イベント処理 — ボタンクリックへの反応

これらはJavaScriptの基本中の基本です。このアプリが作れたら、他のアプリにも応用できます。

まとめ

  • ✅ 25分集中 → 5分休憩を自動で繰り返すタイマーを作成
  • ✅ setIntervalで1秒ごとに処理を実行する
  • ✅ clearIntervalでタイマーを止める
  • ✅ addEventListenerでボタンクリックに反応する
  • ✅ textContentで画面の文字を書き換える

実用的なアプリを自分で作れた経験は、大きな自信になります。ぜひ自分好みにカスタマイズして、毎日の勉強に使ってください！

🎯 次のステップ

タイマーアプリを完成させたら、次のステップに進もう！

目次

コースで実際に手を動かして学ぼう

レッスンではコードを書きながら基礎が身につきます

HTMLコースを始める →

関連記事

プログラミング

夏休みに作れるWebアプリ10選【初心者〜中級者】

夏休みに作れるWebアプリを難易度別に10個紹介。HTML/CSSだけで作れるものからAPI連携まで、中高生向けにわかりやすく解説します。

 プログラミング

夏休みに応募できるWebサイトコンテスト一覧【中高生向け】 | プログラミング入門

中高生が夏休みに応募できるWebサイト・プログラミングコンテストを紹介。応募のコツ、過去の受賞作品の傾向も解説。

 プログラミング

Web の記事一覧

同じテーマの記事

𝕏 シェア LINE シェア

📣 この記事が役に立ったら

Xでシェア

💬 引用する場合はこちらをご利用ください:

JavaScriptでポモドーロタイマーを作る方法を初心者向けに解説。夏休みのプログラミング作品にぴったりの実用アプリを1ステップずつ作ります。

出典: https://start-web-programming.com/blog/summer-web-app-timer/