どうもこんにちは。
初投稿です。
新卒として，福岡のWeb企業に就職し，2週間が経過しました。
その間に，Progateで1週間ほど勉強し，その後1週間でカレンダーを作るという
研修を受けました。
ある程度今の環境に慣れてきたので，いったんアウトプットしようかと...！！
作ったもの
- 年月切り替え可能なカレンダー
- その日のやる気や感情をアイコンで表示する機能（いわゆるニコニコカレンダー）
- センスのいい見た目で（）
日にちの動的生成
htmlで大枠だけ作って，JQueryで動的に生成していきます。というか，基本，全体的にそうなってるんですが，普通そう作るのか当たり前...なんですかね？
まあ，とりあえずhtmlは以下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main">
<!-- 月の切り替え -->
<div class="month">
<span id="switch-prev-btn" class="prev-btn switch-btn">◀︎</span>
<span class="curr-month"></span>
<span id="switch-next-btn" class="next-btn switch-btn">▶︎</span>
</div>
<!-- カレンダー部分-->
<div class="calendar">
<table>
<tbody>
<tr>
<td class="day-area holiday">
<div>日</div>
<div>Sun</div>
</td>
<td class="day-area">
<div>月</div>
<div>Mon</div>
</td>
<td class="day-area">
<div>火</div>
<div>Tue</div>
</td>
<td class="day-area">
<div>水</div>
<div>Wed</div>
</td>
<td class="day-area">
<div>木</div>
<div>Thu</div>
</td>
<td class="day-area">
<div>金</div>
<div>Fri</div>
</td>
<td class="day-area saturday">
<div>土</div>
<div>Sat</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
日曜から土曜までは一定なんで，そこはあらかじめ入れて置くとし，日付部分をjavascriptで作っていくって形ですね。
流れとしては，
calendar <- 1か月分のカレンダーテーブルオブジェクト
week_count <- 1か月の週の数
for i = 1 to week_count do
week <- 1週間分のデータオブジェクト
for day = 1 to 7 do
date <- 1日分のデータ
week.append(date)
calendar.append(week)
て感じで，小分けにして作成すればいいですね。流れとしては，一週間分のデータを作成した後，class="calendar"のテーブルの後にappendしていけばオワオワリ
意外と詰まったところ
と，いうより同期と話したこととか，自分が書いていて見落としがあったことですね。
$('.hoge').click(function() {...});と.on ('click', '.hoge', function() {...} );の違い
ここ，意外とQiitaの記事でも書かれてるんで，まあ常識なんでしょうね。しかし，我々新人にとっては，常識ではないのである。
これは同期に相談された内容ですが，具体的にどこで詰まったかっていうと以下の事象が起きた。
→ 日付ごとにニコニコ機能を追加したい！！
→ clickイベントを追加しよう！
→ .click(function() {...});使ったらええやろ（ProgateでのLessonで出てきたので）
→ イベント発火しねぇ．．．
実際に書いたコードはこれ。
$('.calendar table td').click(function() {
// モーダルの表示処理
});
このときに，私はドヤ顔で
「この書き方だと，動的に生成されたオブジェクトに対しては，イベントが登録されないから...
$(document).click('click', '.calendar table td', function() {
// モーダルの表示処理
}
としたほうがいいよ。」
と，回答したんだが，どうも若干ニュアンスが違うらしい。
Delegated event handlers have the advantage that they can process events from descendant elements that are added to the document at a later time.
.on() | jQuery API Documentation
後で追加された子要素のイベントを処理できますよ。と大体そんな感じかな。実は，これは過去に読んだことあったからこれを説明したつもりだった。
あれ？じゃあ，click(function() {...})はどうなん？
As the .click() method is just a shorthand for .on( "click", handler ), detaching is possible using .off( "click" ).
.click() | jQuery API Documentation
ほほう，clickメソッドはon('click', handler)の省略系とな。
なるほど。つまり，後とか先とかそういう問題ではないということか。ということは，イベントを登録している対象の違いか...？
実験をしてみよう。
Test01
See the Pen Test01 by Tsukamoto (@tsumakoto) on CodePen.
Test02
See the Pen Test02 by Tsukamoto (@tsumakoto) on CodePen.
Test03
See the Pen Test03 by Tsukamoto (@tsumakoto) on CodePen.
一つ目のボタンをクリックすると，新しくボタンが生成されます。そして，新しいボタンをクリックすると，また新たなボタンが生成されるようにイベントを追加しました。
もちろん，Test01の実験結果はうまくクリックイベントが発生しませんね。
しかし，Test02とTest03はどっちもしっかりイベントが発生しやがった！！！
間違ったこと教えてごめんなさい。。。
なので，クリックイベントを使うなら，Test03使ったほうがいいんですかね。おそらく。。。？
Test02の存在意義なんなんだ。
有識者の方々，教えてください (´・ω・`)
tableセンタリングできない問題
はじめにとった方法はtableタグに対して，text-align:centerをしたら，うまくいくっしょ。と思っていた。
いかなかった。代わりに，テーブルの中の文字がセンタリングされた。
そりゃそうじゃ。恥ずかしい限り。
margin:autoをとったらうまくいきました。
けど，tableタグ用ののセンタリングの方法がinline指定で，align="center"でも全く同じ挙動をしたんですよね。
今回の研修では，こっちの指定方法使っちゃったんですけど，どうもあまりよくないらしい。
HTMLTableElement.align - Web API | MDNで非推奨と書かれてありました。
書き換えないとなあ...
おわりに
何番煎じかわからないことしか言っていない。（jQuery だしね。）
初投稿だし，大目に見て。
参考
JavaScriptでカレンダーを自作したら勉強になった
今更ながらjQueryのon("click")とclick()の違いを認識した恥ずかしい話し