日付が特定の祝日・休日と一致するかを確認したい | 日付・時間操作

日付が特定の祝日・休日と一致するかを確認したい | 日付・時間操作 | JavaScript 目的別リファレンス

目的別リファレンス

2024.09.23

このプログラムでは、日付が日本の祝日と一致するかどうかを確認します。日本の代表的な祝祭日をリスト化し、その日付と照合するロジックを実装しています。

使用するメソッド: getDate(), getMonth()
日付が祝日かを確認するプログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
Dateオブジェクトメソッドの機能一覧

使用するメソッド: getDate(), getMonth()

このプログラムでは、getDate()とgetMonth()メソッドを使用して、日付オブジェクトから月と日を取得し、祝日リストと照合します。

日付が祝日かを確認するプログラム

以下のコードでは、今日の日付が祝日かどうかを確認し、結果を表示しています。

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 holidays = [
                { month: 1, day: 1, name: '元日' },
                { month: 2, day: 11, name: '建国記念の日' },
                { month: 4, day: 29, name: '昭和の日' },
                { month: 5, day: 3, name: '憲法記念日' },
                { month: 5, day: 4, name: 'みどりの日' },
                { month: 5, day: 5, name: 'こどもの日' },
                { month: 11, day: 3, name: '文化の日' },
                { month: 11, day: 23, name: '勤労感謝の日' }
            ];

            // 日付が祝日かどうかを確認する関数
            function isHoliday(date) {
                const month = date.getMonth() + 1; // 月は0から始まる
                const day = date.getDate();
                return holidays.find(holiday => holiday.month === month && holiday.day === day);
            }

            // 今日の日付をチェック
            const today = new Date();
            const holiday = isHoliday(today);

            // 結果をHTMLに表示
            document.getElementById('holidayResult').textContent = holiday
                ? `${today.getFullYear()}年${today.getMonth() + 1}月${today.getDate()}日は${holiday.name}です。`
                : `${today.getFullYear()}年${today.getMonth() + 1}月${today.getDate()}日は祝日ではありません。`;
        }
    </script>
</head>
<body>

    <h1>日付が日本の祝祭日と一致するかを確認する方法</h1>

    <div id="holidayResult"></div>

</body>
</html>