日付を昨日、明日などで表示したい | 日付・時間操作

日付を昨日、明日などで表示したい | 日付・時間操作 | JavaScript 目的別リファレンス

目的別リファレンス

2024.09.23

このプログラムでは、指定された日付が「今日」「明日」「昨日」などの自然言語でどの時点にあたるかを表示します。

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

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

getTime()メソッドは、日付のミリ秒タイムスタンプを取得し、日付の差を計算するために使用します。

日付を自然言語で表示するプログラム

以下のコードでは、明日と昨日の日付を自然言語で表示しています。

HTMLとJavaScriptコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日付を自然言語で表示する方法</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();

            // 自然言語で日付を表示する関数
            function getNaturalLanguageDate(targetDate) {
                const oneDay = 24 * 60 * 60 * 1000; // 1日のミリ秒数
                const diffDays = Math.floor((targetDate - today) / oneDay);

                if (diffDays === 0) {
                    return "今日";
                } else if (diffDays === 1) {
                    return "明日";
                } else if (diffDays === -1) {
                    return "昨日";
                } else if (diffDays > 1) {
                    return `${diffDays}日後`;
                } else {
                    return `${Math.abs(diffDays)}日前`;
                }
            }

            // テスト用の日付を設定
            const testDateTomorrow = new Date(today.getTime() + 1 * 24 * 60 * 60 * 1000); // 明日
            const testDateYesterday = new Date(today.getTime() - 1 * 24 * 60 * 60 * 1000); // 昨日

            // 結果をHTMLに表示
            document.getElementById('naturalDateTomorrow').textContent = `今日の次の日: ${getNaturalLanguageDate(testDateTomorrow)}`;
            document.getElementById('naturalDateYesterday').textContent = `今日の前の日: ${getNaturalLanguageDate(testDateYesterday)}`;
        }
    </script>
</head>
<body>

    <h1>日付を自然言語で表示する方法</h1>

    <div id="naturalDateTomorrow"></div>
    <div id="naturalDateYesterday"></div>

</body>
</html>