JavaScriptのカレンダー出力プログラム解説【JavaScript基礎講座】
JavaScriptでカレンダーを出力するプログラミングを解説します。
この記事を書いている僕は、プログラミング歴10年以上のプログラマーです。
詳細：プログラミング未経験の新卒が10年間プログラマーとして仕事して思うこと
JavaScriptでカレンダーのプログラミング
JavaScriptでカレンダーを出力するプログラミングの解説をします。
ライブラリを使わないでプログラミングの勉強をするために自作しています。
カレンダー出力で習得できること
カレンダー出力は、ループ処理の習得に最適なプログラミングの練習問題です。
- ループの制御
- ループ内で処理の実行
- JavaScriptでHTMLタグの追加
ぜひチャレンジしてください！
※今回はレイアウトの見た目を良くするために「Bootstrap」を使っています。あとHTMLタグの追加などを簡単に行えるように「JQuery」も使っています。
サンプルコード【JavaScriptでカレンダー出力】
では、さっそくJavaScriptでカレンダー出力するサンプルコードから紹介します。
(基本的にコピペで動くと思います。)
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Programming</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<h1>JavaScriptでカレンダー作成</h1>
<div class="date-head"></div>
<table class="table table-border table-hover table-sm">
<thead class="thead-dark">
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 3;
$('.date-head').html(year + "-" + month);
var last = new Date(today.getFullYear(), today.getMonth() + 3, 0);
var last_year = last.getFullYear();
var last_month = last.getMonth();
var last_day = last.getDate();
for (var i=1; i<=last_day; i++) {
var week = new Date(last_year, last_month, i).getDay();
if (!week || i == 1) {
$('table').find('tbody').append('<tr>'+
'<td></td>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'</tr>');
}
$('table').find('tbody').find('tr').last().find('td').eq(week).html(i);
}
</script>
</body>
</html>HTML部分の解説：【 JavaScriptでカレンダー出力】
JavaScriptでカレンダー出力するサンプルコードのHTML部分から解説をします。
細かく解説していきます！
文字コードを指定
HTMLのheadタグ内にmetaタグでcharset(文字コード)をUTF-8に指定します。
<meta charset="UTF-8">metaタグでcharset(文字コード)を指定しないとWebページが文字化けする原因となります。
BootstrapのスタイルシートをCDNで読み込む
Bootstrapを読み込んで見た目を良くします。
(使わなくても問題ないです。)
あとBootstrapをCDNで読み込むようにしています。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">Content Delivery Networkの略です。
リソース(CSSやJQueryなど)を自サーバへ用意せず、外部サーバから取得する仕組みです。リソースを配信する外部サーバは、最適化されたネットワークでリソースを配信します。
簡単にいうと「高速にリソース(CSSやJQuery)を外部サーバから取得できる」って感じです。
カレンダーの年月を出力する要素を用意
HTMLの要素としてdivタグを用意します。ここへJavaScriptを使ってカレンダーの年月を出力します。
<div class="date-head"></div>JavaScriptで出力する為にclass名を"date-head"とします。
カレンダーを出力する要素を用意
HTMLの要素としてtableタグでテーブルを用意します。ここへJavaScriptからカレンダーを出力します。
<table class="table table-border table-hover table-sm">
<thead class="thead-dark">
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody>
</tbody>
</table>JavaScriptで出力する際は、tableタグのtbodyタグという指定でtrタグやtdタグを出力します。
JQueryをCDNで読み込む
JavaScriptでHTMLタグの追加を簡単に行えるようにJQueryを読み込みます。Bootstrap同様にCDNで読み込みます。
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>JavaScript部分の解説：【 JavaScriptでカレンダー出力】
JavaScriptでカレンダー出力するサンプルコードのJavaScript部分を解説します。
ここからが本番！１つ１つゆっくり理解できるよう解説していきます。
scriptタグを用意してJavaScriptのプログラムを始める
JavaScriptでプログラムコードを記述するためにscriptタグを記述します。
<script>
・・・
</script>JavaScriptで現在の年月を取得
JavaScriptで現在の年月を取得します。
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 3;- var today = new Date();
- 日付や時刻を扱うことが可能なDateオブジェクトのインスタンスを生成
- var year = today.getFullYear();
- 現在年を取得
- var month = today.getMonth() + 3;
- 現在月を取得
現在の年月日を出力
divタグのclass名"date-head"へ出力します。
$('.date-head').html(year + "-" + month);- $('.date-head’).html(year + “-" + month);
- class名が’date-head’のHTMLタグへ現在の年月を出力
JavaScriptで月末を取得
カレンダー出力には月初と月末の情報が必要になります。なのでJavaScriptで月末の日付を取得します。
var last = new Date(today.getFullYear(), today.getMonth() + 3, 0);
var last_year = last.getFullYear();
var last_month = last.getMonth();
var last_day = last.getDate();JavaScriptでカレンダーを出力
HTMLへカレンダー出力を行っていきます。
カレンダー出力は、取得した月初と月末の情報を使ってfor文を使ったループで行っていきます。
for (var i=1; i<=last_day; i++) {
var week = new Date(last_year, last_month, i).getDay();
if (!week || i == 1) {
$('table').find('tbody').append('<tr>'+
'<td></td>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'</tr>');
}
$('table').find('tbody').find('tr').last().find('td').eq(week).html(i);
}このコードをもう少し細かく解説します。
月初から月末の日数分をループで繰り返す
for (var i=1; i<=last_day; i++) {
}- var i=1;
- 変数iに日にちを代入(初期値は1)
- i<=last_day;
- 変数iに代入した日にちが月末になるまでループする
- i++
- ループ処理のたびにインクリメント(1プラス)する
曜日を取得
var week = new Date(last_year, last_month, i).getDay();日曜日もしくは１日の時で条件分岐
if (!week || i == 1) {
}この条件で１週間の始まりのタイミングに実行されることになります。
そしてこの時に以下のプログラムを実行します。
$('table').find('tbody').append('<tr>'+
'<td></td>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'</tr>');このコードでtableタグへ１週間の１行を追加します。
(１週間の１行は、trタグとその中にtdタグ７個)
- $('table’)
- tableタグの
- find('tbody’)
- 配下にあるtbodyタグへ
- append()
- ()内に指定したHTMLコードを追加
日にちを書き込む
$('table').find('tbody').find('tr').last().find('td').eq(week).html(i);そしてカレンダーへ日にちを書き込みます。
- $('table’)
- tableタグの
- find('tbody’)
- 配下にあるtbodyタグの
- find('tr’)
- trタグの
- last()
- 一番最後の
- find('td’)
- tdタグの
- eq(week)
- week番目へ
- html()
- 日にちを書き込む
まとめ【JavaScriptでカレンダーのプログラミング】
今回はJavaScriptでカレンダーをプログラミングしたサンプルコードを解説しました。
カレンダー出力プログラムは、ループ処理の習得に最適なプログラミングの練習問題でした。
- for文のループ処理をしっかりとイメージする
- ループ中にtableタグへtrタグとtdタグを追加する
カレンダー出力プログラムを終えた人へ
０から自分で同じようなカレンダー出力プログラムを実装してみてください！
(写経だと自分の力になりにくいので)
他にも「土日の色分け」「前月や翌月を表示機能」などカスタマイズすると理解が深まるのでおススメです。
最後まで読んでもらいありがとうございます。
読んでほしい記事
次は「九九表の出力」にチャレンジして２重ループを習得してみてください。
記事：JavaScriptで九九表を出力するプログラムを解説
https://uteee.com/system/program-basic/3350/1985年生まれ1児の父親です。Web系エンジニアを10年以上しています。
→プロフィール
→Amazon欲しいものリスト