はじめに
サイトに日時を表示したいと思いいろんなサイトをみていました。
そしたら、コードが短く実装できる方法を見つけたので共有と今後の為にも記録として記事に残しておきたいと思います
こちらのサイトで動作確認できます
以下に示すコードを自分の手元で試してみたい方はこちらのサイトを利用されてみる事をお勧めします。
HTMLは共通
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日時表示アプリ</title>
</head>
<body>
<div class="datetime-container">
<div id="current-date"></div>
<div id="current-time"></div>
</div>
<script src="smilescript.js"></script>
</body>
</html>
おそらく一般的、Dateメソッドを使った方法
まずはDateメソッドを使って、日付や曜日を取得し、それらを組み合わせて表示する方法になります。この方法は直感的で分かりやすいですが、コードの量がやや多くなります。
参考記事
👇ゼロパンディング処理について
document.addEventListener("DOMContentLoaded", () => {
console.log("ページが読み込まれました！");
function updateDateTime() {
const now = new Date(); // 現在の日時を取得
// 年・月・日を取得
const year = now.getFullYear();
const month = now.getMonth() + 1; // 月は0から始まるため+1する
const day = now.getDate();
// 曜日を配列から取得
const weekdays = ["日", "月", "火", "水", "木", "金", "土"];
const weekday = weekdays[now.getDay()];
// フォーマット
const date = `${year}/${month}/${day}（${weekday}）`;
// 時刻を取得（ゼロパディング処理をする）
const hours = now.getHours().toString().padStart(2, "0");
const minutes = now.getMinutes().toString().padStart(2, "0");
const seconds = now.getSeconds().toString().padStart(2, "0");
// フォーマット
const time = `${hours}:${minutes}:${seconds}`;
// HTMLに反映
document.getElementById("current-date").textContent = date;
document.getElementById("current-time").textContent = time;
}
// 初回の表示更新
updateDateTime();
// 1秒ごとに更新
setInterval(updateDateTime, 1000);
});
もっとスマートに書く方法
次に、toLocaleDateStringやtoLocaleTimeStringを活用して、より短くシンプルに実装する方法になります。「試してみよう」という項目では実際記述したコードの動きをその場で確認できるのでお勧めです。
参考記事
document.addEventListener("DOMContentLoaded", () => {
console.log("ページが読み込まれました！");
function updateDateTime() {
const now = new Date();
// 日付
const datePart = now.toLocaleDateString("ja-JP");
// 曜日
const weekday = now.toLocaleDateString("ja-JP", { weekday: "short" });
// 「2025/3/19（水）」 のフォーマットにする
const date = `${datePart}（${weekday}）`;
// 時刻
const time = now.toLocaleTimeString("ja-JP", {
hour: "2-digit", minute: "2-digit", second: "2-digit"
});
// HTMLに反映
document.getElementById("current-date").textContent = date;
document.getElementById("current-time").textContent = time;
}
// 初回の表示更新
updateDateTime();
// 1秒ごとに更新
setInterval(updateDateTime, 1000);
});
✅ updateDateTime()の中でdate（日付＋曜日）とtime（時間）を作成
✅ 作成したdateとtimeを<div>に書き込む
✅ setInterval(updateDateTime, 1000); で 1 秒ごとに更新
おまけHTMLについて
<script src="smilescript.js"></script>
こちらのコードを<body>の最後に入れるか、<head>内にいれるか、違いは何なのか？曖昧になっていたので💦
<script> を <head> に入れる場合
<head>
<script src="smilescript.js"></script>
</head>
これだと、問題点があるようです。
具体的には JavaScript が実行されるのは、HTML の解析よりも前 なので、
document.getElementById("current-date") を呼び出しても、
まだその要素（<div id="current-date">）が読み込まれていない
→ エラーが出る可能性がある！
<script> を <head> に入れる + defer をつける
<head>
<script defer src="smilescript.js"></script>
</head>
defer をつけると HTMLの解析が完了した後にJavaScriptを実行するため、<div id="current-date"> が存在する状態でスクリプトが動くようになります。つまり、HTMLの読み込みとJavaScriptのダウンロードを並行して行うため、少し高速になります！
👇以下サイト・記事を読むとより理解が深まります。
<script> を <body> の最後に入れる
<body>
<script src="smilescript.js"></script>
</body>
こちらのコードでは、最後に置くことで、HTMLが完全に読み込まれた後に JavaScriptが実行されるようになっています。deferを使わなくても確実に current-date や current-time が存在する状態でJavaScriptが動きます
最後に
今回紹介した2つの方法はどちらも正しく動作しますが、用途に応じて適した方を選ぶ事をお勧めします。
toLocaleDateStringを活用することで、より短くシンプルなコードで日時を表示できることが分かりました。この記事が参考になれば幸いです！