JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでカウントダウンタイマーを作る方法【初心者向けチュートリアル】

カウントダウンタイマーは、大切なイベントまでの残り時間を数えるために、インターネット上のさまざまなサイトで活用されています。

たとえば、新しいWebサイトの公開日までのカウントダウンに使ったり、新製品発表のタイミングを知らせるために使ったりできます。活用の可能性はアイデア次第で無限に広がります。

この記事では、HTML・CSS・JavaScriptという3つの技術を組み合わせて、JavaScriptによるカウントダウンタイマーを作る方法を解説します。それでは始めましょう!

Webページの土台を作る

まずは基本となるWebページを用意しましょう。このチュートリアルでは外部ライブラリを使わず、素のHTML・CSS・JavaScriptだけでシンプルに実装していきます。

はじめに、次のようなHTMLファイルを作成してください。

<!DOCTYPE html>
<html>
	<script>
		// ここにJavaScriptのコードを書きます
	</script>
	<style>
		/* ここにCSSのスタイルを書きます */
	</style>
	<body>
		<h1>もうすぐその時が…</h1>
		<div id="timer"></div>
	</body>
</html>

現時点でブラウザを開いても、特別な表示はされません。

JavaScriptでカウントダウンタイマーを作る方法【初心者向けチュートリアル】

これはまだスタイルを適用しておらず、タイマーを動かすJavaScriptも作っていないためです。次はタイマーの心臓部となるJavaScriptを作っていきましょう。

タイマーを作成する

JavaScriptにはDateオブジェクトという便利な機能があり、日付や時刻を簡単に扱えます。今回はこのオブジェクトを2つの目的で使います。1つはカウントダウンの目標日時のタイムスタンプを取得すること、もう1つは現在の日時を取得することです。

このチュートリアルでは、すべてのスクリプトを<script>タグ内に直接記述します。外部スクリプトファイルは使用しません。

目標の日付から現在の日付を引けば、2つの日付の差(=残り時間)を求められます。

var timeLeft = +new Date("2021-05-04") - +new Date();

このコードは、2021年5月4日の「スター・ウォーズ・デー」までの残り時間を計算するものです。実際に使う際は、ご自身の目標日時に置き換えてください。

これで2つの日付の差は分かりましたが、まだ問題が2つあります。1つ目は、タイマーとして自動的にカウントダウンしてくれないこと。2つ目は、差分がミリ秒単位で保持されているため、人間には読みにくいことです。そこで、ミリ秒を「日・時・分」の単位に変換します。

読みやすい形式で残り時間を計算するには、次のコードを使います。

var daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hoursLeft = Math.floor((timeLeft / (1000 * 60 * 60)) % 24);
var minutesLeft = Math.floor((timeLeft / 1000) / 60 % 60);

続いて、計算した値を見やすい文字列に整形しましょう。

const timeLeftText = `あと${daysLeft}日 ${hoursLeft}時間 ${minutesLeft}分`;

ここではテンプレートリテラル(文字列補間)を使い、先ほど計算した値を文字列に埋め込んでいます。実行すると「あと314日 13時間 52分」のような表示になります。

タイムスタンプが生成できたら、Webページに表示してみましょう。

document.getElementById("timer").innerHTML = timeLeftText;

ここまでのコードを関数にまとめると、次のようになります。

function countdown() {
	var daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
	var hoursLeft = Math.floor((timeLeft / (1000 * 60 * 60)) % 24);
	var minutesLeft = Math.floor((timeLeft / 1000) / 60 % 60);

	const timeLeftText = `あと${daysLeft}日 ${hoursLeft}時間 ${minutesLeft}分`;
	document.getElementById("timer").innerHTML = timeLeftText;
}

countdown();

ページを読み込むと、次のように表示されます。

JavaScriptでカウントダウンタイマーを作る方法【初心者向けチュートリアル】

これでタイマーは完成……と思いきや、そう簡単にはいきません。しばらく待っても表示は変わりませんよね。それは、ブラウザに対して「毎分更新してね」と指示していないためです。そこで登場するのが次のコードです。

setInterval(countdown, 60000);

このコードはcountdown()関数の宣言より後ろに追加してください。ページを60,000ミリ秒(=60秒)ごとに更新し、表示を刷新してくれます。

これで、表示が1分ごとに切り替わる本物のカウントダウンタイマーになりました!

スタイルを整える

これでタイマーは動くようになりましたが、見た目はまだ味気ないですね。CSSを少し加えて、ページをもっと魅力的に仕上げましょう。

<style>
body {
	padding-top: 20%;
	height: 100vh;
	background: linear-gradient(to bottom right, #CAA89C, #434EFC);
}
h1, p {
	text-align: center;
	color: white;
}
</style>

スタイル適用後のページはこちらです。

JavaScriptでカウントダウンタイマーを作る方法【初心者向けチュートリアル】

グラデーションの背景が付き、テキストが中央揃えになり、白い文字で表示されるようになりました。ぐっとおしゃれになりましたね!

まとめ

カウントダウンタイマーは、多くのWebサイトで欠かせない機能です。個人ブログでも企業サイトでもよく見かけます。結婚式までのカウントダウンを掲載するブログもあれば、新製品発売日までのカウントダウンを設置する企業サイトもあります。

このチュートリアルで学んだ内容を応用すれば、あなたもプロのように自分だけのJavaScriptカウントダウンタイマーを作れるはずです。ぜひ試してみてください!

  1. JavaScriptのWeakSetとは？特徴と主要メソッド、サンプルコードをわかりやすく解説

    JavaScriptのWeakSet（ウィークセット）は、オブジェクトを格納するためのコレクションです。Setと同様に、同じオブジェクトを重複して保存することはできません。WeakSetの主な特徴弱い参照で保持する：WeakSet内のオブジェクトへの参照が他に存在しなくなると、ガベージコレクションによって自動的にメモリから解放されます。そのため、メモリリークを防ぎたい場面で役立ちます。オブジェクトのみ格納可能：数値や文字列などのプリミティブ値は追加できません。列挙できない：Setのようなsizeプロパティや反復処理の仕組みを持たず、格納されている要素の一覧を取得することはできません。WeakS

  2. 【初心者向け】JavaScriptでカウントダウンタイマーを作成する方法を解説

    Webサイトでは、イベント開始までの残り時間やセールの締め切り表示など、カウントダウンタイマーを設置したい場面は数多くあります。JavaScriptでは、DateオブジェクトとsetInterval()メソッドを組み合わせるだけで、誰でも簡単にカウントダウンタイマーを実装できます。 ここでは、指定した日時までの残り時間を「日・時・分・秒」の形式でリアルタイムに表示するサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content=&