【JavaScript】現在時刻をリアルタイムに取得・表示する方法

この記事では、JavaScriptを使って現在時刻をリアルタイムに取得・表示する方法を解説します。

JavaScriptで現在時刻をリアルタイムで取得・表示する方法

JavaScriptで現在時刻をリアルタイムに取得するには、次の手順で進めます。

それぞれ、順に解説します。

現在時刻を取得するDateオブジェクトを作成

まずは現在時刻を取得するDateオブジェクトを作成しましょう。Dateクラスにnewを付けることでオブジェクトを作成できます。

あとで使いやすいように定数nowに格納しました（定数名は何でもOK）。

const now = new Date();

console.logでnowの中身を確認してみましょう。

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

コンソールを見ると、現在時刻が取得できていることがわかりますね。

現在時刻を表示する関数を作成

次に、現在時刻を表示する関数を作成します。

関数名は何でもOKですが、現在時刻を表示するので｢showCurrentTime｣とでもしておきましょうか。

function showCurrentTime() {
 //処理内容
}

関数showCurrentTimeの処理内容を書いていきます。

時刻表示に必要な｢時｣｢分｣｢秒｣を取り出す

先ほど作成したDateオブジェクト（定数nowに格納中）には時刻以外の不要なデータも含まれているので、必要なものだけ取り出しましょう。

時刻表示に必要なのは｢時｣｢分｣｢秒｣だけですので、これらを取り出します。

あとで使いやすいように、それぞれ｢hour｣｢minute｣｢second｣という定数に格納しました（定数名は何でもOKです）。

function showCurrentTime() {
  //現在時刻を取得するオブジェクトを作成
  const now = new Date();

  //Dateオブジェクトから｢時｣｢分｣｢秒｣の数値を取り出す
  const hour = now.getHours();
  const minute = now.getMinutes();
  const second = now.getSeconds();
}

Dateオブジェクトの値を取得するメソッド

getHours

：Dateオブジェクトから｢時｣を数値で返す

getMinutes

：Dateオブジェクトから｢分｣を数値で返す

getSeconds

：Dateオブジェクトから｢秒｣を数値で返す

表示を整える

時刻表示に必要な3つの数値を取り出しました。

次に、これらの表示を｢現在の時刻は○時△分×秒です｣の形に整えましょう。

なお、文字列の前後はシングルクォート（'）ではなくバッククォート（`）である点に注意してください（テンプレートリテラルの書き方参照）。

function showCurrentTime() {
  //現在時刻を取得するオブジェクトを作成
  const now = new Date();

  //Dateオブジェクトから｢時｣｢分｣｢秒｣の数値を取り出す
  const hour = now.getHours();
  const minute = now.getMinutes();
  const second = now.getSeconds();

  //表示を｢現在の時刻は○時△分×秒です｣の形に整える
　const time = `現在の時刻は${hour}時${minute}分${second}秒です。`;
}

ブラウザに表示する

ブラウザ（PC画面）に表示するための記述を行います。

まずはindex.htmlに下記を記述してください。

index.html

<p id="currentTime"></p>

今は空のpタグですが、JavaScriptを使って時刻を表示させます。

その記述がこちらです（14行目）。

function showCurrentTime() {
  //現在時刻を取得するオブジェクトを作成
  const now = new Date();

  //Dateオブジェクトから｢時｣｢分｣｢秒｣の数値を取り出す
  const hour = now.getHours();
  const minute = now.getMinutes();
  const second = now.getSeconds();

  //表示を｢現在の時刻は○時△分×秒です｣の形に整える
　const time = `現在の時刻は${hour}時${minute}分${second}秒です。`;

  //id=currentTimeを持つ要素内のテキストをtimeに代入された文字列に変更する
  document.getElementById('currentTime').textContent = time;
}

関数を実行してみましょう。するとブラウザ上に現在時刻が表示されます。

function showCurrentTime() {
  //省略
}

//関数の実行
showCurrentTime();

しかし、ただ関数を実行しただけではリロードしない限り時刻は変わりません。

なので、ここから1秒ごとにリアルタイムで時刻を表示させるための記述を行います。

1秒ごとにshowCurrentTime関数を実行する

setIntervalメソッドを使います。

setInterval(関数名, ミリ秒)

：関数を指定したミリ秒ごとに実行する。

今回は1秒（=1000ミリ秒）ごとに実行したいので、書き方は次のとおりです。

function showCurrentTime() {
  //省略
}

setInterval(showCurrentTime, 1000);

すると、現在時刻がリアルタイムで表示されるようになります。

ここまでで現在時刻をリアルタイムで取得・表示するJavaScriptがほぼ完成しました。

しかし、分と秒が1桁のとき｢8分｣や｢2秒｣のように表示も1桁のままです。

中には｢08分｣や｢02秒｣のように先頭に0を付けて表示したい状況もあると思うので、そのやり方を説明します。

分と秒が1桁のとき先頭に0を付けて2桁表示にする

やり方はとても簡単で、StringオブジェクトのpadStartメソッドを使います。

文字列.padStart(文字数, 埋め合わせる文字列)

：文字列を指定の文字数に揃えるメソッド

今回の場合｢文字数＝2｣｢埋め合わせる文字列は0｣なので、定数minuteとsecondを下記に書き換えればOKです。

  const minute = String(now.getMinutes()).padStart(2, '0');
  const second = String(now.getSeconds()).padStart(2, '0');

なお、getMinutesとgetSecondsで取得できるのは数値なので、Stringを使って文字列に変換しています（padStartはString（文字列）オブジェクトのため）。

また、padStartの第二引数は文字列なので、0にシングルクォートを忘れずに付けるようにしてください。

これで｢3分｣や｢1秒｣のときでも、先頭に0が付いた2桁表示になりました。

最後に、全体のコードです。

function showCurrentTime() {
  const now = new Date();
  const hour = now.getHours();
  const minute = String(now.getMinutes()).padStart(2, '0');
  const second = String(now.getSeconds()).padStart(2, '0');
  const time = `現在の時刻は${hour}時${minute}分${second}秒です。`;
  document.getElementById('currentTime').textContent = time;
}

setInterval(showCurrentTime, 1000);

まとめ

今回はJavaScriptを使って現在時刻をリアルタイムで取得・表示する方法を解説しました。

この辺りはJavaScriptを使って時刻を操作する上でベースとなる知識なので、しっかりと押さえておきましょう。