JavaScriptで時刻をリアルタイムに表示する方法17選

●JavaScriptで現在時刻を取得する基本
●日付・時刻のフォーマットを変換する
●タイムゾーンとUTCを理解する
●リアルタイムに時刻を表示する
●日付・時刻の計算と比較
●よくあるエラーと対処法
●JavaScriptで時刻を扱う応用例
まとめ

●JavaScriptで現在時刻を取得する基本

JavaScriptで時刻をリアルタイムに表示したい、そんな風に思ったことはありませんか？

Webアプリケーション開発で、現在時刻を扱う場面は意外と多いものです。

でも、JavaScriptの日付や時刻の扱いって、ちょっとややこしいですよね。

そんなあなたに向けて、この記事では、JavaScriptで現在時刻を取得し、リアルタイムに表示する方法を初心者向けに丁寧に解説します。

Dateオブジェクトの使い方から、ミリ秒での取得、そしてフォーマットの変換まで、実践的なコードサンプルを交えながらわかりやすく説明していきます。

○Dateオブジェクトを使った現在時刻の取得

JavaScriptで現在時刻を取得するには、Dateオブジェクトを使用します。

Dateオブジェクトを初期化するだけで、現在の日時を表すインスタンスが生成されます。

具体的なコードを見てみましょう。

const now = new Date();
console.log(now);

実行結果

Fri Apr 23 2023 10:30:45 GMT+0900 (日本標準時)

このコードでは、new Date()で現在時刻を表すDateオブジェクトを生成し、now変数に代入しています。

console.log(now)で出力すると、現在の日時が表示されます。

○サンプルコード1：現在時刻を取得して表示する

それでは、HTMLに現在時刻を表示するサンプルコードを見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>現在時刻を表示</title>
</head>
<body>
  <h1>現在時刻</h1>
  <p id="current-time"></p>

  <script>
    function displayCurrentTime() {
      const now = new Date();
      const currentTime = document.getElementById('current-time');
      currentTime.textContent = now.toString();
    }

    displayCurrentTime();
  </script>
</body>
</html>

このコードでは、displayCurrentTime()関数内で現在時刻を取得し、current-timeというIDを持つ<p>要素に表示しています。

now.toString()でDateオブジェクトを文字列に変換して表示しています。

実行結果

現在時刻
Fri Apr 23 2023 10:30:45 GMT+0900 (日本標準時)

○ミリ秒で現在時刻を取得する

Dateオブジェクトには、ミリ秒単位で時刻を取得するメソッドもあります。

getTime()メソッドを使うと、1970年1月1日 00:00:00 UTCからの経過ミリ秒を取得できます。

const now = new Date();
console.log(now.getTime());

実行結果

1682210245000

○サンプルコード2：現在時刻をミリ秒で取得して表示する

ミリ秒での現在時刻を表示するサンプルコードを見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>現在時刻をミリ秒で表示</title>
</head>
<body>
  <h1>現在時刻（ミリ秒）</h1>
  <p id="current-time"></p>

  <script>
    function displayCurrentTimeInMilliseconds() {
      const now = new Date();
      const currentTime = document.getElementById('current-time');
      currentTime.textContent = now.getTime();
    }

    displayCurrentTimeInMilliseconds();
  </script>
</body>
</html>

このコードでは、displayCurrentTimeInMilliseconds()関数内でgetTime()メソッドを使ってミリ秒での現在時刻を取得し、current-time要素に表示しています。

実行結果

現在時刻（ミリ秒）
1682210245000

ミリ秒での時刻表示は、主に時刻の比較や計算に使われます。

たとえば、ある処理にかかった時間を計測したいときなどに便利です。

●日付・時刻のフォーマットを変換する

JavaScriptのDateオブジェクトを使えば、現在時刻を簡単に取得できることがわかりました。

でも、デフォルトのフォーマットのままだと、ちょっと見にくいですよね。

実際の開発では、用途に合わせて日付・時刻のフォーマットを変換することが多いです。

○様々な日付・時刻のフォーマット

よく使われる日付・時刻のフォーマットには、次のようなものがあります。

yyyy/mm/dd（例：2023/04/23）
yyyy-mm-dd（例：2023-04-23）
yyyymmddhhmmss（例：20230423103045）
yyyy年mm月dd日（例：2023年04月23日）

このフォーマットを自由自在に変換できると、とても便利ですよね。

JavaScriptには、日付・時刻のフォーマットを変換するためのメソッドがいくつか用意されています。

○サンプルコード3：yyyymmddhhmmss形式で現在時刻を取得

まずは、yyyymmddhhmmss形式で現在時刻を取得するサンプルコードを見てみましょう。

function formatDate(date) {
  const yyyy = date.getFullYear();
  const mm = ("0" + (date.getMonth() + 1)).slice(-2);
  const dd = ("0" + date.getDate()).slice(-2);
  const hh = ("0" + date.getHours()).slice(-2);
  const mi = ("0" + date.getMinutes()).slice(-2);
  const ss = ("0" + date.getSeconds()).slice(-2);

  return yyyy + mm + dd + hh + mi + ss;
}

const now = new Date();
const formattedDate = formatDate(now);
console.log(formattedDate);

実行結果

20230423103045

formatDate()関数では、引数として渡されたDateオブジェクトから年、月、日、時、分、秒をそれぞれ取得し、2桁の数値に変換してつなげています。

月、日、時、分、秒は1桁の場合に0を先頭につけるために、("0" + 数値).slice(-2)という構文を使っています。

○サンプルコード4：yyyy/mm/dd hh:mm:ss形式で表示

次に、yyyy/mm/dd hh:mm:ss形式で現在時刻を表示するサンプルコードを見てみましょう。

function formatDate(date) {
  const yyyy = date.getFullYear();
  const mm = ("0" + (date.getMonth() + 1)).slice(-2);
  const dd = ("0" + date.getDate()).slice(-2);
  const hh = ("0" + date.getHours()).slice(-2);
  const mi = ("0" + date.getMinutes()).slice(-2);
  const ss = ("0" + date.getSeconds()).slice(-2);

  return `${yyyy}/${mm}/${dd} ${hh}:${mi}:${ss}`;
}

const now = new Date();
const formattedDate = formatDate(now);
console.log(formattedDate);

実行結果

2023/04/23 10:30:45

このコードでは、yyyy、mm、dd、hh、mi、ssをそれぞれ/と:で区切って文字列として返しています。

テンプレートリテラル（`バッククォート）を使って文字列を組み立てると、可読性が高くなります。

○サンプルコード5：yyyy年mm月dd日形式で表示

最後に、yyyy年mm月dd日形式で現在時刻を表示するサンプルコードを見てみましょう。

function formatDate(date) {
  const yyyy = date.getFullYear();
  const mm = date.getMonth() + 1;
  const dd = date.getDate();

  return `${yyyy}年${mm}月${dd}日`;
}

const now = new Date();
const formattedDate = formatDate(now);
console.log(formattedDate);

実行結果

2023年4月23日

このコードでは、年、月、日をそれぞれ取得し、年、月、日の文字をつけて文字列として返しています。

月と日は、1桁でも問題ないので、ゼロ埋めは行っていません。

○文字列とDateオブジェクトの相互変換

ここまでは、Dateオブジェクトから文字列へのフォーマット変換を見てきました。

逆に、文字列からDateオブジェクトを生成することもできます。

const dateString = "2023-04-23 10:30:45";
const date = new Date(dateString);
console.log(date);

実行結果

Sun Apr 23 2023 10:30:45 GMT+0900 (日本標準時)

このように、Dateコンストラクタの引数に文字列を渡すことで、文字列からDateオブジェクトを生成できます。

ただし、文字列のフォーマットはある程度限定されているので注意が必要です。

●タイムゾーンとUTCを理解する

日付・時刻のフォーマット変換について理解が深まってきましたね。

でも、もうひとつ重要な概念があります。

それが、タイムゾーンとUTCです。

聞き慣れない言葉かもしれませんが、JavaScriptで時刻を扱う上では欠かせない知識なんです。

○タイムゾーンとUTCの違い

まず、タイムゾーンとは何でしょうか？

簡単に言うと、地球上の各地域で使われている現地時間のことです。

日本は UTC+9 の時間帯にあるので、イギリスのグリニッジ標準時（UTC+0）よりも9時間進んでいます。

一方、UTCは「協定世界時」とも呼ばれ、国際的な基準となる時刻です。

UTCを基準として、各地域のタイムゾーンが決められています。

この違いを理解することは、JavaScriptで時刻を扱う上でとても重要です。

なぜなら、JavaScriptのDateオブジェクトは、デフォルトでローカルタイムゾーン（つまり、そのコードが実行されているコンピュータが設定されているタイムゾーン）を使用するからです。

○サンプルコード6：UTCで現在時刻を取得

それでは、UTCで現在時刻を取得するサンプルコードを見てみましょう。

const now = new Date();
const utcYear = now.getUTCFullYear();
const utcMonth = now.getUTCMonth() + 1;
const utcDate = now.getUTCDate();
const utcHours = now.getUTCHours();
const utcMinutes = now.getUTCMinutes();
const utcSeconds = now.getUTCSeconds();

console.log(`UTC: ${utcYear}/${utcMonth}/${utcDate} ${utcHours}:${utcMinutes}:${utcSeconds}`);

実行結果

UTC: 2023/4/23 1:30:45

このコードでは、getUTCFullYear()、getUTCMonth()、getUTCDate()などのメソッドを使って、UTCでの年、月、日、時、分、秒をそれぞれ取得しています。

ローカルタイムゾーンではなく、UTCの時刻が表示されていることに注目してください。

○サンプルコード7：タイムゾーンを指定して現在時刻を取得

今度は、特定のタイムゾーンで現在時刻を取得するサンプルコードを見てみましょう。

const now = new Date();
const options = { timeZone: 'America/New_York', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
const dateString = now.toLocaleString('en-US', options);

console.log(`New York Time: ${dateString}`);

実行結果

New York Time: 04/22/2023, 08:30:45 PM

このコードでは、toLocaleString()メソッドの第二引数にオプションを指定することで、特定のタイムゾーン（ここではアメリカ・ニューヨーク）で現在時刻を取得しています。

timeZoneプロパティにIANAタイムゾーンデータベースの識別子を指定します。

○サンプルコード8：日本時間で現在時刻を取得

最後に、日本時間で現在時刻を取得するサンプルコードを見てみましょう。

const now = new Date();
const options = { timeZone: 'Asia/Tokyo', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
const dateString = now.toLocaleString('ja-JP', options);

console.log(`日本時間: ${dateString}`);

実行結果

日本時間: 2023/04/23 10:30:45

このコードでは、タイムゾーンを’Asia/Tokyo’に指定し、ロケールを’ja-JP’に指定することで、日本時間で現在時刻を取得しています。

●リアルタイムに時刻を表示する

JavaScriptで現在時刻を取得し、フォーマットを変換する方法を学んできましたが、静的な表示だけでは物足りないと感じていませんか？

Webページ上で時刻をリアルタイムに表示できたら、もっとインタラクティブで魅力的なサイトになるはずです。

○setIntervalを使った定期的な時刻更新

リアルタイムに時刻を表示するには、一定間隔で時刻を更新する必要があります。

JavaScriptには、setInterval()という便利なメソッドがあります。

これを使えば、指定した間隔で関数を繰り返し実行できるんです。

○サンプルコード9：リアルタイムに現在時刻を表示する

それでは、setInterval()を使ってリアルタイムに現在時刻を表示するサンプルコードを見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>リアルタイムに現在時刻を表示</title>
</head>
<body>
  <h1>現在時刻</h1>
  <p id="current-time"></p>

  <script>
    function updateCurrentTime() {
      const now = new Date();
      const currentTime = document.getElementById('current-time');
      currentTime.textContent = now.toLocaleString();
    }

    setInterval(updateCurrentTime, 1000);
  </script>
</body>
</html>

このコードでは、updateCurrentTime()関数を定義しています。

この関数は、現在時刻を取得し、current-time要素に表示するという役割を持っています。

そして、setInterval(updateCurrentTime, 1000)という行で、updateCurrentTime()関数を1000ミリ秒（つまり、1秒）ごとに実行するように設定しています。

これにより、現在時刻が1秒ごとに更新され、リアルタイムに表示されるようになります。

実行結果

現在時刻
2023/4/23 10:30:45

1秒ごとに時刻が更新されていく様子を確認してみてください。

まるで、生きている時計のようですね！

○時計風の表示にする工夫

せっかくリアルタイムに時刻を表示するのだから、ちょっと凝った見た目にしてみるのはどうでしょうか？

CSSを使えば、数字だけの時計ではなく、アナログ時計風のデザインも実現できます。

○サンプルコード10：アナログ時計風に現在時刻を表示

CSSを使ってアナログ時計風に現在時刻を表示するサンプルコードを見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>アナログ時計風に現在時刻を表示</title>
  <style>
    .clock {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 2px solid black;
      position: relative;
    }

    .hand {
      position: absolute;
      left: 50%;
      width: 2px;
      height: 100px;
      transform-origin: bottom center;
    }

    .hour-hand {
      background-color: black;
      height: 60px;
      transform: rotate(0deg);
    }

    .minute-hand {
      background-color: gray;
      height: 80px;
      transform: rotate(0deg);
    }

    .second-hand {
      background-color: red;
      transform: rotate(0deg);
    }
  </style>
</head>
<body>
  <div class="clock">
    <div class="hand hour-hand"></div>
    <div class="hand minute-hand"></div>
    <div class="hand second-hand"></div>
  </div>

  <script>
    function updateClock() {
      const now = new Date();
      const hours = now.getHours();
      const minutes = now.getMinutes();
      const seconds = now.getSeconds();

      const hourHand = document.querySelector('.hour-hand');
      const minuteHand = document.querySelector('.minute-hand');
      const secondHand = document.querySelector('.second-hand');

      const hourRotation = 30 * hours + minutes / 2;
      const minuteRotation = 6 * minutes;
      const secondRotation = 6 * seconds;

      hourHand.style.transform = `rotate(${hourRotation}deg)`;
      minuteHand.style.transform = `rotate(${minuteRotation}deg)`;
      secondHand.style.transform = `rotate(${secondRotation}deg)`;
    }

    setInterval(updateClock, 1000);
  </script>
</body>
</html>

このコードでは、CSSを使って時計の文字盤と針（時針、分針、秒針）のスタイルを定義しています。

そして、JavaScriptのupdateClock()関数で、現在時刻に基づいて各針の回転角度を計算し、CSSのtransformプロパティを使って針を回転させています。

setInterval(updateClock, 1000)で、updateClock()関数を1秒ごとに実行することで、アナログ時計風の表示がリアルタイムに更新されます。

実行すると、アナログ時計風の表示が1秒ごとに更新されます。

CSSとJavaScriptを組み合わせることで、このようなインタラクティブな表示も可能になります。アイデア次第で、さらに創造性あふれる時計のデザインができそうですね。

リアルタイムに時刻を表示する方法を理解したところで、そろそろ時刻の計算や比較について学ぶ時間です。

JavaScriptでは、日付や時刻の計算や比較も柔軟に行えます。次は、その方法を具体的なコード例とともに見ていきましょう。

●日付・時刻の計算と比較

リアルタイムに時刻を表示する方法を学んだところで、そろそろ日付や時刻の計算と比較について理解を深めていきましょう。

JavaScriptのDateオブジェクトには、日付や時刻の計算や比較に役立つメソッドがたくさん用意されているんです。

○日付・時刻の計算方法

JavaScriptでは、Dateオブジェクトを使って日付や時刻の計算を行うことができます。

例えば、ある日付から数日後の日付を求めたり、2つの日付の差分を計算したりといったことが可能です。

○サンプルコード11：指定日時との差分を計算する

まずは、指定された日時との差分を計算するサンプルコードを見てみましょう。

const targetDate = new Date('2023-12-31');
const now = new Date();
const diffInMilliseconds = targetDate.getTime() - now.getTime();
const diffInDays = Math.ceil(diffInMilliseconds / (1000 * 60 * 60 * 24));

console.log(`今日から${targetDate.toLocaleDateString()}までは${diffInDays}日です。`);

実行結果

今日から2023/12/31までは252日です。

このコードでは、targetDateに指定した日付（ここでは2023年12月31日）と現在の日付（now）との差分をミリ秒単位で計算しています。

getTime()メソッドを使うと、日付をミリ秒単位のタイムスタンプに変換できます。

差分のミリ秒を、1日あたりのミリ秒数（1000 * 60 * 60 * 24）で割ることで、日数を求めています。

Math.ceil()関数を使って、小数点以下を切り上げて整数にしています。

このように、Dateオブジェクトのメソッドを活用すれば、日付や時刻の計算を簡単に行うことができます。

○サンプルコード12：日付の比較を行う

次に、2つの日付を比較するサンプルコードを見てみましょう。

const date1 = new Date('2023-04-23');
const date2 = new Date('2023-05-01');

if (date1 < date2) {
  console.log(`${date1.toLocaleDateString()}は${date2.toLocaleDateString()}より前の日付です。`);
} else if (date1 > date2) {
  console.log(`${date1.toLocaleDateString()}は${date2.toLocaleDateString()}より後の日付です。`);
} else {
  console.log(`${date1.toLocaleDateString()}と${date2.toLocaleDateString()}は同じ日付です。`);
}

実行結果

2023/4/23は2023/5/1より前の日付です。

このコードでは、date1とdate2という2つのDateオブジェクトを比較しています。

JavaScriptでは、Dateオブジェクト同士を直接比較演算子（<、>、===など）で比較することができます。

比較演算子を使って、date1がdate2より前の日付なのか、後の日付なのか、それとも同じ日付なのかを判定し、結果をコンソールに出力しています。

○サンプルコード13：時間の比較を行う

最後に、2つの時間を比較するサンプルコードを見てみましょう。

const time1 = new Date('2023-04-23T10:00:00');
const time2 = new Date('2023-04-23T13:30:00');

if (time1 < time2) {
  console.log(`${time1.toLocaleTimeString()}は${time2.toLocaleTimeString()}より前の時間です。`);
} else if (time1 > time2) {
  console.log(`${time1.toLocaleTimeString()}は${time2.toLocaleTimeString()}より後の時間です。`);
} else {
  console.log(`${time1.toLocaleTimeString()}と${time2.toLocaleTimeString()}は同じ時間です。`);
}

実行結果

10:00:00は13:30:00より前の時間です。

このコードでは、time1とtime2という2つのDateオブジェクトを比較しています。

ここでは、日付部分を同じにして、時間部分だけを比較しています。

toLocaleTimeString()メソッドを使って、時間部分だけを取り出して比較しています。

比較演算子を使って、time1がtime2より前の時間なのか、後の時間なのか、それとも同じ時間なのかを判定し、結果をコンソールに出力しています。

日付や時刻の計算と比較は、JavaScriptを使ったWebアプリケーション開発でとてもよく使われます。

例えば、イベントの開催日時までの残り日数を表示したり、ユーザーの入力した日付が有効な範囲内かどうかをチェックしたりといった場面で活躍します。

●よくあるエラーと対処法

JavaScriptで日付や時刻を扱っていると、思わぬエラーに遭遇することがあります。

エラーメッセージを見ても、どこが間違っているのかわからなくて困ってしまうこともありますよね。

でも、大丈夫です。

ここでは、よくあるエラーとその対処法を見ていきましょう。

○「Invalid Date」エラーの原因と対処

「Invalid Date」エラーは、Dateオブジェクトに無効な日付や時刻を設定しようとしたときに発生します。

例えば、次のようなコードを実行すると、「Invalid Date」エラーが発生します。

const invalidDate = new Date('2023-02-30');
console.log(invalidDate);

実行結果

Invalid Date

このエラーが発生する原因は、2023年2月30日という日付が存在しないからです。

「Invalid Date」エラーを避けるためには、次のような対処法があります。

「引数の日付文字列が正しいフォーマットであることを確認する」
「日付や時刻の値が有効な範囲内であることを確認する」
「ユーザー入力の日付や時刻をチェックし、無効な値の場合はエラーメッセージを表示する」

○「NaN」エラーの原因と対処

「NaN」エラーは、数値に変換できない計算をしようとしたときに発生します。

例えば、次のようなコードを実行すると、「NaN」エラーが発生します。

const invalidMilliseconds = new Date('2023-04-23').getTime() - new Date('2023-05-XX').getTime();
console.log(invalidMilliseconds);

実行結果

NaN

このエラーが発生する原因は、’2023-05-XX’という無効な日付文字列から日付を作成しようとしたためです。

日付の差分を計算する際に、無効な日付が含まれていると、結果は「NaN」になります。

「NaN」エラーを避けるためには、次のような対処法があります。

「計算に使用する日付や時刻が有効であることを確認する」
「計算結果が「NaN」でないかチェックし、「NaN」の場合は適切なエラー処理を行う」
「ユーザー入力の日付や時刻をチェックし、無効な値の場合はエラーメッセージを表示する」

○日付のフォーマットが正しくない場合の対処

日付や時刻を文字列から作成する際、フォーマットが正しくないとエラーが発生することがあります。

例えば、次のようなコードを実行すると、「Invalid Date」エラーが発生します。

const invalidFormatDate = new Date('2023/04/23');
console.log(invalidFormatDate);

実行結果

Invalid Date

このエラーが発生する原因は、日付文字列のフォーマットが’YYYY/MM/DD’ではなく、’YYYY-MM-DD’である必要があるからです。

日付のフォーマットが正しくない場合の対処法としては、次のようなものがあります。

「日付文字列のフォーマットが正しいことを確認する」
「日付文字列を正しいフォーマットに変換してからDateオブジェクトを作成する」
「ユーザー入力の日付をチェックし、正しいフォーマットでない場合はエラーメッセージを表示する」

エラーはプログラミングの過程で避けられないものですが、エラーの原因を理解し、適切に対処することが大切です。

エラーメッセージをしっかり読んで、どこでエラーが発生しているのかを特定しましょう。

そして、エラーの原因を取り除くように、コードを修正していきましょう。

●JavaScriptで時刻を扱う応用例

ここまでJavaScriptで時刻を扱う基本的な方法を学んできましたが、実際の開発では、もっと応用的な使い方が求められることもあります。

例えば、カウントダウンタイマーを作ったり、年齢を計算したり、営業時間内かどうかをチェックしたりといったことも、JavaScriptでできるんです。

そんな応用例を、具体的なコードとともに見ていきましょう。

○サンプルコード14：カウントダウンタイマーを作る

イベントの開始までの残り時間を表示するカウントダウンタイマーを作ってみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>カウントダウンタイマー</title>
</head>
<body>
  <h1>イベント開始まであと</h1>
  <p id="countdown"></p>

  <script>
    function updateCountdown() {
      const eventDate = new Date('2023-12-31T00:00:00');
      const now = new Date();
      const diff = eventDate - now;

      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diff % (1000 * 60)) / 1000);

      const countdownElement = document.getElementById('countdown');
      countdownElement.innerHTML = `${days}日 ${hours}時間 ${minutes}分 ${seconds}秒`;
    }

    setInterval(updateCountdown, 1000);
  </script>
</body>
</html>

このコードでは、eventDateにイベントの開始日時を設定しています。

そして、updateCountdown()関数で現在時刻との差分を計算し、残りの日数、時間、分、秒を求めています。

計算結果は、countdown要素に表示されます。

setInterval()を使って、1秒ごとにupdateCountdown()関数を呼び出すことで、カウントダウンタイマーを実現しています。

実行結果

イベント開始まであと
252日 13時間 29分 15秒

このように、JavaScriptを使えば、カウントダウンタイマーを簡単に作ることができます。

イベントページなどに組み込んでみると、ユーザーの期待感を高めることができるでしょう。

○サンプルコード15：年齢を計算する

ユーザーの生年月日から年齢を計算するサンプルコードを見てみましょう。

function calculateAge(birthday) {
  const today = new Date();
  const birthDate = new Date(birthday);
  let age = today.getFullYear() - birthDate.getFullYear();
  const monthDiff = today.getMonth() - birthDate.getMonth();

  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }

  return age;
}

const birthday = '1990-04-23';
const age = calculateAge(birthday);
console.log(`${birthday}生まれの人は、今年${age}歳になります。`);

このコードでは、calculateAge()関数で生年月日から年齢を計算しています。

現在の年から生年月日の年を引くことで、大まかな年齢を求めます。

そして、月や日を比較して、誕生日が来ていない場合は1歳引くという処理を行っています。

実行結果：

1990-04-23生まれの人は、今年33歳になります。

このように、JavaScriptを使えば、ユーザーの生年月日から年齢を計算することができます。

ユーザーの年齢に応じたコンテンツを表示するなど、パーソナライズされたユーザー体験を提供するのに役立ちます。

○サンプルコード16：営業時間内かどうかをチェックする

お店の営業時間内かどうかをチェックするサンプルコードを見てみましょう。

function isOpen(date, openTime, closeTime) {
  const open = new Date(date);
  open.setHours(openTime.split(':')[0], openTime.split(':')[1]);

  const close = new Date(date);
  close.setHours(closeTime.split(':')[0], closeTime.split(':')[1]);

  return date >= open && date < close;
}

const now = new Date();
const openTime = '09:00';
const closeTime = '18:00';

if (isOpen(now, openTime, closeTime)) {
  console.log('現在営業中です。');
} else {
  console.log('只今営業時間外です。');
}

このコードでは、isOpen()関数で現在時刻が営業時間内かどうかを判定しています。

関数の引数には、現在時刻、開店時間、閉店時間を渡します。

開店時間と閉店時間を、時と分に分割して、現在時刻と比較しています。

現在時刻が開店時間以降かつ閉店時間より前の場合は、営業中と判定します。

実行結果（現在時刻が営業時間内の場合）

現在営業中です。

実行結果（現在時刻が営業時間外の場合）

只今営業時間外です。

このように、JavaScriptを使えば、現在時刻が営業時間内かどうかを判定することができます。

Webサイトやアプリで、営業時間に応じたメッセージを表示するのに活用できるでしょう。

○サンプルコード17：指定日時までの残り時間を表示する

指定した日時までの残り時間を表示するサンプルコードを見てみましょう。

function getRemainingTime(targetDate) {
  const now = new Date();
  const diff = targetDate - now;

  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((diff % (1000 * 60)) / 1000);

  return `${days}日 ${hours}時間 ${minutes}分 ${seconds}秒`;
}

const targetDate = new Date('2023-12-31T00:00:00');
const remainingTime = getRemainingTime(targetDate);
console.log(`${targetDate.toLocaleString()}までの残り時間は、${remainingTime}です。`);

このコードでは、getRemainingTime()関数で指定日時までの残り時間を計算しています。

関数の引数には、目標とする日時を渡します。

現在時刻との差分を計算し、日数、時間、分、秒に変換して、文字列として返します。

実行結果

2023/12/31 0:00:00までの残り時間は、252日 13時間 29分 15秒です。

このように、JavaScriptを使えば、指定した日時までの残り時間を計算し、表示することができます。

セールの終了までの残り時間を表示するなど、ユーザーの行動を促すのに役立ちます。

まとめ

JavaScriptで時刻を扱う方法について、基本から応用まで幅広く解説してきました。

現在時刻の取得や表示、フォーマット変換、タイムゾーンやUTCの理解、リアルタイム表示、計算や比較、エラー対処法、そして実践的な応用例まで、JavaScriptで時刻を自在に操るためのテクニックを身につけることができたはずです。

これからは、ここで学んだ知識を活かして、ユーザー目線に立った洗練されたWebアプリケーションを開発していきましょう。

時刻に関する処理を適切に実装し、わかりやすく使いやすい表示を心がけることで、ユーザーエクスペリエンスを大きく向上させることができます。