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

2020年2月27日システムJavaScript, プログラミング初心者

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

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

JavaScriptカレンダーを出力するプログラミング解説です。カレンダー出力のプログラミングは、forの制御を練習する課題としてとても最適な練習問題です。

ぜひ実際にプログラミングしてforループ処理を理解しましょう。

カレンダー出力プログラミングのポイント

forループしながら処理を実行するプログラミングの練習に最適です。

【初心者】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>

JavaScriptでカレンダーのプログラミング解説

文字コードを指定

HTMLheadタグ内にmetaタグcharset(文字コード)をUTF-8に指定します。

<meta charset="UTF-8">

Webページ文字化けする原因は、大体がmetaタグ文字コードを指定出来ていない事が多いです。

BootstrapのスタイルシートをCDNで読み込む

このカレンダー作成プログラムでは、カレンダーtableタグで作成します。今回は見た目を良くするためにBootstrapを使ってスタイルをあてようと思います。

あとBootstrapCDNで読み込むようにしました。

<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の略です。
簡単に言うと、リソース(CSSJQueryなど)を自サーバへ用意せず、外部サーバから取得する仕組みです。
リソースを配信する外部サーバは、最適化されたネットワークでリソースを配信します。

カレンダーの年月を出力する要素を用意

divタグカレンダーの年月を出力します。またJavaScriptで出力する為にclass名を"date-head“とします。

<div class="date-head"></div>

カレンダーを出力する要素を用意

tableタグカレンダーを出力します。またJavaScripttableタグtbodyタグカレンダーを出力します。※theadタグclass名を指定して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>

JQueryをCDNで読み込む

このカレンダー作成プログラムでは、JQueryを利用するので、CDNで読み込みます。

JQueryとは

JQueryJavaScriptライブラリーです。詳しくは「【初心者】JavaScriptでプログラミングを始める方法」をご覧ください。

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

scriptタグを用意してJavaScriptのプログラムを始める

JavaScriptプログラムコードを記述するためにscriptタグを記述します。

<script>
・・・
</script>

JavaScriptで現在の年月を出力

JavaScriptで現在の年月を取得して、divタグclass名date-head“へ出力します。

var today = new Date();

var year  = today.getFullYear();
var month = today.getMonth() + 3;

$('.date-head').html(year + "-" + month);
  • var today = new Date();
    • 日付や時刻を扱うことが可能なDateオブジェクトのインスタンスを生成
  • var year = today.getFullYear();
    • 現在年を取得
  • var month = today.getMonth() + 3;
    • 現在月を取得
  • $('.date-head’).html(year + “-" + month);
    • <div class="date-head">◯◯◯</div>の◯◯◯へ現在の年月を出力

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でカレンダーを出力

JavaScriptカレンダー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++) {
    • forで1日から月末までループ
    • 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) {
    • ifで条件分岐
      • 日曜日もしくは1日の時 ※日曜始まりのカレンダーにする為
  • $('table’).find('tbody’).append('<tr>’ + '<td></td>’ 〜 + '</tr>’);
    • tableタグへカレンダーの1行(1週)の<tr>を挿入
    • <td>を7つ挿入
  • $('table’).find('tbody’).find('tr’).last().find('td’).eq(week).html(i);
    • 上記で挿入したカレンダーの最終行の<tr>にある<td>へ日にちを挿入

まとめ

今回はJavaScriptカレンダープログラミングしたサンプルコードを解説しました。

プログラミングカレンダーの作成は、プログラミング初心者に適したサンプルコードです。

プログラミングのポイント

  • forでループしながら行う処理をしっかりとイメージ

是非みなさんも実際にプログラミングすることをオススメします。

【初心者】JavaScriptでプログラミングを始める方法を解説
【作業用】JavaScriptでカレンダー作成〜プログラミング動画〜[Study With Me]
プログラミング解説講座

UT
UTの日常

当ブログ(UTの日常)を運営しているUTは「プログラミング関係の仕事をしている30代1児の父親」です。詳しくは「UTのプロフィール」をご覧ください。

UTの日常では、システム開発における LinuxPHPJavaScriptJQueryMySQLなどの知識やプログラミング技術、サーバ構築や運用などAWSをメインに知識を紹介しています。

内容としては、Webシステムの開発中や運用中に発生したトラブルやエラーの対応や解決方法をまとめた備忘録やWebシステム開発の方法を未経験者の人を対象に説明したプログラム教科書を記事にしています。
Webシステム開発の知識やプログラム技術の備忘録

2020年2月27日システムJavaScript, プログラミング初心者