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

JavaScriptの日付設定メソッド(set系)の使い方を徹底解説

JavaScriptのDateオブジェクトには、日付や時刻の各要素を変更するための「set系」メソッドが多数用意されています。これらのメソッドを活用することで、既存の日付オブジェクトの年・月・日・時・分・秒などを自由に設定・変更できます。

日付を設定する主なメソッド一覧

メソッド説明
setDate()日(1〜31)を数値で設定します。
setFullYear()年を設定します(月・日も同時に指定可能)。
setHours()時(0〜23)を設定します。
setMilliseconds()ミリ秒(0〜999)を設定します。
setMinutes()分(0〜59)を設定します。
setMonth()月を設定します(0が1月、1が2月となる点に注意)。
setSeconds()秒(0〜59)を設定します。
setTime()1970年1月1日00:00:00 UTCからの経過ミリ秒で日時を設定します。

サンプルコード

以下は、set系メソッドを使ってDateオブジェクトの値を変更し、その結果を画面に表示するサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Set Date Methods</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample {
        font-size: 18px;
        font-weight: 500;
        color: red;
    }
</style>
</head>
<body>
<h1>JavaScript Set 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", () => {
        date.setHours(11);
        sampleEle.innerHTML = "setHours(11) = " + date + "<br>";
        date.setMonth(1);
        sampleEle.innerHTML += "setMonth(1) = " + date + "<br>";
        date.setMinutes(20);
        sampleEle.innerHTML += "setMinutes(20) = " + date + "<br>";
        date.setFullYear(1990);
        sampleEle.innerHTML += "setFullYear(1990) = " + date + "<br>";
    });
</script>
</body>
</html>

実行結果

JavaScriptの日付設定メソッド(set系)の使い方を徹底解説

「CLICK HERE」ボタンをクリックすると、setHours()、setMonth()、setMinutes()、setFullYear()の各メソッドで変更された日付が順に表示されます。

JavaScriptの日付設定メソッド(set系)の使い方を徹底解説

ポイント

set系メソッドは、呼び出した時点でDateオブジェクトの値を直接変更します。特にsetMonth()は月を0始まりで扱うため、2月を設定したい場合は「1」を指定する必要があります。上記のサンプルコードでも、setMonth(1)として2月を設定しています。また、setFullYear()は年だけでなく、第2引数・第3引数で月と日を同時に指定できる便利なメソッドです。


  1. JavaScriptにおける配列とSetの違いとは？重複値の扱いと要素アクセスをわかりやすく解説

    JavaScriptのSet（セット）オブジェクトは、ES2015（ES6）で新たに導入されたデータ型です。従来から広く使われている配列（Array）と比べると、いくつか重要な違いがあります。 配列とSetの主な違い 重複した値の扱い： 配列は同じ値をいくつでも格納できますが、Setでは同一の値は1つしか保持されません。重複した値は自動的に除外されるのが大きな特徴です。 要素へのアクセス方法： 配列ではインデックス（例：arr[0]）を使って任意の位置の要素へ直接アクセスできます。一方、Setにはインデックスの概念がなく、要素は挿入された順序どおりに先頭から順番に辿ることしかできません。

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

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