どうも！chuckです。
先日はてブでこちらの記事を拝見しました。
あれですね。
JavaScriptで日付を扱う関数。ちょっとややこしいんですよね。
ところが、ブクマにはこんなコメントが。
JavaScript による日付・時刻・時間の計算・演算のまとめ - hoge256ブログ
No! 2007年の情報。今はすぐにmoment.jsを使うべき
2015/06/08 06:36
ん？？moment.js...？
なんか便利そう！！！ﾟ+.(◕ฺ ω◕ฺ )ﾟ+.
というわけでさっそく試してみました！
公式サイト↓↓
Moment.js
ダウンロードは２種類。
いざ使ってみる
うーん、、、
たしかに便利なんだろうけど、「これはすごい！！」という感覚はなかった。かも。
いや、自分が未熟なだけなんですが…(´；ω；｀)
強いて言えば、日付や時刻を取り出しやすいかなと感じました！
このように↓↓
ただし難しいことはしませんでした(・∀・；）
そうだ！時計を作ろう！
ドキュメントを見ているだけではアレだったので、実際に作ってみました笑
作るものはカンタンなアナログ時計です♪
完成図
ホントにカンタンですねｗ
コード
moment.jsを使って時刻を取得しています。
そしてサインコサインを使って時計の針の角度を設定しています(｀･ω･´)ゞ
時計のロジックに関してはこちらのサイトを参考にしました↓↓
素敵なお手本のおかげで２時間ほどで完成させることが出来ました！(´；ω；｀)
裏テーマ
上記のサイトではJavaScriptで書いてあるんですが、今回はそのコードをjQueryで書き直しました。
というのも、jCanvasの練習もしたかったからですｗ
というわけで、今回のコーディングを通して少しはjCanvasと仲良く慣れたような気がします♪
個人的には、複雑なレンダリングになるほどjQueryのDOM操作が活きるように感じます(?_?)
そして、日付・時刻を扱いやすいmoment.jsもバリバリ活用していきたいと思います ！
では！
今回書いたコード
DEMO
http://chuck0523.github.io/canvasClock/canvasClock.html
jCanvasデビューはこちら↓↓
