Twitterを眺めていて、面白いツイートを発見しました。
JavaScriptでカレンダー作成中！
2日でここまで作れたことに自分の成長を感じた…(TωT)嬉✨
なんかズレるから修正してstyleあてる！カレンダーは、Dateオブジェクトと配列のよき練習になりました～！ pic.twitter.com/I6XuMMeN7c
— kawa?プログラミング勉強垢 (@kawa64372358) September 6, 2018
この、JavaScriptでカレンダーを作ったというツイート。作り方はぼんやり思いつくけど、自分ならどんな感じで作るだろう、と興味深く思い、実際に作ってみました！
Calender
完成品が、これ。
HTMLとCSSとJavaScript(jQuery)でできてます。
動くかな？ 少なくともパソコンでは動くんじゃないかと思います！
年月の左右にある＜や＞をクリックしてみてください。
Twitterで、動画で動きを撮ったツイートもしました。
>RT のツイートを見て、面白そうだしちょっとやってみようかと、作ってみた！中身これでいいかはわからないが、ちゃんと動くからいいかー。 pic.twitter.com/m6aKmmYpHy
— おっちー＠糸島企画 (@itoshima_occhi) September 12, 2018
どのくらいで、どうやって、作ったか
所要時間は時間気にせずやって40分くらいだったはず。ソースを見ればどうやってるか分かりますが、結構適当です。jQueryで整えたHTMLの部分、どう考えても週ごとに分けたほうが良かったよなぁと思ったり。
今は曜日ごとに縦に分かれてるので、音声読み上げとかを使おうとすると順番が……。よくないですね。
曜日で色付けとかはCSSでやりやすい形ですが、それはnth-childを使うなりすればどうとでもなるので、言い訳にならないしなと思います。
まぁ、そんなところもありますが、とりあえず動くものができたのでよかったです。
JavaScriptのDateはわりと面倒くさいイメージがあり、実際使ったら面倒くさかったですが、動くので良し。
月を動かしたときに、その月のデータを既に作っていたらそのデータを使い、初めて見る時はいろいろ作成して配列に入れてます。
JavaScriptの中でだけ保持しているので、更新したらまた作り直しますが、そう大した量でもないと思うので、適当に。
仕事で使うから作ったというわけではなく、ただ面白そうだし勉強になりそうだから作っただけなので、動けばいいのです。目的は達しました。
完成です。
フットワーク軽く、いろんな技術を身につけよう
気になったら調べる。
思いついたら作る。
必要なら勉強する。
不要でも遊ぶ。
そんな感じで、技術力を伸ばしていきたいと思います。時間は有限だからそればかりもできないけど、持ってて困るものではありませんしね。技術って。
というわけで、カレンダーを作ったよという記事でした。用途？ 特にない！
面白かったので満足です。また何か作るもの無いかなー？
（代表 落合裕太）
