「JavaScriptの勉強を始めたけど、実際にどうやって動くアプリを作るの？」 そんな疑問をお持ちではありませんか？
今回は、25分の集中と5分の休憩を繰り返す学習法「ポモドーロテクニック」で使えるシンプルなタイマーを題材に、JavaScriptの基本的な仕組みを解説します。
ソースコード全体を見ると難しく感じるかもしれませんが、安心してください。いくつかのパーツに分けて、JavaScriptが何をしているのか「要点」を分かりやすく解説していきます。
今回のソースコード
今回は以下のコードについて要所の解説をしていきます。
スタートを押すとカウントダウンが開始され、時間になったらアラートウィンドウで通知するシンプルなポモドーロタイマーとなっています。
ソースをコピーして”index.html”のようにファイルを作成してダブルクリックをするとブラウザに表示されますので試してみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>シンプルなポモドーロタイマー</title>
<style>
body {
text-align: center;
/* 文字やボタンを画面の中央に寄せます */
font-family: sans-serif;
/* 文字の形をシンプルで見やすいものにします */
margin-top: 100px;
/* 画面の上部に余白を作ります */
}
#time {
font-size: 64px;
/* 時間の文字を大きくして見やすくします */
font-weight: bold;
/* 文字を太くします */
margin-bottom: 30px;
/* 時間とボタンの間に余白を作ります */
}
button {
font-size: 20px;
/* ボタンの文字を大きくします */
padding: 10px 20px;
/* ボタンの内側に余白を作って押しやすくします */
margin: 0 10px;
/* ボタン同士の間に隙間を作ります */
cursor: pointer;
/* マウスを乗せた時に指のマークにして、押せることを伝えます */
}
</style>
</head>
<body>
<div id="time">25:00</div>
<button id="start">スタート</button>
<button id="stop">ストップ</button>
<button id="reset">リセット</button>
</body>
<script>
// 1. 必要な変数（データを入れておく箱）を準備します
// ポモドーロタイマーの25分を「秒」に直して管理します。（25分 × 60秒 = 1500秒）
let timeLeft = 25 * 60;
// タイマーを後から止められるように、タイマーの「整理番号」を覚えておくための空の箱を用意します
let timerId;
// 2. 画面のHTML要素（部品）をJavaScriptから操作できるように取得します
// HTMLの id="time" の場所（時間を表示する場所）を取得して、timeDisplayという変数に入れます
const timeDisplay = document.getElementById('time');
// スタートボタンを取得します
const startButton = document.getElementById('start');
// ストップボタンを取得します
const stopButton = document.getElementById('stop');
// リセットボタンを取得します
const resetButton = document.getElementById('reset');
// 3. 画面に「MM:SS」の形式で残り時間を表示するための処理（関数）を作ります
function updateTimeDisplay() {
// 残り秒数（timeLeft）を60で割り、小数点以下を切り捨てることで「何分」かを計算します
const minutes = Math.floor(timeLeft / 60);
// 残り秒数（timeLeft）を60で割った「余り」を計算することで、分に満たない「何秒」かを計算します
const seconds = timeLeft % 60;
// 秒数が「5秒」などの1桁の時に、見た目を揃えるために「05」のように先頭に0をつける処理です
const formattedSeconds = seconds.toString().padStart(2, '0');
// 計算した「分」と「2桁にした秒」を「:」で繋いで、画面の文字（textContent）として上書きします
timeDisplay.textContent = `${minutes}:${formattedSeconds}`;
}
// 4. 各ボタンが押された時の動作を設定します
// スタートボタンがクリックされた時の処理です
startButton.addEventListener('click', () => {
// スタートボタンを何度も押された時にタイマーが二重に動くのを防ぐため、まずは動いているタイマーを止めます
clearInterval(timerId);
// setIntervalを使って「1000ミリ秒（1秒）ごとに指定した処理を繰り返す」ように設定し、その整理番号をtimerIdに保存します
timerId = setInterval(() => {
// まだ時間が残っている（0秒より大きい）場合の処理です
if (timeLeft > 0) {
// 残り秒数を1つ減らします（timeLeft = timeLeft - 1; と同じ意味です）
timeLeft--;
// 時間が減ったので、画面の表示を最新の状態に更新します
updateTimeDisplay();
} else {
// 残り時間が0になった（タイマーが終了した）場合の処理です
// 時間が来たので、これ以上1秒ごとに繰り返す処理を止めます
clearInterval(timerId);
// 画面に「お疲れ様です！」というお知らせのポップアップを表示します
alert('25分経過しました！お疲れ様です！');
}
}, 1000); // ここに書いた「1000」が「1000ミリ秒（＝1秒）ごとに繰り返す」という意味になります
});
// ストップボタンがクリックされた時の処理です
stopButton.addEventListener('click', () => {
// setIntervalで動いている繰り返しの処理（timerId）を停止させます。これで時間が止まります。
clearInterval(timerId);
});
// リセットボタンがクリックされた時の処理です
resetButton.addEventListener('click', () => {
// 動いているタイマーがあれば、まずはそれを停止させます
clearInterval(timerId);
// 残り秒数（timeLeft）を、最初の25分（1500秒）に戻します
timeLeft = 25 * 60;
// 時間を初期状態に戻したので、画面の表示も「25:00」に更新します
updateTimeDisplay();
});
// 5. 最後に、プログラムが読み込まれた直後（最初にページを開いた時）の処理です
// 画面に「25:00」を正しく表示させるために、最初に1回だけ表示用の関数を呼び出しておきます
updateTimeDisplay();
</script>
</html>データを覚えておく箱「変数」の準備
プログラムを作る時は、まず「扱うデータ」を保存しておく箱（変数）を用意します。今回のタイマーで必要なのはこの2つです。
let timeLeft = 25 * 60;
let timerId;timeLeft（残り時間）: ここが最初のポイント！25分をそのまま「25」と管理するのではなく、**秒に直して「1500秒（25×60）」**として管理します。プログラムでは、一番細かい単位（今回は秒）で計算した方が、後々処理がしやすくなるからです。timerId（タイマーの整理番号）: あとでタイマーを止めたりリセットしたりするために、「現在動いているタイマーの番号」を覚えておくための空箱です。
HTMLの部品をJavaScriptで操る準備
画面に時間を表示したり、ボタンを押した時に反応させたりするには、**「HTMLのどの部分を操作するのか」**をJavaScriptに教えてあげる必要があります。
const timeDisplay = document.getElementById('time');
const startButton = document.getElementById('start');
ここで大活躍するのが document.getElementById() です。 これは、「HTMLの中から、指定したID（名前）の部品を探してきて！」という命令です。これで取得した部品を変数（timeDisplayやstartButtonなど）に入れておくことで、JavaScriptから自由に文字を書き換えたり、クリックされたかを監視したりできるようになります。
計算して見やすく！「時間の表示」の仕組み
残り時間は「1500秒」のように秒数で管理していますが、画面には「25:00」のように表示したいですよね。そのための計算をしているのが updateTimeDisplay という関数です。
function updateTimeDisplay() {
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
const formattedSeconds = seconds.toString().padStart(2, '0');
timeDisplay.textContent = `${minutes}:${formattedSeconds}`;
}
- 分を計算する (
Math.floor): 残り秒数を60で割ります。Math.floorは「小数点以下を切り捨てる」魔法の言葉。これで「何分」かが分かります。 - 秒を計算する (
%):%は「割り算の余り」を出す記号です。60で割った余りが、分に満たない「何秒」の部分になります。 - 見た目を整える (
padStart): 例えば残り5秒のとき、「25:5」だと不格好ですよね。padStart(2, '0')は、「必ず2桁にして、足りない場合は前に ‘0’ をくっつける」という便利な命令です。これで「25:05」と綺麗に表示されます！
最後に timeDisplay.textContent = ... で、計算した時間を画面にセットしています。
JavaScriptの肝！タイマーを動かす・止める
いよいよメインイベント！「スタート」ボタンを押したときの処理です。
startButton.addEventListener('click', () => {
clearInterval(timerId); // ①まずは止める
timerId = setInterval(() => { // ②1秒ごとに繰り返す
if (timeLeft > 0) {
timeLeft--; // ③1秒減らす
updateTimeDisplay(); // ④画面を更新
} else {
clearInterval(timerId); // ⑤0になったら止める
alert('25分経過しました！お疲れ様です！');
}
}, 1000);
});
addEventListener('click', ...): 「ボタンがクリックされたら、この中の処理をしてね」という命令です。setInterval(処理, 1000): これがタイマーの正体！「1000ミリ秒（＝1秒）ごとに、指定した処理を繰り返す」という命令です。1秒ごとにtimeLeft--で残り秒数を1ずつ減らし、画面を更新し続けています。clearInterval(timerId): タイマーを止めるためのブレーキです。スタートボタンを連続で押された時にタイマーが二重に動くのを防いだり、時間が0になった時にストップさせるために使っています。
まとめ：少しずつコードを読んでみよう！
いかがでしたか？ 一見複雑に見えるプログラムも、**「変数の準備」「HTMLとの連携」「計算」「タイマーの実行」**と、役割ごとに分解して見ていくと、何をしているのかが見えてきますよね。
いきなり全てを暗記する必要はありません。「ボタンを押した時の処理は addEventListener を使うんだな」「1秒ごとに繰り返すのは setInterval だな」といった、よく使うキーワードをなんとなく覚えておくだけでも、プログラミングの理解はグッと深まります。
ぜひ、このコードをコピーして、ご自身のパソコンで実際に動かしてみてください！時間を変えてみたり、表示するメッセージを変えてみたりするのもおすすめの勉強法ですよ。
コメント