独り言

プログラミングの講師をしています。新人研修で扱う技術の解説と個人の技術メモ、技術書の紹介など

【JavaScript】シンプルなカレンダーの作成

JavaScriptでシンプルなカレンダーの作成。
いくつかネットに転がっているコードを参考にもしましたが、基本的にDateの使い方さえ知っていればあとはifとforだけで意外と簡単に作れると知りました。

const today = new Date(); // 現在の日時  
const year = today.getFullYear(); // 年  
const month = today.getMonth(); // 月 0~11  
// 月末・月初の取得
const start = new Date(year, month, 1);     // 月初
const last = new Date(year, month + 1, 0);  // 月末
const startDate = start.getDate();          // 月初
const lastDate = last.getDate();            // 月末
const startDay = start.getDay();            // 月初の曜日
const lastDay = last.getDay();              // 月末の曜日

// カレンダーの作成
const weeks = ['日', '月', '火', '水', '木', '金', '土'];
// HTML表示用変数
let calendar = '<table>';
calendar +=`<caption>${year}年${month + 1}月</caption>`;
// 曜日の行
calendar += '<tr>';
for (const week of weeks) {
    calendar += '<th>' + week + '</td>';
}
calendar += '</tr>';

let dayCount = 0; // 曜日カウント用
for(let i = startDate; i <= lastDate; i++) {
    if(dayCount === 0) {
        calendar += '<tr>';
    }
    // 1日までの曜日に空白を入れる
    if(i === startDate) {
        for(let j = 0; j < startDay; j++) {
            calendar += '<td></td>';
            dayCount++;
        }
    }
    calendar += '<td>' + i +'</td>';
    dayCount++;
    if(dayCount === 7) {
        calendar += '</tr>';
        dayCount = 0;
    }
}
// 最終週は土曜になるまでから空白を入れる
for(let i = lastDay; i < 7; i++) {
    calendar += '<td></td>';
    if(i === 7) {
        calendar += '</tr>';
    }
}

calendar += '<table>';

// HTMLに書き込み
document.write(calendar);

解説

基本的な文法の解説は省略します。
Dateオブジェクトの詳細については以下。
Date - JavaScript | MDN
ポイントとしては、JaavScriptでは月は0~11で表します。
また、前月の月末の日付を取得したい場合には、コンストラクタの日付引数で0を指定してあげる必要があります。