カウントダウンタイマーをバニラJS（JavaScript/CommonJS）でシンプルに実装
  1. 銀ねこアトリエ
  2. 海外ノマドブログ
  3. ウェブ制作
  4. JavaScript
  5. カウントダウンタイマーをバニラJS（Ja…
SHARE
FacebookXはてB！

カウントダウンタイマーをバニラJS（JavaScript/CommonJS）でシンプルに実装

公開日
メンテナンス日

jQuery なし！バニラJS（JavaScript/CommonJS）のカウントダウンタイマーを作ってみたのでそのコードを紹介します。

日、時間、分、秒を取得する方法やsetTimeout&clearTimeoutについて解説しています。
サンプルコードもあるので参考にしてください。
この記事を書いた人

神守 由理子/フロントエンドエンジニア

資金ゼロからフィリピンで起業した海外ノマドエンジニア。IT業界10年以上でテクニカルディレクター（技術責任者）・エンジニア講師・ブリッジSEを経てLenzTechnologies Inc.を設立し、代表を務める。CMS concreteCMSエバンジェリスト。テックブログ以外も「磨耗しない人生」や「海外ノマド」のライフスタイルについて発信。好きなものは肉とハイボール。

XRead More

この記事の対象者

  • JavaScriptが少しわかる
  • Webコーディング・プログラミング勉強中
  • jQuery使いたくない
  • requestAnimationFrame も使ってみたい
かみーゆ
かみーゆ

ライブラリーいらず！
バニラJS（JavaScript/CommonJS）で実装するから、テキストエディターだけあれば実装できます！

この記事は、2025年2月に大幅にコードを改善し、さらにライブラリ（Luxon）で正確な時間を取得を追記しました。

new Date()の使い方

JavaScriptの Date オブジェクトについて。

JavaScript の日時は、基本的に協定世界時 (UTC) の1970年1月1日深夜0時からの経過ミリ秒数で指定されます。この日付と時刻は、コンピューターに記録される日付と時刻の値の主な基準値である UNIX Epoch と同じです。

Date|MDN

const today = new Date();
console.log(today);

ちょっと画像が小さいですが、現在の日時を取得できます。

Sun May 23 2021 06:38:22 GMT+0800 (フィリピン標準時)

私が住むフィリピンの時間になってますが、日本で同じコードを実行すればもちろん日本の時間が取得できます。

現在と終了日の差分を取得する

//ISO 8601形式で記述
const goal = new Date("2021-06-22T00:00:00");
const today = new Date();


getTime() で値の取得をします。

1970年1月1日深夜0時から指定した日時までの ミリ秒 を取得できます。

const diffTime = date.getTime() - now.getTime();

差分が残り時間（ミリ秒）になるのでこの数値を日、時間、分、秒に変換します。

getMonthに気をつける

Dateオブジェクトは月や曜日、日にちなども取得できるメソッドが用意されています。
中でもgetMonthという月を取得するメソッドを使用する際は要注意、JSでは月だけなぜか0始まりで5月が4といったようになります。
出力する際はgetMonth() + 1といったように1プラスする必要があります。

Data オブジェクトがうまく動かない場合

次のような簡略化した書き方では、一部のブラウザ（特に古いバージョン）は、完全にISO 8601形式（日付と時間の標準）に準拠した文字列でないと解釈できないことがあるので注意。

new Date("2022-08-23 8:40:00")

Data オブジェクトの取り扱いには以下も併せて注意が必要。

  • ブラウザ依存: JavaScriptのDateオブジェクトはブラウザごとに実装が異なる。一部のブラウザはローカル形式の日付文字列をサポートするが、他のブラウザではエラーの発生する可能性がある。
  • 時間帯: 明示的にタイムゾーンを指定しない場合、一部のブラウザはデフォルトのタイムゾーンを使用し、それに基づいて日時を解釈。

回避法。コンストラクタ引数を使用する。

const date = new Date(2022, 7, 23, 8, 40, 0); // 月は0から始まるので7は8月を表す
console.log(date);

ライブラリを利用できます。 Luxon

切り捨てと除算を使って秒、分、時間、日数を取得する

まずは秒を取得してみましょう。

取得した値はミリ秒なので、 単純に1000で割り、小数点以下を切り捨て値が秒になります。

Math.floor()を使って小数点以下を切り捨てます。

const sec = Math.floor(diffTime / 1000);

ここから分を除くためには、60で割った余りを取得しなければなりません。

余りを計算するのに便利なものが除算です。

先に除算の使い方を紹介します。
除算は%を使います。13を3で割ると余りは1になるので出力結果は1になります。

const num = 13 % 3
console.log(num)//出力結果は1

60（分）で割り切れな数が秒になるので、次のような計算式で出力できます。

const sec = Math.floor(diffTime / 1000) % 60;

秒、分、時間、日数はそれぞれ次の通り算出できます。


const sec = Math.floor(diffTime / 1000) % 60;
const min = Math.floor(diffTime / 1000 / 60) % 60;
const hours = Math.floor(diffTime / 1000 / 60 / 60) % 24;
const days = Math.floor(diffTime / 1000 / 60 / 60 / 24);

カウントダウンに必要なそれぞれの値を関数にまとめる

// 目標日時の設定
const goal = new Date("2021-05-23T08:15:00");

// カウントダウンの計算結果を格納する変数
let count;

// カウントダウンの計算関数
const countDown = (goal) => {
  const now = new Date();
  const diffTime = goal.getTime() - now.getTime();

  // 残り時間の計算
  if (diffTime > 0) {
    const sec = Math.floor(diffTime / 1000) % 60;
    const min = Math.floor(diffTime / 1000 / 60) % 60;
    const hours = Math.floor(diffTime / 1000 / 60 / 60) % 24;
    const days = Math.floor(diffTime / 1000 / 60 / 60 / 24);
    count = { days, hours, min, sec };
  } else {
    // 目標日時を過ぎている場合処理を止める
    count = { days: 0, hours: 0, min: 0, sec: 0 };
  }

  return count;
};

setTimeoutでタイマー処理

タイマー処理をします。関数countDownで作った値をHTMLに反映させます。

<div class="countdown-timer">
  <span id="days"></span>日<span id="hours"></span>時間<span id="min"></span
  >分<span id="sec"></span>秒
</div>
//Timer処理
function setCountDown() {
  let counter = countDown(goal);
  const countDownTimer = setTimeout(setCountDown, 1000);

  for (let item in counter) {
    document.getElementById(item).textContent = counter[item];
  }
}
setCountDown();

今回はsetTimeoutを使いました。

setTimeout(処理, 間隔);

出力はオブジェクト配列をループさせるために for in 文を使いました。

for (const item in array) {
  item //キー
  array[item] //値
}

タイマーの終了処理を入れる

このままでは0の状態でTimerだけ動き続けるので、終了処理を入れます。

残りの日時のすべての値が0になったら、タイマーを止めます。

setTimeoutを使ったケース COPY
// タイマー処理
const setCountDown = () => {
  //先ほど作成した関数を格納
  const counter = countDown(goal);
  let end = 0;

  // 1秒ごとにカウントダウンを更新
  const countDownTimer = setTimeout(setCountDown, 1000);

  // 結果をDOMに表示
  for (const item in counter) {
    document.getElementById(item).textContent = counter[item];
    end += counter[item]
  }

  // カウントダウンが終了した場合
  if (end === 0) {
    clearTimeout(countDownTimer);
  }
};

requestAnimationFrame を使う事もできます。

requestAnimationFrameを使ったケース COPY
// タイマー処理
const setCountDown = () => {
  const counter = countDown(goal);
  let end = 0;

  // カウントダウンを更新
  const countDownTimer = requestAnimationFrame(setCountDown);

  // 結果をDOMに表示
  for (const item in counter) {
    document.getElementById(item).textContent = counter[item];
    // parseIntを省略
    end += counter[item];
  }

  // カウントダウンが終了した場合
  if (counter.days === 0 && counter.hours === 0 && counter.min === 0 && counter.sec === 0) {
    cancelAnimationFrame(countDownTimer);
  }
};

requestAnimationFrame と setTimeout の違いはこんな感じ。

setTimeoutrequestAnimationFrame
メリット簡単、 任意の時間間隔で実行スムーズなアニメーション、 効率的
デメリット描画と同期しない、 カクつくことがある正確な時間指定が難しい、 ループ処理が必要
使い方指定した時間後に関数を実行ブラウザの描画のタイミングで実行

正確な時間間隔での繰り返し処理が必要な場合は、setTimeout を使ってください。

かみーゆ
かみーゆ

キャンペーンやセール終了などはクレームになりかねないので、setTimeoutがいいかもですね。

タイマーのID名をセットします。

const ID名 = setTimeout(処理,間隔);

ある条件で、clearTimeout(ID名)で終了させることができます。

if (条件式) {
  clearTimeout(ID名);
}

コードをまとめると

すべてのコードはこんな感じになります。

<div class="countdown-timer">
  <span id="days"></span>日<span id="hours"></span>時間<span id="min"></span
  >分<span id="sec"></span>秒
</div>
// 目標日時の設定
const goal = new Date("2021-05-23T08:15:00");

// カウントダウンの計算結果を格納する変数
let count;

// カウントダウンの計算関数
const countDown = (goal) => {
  const now = new Date();
  const diffTime = goal.getTime() - now.getTime();

  // 残り時間の計算
  if (diffTime > 0) {
    const sec = Math.floor(diffTime / 1000) % 60;
    const min = Math.floor(diffTime / 1000 / 60) % 60;
    const hours = Math.floor(diffTime / 1000 / 60 / 60) % 24;
    const days = Math.floor(diffTime / 1000 / 60 / 60 / 24);
    count = { days, hours, min, sec };
  } else {
    // 目標日時を過ぎている場合
    count = { days: 0, hours: 0, min: 0, sec: 0 };
  }

  return count;
};

// タイマー処理
const setCountDown = () => {
  const counter = countDown(goal);
  let end = 0;

  // 1秒ごとにカウントダウンを更新
  const countDownTimer = setTimeout(setCountDown, 1000);

  // 結果をDOMに表示
  for (const item in counter) {
    document.getElementById(item).textContent = counter[item];
    end += counter[item];
  }

  // カウントダウンが終了した場合
  if (end === 0) {
    clearTimeout(countDownTimer);
  }
};

// カウントダウンの開始
setCountDown();

ここまでのコードではCSSを実装していないのですが、CSS付きでCodepenにサンプルをあげています。

見るからにいやらしいキャンペーン

興味がある方はこちらもどうぞ^ ^。

カウントダウンタイマー|CodePen

ライブラリで正確な時間を取得（2025年2月追記）

キャンペーンなどに使うカウントダウンタイマーは、より正確な時間を取得して、タイムゾーンがずれないようにする必要があります。

先程も Luxon について少し紹介しましたが、他にもいくつかライブラリがあります。

ライブラリ特徴
LuxonモダンなAPIと軽量性を両立
date-fns-tz軽量で機能的
Day.js軽量でMoment.js互換のAPI
js-Jodaドメイン駆動設計で不変性を重視

今回は、Luxonを使ったコードを紹介します。お手軽にCDNを読み込んで使います。

HTML COPY
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Countdown Timer</title>
  <!-- Luxon CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/3.5.0/luxon.min.js"></script>
</head>

<body>
  <!-- カウントダウンの表示要素 -->
  <div class="countdown-timer">
    <span id="days"></span>日<span id="hours"></span>時間<span id="min"></span>分<span id="sec"></span>秒
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', (event) => {
      // 目標日時の設定
      const goal = luxon.DateTime.fromISO("2025-05-23T08:15:00", { zone: 'Asia/Tokyo' });

      // カウントダウンの計算結果を格納する変数
      let count;

      // カウントダウンの計算関数
      const countDown = (goal) => {
        const now = luxon.DateTime.now().setZone('Asia/Tokyo')
        const diffTime = goal - now;

        // 残り時間の計算
        if (diffTime > 0) {
          const sec = Math.floor(diffTime / 1000) % 60;
          const min = Math.floor(diffTime / 1000 / 60) % 60;
          const hours = Math.floor(diffTime / 1000 / 60 / 60) % 24;
          const days = Math.floor(diffTime / 1000 / 60 / 60 / 24);
          count = { days, hours, min, sec };
        } else {
          // 目標日時を過ぎている場合
          count = { days: 0, hours: 0, min: 0, sec: 0 };
        }

        return count;
      };

      // タイマー処理
      const setCountDown = () => {
        const counter = countDown(goal);
        let end = 0;

        // 1秒ごとにカウントダウンを更新
        const countDownTimer = setTimeout(setCountDown, 1000);

        // 結果をDOMに表示
        for (const item in counter) {
          document.getElementById(item).textContent = counter[item];
          end += counter[item];
        }

        // カウントダウンが終了した場合
        if (end === 0) {
          clearTimeout(countDownTimer);
        }
      };

      // カウントダウンの開始
      setCountDown();
    });
  </script>
</body>
</html>

カウントダウンタイマーライブラリで正確な時間を取得

まとめ・カウントダウンはバニラJS（プレーンなJavaScript/CommonJS）だけでカンタンに実装できた!

シンブルですがバニラJS（プレーンなJavaScript/CommonJS）でカウントダウンを実装してみました。

もうちょっとデザインをブラッシュアップすれば、キャンペーンとかにも有効的に使えそうですね！

キャンペーンとして使用するに当たって注意です。

ひと昔前に、「キャンペーン終了まで残り●日」が毎日リセットされるカウントダウンをウェブサイトに実装し炎上した企業がありました。

かみーゆ
かみーゆ

お客に対してに対してウソはいかんです！

プログラミングを使ってキャンペーンを打つときは、誠実に！

ていうか、人として誠実が大事 ですよ！


余談が過ぎましたが、この記事が皆さんのコーディングライフの一助となれば幸いです。

最後までお読みいただきありがとうございました。

FAQ

タイマーの更新には requestAnimationFrame と setTimeout どちらを使うべきですか？
カウントダウンタイマーの場合、正確な時間間隔での更新が重要なため、 setTimeout が適しています。アニメーションを伴う場合は、 requestAnimationFrame も検討してください。
時間がずれて正確な日時が取得できません。日本時間で確実に日時を取得するためにはどうすればいいですか？
Luxon や date-fns-tz 、 Day.js 、 js-Joda などのライブラリを使用することで、日本時間を正確に取得することができます。例えば、以下のように使用します：<br> Luxon ：<br/> const DateTime = require('luxon') <br/> const japanTime = DateTime.now().setZone('Asia/Tokyo') <br/> console.log(japanTime.toString()) <br/>
Moment.js の使い方について教えてください
Moment.js は開発が終了しているため、 Luxon や date-fns-tz 、 Day.js 、 js-Joda などの代替ライブラリを使用することをお勧めします。これらのライブラリは軽量でモダンな API を提供し、引き続きメンテナンスが行われています。
  1. Previous
  2. Next