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

スポンサーリンク
コンピューター JavaScript

今回は、「ブラウザにカレンダーを表示しよう（１）」でご紹介しているJavaScriptファイルのうち、「カレンダーを表示する関数」を詳しくみていくことにしよう。

JavaScriptのきほん「ブラウザでカレンダーを表示しよう（１）」
JavaScriptを使ってブラウザに「3か月分のカレンダー」を表示してみよう。ちょっと日にちを確認するのにとっても便利である。JavaScriptコードをブラウザで表示するために、HTMLファイルとJavaScriptファイルを作成して、...
my-studies.org
2025.04.23

このコードは、カレンダーをHTML形式で表示する関数である。

// カレンダーを表示する関数
 function displayCalendarHTML(calendar) {
 const today = new Date();
 const todayString = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
 const calendarDiv = document.getElementById('calendar');
 calendar.forEach(({ year, month, days }) => {
 const monthTitle = document.createElement('div');
 monthTitle.className = 'month-title';
 monthTitle.textContent = `${year}年 ${month}月`;
 calendarDiv.appendChild(monthTitle);

 const table = document.createElement('table');
 const headerRow = document.createElement('tr');
 ['月', '火', '水', '木', '金', '土', '日'].forEach(day => {
 const th = document.createElement('th');
 th.textContent = day;
 headerRow.appendChild(th);
 });
 table.appendChild(headerRow);

 let row = document.createElement('tr');
 days.forEach((dayObj, i) => {
 const cell = document.createElement('td');
 const cellDate = dayObj.date;
 if (cellDate === todayString) {
 cell.className = 'today';
 } else if (holidays[cellDate]) {
 cell.className = 'holiday';
 } else if (i % 7 === 5 || i % 7 === 6) { // 土日
 cell.className = 'weekend';
 }
 cell.textContent = dayObj.day;
 row.appendChild(cell);
 if ((i + 1) % 7 === 0) {
 table.appendChild(row);
 row = document.createElement('tr');
 }
 });
 if (row.children.length > 0) table.appendChild(row);
 calendarDiv.appendChild(table);
 });
 }

関数宣言

function displayCalendarHTML(calendar) {

｝

calendarオブジェクトを引数として受け取り、HTML形式で表示する関数である。

今日の日付を取得

const today = new Date();

const todayString = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;

今日の日付を取得し、YYYY-MM-DD形式の文字列に変換している。

カレンダーの表示領域を取得

const calendarDiv = document.getElementById('calendar');

カレンダーを表示するためのHTML要素を取得している。

各月の処理

calendar.forEach(({ year, month, days }) => {
}

calendarオブジェクトの各月を処理している。

月のタイトルを作成

const monthTitle = document.createElement('div');
monthTitle.className = 'month-title';
monthTitle.textContent = `${year}年 ${month}月`;
calendarDiv.appendChild(monthTitle);

各月のタイトルを作成し、カレンダー表示領域に追加している。

曜日ヘッダーを含むテーブルを作成

const table = document.createElement('table'); 
const headerRow = document.createElement('tr');
 ['月', '火', '水', '木', '金', '土', '日'].forEach(day => 
{ const th = document.createElement('th'); 
th.textContent = day; 
headerRow.appendChild(th); 
}); 
table.appendChild(headerRow); 

曜日ヘッダーを含むテーブルを作成している。

日付の行を作成 

let row = document.createElement('tr');
days.forEach((dayObj, i) => {
  const cell = document.createElement('td');
  const cellDate = dayObj.date;
   if (cellDate === todayString) {
    cell.className = 'today';
    } else if (holidays[cellDate]) {
      cell.className = 'holiday';
    } else if (i % 7 === 5 || i % 7 === 6) { // 土日
     cell.className = 'weekend';
 }
cell.textContent = dayObj.day;
 row.appendChild(cell);
 if ((i + 1) % 7 === 0) {
   table.appendChild(row);
   row = document.createElement('tr');
  }
});
if (row.children.length > 0) table.appendChild(row);
calendarDiv.appendChild(table);

各日付をテーブルのセルとして追加し、特定の日付に対してクラスを設定する。
例えば、今日の日付にはtodayクラス、祝日にはholidayクラス、週末にはweekendクラスを設定する。

このように、この関数では、生成されたカレンダーオブジェクトをHTML形式で表示し、特定の日付に対してスタイルを適用している。

「日付の行を作成」するコード

さて、今度は、このうち「日付の行を作成」するコードについてもう少し詳しくみてみよう。

let row = document.createElement('tr');
days.forEach((dayObj, i) => {
  const cell = document.createElement('td');
  const cellDate = dayObj.date;
   if (cellDate === todayString) {
    cell.className = 'today';
    } else if (holidays[cellDate]) {
      cell.className = 'holiday';
    } else if (i % 7 === 5 || i % 7 === 6) { // 土日
     cell.className = 'weekend';
 }
cell.textContent = dayObj.day;
 row.appendChild(cell);
 if ((i + 1) % 7 === 0) {
   table.appendChild(row);
   row = document.createElement('tr');
  }
});
if (row.children.length > 0) table.appendChild(row);
calendarDiv.appendChild(table);

このコードは、カレンダーの日付をテーブルの行として生成し、特定の日付に対してスタイルを適用する部分である。

  1. 行の作成
let row = document.createElement('tr');

新しいテーブル行 (<tr>) を作成する。

  1. 日付のループ処理
days.forEach((dayObj, i) => {
}

days 配列の各日付オブジェクト (dayObj) をループ処理する。
なお、i は現在のインデックスである。

  1. セルの作成
const cell = document.createElement('td');

新しいテーブルセル (<td>) を作成する。

  1. 日付の取得
const cellDate = dayObj.date;

現在の日付オブジェクトから日付文字列を取得する。

  1. 今日の日付のスタイル設定
if (cellDate === todayString) {

  cell.className = 'today';

}

セルの日付が今日の日付 (todayString) と一致する場合、セルに today クラスを設定する。

  1. 祝日のスタイル設定
else if (holidays[cellDate]) {

  cell.className = 'holiday';

}

セルの日付が祝日 (holidays オブジェクトに存在する場合) と一致する場合、セルに holiday クラスを設定する。

  1. 週末のスタイル設定
else if (i % 7 === 5 || i % 7 === 6) { // 土日

  cell.className = 'weekend';

}

インデックス i が5または6の場合（つまり、土曜日または日曜日）、セルに weekend クラスを設定する。

  1. セルの内容設定
cell.textContent = dayObj.day;

セルのテキスト内容を日付オブジェクトの day プロパティに設定する。

  1. セルを行に追加
row.appendChild(cell);

セルを現在の行に追加する。

  1. 行の終了と新しい行の作成
if ((i + 1) % 7 === 0) {

  table.appendChild(row);

  row = document.createElement('tr');

}

インデックス i が7の倍数の場合（つまり、週の終わり）、現在の行をテーブルに追加し、新しい行を作成する。

  1. 最後の行の追加
if (row.children.length > 0) table.appendChild(row);

最後の行にまだセルが残っている場合、その行をテーブルに追加する。

  1. テーブルをカレンダー表示領域に追加
calendarDiv.appendChild(table); 

完成したテーブルをカレンダー表示領域に追加する。
カレンダーの日付をテーブル形式で表示し、特定の日付に対してスタイルを適用するためのものである。

コメント

タイトルとURLをコピーしました