JavaScript

【初心者向け】JavaScriptで曜日を取得する方法

javascript曜日を取得する方法

JavaScriptでは、Dateオブジェクトを使用して現在の日付や特定の日付から曜日を取得することができます。DateオブジェクトのメソッドであるgetDay()を使うと、曜日を数値で取得できます。

getDay()メソッドは、日曜日を0とし、土曜日を6とする0から6の整数を返します。

基本的なサンプルコード

以下のコードは、現在の日付から曜日を取得し、その結果を表示する例です。

See the Pen Untitled by kokusyo (@kokusyo) on CodePen. 

<h1>ボタンをクリックして曜日を表示</h1>
<button id="showDayButton">曜日を表示する</button>
<div id="dayDisplay">ここに曜日が表示されます。</div>
// ボタンのクリックイベントを設定
document.getElementById('showDayButton').addEventListener('click', () => {
    // 現在の日付と時刻を取得するためのDateオブジェクトを生成
    const today = new Date(); 

    // getDay()メソッドを使用して、曜日を数値で取得（0:日曜日, 1:月曜日, ..., 6:土曜日）
    const dayOfWeek = today.getDay(); 

    // 曜日の名前を格納した配列を定義
    // インデックス0が「日曜日」、インデックス6が「土曜日」に対応
    const days = ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'];

    // dayOfWeekの値をインデックスとして使用し、対応する曜日名を取得
    const dayName = days[dayOfWeek];

    // HTMLの要素に表示する
    const dayDisplayElement = document.getElementById('dayDisplay');
    dayDisplayElement.textContent = `今日は${dayName}です。`;
});

入力された日付の曜日を表示

ユーザーが日付を入力し、その日付の曜日を表示する機能も簡単に実装できます。

See the Pen Untitled by kokusyo (@kokusyo) on CodePen. 

<h1>指定した日付の曜日を表示</h1>
<input type="date" id="dateInput">
<button id="checkDayButton">曜日を確認する</button>
<div id="dayDisplay">ここに曜日が表示されます。</div>
// ボタンのクリックイベントを設定
document.getElementById('checkDayButton').addEventListener('click', () => {
    const dateInput = document.getElementById('dateInput').value;
    if (dateInput) {
        const selectedDate = new Date(dateInput);
        const dayOfWeek = selectedDate.getDay();
        const days = ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'];
        const dayName = days[dayOfWeek];

        // HTMLの要素に表示する
        const dayDisplayElement = document.getElementById('dayDisplay');
        dayDisplayElement.textContent = `${dateInput} は ${dayName} です。`;
    } else {
        alert('日付を入力してください。');
    }
});

-JavaScript
-, ,