祝日かどうかを確認したい | 日付・時間操作 | JavaScript 目的別リファレンス

このプログラムでは、JavaScriptを使用して、今日の日付が日本の祝日かどうかを判定する方法を紹介します。カスタムロジックで日本の主要な祝日を判定します。

INDEX

使用するオブジェクト: Dateオブジェクト
今日が祝日かどうかを判定するプログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
Dateオブジェクトメソッドの機能一覧

使用するオブジェクト: Dateオブジェクト

JavaScriptのDateオブジェクトを使用して、今日の日付を取得し、それが祝日かどうかを判定します。祝日のリストはカスタムで設定し、年によって変動する祝日にも対応可能です。

今日が祝日かどうかを判定するプログラム

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

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();
            const month = today.getMonth() + 1; // 月は0から始まるので+1
            const day = today.getDate();

            // 日本の祝日をリスト化
            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: 7, day: 15, name: '海の日' }, // 年によって変更あり
                { month: 8, day: 11, name: '山の日' },
                { month: 11, day: 3, name: '文化の日' },
                { month: 11, day: 23, name: '勤労感謝の日' },
                { month: 12, day: 23, name: '天皇誕生日' } // 変更の可能性あり
            ];

            // 今日が祝日かどうかを判定
            const holiday = holidays.find(h => h.month === month && h.day === day);
            const resultText = holiday ? `今日は祝日です: ${holiday.name}` : "今日は祝日ではありません。";

            // 結果をHTMLに表示
            document.getElementById('holidayCheck').textContent = `判定結果: ${resultText}`;
        }
    </script>
</head>
<body>

    <h1>祝日かどうかを確認する方法（日本基準）</h1>

    <div id="holidayCheck"></div>

</body>
</html>