はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptの基本的な知識があるWeb開発者やプログラミング学習者を対象にしています。特に、曜日ごとに異なる時間を表示したいと考えている方に最適です。

この記事を読むことで、JavaScriptを使って曜日ごとに表示時間を動的に変更する方法を習得できます。具体的には、ドロップダウンメニューから曜日を選択すると、対応する営業時間やイベント時間が自動で表示される機能を実装できるようになります。また、条件分岐とDOM操作を組み合わせた実践的なテクニックも学べます。

さらに、実装プロセスで遭遇する可能性のある問題点とその解決策についても解説するので、スムーズに開発を進めることができるでしょう。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - JavaScriptの基本的な文法（変数、関数、条件分岐など） - HTMLとCSSの基本的な知識 - DOM操作の基本的な理解 - イベントハンドリングの概念

曜日別表示時間の必要性と実装概要

Webサイトやアプリケーションで、曜日ごとに異なる時間を表示する機能は多くの場面で活用されます。例えば、店舗の営業時間、イベントの開催時間、オンラインコースの受講可能時間など、曜日によってスケジュールが異なる場合に有効です。

この機能を実装するには、主に2つの要素が必要です。1つは曜日を選択するためのUI（ドロップダウンメニューやボタンなど）、もう1つは選択された曜日に応じて表示する時間データです。JavaScriptを使えば、ユーザーの選択に応じて動的に表示内容を変更できます。

実装の基本的な流れは以下のようになります。 1. HTMLで曜日を選択するUIを作成 2. JavaScriptで各曜日の時間データを定義 3. イベントリスナーで選択変更を検知 4. 選択された曜日に対応する時間を表示領域に更新

このアプローチにより、ユーザーが直感的に曜日を選択し、関連する時間情報を即座に確認できるインターフェースを実現できます。

具体的な実装方法

実際に曜日ごとに異なる時間を表示するJavaScriptコードを実装していきましょう。ここでは、HTMLのドロップダウンメニューから曜日を選択し、選択された曜日に応じて対応する時間を表示する機能を実装します。

ステップ1：HTMLの基本構造の作成

まずは、曜日を選択するドロップダウンメニューと、選択された時間を表示する領域をHTMLで作成します。

Html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>曜日別時間表示</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>曜日別時間表示</h1>

        <div class="selector">
            <label for="day-select">曜日を選択してください：</label>
            <select id="day-select">
                <option value="0">日曜日</option>
                <option value="1">月曜日</option>
                <option value="2">火曜日</option>
                <option value="3">水曜日</option>
                <option value="4">木曜日</option>
                <option value="5">金曜日</option>
                <option value="6">土曜日</option>
            </select>
        </div>

        <div id="time-display">
            <p id="time-message">曜日を選択してください</p>
            <p id="time-details"></p>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

ステップ2：CSSでのスタイル設定

次に、見栄えを良くするためのCSSを記述します。

Css

/* style.css */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.container {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #2c3e50;
    text-align: center;
    margin-bottom: 30px;
}

.selector {
    margin-bottom: 20px;
    text-align: center;
}

label {
    margin-right: 10px;
    font-weight: bold;
}

select {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ddd;
    font-size: 16px;
}

#time-display {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    min-height: 100px;
}

#time-message {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

#time-details {
    color: #555;
}

ステップ3：JavaScriptでの時間データの定義と表示処理

最後に、JavaScriptで曜日ごとの時間データを定義し、選択された曜日に応じて時間を表示する処理を実装します。

Javascript

// script.js
// ドキュメント読み込み完了後に実行
document.addEventListener('DOMContentLoaded', function() {
    // 曜日ごとの時間データを定義
    const scheduleData = {
        0: { // 日曜日
            message: "日曜日の営業時間",
            time: "10:00 - 18:00",
            details: "定休日ですが、特別営業日として開いています。"
        },
        1: { // 月曜日
            message: "月曜日の営業時間",
            time: "9:00 - 20:00",
            details: "通常営業日です。最も混み合う時間帯は18時前後です。"
        },
        2: { // 火曜日
            message: "火曜日の営業時間",
            time: "9:00 - 20:00",
            details: "通常営業日です。月曜日に比べて比較的空いています。"
        },
        3: { // 水曜日
            message: "水曜日の営業時間",
            time: "9:00 - 20:00",
            details: "通常営業日です。水曜日は特別サービスを実施しています。"
        },
        4: { // 木曜日
            message: "木曜日の営業時間",
            time: "9:00 - 20:00",
            details: "通常営業日です。週末に向けて混み始めます。"
        },
        5: { // 金曜日
            message: "金曜日の営業時間",
            time: "9:00 - 22:00",
            details: "通常営業日ですが、延長営業を行っています。"
        },
        6: { // 土曜日
            message: "土曜日の営業時間",
            time: "8:00 - 22:00",
            details: "通常営業日です。最も混み合う曜日です。"
        }
    };

    // DOM要素の取得
    const daySelect = document.getElementById('day-select');
    const timeMessage = document.getElementById('time-message');
    const timeDetails = document.getElementById('time-details');

    // 初期表示
    updateDisplay();

    // 選択変更時のイベントリスナー
    daySelect.addEventListener('change', updateDisplay);

    // 表示を更新する関数
    function updateDisplay() {
        const selectedDay = daySelect.value;

        // 選択された曜日に対応するデータを取得
        const dayData = scheduleData[selectedDay];

        // 表示内容を更新
        timeMessage.textContent = dayData.message;
        timeDetails.textContent = `${dayData.time} - ${dayData.details}`;
    }
});

ステップ4：機能の拡張

さらに実用的な機能として、現在の曜日を自動で選択し、対応する時間を初期表示する機能を実装してみましょう。

Javascript

// script.js（拡張版）
// ドキュメント読み込み完了後に実行
document.addEventListener('DOMContentLoaded', function() {
    // 曜日ごとの時間データを定義
    const scheduleData = {
        0: { // 日曜日
            message: "日曜日の営業時間",
            time: "10:00 - 18:00",
            details: "定休日ですが、特別営業日として開いています。"
        },
        1: { // 月曜日
            message: "月曜日の営業時間",
            time: "9:00 - 20:00",
            details: "通常営業日です。最も混み合う時間帯は18時前後です。"
        },
        2: { // 火曜日
            message: "火曜日の営業時間",
            time: "9:00 - 20:00",
            details: "通常営業日です。月曜日に比べて比較的空いています。"
        },
        3: { // 水曜日
            message: "水曜日の営業時間",
            time: "9:00 - 20:00",
            details: "通常営業日です。水曜日は特別サービスを実施しています。"
        },
        4: { // 木曜日
            message: "木曜日の営業時間",
            time: "9:00 - 20:00",
            details: "通常営業日です。週末に向けて混み始めます。"
        },
        5: { // 金曜日
            message: "金曜日の営業時間",
            time: "9:00 - 22:00",
            details: "通常営業日ですが、延長営業を行っています。"
        },
        6: { // 土曜日
            message: "土曜日の営業時間",
            time: "8:00 - 22:00",
            details: "通常営業日です。最も混み合う曜日です。"
        }
    };

    // DOM要素の取得
    const daySelect = document.getElementById('day-select');
    const timeMessage = document.getElementById('time-message');
    const timeDetails = document.getElementById('time-details');

    // 現在の曜日を取得して選択
    const currentDay = new Date().getDay();
    daySelect.value = currentDay;

    // 初期表示
    updateDisplay();

    // 選択変更時のイベントリスナー
    daySelect.addEventListener('change', updateDisplay);

    // 表示を更新する関数
    function updateDisplay() {
        const selectedDay = daySelect.value;

        // 選択された曜日に対応するデータを取得
        const dayData = scheduleData[selectedDay];

        // 表示内容を更新
        timeMessage.textContent = dayData.message;
        timeDetails.textContent = `${dayData.time} - ${dayData.details}`;
    }
});

ステップ5：複数の時間帯を表示する機能の追加

曜日によっては複数の時間帯で営業している場合があります。そのようなケースに対応するため、複数の時間帯を表示する機能を実装してみましょう。

Javascript

// script.js（複数時間帯対応版）
// ドキュメント読み込み完了後に実行
document.addEventListener('DOMContentLoaded', function() {
    // 曜日ごとの時間データを定義（複数時間帯対応）
    const scheduleData = {
        0: { // 日曜日
            message: "日曜日の営業時間",
            times: [
                { period: "午前", start: "10:00", end: "14:00", details: "ブランチタイム" },
                { period: "午後", start: "15:00", end: "18:00", details: "カフェ営業" }
            ]
        },
        1: { // 月曜日
            message: "月曜日の営業時間",
            times: [
                { period: "昼", start: "11:00", end: "15:00", details: "ランチタイム" },
                { period: "夕方", start: "17:00", end: "20:00", details: "ディナータイム" }
            ]
        },
        2: { // 火曜日
            message: "火曜日の営業時間",
            times: [
                { period: "昼", start: "11:00", end: "15:00", details: "ランチタイム" },
                { period: "夕方", start: "17:00", end: "20:00", details: "ディナータイム" }
            ]
        },
        3: { // 水曜日
            message: "水曜日の営業時間",
            times: [
                { period: "昼", start: "11:00", end: "15:00", details: "ランチタイム" },
                { period: "夕方", start: "17:00", end: "20:00", details: "ディナータイム" }
            ]
        },
        4: { // 木曜日
            message: "木曜日の営業時間",
            times: [
                { period: "昼", start: "11:00", end: "15:00", details: "ランチタイム" },
                { period: "夕方", start: "17:00", end: "21:00", details: "ディナータイム" }
            ]
        },
        5: { // 金曜日
            message: "金曜日の営業時間",
            times: [
                { period: "昼", start: "11:00", end: "15:00", details: "ランチタイム" },
                { period: "夕方", start: "17:00", end: "22:00", details: "ディナータイム" }
            ]
        },
        6: { // 土曜日
            message: "土曜日の営業時間",
            times: [
                { period: "朝", start: "8:00", end: "11:00", details: "ブランチタイム" },
                { period: "昼", start: "11:00", end: "15:00", details: "ランチタイム" },
                { period: "夕方", start: "17:00", end: "22:00", details: "ディナータイム" }
            ]
        }
    };

    // DOM要素の取得
    const daySelect = document.getElementById('day-select');
    const timeMessage = document.getElementById('time-message');
    const timeDetails = document.getElementById('time-details');

    // 現在の曜日を取得して選択
    const currentDay = new Date().getDay();
    daySelect.value = currentDay;

    // 初期表示
    updateDisplay();

    // 選択変更時のイベントリスナー
    daySelect.addEventListener('change', updateDisplay);

    // 表示を更新する関数
    function updateDisplay() {
        const selectedDay = daySelect.value;

        // 選択された曜日に対応するデータを取得
        const dayData = scheduleData[selectedDay];

        // 表示内容を更新
        timeMessage.textContent = dayData.message;

        // 複数の時間帯がある場合、リスト形式で表示
        let timeListHTML = '<ul class="time-list">';
        dayData.times.forEach(timeSlot => {
            timeListHTML += `
                <li>
                    <span class="time-period">${timeSlot.period}</span>: 
                    ${timeSlot.start} - ${timeSlot.end}
                    <span class="time-details">(${timeSlot.details})</span>
                </li>
            `;
        });
        timeListHTML += '</ul>';

        timeDetails.innerHTML = timeListHTML;
    }
});

これに対応するCSSも追加します。

Css

/* style.css（追加部分） */
.time-list {
    list-style-type: none;
    padding: 0;
    margin: 10px 0;
}

.time-list li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
}

.time-period {
    font-weight: bold;
    color: #2c3e50;
}

.time-details {
    color: #777;
    font-size: 0.9em;
}

ハマった点やエラー解決

このような実装を行う際によく遭遇する問題とその解決策を紹介します。

問題1：getDay()が返す値が期待と異なる JavaScriptのDateオブジェクトのgetDay()メソッドは、日曜日を0、月曜日を1...土曜日を6と返しますが、これは国によって異なる場合があります。特に日本では、週の初めが月曜日と考えられていることが多いため、混乱を招くことがあります。

解決策： 曜日の表示とデータのインデックスを明確に分けて管理するか、getDay()の値を調整する関数を作成します。

Javascript

// 日本の曜日順（月曜日を0とする）に変換する関数
function getJapanDayIndex(date) {
    const day = date.getDay();
    // 日曜日(0)を6に、他の曜日は-1する
    return day === 0 ? 6 : day - 1;
}

// 使用例
const japanDayIndex = getJapanDayIndex(new Date());
console.log(japanDayIndex); // 月曜日なら0、日曜日なら6

問題2：時間の表示形式の統一 時間データを取得する際に、24時間表記と12時間表記が混在していると、表示が統一されません。

解決策： 時間を表示する際に、常に同じ形式に変換する関数を作成します。

Javascript

// 24時間表記を12時間表記に変換する関数
function formatTo12Hour(hour, minute) {
    const period = hour >= 12 ? 'PM' : 'AM';
    const displayHour = hour % 12 || 12; // 0時を12時に変換
    return `${displayHour}:${String(minute).padStart(2, '0')} ${period}`;
}

// 使用例
console.log(formatTo12Hour(13, 30)); // 1:30 PM
console.log(formatTo12Hour(9, 5));   // 9:05 AM
console.log(formatTo12Hour(0, 0));   // 12:00 AM

解決策

この記事で紹介した曜日ごとに時間を表示する機能は、以下のステップで実装できます。

  1. HTMLで曜日選択UIと表示領域を作成する - select要素で曜日を選択できるようにする - 時間を表示するための要素を用意する

  2. JavaScriptで曜日ごとの時間データを定義する - オブジェクトまたは配列で各曜日の時間データを管理 - 必要に応じて複数の時間帯を配列で定義

  3. イベントリスナーで選択変更を検知する - changeイベントを使用して、ユーザーの選択を検知 - 選択が変更されるたびに表示内容を更新

  4. 表示内容を動的に更新する - 選択された曜日に対応するデータを取得 - DOM操作で表示内容を更新

  5. （オプション）現在の曜日を自動で選択する - ページ読み込み時に現在の曜日を取得 - 取得した曜日に対応するselect要素の値を設定

これらの手順を実装することで、ユーザーが曜日を選択すると、対応する時間情報が動的に表示されるインタラクティブな機能を実装できます。

まとめ

本記事では、JavaScriptを使って曜日ごとに異なる時間を表示する方法について解説しました。

  • 要点1: HTMLで曜日選択UIと表示領域を作成し、JavaScriptで時間データを管理
  • 要点2: イベントリスナーを使って選択変更を検知し、DOM操作で表示内容を動的に更新
  • 要点3: 複数の時間帯を扱う場合や、現在の曜日を自動で選択する機能など、実用的な拡張方法も紹介

この記事を通して、曜日ごとの時間表示を実装することで、ユーザーにとって使いやすく、情報が直感的に理解できるWebページを作成できるようになったと思います。

今後は、データを外部ファイルやAPIから動的に取得する方法や、ユーザーが自分で時間を編集できる機能の追加についても記事にする予定です。

参考資料

参考にした記事、ドキュメント、書籍などがあれば、必ず記載しましょう。