JavaScript で現在の時刻を取得する
たとえば、デジタル時計のように現在の時刻をユーザーに表示する Web アプリケーションを作成する場合など、Web サイトに現在の日付または時刻を表示したい場合があります。これは、JavaScript 言語で提供される Date オブジェクトを使用して簡単に実行できます。
JavaScript の Date オブジェクトで現在の時刻を取得する
JavaScript の Date オブジェクトを使用すると、日付と時刻を操作できます。このオブジェクトを使用して、時刻を手動で設定して取得するか、現在の時刻に関するデータを取得することができます。以下は、JavaScript で時間を取得するために使用できるいくつかのメソッドです。
| メソッド | 目的 |
|---|---|
getHours() |
世界時（0-23）に従って時間を返します |
getMinutes() |
世界時（0-59）に従って分を返します |
getSeconds() |
世界時（0-59）に従って、秒を返します。 |
以下のコード例を使用して、これを理解してみましょう。以下のプログラムは、ブラウザに現在の時刻を表示します。時間は、時間、分、秒の 3つで構成されていることは誰もが知っています。これらの各データを取得するために、JavaScript で使用できるさまざまなメソッドがあります。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<p id="displayHours"></p>
<p id="displayMinutes"></p>
<p id="displaySeconds"></p>
<script>
var displayHours = document.getElementById('displayHours');
var displayMinutes = document.getElementById('displayMinutes');
var displaySeconds = document.getElementById('displaySeconds');
var currentTime = new Date();
displayHours.innerHTML = currentTime.getHours() + " hrs";
displayMinutes.innerHTML = currentTime.getMinutes() + " min";
displaySeconds.innerHTML = currentTime.getSeconds() + " sec";
</script>
</body>
</html>
出力：
22 hrs
56 min
19 sec
これら 3つのことを Web ページに表示するために、3つの段落タグを使用します。これらの各タグには、id が関連付けられています。この id を使用すると、document.getElementById() メソッドを使用して JavaScript プログラム内のこれらの HTML 要素にアクセスできます。その後、これらの各 HTML タグを、displayHours、displayMinutes、および displaySeconds という名前の変数内に格納します。
現在の時刻を取得するには、コンストラクターとして Date オブジェクトを呼び出す必要があります（new キーワードがあることに注意してください）。この Date オブジェクトは、currentTime 変数内に格納する数値を返します。currentTime 変数には、時間全体（時、分、秒）が含まれるようになりました。
現在の時刻と 3つの段落タグがあり、ブラウザに時刻を表示します。個々のフィールド、つまり時間、分、秒を取得するには、currentTime 変数でそれぞれ getHours()、getMinutes()、および getSeconds() メソッドを使用します。innerHTML プロパティを使用して、これらの個々のフィールドを各段落タグに割り当てることができます。上記のコードをブラウザで HTML ドキュメントとして実行すると、ブラウザウィンドウの出力として現在の時刻が取得されます。
このプログラムは、コンピュータに基づいて現在の現地時間を表示するため、上記の出力は、上記のコードを実行している時間によって異なる場合があります。
時間形式（GMT、UTC、IST など）と日付を使用して全体の時間を必要とする場合は、以下に示すように、innerHTML プロパティを使用して currentTime 変数を段落タグに直接割り当てることができます。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<p id="dateAndTime"></p>
<script>
var dateAndTime = document.getElementById('dateAndTime');
var currentTime = new Date();
dateAndTime.innerHTML = currentTime;
</script>
</body>
</html>
出力：
Wed Apr 14 2021 23:30:12 GMT+0530 (India Standard Time)
JavaScript で UTC 形式で現在の時刻を取得する
協定世界時（UTC）形式で時間を取得できるさまざまな方法があります。これらの方法は、上記の方法とほぼ同じように機能します。
以下は、UTC 形式で時刻を表示するメソッドのリストです。
| メソッド | 目的 |
|---|---|
getUTCHours() |
ユニバーサル時間形式（0-23）で時間値を返します |
getUTCMinutes() |
ユニバーサル時間形式（0-59）で分の値を返します |
getUTCSeconds() |
世界時形式（0-59）で秒の値を返します |
JavaScript のローカル形式で現在の時刻全体を取得する
これまで見てきたメソッドは、時間全体ではなく、時間、分、または秒のいずれかの特定の部分のみを返します。したがって、現在の時刻全体をローカル形式で取得するには、toLocaleTimeString() という名前のメソッドを使用できます。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<p id="dateAndTime"></p>
<script>
var dateAndTime = document.getElementById('dateAndTime');
var currentTime = new Date();
dateAndTime.innerHTML = currentTime.toLocaleTimeString();
</script>
</body>
</html>
出力：
11:43:06 PM
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn