Cohorz Dev

簡単なアプリケーションを作ってみよう（タイマーアプリ）

公開日：December 23, 2024更新日：December 23, 2024
📄

タイマーアプリは、指定した時間からカウントダウンを行い、残り時間が0になったらアラームを表示するアプリケーションです。まずは、必要最小限の機能で作成し、その後、改良を加えて、より使いやすいタイマーに仕上げていきましょう。

タイマーアプリ作成 ​

まずは、以下の機能を持つ、シンプルなタイマーを作成します。

  • 時間を指定して「スタート」ボタンを押すとカウントダウンを開始する
  • 残り時間が画面に表示される
  • 残り時間が0になると、「時間です！」と表示される

完成イメージ ​

タイマーアプリのスクリーンショット

このような、シンプルなタイマーを目指します。

HTMLの作成 ​

まずは、HTMLでタイマーの骨組みを作成します。index.htmlの<body>タグの中身を、以下のように書き換えてください。

html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 超入門</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>タイマーアプリ</h1>
    <div>
      <input type="number" id="timeInput" value="10">
      <span>秒</span>
    </div>
    <button id="startButton">スタート</button>
    <div id="timerDisplay">ここに残り時間が表示されます</div>

    <script src="script.js"></script>
</body>
</html>
  • <h1>タグでタイマーアプリの見出しを表示しています。
  • <input type="number">タグで、時間（秒）を入力する欄を作成しています。id="timeInput"で、後からJavaScriptで操作できるように、timeInputというIDを付けています。value="10"で、初期値を10秒に設定しています。
  • <button>タグで「スタート」ボタンを作成しています。id="startButton"で、startButtonというIDを付けています。
  • <div>タグで残り時間を表示するエリアを作成しています。id="timerDisplay"で、timerDisplayというIDを付けています。

CSSで見た目を整える ​

次に、CSSで見栄えを整えましょう。style.cssに以下の内容を書き込んでください。

css
body {
  font-family: sans-serif;
  text-align: center;
}

#timerDisplay {
  margin-top: 20px;
  font-size: 24px;
  font-weight: bold;
}

これで、残り時間が大きく太字で表示されるようになります。

JavaScriptで動きをつける ​

最後に、JavaScriptでタイマーの動きをつけましょう。script.jsに以下の内容を書き込んでください。

javascript
// 1. HTML要素を取得する
const timeInput = document.getElementById("timeInput");
const startButton = document.getElementById("startButton");
const timerDisplay = document.getElementById("timerDisplay");

// 2. 残り時間（初期値は0）
let remainingTime = 0;

// 3. タイマーを管理する変数（最初はnull）
let timerId = null;

// 4. スタートボタンがクリックされたときの処理
startButton.addEventListener("click", () => {
  // 5. 既にタイマーが動いている場合は、何もしない
  if (timerId !== null) {
    return;
  }

  // 6. 入力欄から時間を取得し、残り時間に設定する
  remainingTime = parseInt(timeInput.value);

  // 7. 残り時間を表示する
  timerDisplay.textContent = remainingTime;

  // 8. 1秒ごとに残り時間を減らし、表示を更新する
  timerId = setInterval(() => {
    remainingTime--;
    timerDisplay.textContent = remainingTime;

    // 9. 残り時間が0になったら、タイマーを停止し、「時間です！」と表示する
    if (remainingTime === 0) {
      clearInterval(timerId);
      timerId = null;
      timerDisplay.textContent = "時間です！";
    }
  }, 1000);
});

このコードでは、

  1. document.getElementById()で、必要なHTML要素を取得しています。
  2. 残り時間を格納する変数remainingTimeを宣言し、初期値を0に設定しています。
  3. タイマーを管理するための変数timerIdを宣言し、初期値をnullに設定しています。この変数には、後ほどsetIntervalの戻り値（タイマーID）が格納されます。
  4. startButton.addEventListener("click", ...)で、スタートボタンがクリックされたときの処理を登録しています。
  5. timerIdがnullでない場合、つまり既にタイマーが動いている場合は、returnで処理を抜けて、何もせずに終了します。
  6. timeInput.valueで入力欄の値を取得し、parseInt()で整数に変換して、remainingTimeに設定しています。
  7. timerDisplay.textContentで、残り時間を表示エリアに表示しています。
  8. setInterval()で、1秒（1000ミリ秒）ごとに実行する処理を登録しています。この中で、remainingTimeを1ずつ減らし、timerDisplay.textContentで表示を更新しています。
  9. remainingTimeが0になったら、clearInterval()でタイマーを停止し、timerIdをnullに戻して、「時間です！」と表示しています。

動作確認 ​

index.htmlをブラウザで開き、時間を設定して「スタート」ボタンをクリックしてみましょう。指定した時間からカウントダウンが始まり、残り時間が0になると「時間です！」と表示されれば成功です！

タイマーアプリの動作イメージ

タイマーアプリ改良 ​

シンプルなタイマーに、ここからさらに改良を加えて、より使いやすいタイマーに仕上げていきましょう。以下の3点について改良を加えます。

  1. ストップボタンの追加: 動作中のタイマーを途中で停止できるようにする
  2. リセットボタンの追加: タイマーを初期状態に戻せるようにする
  3. 時間のフォーマット: 残り時間を「分:秒」の形式で表示する

HTMLの改良 ​

まずは、HTMLにストップボタンとリセットボタンを追加します。index.htmlのstartButtonの記述の下に、以下のコードを追加してください。

html
<button id="stopButton">ストップ</button>
<button id="resetButton">リセット</button>

CSSの改良 ​

次に、追加したボタンのスタイルを整えます。style.cssに以下の内容を追加してください。

css
button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #f06;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 5px;
}

JavaScriptの改良 ​

最後に、JavaScriptに改良を加えていきます。script.jsのコードを、以下のように書き換えてください。

javascript
// 1. HTML要素を取得する
const timeInput = document.getElementById("timeInput");
const startButton = document.getElementById("startButton");
const stopButton = document.getElementById("stopButton");
const resetButton = document.getElementById("resetButton");
const timerDisplay = document.getElementById("timerDisplay");

// 2. 残り時間（初期値は0）
let remainingTime = 0;

// 3. タイマーを管理する変数（最初はnull）
let timerId = null;

// 4. 時間をフォーマットする関数
function formatTime(time) {
  const minutes = Math.floor(time / 60);
  const seconds = time % 60;
  const formattedTime = `${minutes}:${seconds.toString().padStart(2, "0")}`;
  return formattedTime;
}

// 5. スタートボタンがクリックされたときの処理
startButton.addEventListener("click", () => {
  // 6. 既にタイマーが動いている場合は、何もしない
  if (timerId !== null) {
    return;
  }

  // 7. 入力欄から時間を取得し、残り時間に設定する
  remainingTime = parseInt(timeInput.value);

  // 8. 残り時間を表示する
  timerDisplay.textContent = formatTime(remainingTime);

  // 9. 1秒ごとに残り時間を減らし、表示を更新する
  timerId = setInterval(() => {
    remainingTime--;
    timerDisplay.textContent = formatTime(remainingTime);

    // 10. 残り時間が0になったら、タイマーを停止し、「時間です！」と表示する
    if (remainingTime === 0) {
      clearInterval(timerId);
      timerId = null;
      timerDisplay.textContent = "時間です！";
    }
  }, 1000);
});

// 11. ストップボタンがクリックされたときの処理
stopButton.addEventListener("click", () => {
  // 12. タイマーが動いていない場合は、何もしない
  if (timerId === null) {
    return;
  }

  // 13. タイマーを停止する
  clearInterval(timerId);
  timerId = null;
});

// 14. リセットボタンがクリックされたときの処理
resetButton.addEventListener("click", () => {
  // 15. タイマーが動いている場合は、停止する
  if (timerId !== null) {
    clearInterval(timerId);
    timerId = null;
  }

  // 16. 残り時間を初期化し、表示を更新する
  remainingTime = 0;
  timerDisplay.textContent = "ここに残り時間が表示されます";
});

このコードでは、

  1. stopButton、resetButtonの要素を取得しています。
  2. 残り時間を「分:秒」形式にフォーマットする関数formatTimeを追加しています。
    • Math.floor(time / 60)で分を計算しています。
    • time % 60で秒を計算しています。
    • .toString().padStart(2, "0")で、秒が1桁の場合は先頭に0を追加しています（例：5→05）。
  3. スタートボタンのクリック処理内で、formatTime関数を使って残り時間を表示しています。
  4. ストップボタンがクリックされたときの処理を追加しています。
    • timerIdがnullの場合、つまりタイマーが動いていない場合は、何もしません。
    • clearInterval()でタイマーを停止し、timerIdをnullに戻しています。
  5. リセットボタンがクリックされたときの処理を追加しています。
    • タイマーが動いている場合は、停止します。
    • remainingTimeを0にリセットし、表示を初期状態に戻します。

動作確認（改良版） ​

index.htmlをブラウザで開き、改良されたタイマーの動作を確認してみましょう。

  • 時間を設定して「スタート」ボタンをクリックすると、カウントダウンが開始される。
  • 残り時間が「分:秒」の形式で表示される。
  • 「ストップ」ボタンをクリックすると、タイマーが一時停止する。
  • 「リセット」ボタンをクリックすると、タイマーが初期状態に戻る。
  • 残り時間が0になると、「時間です！」と表示される。

これらの機能が正しく動作することを確認してください。

タイマーアプリの動作イメージ

Copyright © 2024 Cohorz Dev
Powered by VitePress