JavaScriptのカレンダー出力プログラム解説【プログラミング初心者の入門講座】

2020年2月27日システムJavaScript,プログラムコード,プログラム入門

【初心者】JavaScriptでカレンダーのプログラミングを解説【プログラミング初心者の入門講座】
【初心者】JavaScriptでカレンダーのプログラミングを解説【プログラミング初心者の入門講座】

どうも、UT(@ut_1029)です。

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を指定する理由

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">
CDNとは

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部分を解説します。

ここからが本番!1つ1つゆっくり理解できるよう解説していきます。

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();

日曜日もしくは1日の時で条件分岐

if (!week || i == 1) {
}

この条件で1週間の始まりのタイミングに実行されることになります。

そしてこの時に以下のプログラムを実行します。

$('table').find('tbody').append('<tr>'+
                                        '<td></td>' +
                                        '<td></td>' +
                                        '<td></td>' +
                                        '<td></td>' +
                                        '<td></td>' +
                                        '<td></td>' +
                                        '<td></td>' +
                                         '</tr>');

このコードでtableタグへ1週間の1行を追加します。
(1週間の1行は、trタグとその中にtdタグ7個)

  • $('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タグを追加する

カレンダー出力プログラムを終えた人へ

0から自分で同じようなカレンダー出力プログラムを実装してみてください!
(写経だと自分の力になりにくいので)

他にも「土日の色分け」「前月や翌月を表示機能」などカスタマイズすると理解が深まるのでおススメです。

最後まで読んでもらいありがとうございます。

【作業用】JavaScriptでカレンダー作成〜プログラミング動画〜[Study With Me]
プログラミング基礎講座

UTの日常では、プログラミングを0から始める方法や基礎知識を解説しています。ぜひ他の記事もご覧ください。

プログラミング未経験から今すぐに始める方法について解説します。なにから始めたらいいのかわかない人は是非ご覧ください。

プログラミング未経験から独学で基礎勉強を始めた人向けに理解するコツやポイントをサンプルコードを使って解説します。

基礎学習ばかりだと勉強に飽きたり身につかなかったりします。プログラミング初心者からステップアップする基礎知識を使ったプログラムのサンプルコードをまとめて紹介します。

UT
UTの日常

1985年生まれ1児の父親です。ブログとか副業で収入を得る手段を模索中であります。(無理しない程度が理想wだから実績が出ないorz)
UTのプロフィール
Amazon欲しいものリスト

2020年2月27日システムJavaScript,プログラムコード,プログラム入門

Posted by UT