基本知識 2026年7月2日

【JS第10回】実践！タイマーアプリを開発する

JavaScript基礎講座全10回（第10回・最終回）

【JS第10回】実践！タイマーアプリを開発する

ついに最終講義です！これまでに学んだプログラミング概念（変数、関数、DOM操作、イベントリスナー）と、ブラウザの繰り返し実行API（setInterval）を融合し、実際に動作するWebタイマーを開発しましょう。

📌 JavaScript講座ロードマップ一覧（クリックで移動）

第1回第2回第3回第4回第5回第6回第7回第8回第9回第10回

1. タイマーアプリの設計と仕様決定

今回作成するWebタイマーは、以下のシンプルな操作性を持ちます。

画面構成: 秒数を表示する領域、および「スタート」「ストップ」「リセット」の3つの操作ボタン。
スタートボタンクリック: 1秒ごとに画面の数値が「1, 2, 3…」と増えていきます。
ストップボタンクリック: カウントアップが一時停止します。
リセットボタンクリック: 計測が停止し、画面の数値が「0」に戻ります。

2. 土台となるHTML/CSS（骨組みとデザイン）

まずは画面に表示するための簡単なマークアップを用意します。HTML基礎・CSS基礎の知識を思い出しながら配置しましょう。

<div class="timer-card">
    <div id="display">0</div>
    <div class="btn-group">
        <button id="start-btn">スタート</button>
        <button id="stop-btn">ストップ</button>
        <button id="reset-btn">リセット</button>
    </div>
</div>

3. JavaScriptでの制御ロジック

このアプリの心臓部は、ブラウザの非同期繰り返し機能である `setInterval(処理, 時間)` です。これは、指定したミリ秒の間隔（1秒＝1000ミリ秒）ごとに、第1引数に渡した関数を繰り返し自動実行するブラウザ提供の強力なAPIです。

また、ループを一時停止（解除）するために、setIntervalが生成する「タイマーID」を保持しておき、ストップ時に `clearInterval(タイマーID)` へ引き渡して破棄します。

4. タイマーアプリを動かす完全なJavaScriptコード

以下のコードを `script.js` に書いて読み込ませることで、スタートからストップ、リセットまでの一連のシステムが完璧に連動して動き出します。

script.js

/* 1. 操作・表示を行うDOM要素を取得する */
const display = document.querySelector("#display");
const startBtn = document.querySelector("#start-btn");
const stopBtn = document.querySelector("#stop-btn");
const resetBtn = document.querySelector("#reset-btn");

/* 2. アプリの状態を管理する変数（秒数、タイマーID） */
let seconds = 0;
let timerId = null; /* 動いている間はここにIDが入る */

/* 3. スタートボタンのクリック処理 */
startBtn.addEventListener("click", () => {
    /* すでにタイマーが動いている場合は、重複起動を防ぐため何もしない */
    if (timerId !== null) return;

    /* 1000ミリ秒（1秒）ごとに処理をループ実行 */
    timerId = setInterval(() => {
        seconds++;
        display.textContent = seconds; /* 画面の数値を書き換える */
    }, 1000);
});

/* 4. ストップボタンのクリック処理 */
stopBtn.addEventListener("click", () => {
    if (timerId !== null) {
        clearInterval(timerId); /* タイマー処理を停止する */
        timerId = null;       /* IDを空に戻す */
    }
});

/* 5. リセットボタンのクリック処理 */
resetBtn.addEventListener("click", () => {
    /* 計測を止めてクリア */
    clearInterval(timerId);
    timerId = null;
    seconds = 0;
    display.textContent = seconds; /* 表示を0に戻す */
});