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

JavaScripの日付・時間取得の方法6つ|メソッドの使い方も紹介

 
JavaScripの日付・時間取得の方法6つ|メソッドの使い方も紹介
基本情報技術者試験の試験対策はこちら>>
SE
JavaScriptでの日付の処理は、どのように行うのでしょうか?
PM
フォーマットは存在しないので、詳しい手順をご紹介していきましょう。

JavaScriptで日付・時間取得を行うには


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

Dateオブジェクト

と、すると現在の日付・時刻が取得できます。
で、dateに現在の日付・時刻が代入されます。
JavaScriptでは、日付も時刻も、Dateオブジェクトで一元管理します。

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

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

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

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

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

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

JavaScriptにおける日付・時間取得方法6つ

JavaScriptでは

に対して様々なメソッドを使うことで、それぞれ異なる結果の時間取得をすることができます。
以下に6つの時間取得の方法を記載しますので、覚えていきましょう。

1:西暦を取得する

西暦を取得するには

を使います。4桁の数値で返ってきます。

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

2:日付を取得する

月を取得するには

を使います。ただし数値で返ってきます。

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

日を取得するには

を、使います。数値で返ってきます。

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

3:時刻を取得する

時間を取得するには

を使います。0~23です。24時は0時になるので注意しましょう。

分を取得するには

を使います。

秒を取得するには

を使います。

ミリ秒を取得するには

を使います。

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

4:曜日を取得する

曜日を取得するには

を使います。

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

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

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

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

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

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

それが

です。

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

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

日付だけを取得したいときは

時刻だけを取得したいときは

を使います。

6:世界標準時(UTC)を取得する

世界標準時の時間取得をしたいときは、

を使います。

は、使用端末のタイムゾーンで処理されるため、UTCの時間取得するには、上記の特別なメソッドを使う必要があります。

こうすることで、世界標準時(UTC)を取得することができます。

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

今まで

と記載していましたが、これを使用すると端末の現時刻になってしまいます。

インスタンスに値を設定することで自由な時刻のDataインスタンスを作ることができます。

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

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

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

メソッドで設定する

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

Dateオブジェクトにおける主要メソッドの使い方3つ

Dateオブジェクトは様々なメソッドが用意されています。その中でも以下3つの主要なメソッドを紹介します。

「表示する」「経過時間を取得する」「指定の日付にする」の3つを使いこなして日付取得や時間取得を行いましょう。

1:日付をtoString()で文字列に変換

時間取得のDateオブジェクトを表す文字列にするメソッドがあります。
それが

です。

これを実行することで、「Tue Aug 19 1975 23:15:30 GMT+0900 (日本標準時)」となります。

ただ日付がテキスト値で出力されるときや、文字列に強制変換されるときは、記述しなくても自動的に呼び出されます。

と、

同じ挙動になるということです。

2:経過ミリ秒をgetTime()で取得

「そのDateは数値にしたらいくつなのか?」これを取得するためのメソッドがあります。
それが

です。

数値としては「1970 年 1 月 1 日 00:00:00」から経過した「ミリ秒」が返ってきます。

3:文字列をparse()で日付に変換

日付用として用意した文字列を実際にDate型にするにはどうしたらいいでしょう。それを解決するためのメソッドがあります。

です。

これを使用することで指定した文字列を日付として認識し、ミリ秒を返します。
これにミリ秒をDate型にするメソッド「setTime」を使って日付に変換することができます。

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

これは簡単にできます。

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

とすれば良いだけです。

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

タイムスタンプ値を取得する方法

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

現在時刻のタイムスタンプ値を取得するには

を使います。

でnumにタイムスタンプ値が代入されます。

ある日付・時刻のタイムスタンプ値を得るには

を使います。

などと使います。

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

JavaScriptのDate型には差分を計算するメソッドはありません。しかし今までに記載している機能を使いこなすことで差分取得をすることができます。

それは差分計算するAとBの「指定の時期から何ミリ秒経過したか」を取得して、その差を計算です。

実際にやってみましょう。

これでミリ秒の差分が取得できました。
これを欲しい単位にするために計算しましょう。

日付表示に「Datepicker」を使う方法

システムで日付を使用するには「カレンダーUI」が必要不可欠です。これはjQueryを使えば簡単に用意することができます。

まずjQueryUIの準備をします。

これでjQueryUIが使えるようになりました。

datepickerはテキストボックスのエレメントに

メソッドを設定すれば使うことができます。

このテキストボックスに対して、メソッドを設定します。

これでテキストボックスにdatepickerのカレンダーUIが搭載されました。

他にもオプションで「カレンダーの最初の曜日を変える」や「日付フォーマットを設定」することができますので、色々試してみてください。

Dateオブジェクトを比較する方法

プログラムする上で、Dateオブジェクトのどちらが大きい(未来の日付)のか、など比較することもあるでしょう。Dateオブジェクトを比較する方法が2種類ありますので、そちらを紹介します。

比較演算子を使用する日付の比較

Date型は直接比較演算子で比較をすることができます。

結果「true」となり、比較ができていることがわかります。

経過ミリ秒を使用する日付の比較

で経過ミリ秒を取得して、数値として比較することもできます。
結果「true」となり、比較ができています。

SE
難しそうなイメージがありましたが、意外と簡単にできるのですね。
PM
そうですね。難しい部分はDateオブジェクトがになってくれるので、上手に使いこなしていきましょう!

JavaScriptにおける日付・時間取得方法を知ろう

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

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

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


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

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

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

Search

Popular

reccomended

Categories

Tags