JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの日付取得メソッド一覧と使い方を徹底解説

JavaScriptでは、Dateオブジェクトを使うことで、現在の日時や指定した日時から年・月・日・時刻などの情報を簡単に取得できます。以下は、日付情報を取得するための主要なメソッドの一覧です。

メソッド説明
getFullYear()年を4桁の数値で返します(例：2024)。
getMonth()月を数値で返します(0〜11)。0が1月、11が12月に対応するため注意が必要です。
getDate()日を数値で返します(1〜31)。
getHours()時を返します(0〜23)。
getMinutes()分を返します(0〜59)。
getSeconds()秒を返します(0〜59)。
getMilliseconds()ミリ秒を返します(0〜999)。
getTime()1970年1月1日からの経過時間をミリ秒単位で返します。
getDay()曜日を数値で返します(0〜6)。0が日曜日、6が土曜日に対応します。
Date.now()1970年1月1日00:00:00 UTCからの経過時間をミリ秒数で返します。Dateオブジェクトを生成せずに呼び出せる静的メソッドです。

それでは、これらの日付メソッドを実際に使ったサンプルコードを見ていきましょう。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .sample {
      font-size: 18px;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>JavaScript Date Methods</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、いくつかの日付メソッドの結果が表示されます
</h3>
<script>
   let sampleEle = document.querySelector(".sample");
   let date = new Date();
   document.querySelector(".Btn").addEventListener("click", () => {
      sampleEle.innerHTML += "getFullYear() = " + date.getFullYear() + "<br>";
      sampleEle.innerHTML += "getMinutes() = " + date.getMinutes() + "<br>";
      sampleEle.innerHTML += "Date.now() = " + Date.now() + "<br>";
      sampleEle.innerHTML += "getMonth() = " + date.getMonth() + "<br>";
   });
</script>
</body>
</html>

このコードでは、まずnew Date()で現在の日時を持つDateオブジェクトを生成し、ボタンがクリックされるとgetFullYear()、getMinutes()、Date.now()、getMonth()の実行結果を画面に追記して表示しています。

出力結果

JavaScriptの日付取得メソッド一覧と使い方を徹底解説

「CLICK HERE」ボタンをクリックすると、以下のように各メソッドの実行結果が表示されます。

JavaScriptの日付取得メソッド一覧と使い方を徹底解説

ポイントまとめ

  • getMonth()は0始まり(0=1月)なので、表示する際には+1が必要な場合があります。
  • getTime()とDate.now()はどちらも1970年1月1日を基準としたミリ秒を返しますが、Date.now()はインスタンス化不要で手軽に使えます。
  • getDay()は「日」ではなく曜日を返すため、getDate()と混同しないようにしましょう。
  1. JavaScriptの日付設定メソッド(set系)の使い方を徹底解説

    JavaScriptのDateオブジェクトには、日付や時刻の各要素を変更するための「set系」メソッドが多数用意されています。これらのメソッドを活用することで、既存の日付オブジェクトの年・月・日・時・分・秒などを自由に設定・変更できます。 日付を設定する主なメソッド一覧 メソッド説明setDate()日(1〜31)を数値で設定します。setFullYear()年を設定します(月・日も同時に指定可能)。setHours()時(0〜23)を設定します。setMilliseconds()ミリ秒(0〜999)を設定します。setMinutes()分(0〜59)を設定します。setMonth()月を設定

  2. JavaScriptでプロトタイプを使ってメソッドを共有する方法

    JavaScriptにおけるメソッドの共有JavaScriptでは、メソッドをオブジェクト（コンストラクタ関数）のprototypeプロパティに定義することで、複数のインスタンス間でそのメソッドを共有できます。通常、コンストラクタ内でthis.displayInfo = function(){...}のようにメソッドを定義すると、生成されるインスタンスごとに関数のコピーが作成され、メモリを無駄に消費します。一方、prototypeに定義すれば、関数は一度だけ生成され、すべてのインスタンスから参照・呼び出しできるようになります。これはメモリ効率の面でも大きなメリットがあります。以下は、JavaS