JavaScript | 現在時刻をリアルタイムに表示する方法
このページではWEBサイトにJavaScriptを利用して現在時刻をリアルタイムに表示する方法を紹介しています。
現在時刻を表示する
先にJavaScriptを利用して現在時刻を表示（リアルタイムではない）するサンプルを紹介します。
See the Pen JavaScript Follow the mouse cursor by yochans (@yochans) on CodePen.
<p id="item"></p>これだけであれば、必要なJavaScriptコードは少なく実装可能です。
「date()」関数でスクリプトが読み込まれた時刻データを取得して「toLocaleString()」関数で日本向けのフォーマットに変換しています。
const item = document.getElementById('item');
let today = new Date();
item.innerHTML = today.toLocaleString("ja");現在時刻をリアルタイムに表示する
See the Pen JavaScript Display of current time（realtime） by yochans (@yochans) on CodePen.
「setInteval()」関数や「setTimeout()」関数などを利用する方法もありますが、このサンプルでは「requestAnimationFrame()」関数を利用して「update()」と名付けた関数をループさせています。
const item = document.getElementById('item');
function update(){
let today = new Date();
item.innerHTML = today.toLocaleString("ja");
window.requestAnimationFrame(update);
};
update();「requestAnimationFrame()」関数はブラウザタブが非アクティブの場合に処理を低減させる機能があります。（一般的なFPS60から低下させる）
現在時間の取得・表示には影響を与えませんが、ループ回数を元にカウントアップやカウントダウンなどを実装している場合は、そのままだとタブが非アクティブ状態だとアクティブ状態よりも遅れが発生する可能性がありますので注意が必要です。
その場合は、非アクティブ状態でも同レベルで処理を実行する「setInteval()」関数や「setTimeout()」関数などの利用も視野に入れても良いかもしれません。
「window.requestAnimationFrame()」にて再帰しているループ処理を終わらせる必要がある場合には「window.cancelAnimationFrame()」が利用可能です。
アロー関数版
const item = document.getElementById('item');
let update = () => {
let today = new Date();
item.innerHTML = today.toLocaleString("ja");
window.requestAnimationFrame(update);
}
update();