【JavaScript】現在時刻を表示する方法

RELEASE / 2022.7.12 UPDATE / 2023.11.17

JavaScript

new Date()

setInterval()

プログラム

現在時刻

今回の記事ではJavaScriptを使用して現在時刻をリアルタイムに表示し続ける時計の作り方を解説したいと思います。

この記事の目次を表示

1 現在時刻をリアルタイムに表示し続けるサンプルソース
2 サンプルソースの解説
- 2.1 function clock()の解説
- 2.2 twoFormat( data )の解説

現在時刻をリアルタイムに表示し続けるサンプルソース

まずは現在時刻をリアルタイムに表示し続けるサンプルソースを見てみましょう。

function twoFormat( data ){
	let number;
	if( data < 10 ){
		number = "0" + data;
	}
	else{
		number = data;
	}
	return number;
}
function clock(){
	const nowTime = new Date();
	const nowHour = twoFormat( nowTime.getHours() );
	const nowMinutes = twoFormat( nowTime.getMinutes() );
	const nowSeconds = twoFormat( nowTime.getSeconds() );
	const message = nowHour + ":" + nowMinutes + ":" + nowSeconds;
	document.getElementById("time").innerHTML = message;
}
setInterval('clock()',1000);

サンプルソースの解説

上記サンプルソースはclock関数とtwoFormat関数、2つの関数から構成されています。それぞれの関数の役割を開設します。

function clock()の解説

clock関数が現在時刻を取得する関数です。ページを開いた現在時刻を表示するだけであればこちらの関数のみで実装可能です。

const nowTime = new Date();

new Date()はJavaScriptで日付を取得する記述です。
この記述で現在時刻に関する情報が以下のように格納されています。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

しっかり何となく解読できそうですが、それでもぱっと見ではよく分かりません。なのでよく見る時間表記に変換したいと思います。

const nowHour = nowTime.getHours();
const nowMinutes = nowTime.getMinutes();
const nowSeconds = nowTime.getSeconds();

上記記述は変数nowTimeの中からgetHours()で〇時、getMinutes()で〇分、getSeconds()で秒を取得しています。

記述	取得できる情報
getHours()	時
getMinutes()	分
getSeconds()	秒

nowTimeの中から取得した時・分・秒を：で区切り変数messageの中に格納します。

const message = nowHour + ":" + nowMinutes + ":" + nowSeconds;
document.getElementById("time").innerHTML = message;

上記記述で変数messageに格納されている現在時間を出力します。以下が現在時間を取得し、表示した値です。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

setInterval('clock()',1000);

これで画面を表示した瞬間の現在時間を表示することが出来ました。でもこのままだと再読み込みしない限りずっと画面を表示した瞬間の時間が表示されてしまいます。なのでsetInterval()関数を使用して現在時間を取得する関数clock()を1秒ごとに繰り返し処理することでリアルタイムで現在時間を取得できます。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

上記リアルタイムで現在時間を取得するサンプルコードです。これで完成でも問題ないんですがよくあるデジタル時計は数字が一桁の時は01、02のように先頭に0が付きます。ここまで出来たらせっかくなので数字が一桁だった場合先頭に0をつける処理を追加してみましょう。

twoFormat( data )の解説

twoFormat(data)が数字が一桁だった場合、先頭に0を追加する関数です。

function twoFormat( data ){
}

上記記述で関数に引数をしています。引数はそれぞれ以下のように時・分・秒を関数に投げてあげます。

twoFormat( nowTime.getHours() );
twoFormat( nowTime.getMinutes() );
twoFormat( nowTime.getSeconds() );

投げた時・分・秒の引数、それぞれが一桁だった場合はdataの先頭に0をつけて変数numberに格納します。

let number;
if( data < 10 ){
	number = "0" + data;
}
else{
	number = data;
}
return number;

ここでポイントがひとつあります。それは0がクォーテーションで囲われている点です。数字をクォーテーションで囲うことで数字が文字列として扱われます。
例えばここで数字をクォーテーションで囲っていない場合、0+1=1、0+9=9と足し算としてしょりされてしまいます。数字をクォーテーションで囲うことで0+1=10、0+9=09と0付の二桁の数字に変換することが出来ます。

最後にreturn numberとすることで変換された値が返ってきます。

以下完成したサンプルソースを見てみましょう。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.