【JS】日付＋時刻＋曜日テンプレート
JavaScriptで現在の日時をリアルタイム表示する方法
📅 このテンプレートの用途・メリット
- 年月日と現在時刻をまとめて表示できる
- 曜日付きの表示で日付の理解度アップ
- setIntervalでリアルタイム更新が学べる
- デジタルサイネージや掲示板にも応用可能
👇こういうやつ👇
----/--/-- --:--:-- (---)
📋 コピペして使えるコード
<div id="datetime"></div>
<script>
setInterval(() => {
const now = new Date();
const y = now.getFullYear();
const m = (now.getMonth() + 1).toString().padStart(2, '0');
const d = now.getDate().toString().padStart(2, '0');
const h = now.getHours().toString().padStart(2, '0');
const min = now.getMinutes().toString().padStart(2, '0');
const s = now.getSeconds().toString().padStart(2, '0');
const dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
const w = dayNames[now.getDay()];
document.getElementById("datetime").textContent = `${y}/${m}/${d} ${h}:${min}:${s} (${w})`;
}, 1000);
</script>
🧩 応用と活用方法
このテンプレートは、setInterval(() => {...}, 1000) を用いて1秒ごとに現在の日時を更新し、getFullYear() や getDay() などのメソッドで年・月・日・曜日までをリアルタイムに表示します。日付と時刻だけでなく曜日も含まれるため、情報の視認性が格段に向上します。
曜日の取得には getDay() を使い、配列 dayNames[] と組み合わせて英語で曜日名を出力しています。用途に応じて ["日","月","火","水","木","金","土"] のように日本語に変更することも簡単です。
📌 実務や応用例
このコードは、学校の掲示板・イベントカウントダウン・店舗の営業時間案内など、あらゆる場所で活用できます。CSSでスタイルを調整すれば、デジタルサイネージのような美しい表示も可能です。
また、ユーザーのローカル時間に応じて動作するため、タイムゾーンを意識した設計や、海外向けサイトでの表示にも適しています。