UTC日付をローカルタイムに変換したい | 日付・時間操作

このプログラムでは、JavaScriptのDateオブジェクトを使用して、UTCで指定された日付をローカルタイムに変換します。たとえば、「2023年9月25日 12:00:00 UTC」をローカルタイムに変換し、その結果を表示します。

INDEX

使用するメソッド: Date(), toLocaleString()
UTC日付をローカルタイムに変換するプログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
Dateオブジェクトメソッドの機能一覧

使用するメソッド: Date(), toLocaleString()

JavaScriptのDateオブジェクトを使用してUTC日付を指定し、toLocaleString()メソッドでローカルタイムに変換します。

UTC日付をローカルタイムに変換するプログラム

以下のコードでは、UTC日付を指定し、それをローカルタイムに変換して表示しています。

HTMLとJavaScriptコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UTC日付をローカルタイムに変換する方法</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
        }
        pre {
            background: #f4f4f4;
            border-left: 3px solid #ccc;
            padding: 10px;
            margin: 20px 0;
        }
    </style>

    <script>
        window.onload = function() {
            // UTCの日付を指定
            const utcDate = new Date(Date.UTC(2023, 8, 25, 12, 0, 0)); // 2023年9月25日 12:00:00 UTC

            // ローカルタイムに変換
            const localDate = utcDate.toLocaleString();

            // 結果をHTMLに表示
            document.getElementById('dateResult').textContent = `UTCの日付: ${utcDate.toISOString()} をローカルタイムに変換すると: ${localDate}`;
        }
    </script>
</head>
<body>

    <h1>UTC日付をローカルタイムに変換する方法</h1>

    <div id="dateResult"></div>

</body>
</html>