JavaScriptでカウントダウンタイマーを作成する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでカウントダウンタイマーを作成する方法について解説しています。カウントダウンタイマーを作成するには、一定時間ごとに処理を実行して、時間を計算する必要があります。1秒ごとに表示したい場合は1秒ごとに処理する必要があります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでカウントダウンタイマーを作成する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

カウントダウンタイマーを作成する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

カウントダウンタイマーとは

「オリンピックまであと何日」や「インスタントラーメンができるまで3分待つ」など、未来の特定の日時に向けて日付や時刻を数えること及び機能を、カウントダウンタイマーと呼びます。

それではカウントダウンタイマーをJavaScriptで作成するにはどのようにしたら良いでしょうか。それには2つの機能を使います。

 

日付や時間を処理する関数

JavaScriptで日付や時間を処理する場合、Dateインスタンスを使用します。Dateインスタンスを取得するには以下のように記述します。

エポックミリ秒とは日時を 1970/1/1 午前0時0分0秒(世界標準時) からのミリ秒数で表したもので、コンピューターで時間を処理する場合に多く用いられます。

// 現在日時を取得する
var dt = new Date();
// 特定の日時を取得する(月は0から始めることに注意)
var dt = new Date(年, 月, 日, 時, 分, 秒);
// 特定の日時を取得する(エポックミリ秒を使用)
var dt = new Date(エポックミリ秒);

 

年を取得するには getFullYear()メソッド、秒を取得するには getSeconds()メソッドを使用します。その他の値を取得するメソッドは以下のとおりです。

月は0から始まるので取得の際は1を加算することに注意しましょう。

var year = dt.getFullYear(); // 年
var month = dt.getMonth() + 1; // 月(+1する)
var date = dt.getDate(); // 日
var hours = dt.getHours(); // 時
var minutes = dt.getMinutes(); // 分
var seconds = dt.getSeconds(); // 秒

 

日付を計算する場合は、getTime()でエポックミリ秒を取得し、加算/減算したエポックミリ秒でDateインスタンスを作成します。以下は3分後の日時を計算する例です。

var startDt = new Date();
var endDt = new Date(startDt.getTime() + 180 * 1000); // 3分後

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

今回のサンプルプログラムでは、現在時刻から3分後までの秒数をカウントダウンします。

setInterval関数は、指定した時間間隔で処理を実行します。

<!DOCTYPE html>
<html>
  <head>
  <script>
  // カウントダウンする秒数
  var sec = 180;
 
  // 開始日時を設定
  var dt = new Date();
  console.log("Start: ", dt);
  // 終了時刻を開始日時+カウントダウンする秒数に設定
  var endDt = new Date(dt.getTime() + sec * 1000);
  console.log("End : ", endDt);

  // 1秒おきにカウントダウン
  var cnt = sec;
  var id = setInterval(function(){
    cnt--;
    console.log(cnt);
    // 現在日時と終了日時を比較
    dt = new Date();
    if(dt.getTime() >= endDt.getTime()){
      clearInterval(id);
      console.log("Finish!");
    }
  }, 1000);
  </script>
  </head>
  <body></body>
</html>

実行結果は以下のようになります。Chromeの場合、デベロッパーツールのコンソールで確認できます。

カウントダウンが完了すると「Finish」と表示されます。

秒数をいろいろ変えて試してみてください。

筆者プロフィール

この記事を監修してくれた方

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握(実証実験)、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。