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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

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

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(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ではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。