JavaScriptで現在時刻をリアルタイムで表示する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで現在時刻をリアルタイムで表示する方法について現役エンジニアが解説しています。日付時刻を扱うには「Date」オブジェクトを利用します。何も指定しないと現在の日付・時刻が格納されるので、後はsetIntervalメソッドなどで一定時間ごとに動作するようにします。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptで現在時刻をリアルタイムで表示する方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptで現在時刻をリアルタイムで表示する方法について詳しく説明していくね!

大石ゆかり

お願いします!

JavaScriptでは現在の日付時刻をリアルタイムに表示させることが可能です。初心者向けに詳細な方法を現役エンジニアが解説していきます。

JavaScriptで日付・時刻をリアルタイムで表示させる例

 

Dateオブジェクトとは

JavaScriptで日付時刻を扱うには「Date」オブジェクトを利用します。「Date」オブジェクトを生成する際にパラメーターを指定しないと、生成時点での日時情報が格納されます。

パラメーターに日付や時間を示す文字列を指定すると、その日付情報を持つオブジェクトが生成されます。

現在時刻の取得方法

それでは実際に現在時刻を取得するためのコードをみてみましょう。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <script>
      var date1 = new Date();
      console.log(date1);
    </script>
  </body>
</html>

data1の変数の中に、現在日時を格納し、コンソールへ出力できました。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

setIntervalメソッドとは

setIntervalメソッドとはJavaScriptのタイマー処理です。一定時間に特定の処理を繰り返すときなどに使用されます。

setInterval(関数function, 一定時間の指定[, 引数1, 引数2, …])

一定時間の指定はミリ秒となります。

JavaScriptで現在時刻をリアルタイムで表示する方法

以上の内容から実際に現在時刻をリアルタイムに表示するコードは以下のようになります。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <output></output>
    <script>
      window.addEventListener("load",function(){
        var ele=document.getElementsByTagName("output")[0];
        setInterval(function(){
          //現在時刻のDateオブジェクトを生成
          var date2 = new Date();
          ele.innerHTML=date2;
      },100);
      },false)
    </script>
  </body>
</html>

 

JavaScriptで表示させた現在時刻の画像

まとめ

「Date」オブジェクトを用いて、現在日時をリアルタイムに表示する方法について解説いたしました。

実際の現場でも日時に関わるプログラムは多数あります。今回の解説を活かしていただければ幸いです。

筆者プロフィール

メンターTK

大学院でVBAを扱う研究を行い、プログラミングの素晴らしさに目覚める。

その後、建設系企業のシステム担当として従事。JavaScriptやPHP、Processingなどに没頭中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。