JavaScriptで日付や時間に関するメソッドを扱えるようになりましょう。
Date()メソッドの基本的な使い方
現在日時を取得する
Date()メソッドを定数にいれてあげることで、現在日時を取得できます。
'use strict';
{
const now = new Date();
console.log(now);//Sat Jan 16 2021 12:40:56 GMT+0900 (日本標準時)
}そうすると、曜日 月 日 年 時間の順番で現在の時刻と日付を取得することができます。
指定した日時を取得する
console.log(new Date('Sat Jan 16 2021 12:40:56'));
//Sat Jan 16 2021 12:40:56 GMT+0900 (日本標準時)
console.log(new Date('November 12, 2020'));
//Thu Nov 12 2020 00:00:00 GMT+0900 (日本標準時)
console.log(new Date(2020, 1, 2, 3, 4, 5));//
Sun Feb 02 2020 03:04:05 GMT+0900 (日本標準時)
上のように、Date()の中に日付をいれるとそれが表示されます。
年、月、日、時間、分、秒の順番で指定します。
注意点としては、月は0ベースなのでプラス1される点です。つまり1月なら0をいれます。
年月日、曜日、時間を取得する
'use strict';
{
const future = new Date(2077, 1, 2, 3, 4, 5);
console.log(future);//Wed Feb 02 2077 03:04:05 GMT+0900 (日本標準時)
//年月日を取得する
console.log(future.getFullYear());//2077
console.log(future.getMonth());//1 (1月:0, 2月:1,...12月:11)
console.log(future.getDate());//2 日付
//曜日を取得する
console.log(future.getDay());//2
//0-6(Sun:0, Mon:1, Tue:2, Web:3, Thu:4, Fri:5, Sat:6)
//時間を取得する
console.log(future.getHours());//3
console.log(future.getMinutes());//4
console.log(future.getSeconds());//5
console.log(future.getMillseconds());//0-999で表示
}それぞれ日時の分解して要素として取得したい場合、次のメソッドを定数の後に続けることで使えるようになります。
- getFullYear()→年を取得
- getMonth()→月を取得
- getDate()→日付を取得
- getDay()→曜日を取得
- getHours()→時間を取得
- getMinutes()→分を取得
- getSeconds()→秒を取得
- getMilliseconds()→ミリ秒を取得
yearだけは、Fullが入ったgetFullYearを使いましょう。
getMonth()は、0ベースなので0が1月という店に注意しましょう。
getDate()で日付、getDay()で曜日という点注意しましょう。
getDay()のday(曜日)は0から始まり0は日曜日を意味します。
1ミリセカンドは1msのことで1000分の1秒です。(1ms = 1/1000 second)
注意点としては、実行環境に依存した数字を返している点です。
つまり、時差があるところから同時に時刻を取得するとぐちゃぐちゃになってしまいます。
そのため、共通の時間を取得できる命令も用意されています。
UNIX時間
console.log(new Date(0));
//Thu Jan 01 1970 09:00:00 GMT+0900 (日本標準時)
UNIX時間（ユニックスじかん）は協定世界時 (UTC) での1970年1月1日午前0時0分0秒からどれだけ経過したかをミリ秒でカウントした時間を表示します。。そのため、どこにいても同じ時間を示すことができます。
実行環境を問わずグローバルに時間を取得しても統一された時間を取得することができます。
UNIX時間から計算する
UNIX時間の4日後を計算してみましょう。
console.log(new Date(4 * 24 * 60 * 60 * 1000));
//Mon Jan 05 1970 09:00:00 GMT+0900 (日本標準時)
console.log(4 * 24 * 60 * 60 * 1000);
//345600000 - 上の日時をあらわすタイムスタンプ
- 24は時間
- 60は分
- 60は秒
- 1000はミリ秒
をすべてかけ合わせることで1日が表現できます。
今回の場合4日なので4をかけると、UNIX時間から4日後を計算できます。
それが「345600000」というタイムスタンプという値で入手できます。
タイムスタンプを入手すると、その時刻をUNIX時間で表示できるのでとても便利です。
タイムスタンプを取得する
//タイムスタンプを取得する
console.log(future.getTime());//3379428245000 タイムスタンプで取得。
//getTime()で入手したタイムスタンプをDateにいれるとその時刻が返される。
//タイムスタンプでUNIX時間を取得する
console.log(new Date(3379428245000));
//Tue Feb 02 2077 03:04:05 GMT+0900 (日本標準時)
//現在時刻のタイムスタンプがほしい場合
const now = new Date();
console.log(Date.now());//1610770779972
あとから日時を設定・変更する方法
あとから日付を調整したい場合は、setを使います。
具体的には下の通りです。
'use strict';
{
const d = new Date(2021, 0); //2021/1/1 00:00:00
d.setHours(11, 40, 20) //2021/1/1 11:40:20
console.log(d);
}存在しない日付は自動調整される
11月31日など存在しない日付をsetDateで指定しても、自動で存在する日付に変えてくれる。
たとえば、11月31日ならsetDate(31)とすると、12月は1日になります。
'use strict';
{
const d = new Date(2021, 10); //2021/11/1 00:00:00
d.setHours(11, 40, 20) //2021/11/1 11:40:20
d.setDate(31); //2021/12/1 11:40:20
console.log(d);
}日付を計算する
getDate()で今の日付を得て、足し算引き算で日付を調整できます。
定数.setDate(定数.getDate() + 日数);で 今の日付に日数で指定した日付を足した日付になります。
'use strict';
{
const d = new Date(2021, 10); //2021/11/1 00:00:00
d.setHours(11, 40, 20) //2021/11/1 11:40:20
d.setDate(31); //2021/12/1 11:40:20
console.log(d);
d.setDate(d.getDate() + 4); //getDateでその日を取得しそれに4日を足す
console.log(d); //2021/12/5 11:40:20
}日付や時間の表示を整える方法
手動で設定する
const now = new Date();
const day = `${now.getDate()}`.padStart(2, 0);
const month = `${now.getMonth() + 1}`.padStart(2, 0);
const year = now.getFullYear();
const hour = `${now.getHours()}`.padStart(2, 0);
const min = `${now.getMinutes()}`.padStart(2, 0);
// 「day/month/year, 00:00」 という形式で表示をしたい
console.log(`${day}/${month}/${year}, ${hour}:${min}`);
//16/01/2021, 14:37
// 「年月日 00:00」 という形式で表示をしたい
console.log(`${year}年${month}月${day}日 ${hour}:${min}`);
//2021年01月16日 14:37
padStart()を使って先頭に0をつけましょう。
そして、padStart()はstringである必要があるので、テンプレートリテラルを使います。
Intl.DateTimeFormat().format()を使う
{
const now = new Date();
// optionsの設定
const options1 = {
hour: 'numeric',
minute: 'numeric',
day: 'numeric',
month: '2-digit', //mumeric, long, 2-digit
year: 'numeric',
weekday: 'short', //short,long,
};
const options2 = {
hour: 'numeric',
minute: 'numeric',
day: 'numeric',
month: 'long', //mumeric, long, 2-digit
year: 'numeric',
weekday: 'long', //short,long,
};
//yyyy/mm/dd (a)
new Intl.DateTimeFormat('ja-JP').format(now);
console.log(new Intl.DateTimeFormat('ja-JP', options1).format(now));
//2021/01/16(土) 19:42
// 年月日 曜日
console.log(new Intl.DateTimeFormat('ja-JP', options2).format(now));
//2021年1月16日土曜日 19:42
//令和年(R3)
console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(now));
//R3/1/16
}
Intl.DateTimeFormat()は、()の国に合わせた表示ができるメソッドです。
たとえば、アメリカなら(‘en-US’)となります。
iso language code tableで他の国のコードも確認できます。
経過した日付を日・時間で返す関数の作り方
const future = new Date(2077, 1, 2, 3, 4, 5);
console.log(Number(future)); //3379428245000 ミリ秒
//経過した日付を日で返す関数
const calcDaysPassed = (date1, date2) =>
Math.abs(date2 - date1) / (1000 * 60 * 60 * 24);
//経過した日付を時間で返す関数
const calcHoursPassed = (date1, date2) =>
Math.round(Math.abs(date2 - date1) / (1000 * 60 * 60));
//日付を指定
const days = calcDaysPassed(new Date(2077, 1, 1), new Date(2077, 1, 11));
const hours = calcHoursPassed(
new Date(2077, 1, 1, 10, 10),
new Date(2077, 1, 11, 10, 23)
);
//呼び出す
console.log(days); //10 - 日
console.log(hours); //240 - 時間
Math.abs()をつけることで絶対値を返すことができるので、どっちの日付が後でもマイナスの値が返ってくることがなくなって便利です。
時間も合わせて計算したい場合は、小数点以下が大量にでてくるので、Math.round()で小数点以下を整理するといいでしょう。
分で返したい場合は、時間にしている*60を取り除きます。
もしより複雑な日付処理をしたい場合は、moment.jsのようなライブラリを使うといいでしょう。
今日、昨日、何日前と表示する関数
{
//日付を表示する関数
const formatMovementDate = function (date) {
//経過した日付を日で返す関数
const calcDaysPassed = (date1, date2) =>
Math.round(Math.abs(date2 - date1) / (1000 * 60 * 60 * 24));
//日付を定義
const daysPassed = calcDaysPassed(new Date('2022-01-20T08:00:00.539+09:00'), date);
console.log(daysPassed);//ミリ秒で時間を取得
//表示方法を設定
//returnするとそこで処理が終了するので、その下が処理されない。よって下のように書きます。
//else{}も実は不要ですが、わかりやすくするために記述。
if(daysPassed === 0) return '今日';
if(daysPassed === 1) return '昨日';
if(daysPassed <= 7) return `${daysPassed} 日前`;
else {
const day = `${date.getDate()}`.padStart(2, 0);
const month = `${date.getMonth() + 1}`.padStart(2, 0);
const year = date.getFullYear();
// day/month/yearの表示をしたい
return `${day}/${month}/${year}`;
}
};
console.log(formatMovementDate(new Date('2022-01-20T08:00:00.539+09:00')));
//今日
console.log(formatMovementDate(new Date('2022-01-19T08:00:00.539+09:00')));
//昨日
console.log(formatMovementDate(new Date('2022-01-18T08:00:00.539+09:00')));
//2 日前
console.log(formatMovementDate(new Date('2022-01-17T08:00:00.539+09:00')));
//3 日前
console.log(formatMovementDate(new Date('2022-01-01T08:00:00.539+09:00')));
//01/01/2022
}returnするとそこで処理が終了するので、その下が処理されない。よって下のように書きます。
なお、実際に使う場合は、現在時刻を取得して、オブジェクトなどから時間を取得します。