.net column
.NET開発者のためのブログメディア

JavaScriptでの日付の処理|取得・設定・表示の方法を網羅

2020年06月04日


SE
JavaScriptでの日付の処理は、どのように行うのでしょうか?

PM
フォーマットは存在しないので、詳しい手順をご紹介していきましょう。

Javascriptでの日付の処理

この記事ではJavascriptでの日付・時刻処理の方法である、Dateオブジェクトについて解説します。フォーマット通りに日付や時刻を取り出すにはどうすればいいのか解説していきます。

Dateオブジェクト

new Date()

と、すると現在の日付・時刻が取得できます。

const date = new Date();

で、dateに現在の日付・時刻が代入されます。

JavaScriptでは、日付も時刻も、Dateオブジェクトで一元管理します。

フォーマットは存在しない

実は、JavaScriptでは日付・時刻処理のフォーマットは存在しません。

例えば、Pythonで日付・時刻処理を行うdatetimeオブジェクトから現在の日付・時刻を取り出す方法は

>>> import datetime
>>> now = datetime.datetime.now()
>>> now.strftime(“%Y/%m/%d %H:%M:%S”)

ですが、この%Yや%Hなどの「フォーマット文字列」はJavaScriptには存在しません。

フォーマットが存在しない代わりに、どうしたらよいのでしょうか?

それは、一つひとつメソッドを使って情報を取り出すのです。以下では、その取り出し方を解説していきます。見方を変えれば一つひとつのメソッドが、JavaScriptでの日付・時刻処理のフォーマットと言えるかもしれません。

西暦を取得する

西暦を取得するには
getFullYear()
を使います。4桁の数値で返ってきます。

const date = new Date();
const year = date.getFullYear();

以上がJavaScriptで西暦を取得するフォーマットです。

日付を取得する

月を取得するには
getMonth()
を使います。ただし数値で返ってきます。

数値と対応する月は以下です。
0→1月
1→2月
2→3月
3→4月
4→5月
5→6月
6→7月
7→8月
8→9月
9→10月
10→11月
11→12月

日を取得するには
getDate()
を、使います。数値で返ってきます。

const date = new Date();
const month = date.getMonth() + 1; //月が代入される
const day = date.getDate()

以上がJavaScriptで日付を取得するフォーマットです。

時刻を取得する

時間を取得するには
getHours()
を使います。0~23です。24時は0時になるので注意しましょう。

分を取得するには
getMiniutes()
を使います。

秒を取得するには
getSeconds()
を使います。

ミリ秒を取得するには
getMilliseconds()を使います。

const date = new Date();
const hour = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
const milliseconds = date.getMilliseconds();

以上がJavaScriptで時刻を取得するフォーマットです。

曜日を取得する

曜日を取得するには
getDay()
を使います。

返ってくる数値と曜日の関係は
0→日曜日
1→月曜日
2→火曜日
3→水曜日
4→木曜日
5→金曜日
6→土曜日
です。

実際には、配列を用意して表示するのがいいでしょう。例えば、

const date = new Date();
const day = date.getDay();
const dlist = [“日”,”月”,”火”,”水”,”木”,”金”,”土”];
const result = dlist[day]

とすれば、resultに日~土の文字列が代入されます。

以上がJavaScriptで曜日を取得するフォーマットです。

日本式表記の日付・時刻を取得する

以上の方法で日付と時刻は取得できるのですが、もっとシンプルに取得する方法があります。

それが
toLocaleString()
です。

そのブラウザの環境に合わせて、フォーマット化された日付・時刻を返します。

const date = new Date();
const locale = date.toLocaleString();

とすると、例えば、日本語環境なら
2020/5/22 8:14:00
英語環境なら
5/22/2020 8:14:00 AM
という文字列が取得できます。

日付だけを取得したいときは
toLocaleDateString()
時刻だけを取得したいときは
toLocaleTimeString()
を使います。

Dateインスタンスに値を設定する

コンストラクタで設定する

こちらは以下のような方法があります。

const date1 = new Date(“2020/05/22 08:21:00”);
const date2 = new Date(“Fri May 22 2020 08:21:00”);
const date3 = new Date(2020,4,22,8,21,00);

toLocaleString()で返ってくる書式で設定する方式と、それぞれ数値で指定する方式です。数値で指定するときは、月は1引いてください。5月は4になります。

メソッドで設定する

以下のメソッドでも設定できます。

setFullYear(西暦)
setMonth(月) ※0~11
setDate(日)
setHours(時) ※0~23
setMinutes(分)
setSeconds(秒)
setMilliseconds(ミリ秒)

日付・時刻を加算・減算する

これは簡単にできます。

たとえば60日後を知りたいとき

const date = new Date();
date.setDate(date.getDate() + 60);

とすれば良いだけです。

月をまたぐのではないか、と思うかもしれませんが、それはDateオブジェクトが内部的にきちんと処理してくれます。細かいことを気にかける必要はありません。

タイムスタンプ

コンピュータの世界では「タイムスタンプ」というものがあります。これは協定世界時での1970年1月1日0時0分0秒から現在までの経過時間のことです。単位はミリ秒です。

現在時刻のタイムスタンプ値を取得するには
now()
を使います。

const num = Date.now();
でnumにタイムスタンプ値が代入されます。

ある日付・時刻のタイムスタンプ値を得るには
parse()
を使います。

const num = Date.parse(“2020/05/22”);
などと使います。

日付・時刻の差分を計算する

2つのDateオブジェクトの差分を比較するのは、少し面倒です。
タイムスタンプ値で比較しなければないからです。

例えば、
const date1 = new Date(“2020/05/01”);
const date2 = new Date(“2020/05/22”);
とあったとして、date1からdate2への経過時間を求めるには

date2.getTime() – date1.getTime()

と、します。
結果はミリ秒単位で返ってきます。

たとえばこの結果を秒単位に直すなら
1000
で割りますし、時間単位に直すなら
1000*60*60
で割ります。日単位に直すなら
1000*60*60*24
で割ります。

月単位、年単位に直すことはできません。その理由は月と年の日数は変動があるためです。

SE
難しそうなイメージがありましたが、意外と簡単にできるのですね。

PM
そうですね。難しい部分はDateオブジェクトがになってくれるので、上手に使いこなしていきましょう!

Dateオブジェクトを使いこなそう

以上、JavaScriptで日付・時刻を扱うDateオブジェクトについて解説してきました。

ややこしい部分もありますが、それでもDateオブジェクトが相当部分吸収してくれるので、簡単に扱えます。

Dateオブジェクトを使いこなして、日付・時刻処理をやっていきましょう。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags