JavaScriptでカウントダウンタイマーを作成する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでカウントダウンタイマーを作成する方法について解説しています。カウントダウンタイマーを作成するには、一定時間ごとに処理を実行して、時間を計算する必要があります。1秒ごとに表示したい場合は1秒ごとに処理する必要があります。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptでカウントダウンタイマーを作成する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。
また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
カウントダウンタイマーを作成する方法について詳しく説明していくね！
お願いします！
カウントダウンタイマーとは
「オリンピックまであと何日」や「インスタントラーメンができるまで3分待つ」など、未来の特定の日時に向けて日付や時刻を数えること及び機能を、カウントダウンタイマーと呼びます。
それではカウントダウンタイマーをJavaScriptで作成するにはどのようにしたら良いでしょうか。それには2つの機能を使います。
- 日付や日時を処理する機能：Dateインスタンス
mozilla.org-Date - 一定間隔で処理を行う機能：setInterval関数
mozilla.org-setInterval
日付や時間を処理する関数
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分後
実際に書いてみよう
今回のサンプルプログラムでは、現在時刻から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・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
