Edited at

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

どうもこんにちは。

初投稿です。

新卒として,福岡のWeb企業に就職し,2週間が経過しました。

その間に,Progateで1週間ほど勉強し,その後1週間でカレンダーを作るという

研修を受けました。

ある程度今の環境に慣れてきたので,いったんアウトプットしようかと...!!


作ったもの


  • 年月切り替え可能なカレンダー

  • その日のやる気や感情をアイコンで表示する機能(いわゆるニコニコカレンダー)

  • センスのいい見た目で()


日にちの動的生成

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

まあ,とりあえず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で作っていくって形ですね。

流れとしては,


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()の違いを認識した恥ずかしい話し