【JavaScript入門】即実践できる!JavaScriptで時計を作ってみよう

みなさんこんにちは!Kotonoです。

今回はJavaScriptで「時計」を作成する方法について解説していきたいと思います。

この記事では

・時計の作成に必要なDateオブジェクトとは
・日付や時間を取得する方法

などといった基本的な内容から

・デジタル時計の作成方法
・協定世界時(UTC)やグリニッジ標準時(GMT)について

などといった、より具体的な内容に関してもわかりやすく説明していきたいと思います。

Dateオブジェクトとは

みなさんはJavaScriptプログラミングにおいて「Dateオブジェクト」を使用したことはありますか?

DateオブジェクトとはJavaScriptで日付や時間を操作するために必要なオブジェクトです。

この記事のメイントピックである「時計の作成方法」をご紹介する前に、簡単にDateオブジェクトの扱い方を学んでおく必要があります。

今日の日付を取得する方法

では、Dateオブジェクトを使用して今日の日付を取得してみましょう。

以下のコードをご覧ください。

実行結果は以下の通りです。

上のコードでは、簡単に今日の日付を取得しています。

まず、新たなDateオブジェクトのインスタンスを作成し、変数dateに保存します。

そしてDateオブジェクトの様々なメソッドを使い、日付の取得を行います。

最初に、getFullYearメソッドを使用し4桁の西暦年を取得します。

そして、getMonthメソッド月の値を取得します。

ここで注意したいのは、getMonthメソッドは0から11までの数字を返すので、戻り値に1を足さなければいけません。

そして最後に、getDateメソッドを使用し日にちを取得します。

これらをJavaScriptコンソールに表示させることで、今日の日付を確認することが出来ます。

現在の時間を取得する方法

では次に、Dateオブジェクトを使用して、現在の時間を取得してみましょう。

以下のコードをご覧ください。

実行結果は以下の通りです。

上のコードでは、簡単に現在の時刻を取得しています。

まずは先ほどと同じ変数dateを使用し、Dateオブジェクトの様々なメソッドを使います。

最初に、getHoursメソッドを使用し、日時の「時」を取得します。

そして、getMinutesメソッド分の値を取得します。

そして最後に、getSecondsメソッドを使用し、秒を取得します。

これらをJavaScriptコンソールに表示させることで、今日の日付を確認することが出来ます。

ここで注意したいのは、日付も時刻も使用しているコンピュータの時刻が表示されます。

その為、同じコードでも違う環境に置かれたコンピュータ上で実行すると、違う結果を得ることとなります。

Dateオブジェクトのもっと詳しい情報に関しては、以下のリンクを参照してみてくださいね。

日付処理を使い倒す! JavaScriptのDate活用法を徹底解説
更新日 : 2019年5月14日

デジタル時計を作ってみよう

では、これまでに学んだテクニックを応用して、簡単なデジタル時計を作成してみましょう。

以下のコードをご覧ください。

このコードを実行すると、以下のようなページが表示されます。

上のコードでは、HTMLのp要素にデジタル時計を組み込んでいます。

myfunc関数では、まずは先ほどご紹介したように現在の時刻を取得しています。

そして、その取得した時刻をHTMLのp要素にinnerHTMLプロパティを使用して、書き込んでいます。

innerHTMLプロパティについての詳しい説明は、以下のリンクを見てみてください。

【JavaScript入門】innerHTMLでdivタグ内の要素を取得、設定する方法
更新日 : 2019年3月30日

そして、setInterval関数を使用し、myfunc関数を一定間隔で実行させています。

setInterval関数に関する詳しい説明は、以下のリンクを参照してみてくださいね。

【JavaScript入門】setIntervalの使い方まとめ
更新日 : 2019年4月26日

このように、とてもシンプルなデジタル時計を作成することができましたね。

グリニッジ標準時(GMT)や協定世界時(UTC)について

JavaScriptでは、グリニッジ標準時(GMT)協定世界時(UTC)などの、特別なフォーマットの日付・時刻を取得することも可能です。

グリニッジ標準時はイギリスの標準時であり、日本とは9時間ほど時差があります。

では現在のグリニッジ標準時を取得してみましょう。

実行結果は以下の通りです。

上のコードでは、Dateオブジェクトを含んでいる変数dateを、toGMTStringメソッドを使用し、GMT標準時に変換しています。

ご覧いただけるように、JavaScriptコンソールには、曜日・日付・時刻が独自のフォーマットに従って表示されました。

次に、協定世界時(UTC)とは、世界共通の標準時間です。

計測方法がグリニッジ標準時とは違うため、より正確な時刻となっています。

では現在の協定世界時を取得してみましょう。

実行結果は以下の通りです。

上のコードは、先ほどのグリニッジ標準時のものとほとんど変わりません。

Dateオブジェクトを含む変数dateを、toUTCStringメソッドを使用し、協定世界時に変換しています。

こうして、二種類の標準時刻も簡単に取得できることがわかりました。

まとめ

この記事では、JavaScriptにおける時計の作成方法について解説しました。

JavaScriptプログラミングにおいて、時間を扱うシチュエーションはたくさんあります。

この記事でご紹介したテクニックを覚えておくと、応用がきくので便利です!

みなさんもこの記事を通して、JavaScriptに関する知識をどんどん増やしていってくださいね!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

Kotono

Kotono

イタリア在住15年目の22歳です。イタリアの大学で情報科学&応用数学を学んでいます。主にJavaScriptやPythonについての記事を書いたりしています。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説