プログラミング初心者がJavaScriptで時計を作ってみた

こんにちはこんばんは。グラフィックデザイナーのヨシツグシュンペイです。
先日、Pythonの勉強を始めたnoteを書いたのですが

Paizaラーニング Python3入門編 前半を終了したので所感をしたためる
https://note.mu/peishum/n/n136bda059758

最近ちょっとJavaScriptに浮気してました。
何か作って人に見てもらおうと思った時に、Pythonだと作ったものをWebで公開するのがちょっとハードルが高いので、HTMLとの連携が良く、手っ取り早く見てもらうことができるJavaScriptをちょっとかじって、ブラウザで動く時計を作ってみました。
記述の方法は違えど、基本的な考え方や構造はPythonとほとんど変わらないので、意外とすんなり作れました。
作ったのはこれ。

COLOR CLOCK
http://spy.main.jp/clock/

時刻によって背景の色がゆっくりと変化する時計です。
日が昇り、沈むように、時間の経過とともにじわじわと色が移り変わっていき、24時間かけて色相環を一周します。
今回はJavaScriptでの時刻表示が目的の一つだったので、このような形になってますが、眺めているうちに、これ時計表示無くして、色相だけで時刻読み取るようにした方がアートとして尖ってるしミニマルでかっこいいと思い始めたので、そのうち時刻の表示非表示を切り替えられるようにしたいと思います。

構造としてはざっくりこんなかんじ。

何時は何色、と決め打ちで指定するのではなく、取得した時刻を計算式に入れて直接色指定に利用しているのがこだわりポイントです。

ほんとに初心者なのでめっちゃググりました。これらのサイトや記事を参考にさせていただきました。

HTML

HTMLでJavaScriptを使う方法
http://proengineer.internous.co.jp/content/columnfeature/5817

基礎から学ぶ！HTMLにCSSを適用させる方法【初心者向け】
https://techacademy.jp/magazine/9647

コーディングの基礎！HTMLでdivタグを使う方法【初心者向け】
https://techacademy.jp/magazine/12452

JavaScript

現在時刻をテキストでリアルタイムに表示し続ける時計を作る方法
https://www.nishishi.com/javascript-tips/realtime-clock-setinterval.html

onloadイベントの使い方とハマりやすい注意点とはhttps://www.sejuku.net/blog/19754

実数を整数に丸める4パターン
https://ginpen.com/2011/12/07/rounding/

ページの読み込み前・直後・完了時にスクリプトを実行する方法いろいろ
https://www.nishishi.com/javascript-tips/onload-page.html

JavaScriptにおける数値⇔文字列の型変換あれこれ
https://lealog.hateblo.jp/entry/2013/02/28/005010

数値→文字列、文字列→数値の変換
https://www.softel.co.jp/blogs/tech/archives/5524

joinや+演算子で配列や文字列を連結・結合する
https://www.sejuku.net/blog/21149

複数の条件式を組み合わせる(if..else if)
https://www.javadrive.jp/javascript/if/index3.html

if～else文
https://www.pazru.net/js/kihon/11.html

JavaScript if文の == と === の違い
https://itsakura.com/javascript-if-equal-diff

letとvarの使い方とスコープの違い
https://www.sejuku.net/blog/58429

Javascriptでhtmlを動的に書き換える方法！
https://qiita.com/n_oshiumi/items/5795de01187d5aafca07

タグ属性やスタイル属性をScriptで変更する
http://manabu.quu.cc/up/6/e61525m0.htm#TxtHelp_target

ウェブページの背景色を動的に変更する方法
https://www.nishishi.com/javascript-tips/doc-bgcolor.html

getElementByIdを完全理解する3つのコツ！
https://www.sejuku.net/blog/27019

JavaScriptで特定の要素やhtml,body要素の背景色を変更するなどの「style属性を追加する」方法
https://www.imamura.biz/blog/26926

ライブラリを使わない素のJavaScriptでDOM操作
https://qiita.com/kouh/items/dfc14d25ccb4e50afe89

Colors HSL
https://www.w3schools.com/colors/colors_hsl.asp

CSS

いつか使うかも？cssのfont-sizeをビューポート-パーセンテージで指定する
https://www.tam-tam.co.jp/tipsnote/html_css/post8935.html

CSSのwidth（幅）とheight（高さ）の指定方法をマスターしよう
https://saruwakakun.com/html-css/basic/width-height

回り込みの設定
http://www.webword.jp/cssguide/ref-visible/index4.html

floatとclearの応用
http://sakichin.com/chapter02/chapter02_step05_02.html

CSSで中央寄せの方法いろいろメモ
https://qiita.com/KAMEch/items/b52c5e23212b8fef81a7

【CSS】Vertical-alignとtext-align、margin:autoを極めて上下中央、もう配置に困らないためのまとめ
http://unitopi.com/css-centering-2/

CSSで中央寄せする9つの方法（縦・横にセンタリング）
https://saruwakakun.com/html-css/basic/centering

CSS でテキストの縦揃えを上揃え, 中央揃え, 下揃えにする方法
http://phiary.me/css-text-vertical-top-middle-bottom/

CSSのmarginとは？paddingとは？余白の指定方法まとめ
https://saruwakakun.com/html-css/basic/margin-padding

HTMLでページ上部の空白、余白を消す方法
http://shiru-web.com/2017/06/26/01-62/

HTML5でHeader上部の隙間を埋める
https://qiita.com/silverskyvicto/items/2c10dc50d80ba89422c8

ページや要素の幅に合わせて文字サイズを変更する方法
https://teratail.com/questions/49808

IDを使った指定
https://www.tagindex.com/stylesheet/basic/format3.html

その他

様々なファビコンを一括生成。favicon generator
https://ao-system.net/favicongenerator/

正しいfaviconの設定方法を対応ブラウザ別にまとめる
https://glatchdesign.com/blog/web/coding/943

【2018年版】Google Fontsの使い方：初心者向けに解説！
https://saruwakakun.com/html-css/basic/google-fonts

Google Fonts
https://fonts.google.com/

JavaScriptもそうですけど、CSSについてかなり調べました。
記事を書いてくださった方々、ありがとうございます！おかげで時計を作れました。みなさんもよかったら参考にしてみてください。

ちょっと時計づくりにハマり始めて、上記のCOLOR CLOCKと別にあと2つ時計を作ってあるので、またnoteで紹介します。
そして新作も開発中です。完成したらこちらもnoteにて報告します。

最後まで読んでくださってありがとうございます！
それではまた！