JavaScript - Date オブジェクトで日付と時刻を取得する方法

Date オブジェクトとは？

Date オブジェクトは、JavaScript にあらかじめ組み込まれているオブジェクトです。日付と時刻の情報を格納し、日時に関するさまざまなメソッドを持っています。

今回解説するのは、Date オブジェクトを利用して現在日時を取得する方法です。また、記事の後半では、文字列を表すテンプレートリテラル ${ } で日時を表示する方法も紹介します。

Date オブジェクトについて学んでいく前に、JavaScript のオブジェクトとはどういうものか知っていますか？オブジェクトの基本を知りたい方は、以下の記事を参考にしてくださいね。

現在日時を取得する - new Date()

Date オブジェクトを使うときは、new 演算子を使って呼び出し、新しいオブジェクトを作ります。括弧 () に引数なしで呼び出すと、現在日時を持つオブジェクトを作ることができます。

// 現在日時を持つnowという名前のオブジェクトを作る
const now = new Date();

新しく作った now オブジェクトが現在日時を持っているかどうか、コンソールに出力して確認してみましょう。コードを実行した日時が「2023年8月24日(木)15時26分57秒」の場合、結果は以下のようになります。

const now = new Date();

// 現在日時をコンソールに出力する
console.log(now);

// コンソール出力結果
Thu Aug 24 2023 15:26:57 GMT+0900 (日本標準時)

Date オブジェクトが持つさまざまなメソッドは、新しく作った now オブジェクトから利用可能です。オブジェクトにアクセスするためには、オブジェクト名に続けてドット.を書き、そのあとにメソッドを書きます。

now.メソッド()

ではこれから、日付や時刻のメソッドを使って now オブジェクトの情報を取得する方法を見ていきましょう。

• 年を取得する - getFullYear()

getFullYear() メソッドでは、「年」を取得することができます。年は４桁で表示されます。

now.getFullYear() // 2023年の場合に取得できる値 -> 2023

• 月を取得する - getMonth()

getMonth() メソッドでは、「月」を取得することができます。返る値は「0」から「11」です。0 は１月で、11 が12月となります。実際の月からマイナス 1 であることに注意しましょう。

now.getMonth() // 8月の場合に取得できる値 -> 7

• 日を取得する - getDate()

getDate() メソッドでは、「日」を取得することができます。「日」は日付そのままの値が返ります。

now.getDate() // 24日の場合に取得できる値 -> 24 

• 曜日を取得する - getDay()

getDay() メソッドでは、「曜日」を取得することができます。返る値は「0」から「6」です。0 は日曜日で、6 が土曜日となります。

now.getDay() // 木曜日の場合に取得できる値 -> 4

今日の日付を表示するコード

ここまで紹介してきたメソッドを使って、今日の日付を「◯年◯月◯日◯曜日」のようにまとめて表示してみましょう。

今日の日付をコンソールに表示するコード：

const now = new Date();

const year = now.getFullYear();
// 月の表示には1を足す
const month = now.getMonth() + 1;
const date = now.getDate();
const day = now.getDay();
// 曜日の表示には配列を使う
const daysOfWeek = ['(日)', '(月)', '(火)', '(水)', '(木)', '(金)', '(土)'];

const today = `${year}年${month}月${date}日${daysOfWeek[day]}`;
console.log(today);

// コンソール出力結果（今日の日付が2023年8月24日(木)の場合）
2023年8月24日(木)

ここでポイントとなるのは、「月」と「曜日」です。getMonth() メソッドや getDay() メソッドで取得した値をそのまま使用すると、今日の日付は正しく表示されません。

月の表示には 1 を足す

getMonth() メソッドで取得できる値は「0」から「11」ですね。実際の月からマイナス 1 の値になるので、月を表示するときは取得した値に 1 を足す必要があります。

// 月の表示には1を足す
const month = now.getMonth() + 1;

曜日の表示には配列を使う

getDay() メソッドで取得できる値は「0」から「6」です。でも、数値のまま表示しても何曜日か分かりませんよね。「日曜日」「月曜日」などの文字列で表示するためには、配列を使います。取得した 0 から 6 の値は、配列のインデックスとして使用しますよ。

配列には、表記したいスタイルの文字列を格納しましょう。ここでは、「(日)」「(月)」と表示されるように、配列 daysOfWeek を作ります。

// 曜日の表示には配列を使う
const daysOfWeek = ['(日)', '(月)', '(火)', '(水)', '(木)', '(金)', '(土)'];

getDay() メソッドで得られる値は、0 が日曜日です。配列のインデックスは 0 から始まるので、配列には日曜日から格納していく、ということに注意してくださいね。

配列については、こちらの記事も参考にしてください。

現在の時刻を表示するコード

時刻の情報にアクセスするためには、以下のようなメソッドを使います。現在の時刻を「◯時◯分◯秒」のように表示してみましょう。

• getHours()：「時間」を取得します。返る値は「0」から「23」です。
• getMinutes()：「分」を取得します。返る値は「0」から「59」です。
• getSeconds()：「秒」を取得します。返る値は「0」から「59」です。
• getMilliseconds()：「ミリ秒」を取得します。返る値は「0」から「999」です。

現在の時刻をコンソールに表示するコード：

const now = new Date();

const hour = now.getHours();
const minute = now.getMinutes();
const second = now.getSeconds();

const time = `${hour}時${minute}分${second}秒`;
console.log(time);

// コンソール出力結果（現在時刻が15時26分57秒の場合）
15時26分57秒

ここまで、Date オブジェクトのメソッドで現在日時を取得する方法を解説しました。

テンプレートリテラルで文字列を表示する

最後に、文字列を表すテンプレートリテラルについて簡単に説明します。テンプレートリテラルは、文字列を `バッククウォート（バックティック）` で囲む書き方です。

上で紹介したコードでは、日付や時刻を表す文字列を以下のようにテンプレートリテラルで書いています。

• `${year}年${month}月${date}日${daysOfWeek[day]} `
• `${hour}時${minute}分${second}秒 `

文字列を表すときは、引用符のシングルクウォート ' ' やダブルクウォート " " で囲んで書きますよね。それ以外にも、JavaScript ではバッククウォート ` ` を使うこともできます。

文字列の例：

'こんにちは' // シングルクウォート(文字列リテラル)
"こんにちは" // ダブルクウォート(文字列リテラル)
`こんにちは` // バッククウォート(テンプレートリテラル)

テンプレートリテラルでは、ドルマークと波括弧が合わさった ${ } を使うことで、変数を文字列に組み込むことができます。連結するための + を使わずに変数と文字列をつなげることができるので、コードが短く分かりやすくなりますよ。

変数を文字列に組み込む書き方の例：

// テンプレートリテラル
`${hour}時${minute}分${second}秒`

// 文字列リテラル
hour + '時' + minute + '分' + second + '秒'

まとめ

今回は、JavaScript の Date オブジェクトで現在日時を取得する方法を紹介しました。

Date オブジェクトを new 演算子で呼び出すと、現在日時を格納した新しいオブジェクトを作ることができます。Date オブジェクトにはさまざまなメソッドがあり、日付や時刻を簡単に表現できるようになっています。月は 0 から 11、曜日は 0 から 6 の数値となることに注意して、Date オブジェクトを使ってみてくださいね。

最後まで読んでいただき、ありがとうございます。この記事をシェアしてくれると嬉しいです！

メンバー登録で Pyxofy がもっと便利にもっと楽しく！詳しくはこちらをご覧ください。

こちらもチェック！Twitter @pyxofy・LinkedIn・Mastodon・Facebook

関連記事