JavaScriptのきほん「ブラウザでカレンダーを表示しよう（２）」

前回では、JavaScriptを使って3か月分のカレンダーをブラウザで表示する方法をご紹介した。

今回は、前回のJavaScriptのコードのうち、「カレンダーを生成する関数」を詳しくみていくことにしよう。

以下のコードは、指定された年と月から始まる3か月分のカレンダーを生成する関数である。

// カレンダーを生成する関数
    function generateCalendar(year, month) {
      const calendar = [];
      for (let i = 0; i < 3; i++) {
        const date = new Date(year, month + i, 1);
        const monthDays = [];
        const firstDay = (date.getDay() + 6) % 7; // 月曜日始まりに調整
        const daysInMonth = new Date(year, month + i + 1, 0).getDate();

        // 前月の空白を追加
        for (let j = 0; j < firstDay; j++) {
          monthDays.push({ date: '', day: '' });
        }

        // 日付を追加
        for (let day = 1; day <= daysInMonth; day++) {
          const currentDate = `${year}-${String(month + i + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
          monthDays.push({ date: currentDate, day: holidays[currentDate] ? `${day}\n(${holidays[currentDate]})` : day });
        }

        calendar.push({ year, month: month + i + 1, days: monthDays });
      }
      return calendar;
    }

関数宣言

function generateCalendar(year, month) {
}

yearとmonthを引数として受け取り、カレンダーを生成する関数である。

カレンダー配列の初期化

const calendar = [];

生成されたカレンダーを格納するための空の配列を作成する。

3か月分のループ

for (let i = 0; i < 3; i++) {
}

3か月分のカレンダーを生成するためのループである。

月の初日を取得

const date = new Date(year, month + i, 1);

各月の初日を取得する。

月の日付配列の初期化

const monthDays = [];

各月の日付を格納するための空の配列を作成する。

月曜日始まりに調整

const firstDay = (date.getDay() + 6) % 7;

月の初日の曜日を取得し、月曜日始まりに調整している。

月の日数を取得

const daysInMonth = new Date(year, month + i + 1, 0).getDate();

各月の日数を取得する。

前月の空白を追加

for (let j = 0; j < firstDay; j++) {

monthDays.push({ date: '', day: '' });

}

月の初日が月曜日でない場合、前月の空白を追加する。

日付を追加

for (let day = 1; day <= daysInMonth; day++) {

const currentDate = `${year}-${String(month + i + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;

monthDays.push({ date: currentDate, day: holidays[currentDate] ? `${day}\n(${holidays[currentDate]})` : day });

}

各日付を配列に追加する。
また、holidaysオブジェクトが存在する場合、祝日情報も追加する。

カレンダーに月を追加

calendar.push({ year, month: month + i + 1, days: monthDays });

生成された月の日付配列をカレンダーに追加する。

カレンダーを返す

javascript return calendar;

3か月分のカレンダーを返す。

それでは、このうち、「月曜日始まりに調整」について、更に詳しくみていくことにしよう。

const firstDay = (date.getDay() + 6) % 7;

このコードは、月の初日の曜日を取得し、それを月曜日始まりの形式に変換するためのものである。
通常、JavaScriptのgetDay()メソッドは、日曜日を0として、土曜日を6とする0から6の値を返す。
そこで、このコードでは月曜日を週の始まりとするために調整を行っている。
具体的には以下のように動作させている。