プロローグ

プログラミングを勉強し始めて数ヶ月が経ちましたが、
いざ「カレンダーを作成しなさい」「サイコロの出る目を算出しなさい」「勝つ確率を算出しなさい」などと、問題が出されると手が止まってしまいます。

そもそも問題の意味を分解することができません。
カレンダーを作成しなさい：まずnew Dateで日付を取得して・・とか。

コードを見ればやりたいことは何となくわかるけど、白紙で書けと言われたら書けない。
それって、勉強したって言えるの？と自己嫌悪に。この１ヶ月私は一体。

そこで、今日からは、自分で「OOしなさい」という問題を勝手に探したり作ったりして、
コードを書いて、書いたコードをQiitaで解説していく実践プログラミングを始めます。
（できれば毎日やりたい）

今回の問題

「JSを使用してカレンダーを作成しよう」　難易度　★☆☆☆☆
条件：今日の日付には色をつけること

参考記事

今回は、下記の記事を参考にJSでカレンダーを作成しました。
「JavaScriptでカレンダーを自作したら勉強になった」
「JavaScriptでカレンダーを作ってみた」

コードを書く

ちゃんと言語ごとに分けて書きます（なんていうか分からない、ベタ書き？）。
１つ１つ説明できるところはコメントにて説明文を書いていきます。
誤っていたらご報告お願い致します🙏

まずは、HTMLです。

calendar.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Document</title>
    <link rel="stylesheet" href="calendar.css">
</head>
<body>
    <h1>Today is</h1><div id="calendar"></div>
#id="calendar"でJSに書いてあるコードを表示させます。
</body>
<script src="calendar.js"></script>
#src="calendar.js"でJSでのコードを取得してきます。
</html>

次に、JSです。

calendar.js


const weeks = ['日', '月', '火', '水', '木', '金', '土']
# 曜日を指定します。
const date = new Date(); 
#任意の日付を設定する方法は、引数の中に数字をいれます ex:new Data(2020.11.11)
#date = new Date();のnewはオブジェクトを初期化するキーワードです。

const year = date.getFullYear()
#dateオブジェクトが持つ値から、年の値を取得します。

const month = date.getMonth()+1  
#0 が年の最初の月を示すので、+1を記載します。+1を記載しないと今日が11月だった場合、10月と表示されてしまいます。

const  today = date.getDate()
#今日の日付を取得します。
#ちなみに、getDateとgetDayの違いは、getDate：日を取得する getDay：曜日を０〜６の値で取得するです。曜日か日付かってことかな。

const startDate = new Date(year, month - 1, 1) 
#月の最初の日を取得します。

const endDate = new Date(year, month,  0) 
#月の最後の日を取得します。
#何をやっているのかというと、日付に0を設定し、該当月のの0日（つまり、前月末）にしてます。

const endDayCount = endDate.getDate()
#月の末日

const startDay = startDate.getDay()
#月の最初の日の曜日を取得

let dayCount = 1 
#日にちのカウント 何日から始めるかを決めます。0にすると、カレンダーに0から始まります。

let calendarHtml = '' // HTMLを組み立てる変数

calendarHtml += '<h1>' + year  + '年' + month + '月' + today + '日' + '</h1>'
calendarHtml += '<table>'

#曜日の行を作成
for (let i = 0; i < weeks.length; i++) {
    calendarHtml += '<td>' + weeks[i] + '</td>' 
　　#これで、横の配列（行）ができます。
}

for (let w = 0; w < 6; w++) {
    calendarHtml += '<tr>' 
　　#これで、縦の配列（列）ができます。

　　＃それぞれの枠<td>をどうするか決めます。
    for (let d = 0; d < 7; d++) {
        if (w == 0 && d < startDay) {
            ＃1行目で1日の曜日の前
            calendarHtml += '<td></td>'

        } else if (dayCount > endDayCount) {
            ＃末尾の日数を超えた
            calendarHtml += '<td></td>'

        } else if (dayCount === today) {
            #今日だったら、色を変える指定をします（class="today:cssにて色指定）。
            calendarHtml += "<td class='today'>" + dayCount + "</td>"
            dayCount++

        } else {
            calendarHtml += '<td>' + dayCount + '</td>'
            dayCount++
        }
    }
    calendarHtml += '</tr>'
}
calendarHtml += '</table>'

document.querySelector('#calendar').innerHTML = calendarHtml
#ここの'#calendar'が、HTMLの<div id="calendar"></div>にあたります。

最後に、cssです。

calendar.css

h1 {
    font-size: 18px;
    text-align: center;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
    margin: 0 auto;
}

td {
    border: 1px solid #ddd;
    padding: 5px;
    text-align: center;
}

td:first-child {
    color: red;
}

td:last-child {
    color: royalblue;
}

.today {
    color: goldenrod !important;
}
#これが今日の日付だけ色を変える指定です。

成果物

感想

見ながらやったので、できました。
その日だけ色をつけるという条件は少しつまづきましたが、ちょっと考えてみてトライアンドエラーで成功しました（嬉しかった）。
また、１つ１つのDateオブジェクトを調べながらやれたので、Dateオブジェクトについては理解ができました。
しかし、行と列の作成をfor文を使って作成するのは、やはり白紙だと厳しいなと感じました。
たくさんの問題にふれて経験を増やすのみです。

誤ってる説明がございましたらご教授お願い致します🙇‍♂️。

【実践プログラミング①】JavaScript カレンダーを作成する / 難易度 ★☆☆☆☆

更新

プロローグ

今回の問題

参考記事

コードを書く

成果物

感想

【実践プログラミング①】JavaScript カレンダーを作成する / 難易度　★☆☆☆☆