JavaScript の記述方法のサンプルを挙げてみます。
今回は、JavaScript を使用してカレンダーを表示させるサンプルを紹介します。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
ページを開いた時点の当月カレンダーを表示します。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
// ***********************
// データの取得
// ***********************
// システム日付データ取得
let wkDate = new Date();
// 曜日テーブル定義
let wkWeekTbl = new Array("日","月","火","水","木","金","土");
// 月テーブル定義
let wkMonthTbl= new Array(31,28,31,30,31,30,31,31,30,31,30,31);
// 年を取得
let wkYear = wkDate.getFullYear();
//うるう年処理
if (((wkYear%4)==0 && (wkYear%100)!=0) || (wkYear%400)==0){
wkMonthTbl[1] = 29;
}
// 月を取得（ 0 ～ 11 ）
let wkMonth = wkDate.getMonth();
// 今日の日付を取得
let wkToday = wkDate.getDate();
// 日付を 1 日にセット
wkDate.setDate(1);
// 1 日の曜日を取得
let wkWeek = wkDate.getDay();
// カレンダーの行数
let wkTblLine = Math.ceil((wkWeek+wkMonthTbl[wkMonth])/7);
// 表のセル数分の配列を定義
let wkTable = new Array(7*wkTblLine);
// wkTableに空白をセット（ 第1週と最終週の空白セル対策 ）
for(i=0; i<*wkTblLine; i++) wkTable[i]=" ";
// wkTableに日付をセット
for(i=0; i<wkMonthTbl[wkMonth]; i++)wkTable[i+wkWeek]=i+1;
// ***********************
// カレンダーの表示
// ***********************
// カレンダーの年月表示
document.getElementById("dat").innerHTML = wkYear + "年" + (wkMonth+1) + "月";
let str;
// 表の開始
str = "\<table border='1'\>";
// 曜日見出し
str += "\<tr\>";
// 曜日見出し（ 1 週間 1 行のみループ ）
for(i=0; i<7; i++){
str += "\<td align='center' ";
// （日）のセルの色
if(i==0) str += "bgcolor='salmon'>";
// （土）のセルの色
else if(i==6) str += "bgcolor='lightskyblue'>";
// （月）～（金）のセルの色
else str += "bgcolor='palegreen'>";
// 曜日の表示
str += "\<strong\>";
str += wkWeekTbl[i];
str += "\</strong\>";
str += "\</td\>";
}
str += "\</tr\>";
// 日付（ 1 週間毎にループ ）
for(i=0; i<wkTblLine; i++){
// 行の開始
str += "\<tr\>";
// 列のループ
for(j=0; j<7; j++){
// 列の開始
str += "\<td align='center' ";
// 日付取得
wkDat = wkTable[j+(i*7)];
// 今日のセルの色
if (wkDat==wkToday) str += "bgcolor='plum'>";
// （日）のセルの色
else if(j==0) str += "bgcolor='mistyrose'>";
// （土）のセルの色
else if(j==6) str += "bgcolor='lavender'>";
// （月）～（金）のセルの色
else str += "bgcolor='whitesmoke'>";
// 日付セット
str += wkDat;
// 列の終了
str += "\</td\>";
}
// 行の終了
str += "\</tr\>"
}
// 表の終了
str += "\</table\>";
// 表示場所へ出力
document.getElementById("dat").innerHTML = str;
})
</script>
<div id="dat" style="padding : 10px">
</div>
カレンダーの内容をテーブル構造にして 文字列変数 str に格納しています。
HTMLのタブで使用する「 < 」と「 > 」の前にバックスラッシュ「 / 」を付けてエスケープしています。
祝日には規則性のようなものがないため、カレンダーに祝日を組み込む場合は、祝日処理のための関数を定義する必要があります。
次のような順序で条件分岐を行い、ある日付が祝日かどうかを判定する関数を作成します。
ソースコードで記述すると、次のようになります。
// ***********************
// 変数設定
// ***********************
// 祝日名
let holidayName;
// システム日付データ
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
let weekday = date.getDay();
// 固定祝日
let fixHolidayList = [
{"name": "元日", "mon": 1, "day": 1},
{"name": "建国記念の日", "mon": 2, "day": 11},
{"name": "天皇誕生日", "mon": 2, "day": 23},
{"name": "昭和の日", "mon": 4, "day": 29},
{"name": "憲法記念日", "mon": 5, "day": 3},
{"name": "みどりの日", "mon": 5, "day": 4},
{"name": "こどもの日", "mon": 5, "day": 5},
{"name": "山の日", "mon": 8, "day": 11},
{"name": "文化の日", "mon": 11, "day": 3},
{"name": "勤労感謝の日", "mon": 11, "day": 23}
];
// ハッピーマンデー
let happyMondayList = [
{"name": "成人の日", "mon": 1, "weekNum": 2},
{"name": "海の日", "mon": 7, "weekNum": 3},
{"name": "敬老の日", "mon": 9, "weekNum": 3},
{"name": "スポーツの日", "mon": 10, "weekNum": 2}
];
// ***********************
// 祝日判定
// （返り値：祝日名 or 空文字）
// ***********************
unction getHolidayName(date) {
// 祝日取得
if (_getHolidayName(date) !== "") {
return holidayName;
}
// 振替休日取得
let wkDate = date.getTime();
// 前日
let preDate = new Date(wkDate);
preDate.setDate(date.getDate() - 1);
// 前日（ループ処理で使用）
let preDateLoop = new Date(wkDate);
preDateLoop.setDate(date.getDate() - 1);
// 前日が（日）かつ祝日の場合に振替休日設定
while (true) {
if (_getHolidayName(preDateLoop) == "") {
// 前日が祝日でない場合は終了
break;
}
if (preDateLoop.getDay() == 0) {
// 前日が日曜の場合は終了
holidayName = "振替休日";
break;
}
preDateLoop.setDate(preDateLoop.getDate() - 1);
}
if (holidayName !== "") {
return holidayName;
}
// 国民の休日（前後が国民の祝日である平日）取得
// 次の日
let nextDate = new Date(wkDate);
nextDate.setDate(date.getDate() + 1);
if (_getHolidayName(preDate) !== ""
&& _getHolidayName(nextDate) !== ""
&& weekday >= 2
&& weekday <= 6) {
holidayName = "国民の休日";
}
return holidayName;
}
// **************************
// 祝日取得
// （返り値：祝日名 or 空文字）
// **************************
function _getHolidayName(date) {
// 週数
let weekNum = null;
if (day % 7 == 0) {
weekNum = day / 7;
} else {
weekNum = parseInt(day / 7, 10) + 1;
}
// 固定祝日
fixHolidayList.forEach(function (object) {
if (month == object.mon && day == object.day) {
holidayName = object.name;
}
});
if (holidayName !== "") {
return holidayName;
}
// ハッピーマンデー
happyMondayList.forEach(function (object) {
// （月）以外は終了
if (weekday !== 1) {
return;
}
if (month == object.mon && weekNum == object.weekNum) {
holidayName = object.name;
}
});
if (holidayName !== "") {
return holidayName;
}
// 春分の日・秋分の日
if (month == 3) {
if (day == parseInt(20.8431 + 0.242194 * ( year - 1980), 10) - parseInt((year - 1980) / 4, 10)) {
holidayName = "春分の日";
}
}
if (month == 9) {
if (day == parseInt(23.2488 + 0.242194 * ( year - 1980), 10) - parseInt((year - 1980) / 4, 10)) {
holidayName = "秋分の日";
}
}
return holidayName;
}
祝日を 変数 fixHolidayList（ 固定祝日 ）と happyMondayList（ ハッピーマンデー ）に格納しているので、新しく祝日が制定された場合は、該当する変数に追加設定します。
また、上のサンプルは 現時点での祝日を取得していますが、過去のカレンダーにも対応するためには、祝日の開始年と終了年の確認などが必要です。
INTERNOUS,inc. All rights reserved.
