日付を言語に依存した形式で表示したい | 日付・時間操作

日付を言語に依存した形式で表示したい | 日付・時間操作 | JavaScript 目的別リファレンス

目的別リファレンス

2024.09.222024.09.23

このプログラムでは、JavaScriptのtoLocaleDateString()メソッドを使用して、日付を異なる言語や地域の形式で表示します。たとえば、同じ日付でも日本語、英語（米国）、ドイツ語などで異なる形式になります。

使用するメソッド: toLocaleDateString()
日付を言語に依存した形式で表示するプログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
Dateオブジェクトメソッドの機能一覧

使用するメソッド: toLocaleDateString()

JavaScriptのtoLocaleDateString()メソッドは、指定されたロケール（言語や地域）の形式で日付を文字列として返します。言語コードを指定することで、特定の国や地域のフォーマットに従った日付表示が可能です。

日付を言語に依存した形式で表示するプログラム

以下のコードでは、日本語、英語（米国）、ドイツ語の3つの形式で同じ日付を表示しています。

HTMLとJavaScriptコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport">
    <title>日付を言語に依存した形式で表示する方法（toLocaleDateString()）</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() {
            // 現在の日付を取得
            const today = new Date();

            // 各言語での日付を表示
            const japaneseDate = today.toLocaleDateString('ja-JP'); // 日本語形式
            const englishDate = today.toLocaleDateString('en-US'); // 英語形式（米国）
            const germanDate = today.toLocaleDateString('de-DE'); // ドイツ語形式

            // 結果をHTMLに表示
            document.getElementById('japaneseDate').textContent = `日本語形式の日付: ${japaneseDate}`;
            document.getElementById('englishDate').textContent = `英語（米国）形式の日付: ${englishDate}`;
            document.getElementById('germanDate').textContent = `ドイツ語形式の日付: ${germanDate}`;
        }
    </script>
</head>
<body>

    <h1>日付を言語に依存した形式で表示する方法（toLocaleDateString()）</h1>

    <div id="japaneseDate"></div>
    <div id="englishDate"></div>
    <div id="germanDate"></div>

</body>
</html>