JavaScriptで日付や時間の取得・計算をする方法・Dateオブジェクトやタイムスタンプの使い方

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptで日付や時間の取得・計算をする方法・Dateオブジェクトやタイムスタンプの使い方について解説していきます。

1 日付や時間の取得・操作をするDateオブジェクトの使い方
2 タイムスタンプを使った、日付・時間の操作や計算をする
3 JavaScript書籍 Ver. 中級-上級者向け
4 JavaScript書籍 Ver. 初級者向け
5 プログラミング学習・エンジニア転職関連の情報
6 Twitterやってます！Follow Me！
7 最近の投稿

日付や時間の取得・操作をするDateオブジェクトの使い方

Dateインスタンスを作成する

JavaScript で日付や時間操作をするのなら、基本的にはDateインスタンスを作成する必要があります。

// JavaScript で日付や時間操作をするのなら、まずは、Dateインスタンスを作成する
let date = new Date();

console.log('date:', date);
// date: Fri Jan 06 2023 10:16:00 GMT+0900 (日本標準時)

西暦を取得する

// 西暦を取得する
const year = new Date().getFullYear();
console.log('year:', year);
// year: 2023

日付を取得する(月と日を取得する)

日付を取得するためには、次のように月と日をそれぞれ取得します。

ちなみにgetMonth()は、0-11の数字のいずれかを返すので注意が必要です。

1月が0扱いなので、常に +1して使用します。

// < 日付を取得する >

let date = new Date();

// 月を取得する
const month = date.getMonth();
console.log('month:', month);
// month: 0

// 日を取得する
const today = date.getDate();
console.log('today:', today);
// today: 15

console.log(`今日は、${month + 1}月${today}日です！`);
// 今日は、1月15日です！

時間を取得する

時間を取得するには、次のように時・分・秒をそれぞれ取得します。

getHours()は、0-23の数字のいずれかを返す。
- 24時が、0扱いなので注意！
getMinutes()は、0-59の数字のいずれかを返す。
- 60分が、0扱いなので注意！
getSeconds()は、0-59の数字のいずれかを返す。
- 60秒が、0扱いなので注意！

// < 時間を取得する >

let date = new Date();

const hour = date.getHours();
console.log('hour:', hour);
// hour: 13

const minutes = date.getMinutes();
console.log('minutes:', minutes);
// minutes: 43


const seconds = date.getSeconds();
console.log('seconds:', seconds);
// seconds: 51

const ms = date.getMilliseconds();
console.log('ms:', ms);
// ms: 377

console.log(`現在時刻は、${hour}時${minutes}分${seconds}秒です！`);
// 現在時刻は、13時43分51秒です！

午前と午後の判定をする

// 午前と午後の判定をする

let judgment = '';

let hour = new Date().getHours();

if (hour <= 12) {
    judgment = '午前';
} else {
    judgment = '午後';
    hour = hour - 12;
}

console.log(`現在は、${judgment} ${hour}です！`);

曜日を取得する

// 曜日を取得する
const dayNum = new Date().getDay();
console.log('dayNum:', dayNum);
// dayNum: 5

const dayofweek = [ '日', '月', '火', '水', '木', '金', '土' ];

console.log(`今日は、${dayofweek[dayNum]}曜日です！`);

Localeの日時を取得する(利用者の言語環境にあわせた時刻表示をする)

利用者の言語環境にあわせた時刻表示が得られるメソッドたちが Dateクラスには用意されています。

多言語の日付時刻表示をしたいときに、役立ちます！

date = new Date();

// Localeの日付を取得する => 利用者の言語環境にあわせた時刻表示が得られる
const locale = date.toLocaleString();
const localeDate = date.toLocaleDateString();
const localeTime = date.toLocaleTimeString();

console.log('locale:', locale);             // locale: 2023/1/6 19:38:07
console.log('localeDate:', localeDate);     // localeDate: 2023/1/6
console.log('localeTime:', localeTime);     // localeTime: 19:38:07

タイムスタンプを使った、日付・時間の操作や計算をする

日付文字列からタイムスタンプを取得する

Date.parse(日時文字列)を日付文字列からタイムスタンプを取得することができます。

逆に、new Date(タイムスタンプ)でタイムスタンプから日付文字列を取得することもできます。

// 1. Date.parse(日時文字列); => 日付文字列からタイムスタンプを取得する
const timestanp_1 = Date.parse('2023/01/06');
console.log({timestanp_1});

// 2. new Date(タイムスタンプ); => タイムスタンプから日時文字列を取得する
const toDate_From_timestanp_1 = new Date(timestanp_1);
console.log({toDate_From_timestanp_1});
// {toDate_From_timestanp_1: Fri Jan 06 2023 00:00:00 GMT+0900 (日本標準時)}

const timestanp_2 = Date.parse(2023, 1, 6);
console.log({timestanp_2});

const toDate_From_timestanp_2 = new Date(timestanp_2);
console.log({toDate_From_timestanp_2});
// {toDate_From_timestanp_2: Sun Jan 01 2023 09:00:00 GMT+0900 (日本標準時)}

現在日時をタイムスタンプで取得する

// 2. 現在日時をタイムスタンプで取得する => Date.now()
const now_timestanp = Date.now();

console.log({now_timestanp});
// {now_timestanp: 1673759960346}

const toDate_From_timestanp = new Date(now_timestanp);
console.log({toDate_From_timestanp});
// {toDate_From_timestanp: Sun Jan 15 2023 14:19:20 GMT+0900 (日本標準時)}

指定した日付や時刻を取得する Ver. コンストラクターで設定する方法

// コンストラクターで設定する方法

const date_1 = new Date('2023/02/22 12:00:00');

console.log({date_1});
// {date_1: Wed Feb 22 2023 12:00:00 GMT+0900 (日本標準時)}

const date_2 = new Date(2023, 5, 5, 18, 30);

console.log({date_2});
// {date_2: Mon Jun 05 2023 18:30:00 GMT+0900 (日本標準時)}

const timestanp_3 = Date.parse('2023/08/11');
const date_3 = new Date(timestanp_3);

console.log({date_3});
// {date_3: Fri Aug 11 2023 00:00:00 GMT+0900 (日本標準時)}

指定した日付や時刻を取得する Ver. メソッドで設定する方法

Set系のメソッドで日付・時刻をSetして取得する方法もあります。

const futureDate = new Date();

futureDate.setFullYear(2025);
futureDate.setMonth(0);
futureDate.setDate(12);
futureDate.setHours(12);
futureDate.setMinutes(30);
futureDate.setSeconds(50);

console.log(`未来の日時: ${futureDate}`);
// 未来の日時: Sun Jan 12 2025 12:30:50 GMT+0900 (日本標準時)

指定した日付の 1ヶ月前を取得する

const date = new Date('2023/08/11');

// 指定した日付の 1ヶ月前を設定する
date.setMonth(date.getMonth() - 1);
console.log(date.toLocaleDateString()); // 2023/7/11

指定した日付の100日後を取得する

const date = new Date('2023/08/11');

// 指定した日付の100日後を設定する
date.setDate(date.getDate() + 100 );
console.log(date.toLocaleDateString()); // 2023/10/19

2つの日時の計算をする Ver.日数の差分を取得する

日付や時刻を計算する場合は、タイムスタンプ(時刻の数値)を使って計算します。

Dataインスタンスで getTime()を使用するとタイムスタンプを取得することができます。

日数の差分を知りたい場合は「差分 / (24 * 60 * 60 * 1000) 」で計算します。

const dateA = new Date('2022/05/05');
const dateB = new Date('2022/04/05');

console.log({dateA});
console.log({dateB});

// タイムスタンプで差分を取得する
const diffMiSec = dateA.getTime() - dateB.getTime();
console.log({diffMiSec});

const diffDate = diffMiSec / (24 * 60 * 60 * 1000);

console.log(`2つの日付の差分は、${diffDate}日です`);
// 2つの日付の差分は、30日です

2つの日時の計算をする Ver.時間の差分を取得する

時間の差分を知りたい場合は「差分 / (60 * 60 * 1000) 」で計算します。

const dateC = new Date('2022/05/07 12:00:00');
const dateD = new Date('2022/05/05 12:00:00');

// タイムスタンプで差分を取得する
const diffMiSec2 = dateC.getTime() - dateD.getTime();

const diffHour = diffMiSec2 / (60 * 60 * 1000);

console.log(`2つの時間の差分は、${diffHour}時間です`);
// 2つの時間の差分は、48時間です

2つの日時の計算をする Ver.分の差分を取得する

分の差分を知りたい場合は「差分 / (60 * 1000) 」で計算します。

const dateE = new Date('2022/05/05 12:50:00');
const dateF = new Date('2022/05/05 12:00:00');

// タイムスタンプで差分を取得する
const diffMiSec3 = dateE.getTime() - dateF.getTime();

const diffMin = diffMiSec3 / (60 * 1000);

console.log(`2つの分の差分は、${diffMin}分です`);
// 2つの分の差分は、50分です