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

JavaScriptでDateオブジェクトを作成する方法をわかりやすく解説

JavaScriptで日付や時刻を扱うには、Dateオブジェクトを使用します。new Date()コンストラクタを呼び出すだけで、現在の日時に基づいたDateオブジェクトを簡単に生成できます。

以下に、ボタンをクリックすると現在の日時を持つ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;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScriptのDateオブジェクト</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、Dateオブジェクトを作成して表示します
</h3>
<script>
    let resEle = document.querySelector(".result");
    document.querySelector(".Btn").addEventListener("click", () => {
        resEle.innerHTML = new Date();
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のように表示されます。

JavaScriptでDateオブジェクトを作成する方法をわかりやすく解説

「CLICK HERE」ボタンをクリックすると、現在の日時が表示されます。

JavaScriptでDateオブジェクトを作成する方法をわかりやすく解説

ポイントの解説

  • new Date()：引数を指定しない場合、呼び出した時点の現在日時を持つDateオブジェクトを返します。
  • document.querySelector()：結果を表示する要素とボタン要素を取得しています。
  • addEventListener("click", ...)：ボタンがクリックされたときに、Dateオブジェクトを生成して表示する処理を実行します。
  • innerHTML：Dateオブジェクトは文字列化されて表示されるため、ブラウザ標準の形式（例：「Fri Mar 31 2023 11:25:24 GMT+0900」）で日時が出力されます。

なお、特定の日時を指定したい場合は new Date(2023, 2, 31) のように引数を渡すことや、ISO形式の文字列 new Date("2023-03-31") を使うことも可能です。状況に応じて使い分けてください。

  1. JavaScriptで多次元オブジェクトを作成する方法【サンプルコード付き】

    はじめに JavaScriptでは、オブジェクトのプロパティの値として別のオブジェクトを持たせることで、多次元（ネストされた）オブジェクトを作成できます。この構造を活用すると、氏名や学校情報、住所のように階層関係のあるデータを、直感的かつ整理された形で表現することが可能です。 サンプルコード 以下は、多次元JavaScriptオブジェクトを作成し、コンソールに表示するためのコード例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /

  2. 【JavaScript入門】Symbolを使ってオブジェクトごとに一意のIDを作成する方法

    はじめにJavaScriptでオブジェクトごとに一意のIDを作成したい場合、Symbol()を使うのが最も簡単かつ確実な方法です。Symbolは呼び出されるたびに必ず新しい一意の値を生成するため、たとえ同じ説明文字列を渡しても、二度と同じ値にはなりません。以下は、各オブジェクトに対して一意のIDを作成するサンプルコードです。実装例<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewp