JavaScriptにおけるdatenowメソッドの利用方法について現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptにおけるdatenowメソッドの利用方法について現役エンジニアが解説しています。datenowとは、日付や時刻に関連するクラスであるDateオブジェクトのnowメソッドのことです。nowメソッドとは現在の日付や時刻のタイムスタンプを返してくれます。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptにおけるdatenowメソッドの利用方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptにおけるdatenowメソッドの利用方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

datenowとは

JavaScriptでdatenowというメソッドはなく、代わりに、Dateオブジェクトのnowメソッドが存在します。これは、”1 January 1970 00:00:00 UTC” (UNIXエポック) からの経過時間をミリ秒単位で表す数値を返却します。

[PR] フロントエンドで挫折しない学習方法を動画で公開中

nowメソッドの使い方

const time = Date.now();

console.log(time);

例えば、「1595477217857」の様な数値を返却してくれます。

nowメソッドを利用して現在の日付を取得する方法

取得した、経過時間(ミリ秒)を基に、Dateでオブジェクト化することで時間を表示できます。

var nowtime = Date.now();
var nowdate = Date(nowtime);
console.log(nowtime);
console.log(nowdate);

 

時刻を取得してみよう

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>array length JavaScript</title>
</had>
<body>
  <h1 id="starttime"></h1>
  <p>
    <input id="endtime" type="button" value="経過時間" onclick="cal_time()">
    →
    <label id="out_endtime">_____</label>
  </p>
  <script type="text/javascript">
    //今時間を取得
    var StartTime = Date.now();
    //表示時間フォーマット関数
    function view_time(time) {
      var year = time.getFullYear();
      var mon = time.getMonth() + 1;
      var day = time.getDate();
      var hour = time.getHours();
      var min = time.getMinutes();
      var sec = time.getSeconds();
      //成型して表示
      var s = year + "年" + mon + "月" + day + "日" + hour + "時" + min + "分" + sec + "秒";
      return s;
    }
    //起動時に時間を表示
    document.getElementById("starttime").innerHTML = set_start_time();
    function set_start_time() {
      //ミリ秒を日付型に変換
      var now = new Date(StartTime);
      return view_time(now);
    }
    //時間経過
    function cal_time() {
      var EndTime = Date.now();
      // 経過時間をミリ秒で取得
      var ms = EndTime - StartTime;
      // ミリ秒を分に変換(端数切捨て)
      var secs = Math.floor(ms / (1000));
      document.getElementById("out_endtime").innerHTML = secs + "秒";
    }
  </script>
  </body>
</html>

 

まとめ

今回は、現在時間を表示するだけでなく、時間計算も追加してみました。Dateもよく使われますのでしっかり押さえておきましょう。

筆者プロフィール

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

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