仕事中にふと思った「でっかい時計が欲しい」
職場で作業をしているとき、ふと「壁に大きな時計があればいいのに」と思うことがある。
デジタル表示はあるけれど、アナログ時計の“感覚的な時間の流れのほうが好きだ。
ならば作ろう。ブラウザで動くアナログ時計を、HTMLとJavaScriptだけで。
最近HTMLの勉強を始めたばかりで、「簡単そうだから挑戦してみよう」と軽い気持ちで取り組んだのが始まりだった。
しかし実際に作ってみると、思ったよりも奥が深かった。
HTMLとCSSで「形」を作る
最初の壁は“円形のデザイン”。
四角いdivタグしか知らなかった自分にとって、丸い要素をCSSで作るというのは新鮮だった。border-radius: 50%;を使えば簡単に円形にできる。
そこに背景色を付け、針の位置を調整していく。
やってみるとまるで図形パズル。
画面上で少しずつ針の長さや角度を調整していく過程は、まるで手作業のモデリングのようだった。
JavaScriptで「動く時計」へ
次のステップは、時間を動かすプログラムだ。Dateオブジェクトから現在の時刻を取得し、針を回転させる。
ここで大きな落とし穴があった。getSeconds()だけだと針がカチカチと1秒ごとに動くだけ。
時計らしい滑らかさが出ない。
その解決策が、getMilliseconds()の活用。
秒＋ミリ秒を計算して角度を出せば、針がスーッと連続的に動く。
この「小数点の世界」を理解した瞬間、画面上の時計が生きて動き出した感覚があった。
for文で60本の目盛りを自動生成
もう一つ学びが大きかったのは目盛りの自動生成。
60本もの線を手書きするのは現実的ではない。
ここでJavaScriptのfor文を使い、回転角度を6度ずつずらして配置する方法を思いついた。
コード自体はシンプルだが、「プログラムで形を量産する」面白さを体験できた瞬間だった。
これがWeb制作の醍醐味だと感じた。
難しかったポイントと学び
-
針を滑らかに動かす計算
ミリ秒を考慮しないと自然な動きにならない。
時間を「角度」で考える感覚が新鮮だった。 -
CSSの中心合わせ
transform-originを理解するまで何度も針がズレた。 -
目盛りの配置ロジック
for文と回転の関係を掴むと、一気にスマートに見えた。
どれも基本的なコードだけれど、自分の手で“動くもの”を作れた感動は大きかった。
完成して感じたこと
完成した時計は、ブラウザを全画面にすれば作業場の壁時計代わりになる。
画面いっぱいに広がる円形の盤面、ゆっくり動く針、
そして何より「自分の書いたコードで動いている」という達成感がある。
HTMLとJavaScriptは、ほんの数十行でも立派な作品を作る力を持っている。
「動くもの」を作りたい人にこそ、まずこのアナログ時計をおすすめしたい。
まとめ：小さなコードで大きな発見
たった1つの時計作りで学んだのは、Webの基礎＝動くデザインの仕組み。
静的なページしか触ったことがなかった自分にとって、
「ブラウザの中で時が動く」という体験はとても刺激的だった。
作成したプログラムがのせれないので今度追加します。
コメント