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

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

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

この記事では

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

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

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

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

Dateオブジェクトとは

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

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

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

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

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

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

var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
console.log(year+"年"+month+"月"+day+"日");

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

2018年8月28日

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

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

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

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

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

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

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

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

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

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

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

var date = new Date();
var hours = date.getHours()
var minutes = date.getMinutes();
var seconds = date.getSeconds();
console.log(hours+"時"+minutes+"分"+seconds+"秒");

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

13時13分34秒

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

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

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

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

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

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

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

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

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

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

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

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

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

<html>
  <body>
      <p id="myid"></p>
    <script>
        t = 0;
        var elem = document.getElementById("myid");

        function myfunc(){
            var date = new Date();
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            elem.innerHTML = hours+"時"+minutes+"分"+seconds+"秒" ;
        }

        t = setInterval("myfunc()", 500);

    </script>
  </body>
</html>

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

上のコードでは、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時間ほど時差があります。

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

var date = new Date();
var gmt = date.toGMTString();
console.log(gmt);

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

Tue, 28 Aug 2018 12:04:06 GMT

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

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

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

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

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

var utc = date.toUTCString();
console.log(utc);

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

Tue, 28 Aug 2018 12:04:06 GMT

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

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

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

まとめ

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

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

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

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

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

Kotono

Kotono

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