jQuery を駆使したカレンダーづくり研修

どうもこんにちは。
初投稿です。

新卒として，福岡のWeb企業に就職し，2週間が経過しました。
その間に，Progateで1週間ほど勉強し，その後1週間でカレンダーを作るという
研修を受けました。
ある程度今の環境に慣れてきたので，いったんアウトプットしようかと...！！

# 作ったもの
- 年月切り替え可能なカレンダー
- その日のやる気や感情をアイコンで表示する機能（いわゆるニコニコカレンダー）
- センスのいい見た目で（）

## 日にちの動的生成
htmlで大枠だけ作って，JQueryで動的に生成していきます。というか，基本，全体的にそうなってるんですが，普通そう作るのか当たり前...なんですかね？

まあ，とりあえずhtmlは以下。

 ```html:index.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で作っていくって形ですね。
流れとしては，

```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で出てきたので）
　　→　イベント発火しねぇ．．．

実際に書いたコードはこれ。

```javascript
$('.calendar table td').click(function() {
    // モーダルの表示処理
}); 
```

このときに，私はドヤ顔で
「この書き方だと，動的に生成されたオブジェクトに対しては，イベントが登録されないから...

```javascript
$(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](https://api.jquery.com/on/#on-events-selector-data)

後で追加された子要素のイベントを処理できますよ。と大体そんな感じかな。実は，これは過去に読んだことあったからこれを説明したつもりだった。
あれ？じゃあ，`click(function() {...})`はどうなん？

> As the .click() method is just a shorthand for .on( "click", handler ), detaching is possible using .off( "click" ).
[.click() | jQuery API Documentation](https://api.jquery.com/click/#click-handler)

ほほう，clickメソッドはon('click', handler)の省略系とな。
なるほど。つまり，後とか先とかそういう問題ではないということか。ということは，イベントを登録している対象の違いか...？
実験をしてみよう。

---

#### Test01
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="tsumakoto" data-slug-hash="mgByRm" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Test01">
  <span>See the Pen <a href="https://codepen.io/tsumakoto/pen/mgByRm/">
  Test01</a> by Tsukamoto (<a href="https://codepen.io/tsumakoto">@tsumakoto</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


#### Test02
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="tsumakoto" data-slug-hash="ZZXYLZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Test02">
  <span>See the Pen <a href="https://codepen.io/tsumakoto/pen/ZZXYLZ/">
  Test02</a> by Tsukamoto (<a href="https://codepen.io/tsumakoto">@tsumakoto</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#### Test03
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="tsumakoto" data-slug-hash="QPqwMZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Test03">
  <span>See the Pen <a href="https://codepen.io/tsumakoto/pen/QPqwMZ/">
  Test03</a> by Tsukamoto (<a href="https://codepen.io/tsumakoto">@tsumakoto</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

---

一つ目のボタンをクリックすると，新しくボタンが生成されます。そして，新しいボタンをクリックすると，また新たなボタンが生成されるようにイベントを追加しました。
もちろん，Test01の実験結果はうまくクリックイベントが発生しませんね。
しかし，Test02とTest03はどっちもしっかりイベントが発生しやがった！！！
間違ったこと教えてごめんなさい。。。
なので，クリックイベントを使うなら，Test03使ったほうがいいんですかね。おそらく。。。？
Test02の存在意義なんなんだ。

有識者の方々，教えてください (´・ω・`)

### tableセンタリングできない問題
はじめにとった方法は`table`タグに対して，`text-align:center`をしたら，うまくいくっしょ。と思っていた。
いかなかった。代わりに，テーブルの中の文字がセンタリングされた。
そりゃそうじゃ。恥ずかしい限り。

`margin:auto`をとったらうまくいきました。
けど，tableタグ用ののセンタリングの方法がinline指定で，`align="center"`でも全く同じ挙動をしたんですよね。
今回の研修では，こっちの指定方法使っちゃったんですけど，どうもあまりよくないらしい。

 [HTMLTableElement.align - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/HTMLTableElement/align)で非推奨と書かれてありました。

書き換えないとなあ...

# おわりに
何番煎じかわからないことしか言っていない。（jQuery だしね。）
初投稿だし，大目に見て。

# 参考
[JavaScriptでカレンダーを自作したら勉強になった](https://qiita.com/kan_dai/items/b1850750b883f83b9bee)
[今更ながらjQueryのon("click")とclick()の違いを認識した恥ずかしい話し](https://qiita.com/luccafort/items/424e4990ad88d576a5bd)