【学習】JavaScriptのDateメソッド vs toLocaleDateString！シンプルな日時表示の実装

## はじめに
サイトに日時を表示したいと思いいろんなサイトをみていました。
そしたら、コードが短く実装できる方法を見つけたので共有と今後の為にも記録として記事に残しておきたいと思います


## こちらのサイトで動作確認できます
以下に示すコードを自分の手元で試してみたい方はこちらのサイトを利用されてみる事をお勧めします。

https://jsfiddle.net/


## HTMLは共通
```.smile.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`メソッドを使って、日付や曜日を取得し、それらを組み合わせて表示する方法になります。この方法は直感的で分かりやすいですが、コードの量がやや多くなります。

### 参考記事

https://qiita.com/mzmz__02/items/1f221a8dd19cdd156eaa

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date

👇ゼロパンディング処理について

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/padStart


```js
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`を活用して、より短くシンプルに実装する方法になります。「試してみよう」という項目では実際記述したコードの動きをその場で確認できるのでお勧めです。

### 参考記事

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

https://developer.mozilla.org/ja/docs/Web/API/Window/setInterval


```js
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について
```html
<script src="smilescript.js"></script>
```
こちらのコードを`<body>`の最後に入れるか、`<head>`内にいれるか、違いは何なのか？曖昧になっていたので💦

##### :one: `<script>` を `<head>` に入れる場合

```html
<head>
    <script src="smilescript.js"></script>
</head>
```
これだと、問題点があるようです。
具体的には JavaScript が実行されるのは、HTML の解析よりも前 なので、
`document.getElementById("current-date")` を呼び出しても、
まだその要素（`<div id="current-date">`）が読み込まれていない 
→ エラーが出る可能性がある！


##### :two:`<script>` を `<head>` に入れる + `defer` をつける
```html
<head>
    <script defer src="smilescript.js"></script>
</head>
```
`defer` をつけると HTMLの解析が完了した後にJavaScriptを実行するため、`<div id="current-date">` が存在する状態でスクリプトが動くようになります。つまり、**HTMLの読み込みとJavaScriptのダウンロードを並行して行う**ため、少し高速になります！
👇以下サイト・記事を読むとより理解が深まります。

https://qiita.com/phanect/items/82c85ea4b8f9c373d684

https://developer.mozilla.org/ja/docs/Web/HTML/Element/script


##### :three:`<script>` を `<body>` の最後に入れる
```html
<body>

    <script src="smilescript.js"></script>
</body>
```
こちらのコードでは、最後に置くことで、HTMLが完全に読み込まれた後に JavaScriptが実行されるようになっています。`defer`を使わなくても確実に `current-date` や `current-time` が存在する状態でJavaScriptが動きます



## 最後に
今回紹介した2つの方法はどちらも正しく動作しますが、用途に応じて適した方を選ぶ事をお勧めします。
`toLocaleDateString`を活用することで、より短くシンプルなコードで日時を表示できることが分かりました。この記事が参考になれば幸いです！