###更新
2020/11/10 記事の条件：今日の日付には色をつけること、が別月をみて確認したところ、
できていなかったです。「【実践プログラミング②】JavaScript カレンダーを作成する ver2 / 難易度 ★★★☆☆」の記事に「今日の日付には色をつける」方法を記載してありますので、そちらをご確認ください。
#プロローグ
プログラミングを勉強し始めて数ヶ月が経ちましたが、
いざ「カレンダーを作成しなさい」「サイコロの出る目を算出しなさい」「勝つ確率を算出しなさい」などと、問題が出されると手が止まってしまいます。
そもそも問題の意味を分解することができません。
カレンダーを作成しなさい：まずnew Dateで日付を取得して・・とか。
コードを見ればやりたいことは何となくわかるけど、白紙で書けと言われたら書けない。
それって、勉強したって言えるの？と自己嫌悪に。この１ヶ月私は一体。
そこで、今日からは、自分で「OOしなさい」という問題を勝手に探したり作ったりして、
コードを書いて、書いたコードをQiitaで解説していく実践プログラミングを始めます。
（できれば毎日やりたい）
#今回の問題
「JSを使用してカレンダーを作成しよう」 難易度 ★☆☆☆☆
条件：今日の日付には色をつけること
#参考記事
今回は、下記の記事を参考にJSでカレンダーを作成しました。
「JavaScriptでカレンダーを自作したら勉強になった」
「JavaScriptでカレンダーを作ってみた」
#コードを書く
ちゃんと言語ごとに分けて書きます（なんていうか分からない、ベタ書き？）。
１つ１つ説明できるところはコメントにて説明文を書いていきます。
誤っていたらご報告お願い致します🙏
まずは、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です。
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です。
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文を使って作成するのは、やはり白紙だと厳しいなと感じました。
たくさんの問題にふれて経験を増やすのみです。
誤ってる説明がございましたらご教授お願い致します🙇♂️。