JavaScriptで時計を作ってみよう【初心者向け制作物】

2020.05.29
この記事は約7分で読めます。

JavaScriptを学んだはいいものの、これから何をしたらいいのかわからなくて路頭にさまよってるそこのあなた！
とりあえず、簡単なモノから作って行きましょう♪

ということで今回は「時計」を作りながら、Dateオブジェクトをマスターしましょう٩( ‘ω’ )و

仏くん
仏くん

今、何時！？

そーね、だいたいねぇ〜〜∑(ﾟДﾟ)！

 

仏くん
仏くん

今、何G！？

ちょっと待ってて〜５Gぃぃ〜∑(ﾟДﾟ)！

スポンサーリンク

Dateオブジェクトとは？

Dateオブジェクトとは、日時を表示する時に使う「予め用意されているオブジェクト」です。

世界基準で決められた協定世界時 (UTC) 1970年1月1日から、何秒経過しているか？を機械が調べて日時を表示してくれます。

使い方は簡単で、Date( )を呼び出し、newで生成してあげるだけで現在時刻を表示してくれます。

実際に試してみましょう٩( ‘ω’ )و

時計を表示させよう

現在時刻を表示する

左のJSがJavaScript、右のResultが結果画面となります。（HTMLを使わず記入しています）

See the Pen
Date1 by hotokeT.T (@hotoke7676)
on CodePen.

解説：Dateオブジェクトを生成

new Date( )で現在時刻を生成し、dateという変数の中に入れます。
そして、そのdateをdocument.writeでブラウザに表示すればOKです♪
ちょっとわかりづらいですが、

曜日/月/日/年/時/分/秒/で表示されているのがわかりますか？

この日時はあなたがこのページを開いた瞬間の時刻です。

なので、更新ボタンを押してこのページを更新すると表示されている時刻が変わります。

仏くん
仏くん

おぉーすごい！本当に時間が変わった！
思ったより、簡単だな！

では、もう少し違う使い方もしてみましょう( ´∀｀)

一部の情報だけ取得する

See the Pen
Date2 by hotokeT.T (@hotoke7676)
on CodePen.

解説：一部の情報だけ取得する

date.get◯◯で年や月だけ取り出す事も出来ます。

注意する点としては、

・年はgetYearではなくgetFullYearが推奨されている
・月は１月を０と数え、１月（０）～１２月（１１） の数値で表示
・曜日は日曜日（０）～土曜日（６）までの数値で表示

なので、「現在の月-１」と「数値での曜日」で表示されている事がわかります。

仏くん
仏くん

という事は、月には常に＋１して、曜日は日曜〜土曜日まで予め対応する数値と関連付けする処理をしておかないといけないのか。めんどくさ〜！！

そこで！toLocaleString( )メソッドの出番です٩( ‘ω’ )و

toLocaleString( )メソッド

toLocaleString( )メソッドは、勝手に使用言語（日本語とか英語とか）を判断し、文字列として数値を返してくれるメソッドです。

See the Pen
Date3 by hotokeT.T (@hotoke7676)
on CodePen.

だいぶスッキリとした表示になりましたね( ^ω^ )

解説：toLocaleString( )メソッドで見やすく表示する

date.toLocaleString( )とするすだけで表示が、「年/月/日 時:分:秒」に変化します。

変化する内容は次の通り↓

・日本語向けの並びになる（年から始まる）
・月が＋１され、ちゃんと今月が表示される
・曜日を表示しなくなる

残念ながら曜日は対応してくれませんが、「表示しなくなる」というのも意外と便利なのです。なぜなら、曜日を必要としない場合も多く、必要な時だけ.getDay( )で取得すればいいわけですから。

仏くん
仏くん

もう表示するなら基本これを使った方が良さそうだな♪

時計をリアルタイムで動かそう

時計の表示が出来たら、次は時計を動かしていきます( ^ω^ )

１秒ずつ動かす

今回はHTMLも必要な為、↓でHTMLとJSを切り替えてご覧下さい。

See the Pen
Date4 by hotokeT.T (@hotoke7676)
on CodePen.

※アロー関数で表記していますが、「( ) =>」と「function( )」は同じです

仏くん
仏くん

おいおい、一気にコードが増えたなぁ。
ぶーぶー！

大丈夫！！１つ１つ見ていきましょう٩( ‘ω’ )و

解説：間隔をセットする

「setInterval」は、一定時間ごとに特定の処理を繰り返すという働きがあります。（間隔をセットする）

記述方法：setInterval(処理,間隔の数値);　　※「I(アイ)」は大文字

今回でいう処理は「日付を取得し、HTMLと関連付けて表示する」で、間隔の数値は１秒なので１０００となります。（ミリ秒単位なので１秒は１０００ミリ秒）

しかし、このままだと「表示の上書き」をするわけではないので、

2020/5/28 23:02:01　2020/5/28 23:02:02　2020/5/28 23:02:03　2020/5/28 23:02:04　・・・・と、１秒ごとに余計な日付ごと増え、エンドレスでテキストが増え続けていってしまいます。

解説：表示の上書き

それを防ぐ為に今回はHTMLでdivを作り、中身だけを更新されていくように作りました。

HTMLとの関連付けは「document.getElementById(“◯◯”)」でidを取得し、「.innerHTML」で中身が更新されていくようにします。

「要素.innerHTML;」で要素の中身を変更できる
仏くん
仏くん

難しく感じた場合は１つ１つバラして実際に表示させて見てね♪

HTMLの読み込みが終わってからJavaScriptを実行するようにする

最後に、エラーを起こさない為の処理をしておきます。
JavaScriptの記述場所は全部で３つあります。
１、<head>内に記述
２、<body>内のどこかに記述
３、<body>内の一番最後に記述（現在推奨されている）
HTMLは上から順番に処理をして行くので、１と２の場合、HTMLのidを読み込む前にJavaScriptを実行しようとしてしまい、「そんなidないよ！」とエラーを起こしてしまう場合があります。（３の場合は問題ない）
そこで使われるのが、「window.onload」です。
記述方法：window.onload = 処理;
これは「文章の読み込みが全て終わってから、処理を実行して」という命令です。
注意点としては、「window.onload」は( )や{ }ではなく、=で処理を代入するという点だけ覚えておきましょう。
では、実際に「window.onload」で全体を囲ってみましょう！

See the Pen
Date5 by hotokeT.T (@hotoke7676)
on CodePen.

これで完成です！お疲れ様でした( ´∀｀)
仏くん
仏くん

やったー！出来た！
だけど、この時計どんな時に使うのかな？
イマイチ想像できん。

どんな時にDateオブジェクトは使われる？？

日時を使った処理は意外と多く使われています。

例えば、

【Twitter】
「ツイート（書き込み）をした時間」を保存しておき、いつ投稿されたかわかるように表示しておく。
さらに「現在時間」も取得し、「現在時間ー投稿した時間」で投稿から何時間経過しているかを表示する機能。
【ECサイト】
ショッピングサイトのセール期間や元旦などに使われるカウントダウンタイマー。
現在時刻を取得し、「終了時刻ー現在時刻」でカウントダウンタイマーを表示出来ます♪
仏くん
仏くん

なるほどなぁ。じゃあ、オリンピックまであと何日と何時間！
みたいのをもうあなたは作れるって事だな！

 

いつ開催されるかがわかればね(°▽°)

仏くん
仏くん

あなたの余命を表示するカウントダウンタイマーとか作っちゃおうかな？

仏くんが言うと本気で恐いからやめて！知りたくないし∑(ﾟДﾟ)！！

コメント

タイトルとURLをコピーしました