【JavaScript】Dateオブジェクトで日付や時間を取得する!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2022年11月13日に投稿されました。)

JavaScriptで日付や時間を取得する方法としてDateオブジェクトがあります。

Dateオブジェクトとは、日付や時間を取得するメソッドが入ったデータの集まりになります。

さまざまメソッドが入っているため自分の目的に合わせて日付や時間を取得することができます。

また、Dateオブジェクトで取得した日付や時間から足したり引いたりして計算した後の値を取得することもできます。

日付を使用してプログラムを制御することもあるので、もし、日付を使用したい場合は、Dateオブジェクトで取得するようにしましょう。

今回はJavaScriptのDateオブジェクトで日付や時間を取得する方法について紹介していきます。

この記事はこんな方におすすめ
・現在の日付や時刻を取得したい場合
・日付や時刻のタイムスタンプを取得したい場合
・日付や時刻を設定して取得したい場合

Dateオブジェクトとは

Dateオブジェクトとは、日付や時間などを扱うことができるメソッドが格納されたデータの集まりになります

日付や時間などを扱うことができるメソッドが格納されていることから、メソッドを呼び出すだけで時間や日付を取得することができます。

そもそも、オブジェクト型とはさまざまな値をデータとして格納できる一つの大枠みたいなものになります。

もし、オブジェクト型について詳しく知りたい場合は下記の記事をご参考ください。

また、Dateオブジェクトで取得した時間や日付を計算して取得することも可能です。

Dateオブジェクトの書き方

Dateオブジェクトの書き方は下記のようになります。

変数の値に「new Date();」と指定することで、Dateオブジェクトを生成することができます。

そして、作成したDateオブジェクトの変数に対してメソッドを呼び出すと、日付や時間を取得することが可能になります。

Dateオブジェクトで日付や時間を取得するサンプルコード

Dateオブジェクトで日付や時間を取得するサンプルコードについてご紹介します。

ここでは下記の5つのパターンでDateオブジェクトを使用します。

  1. 西暦を取得する場合
  2. 月を取得する場合
  3. 日を取得する場合
  4. 曜日を取得する場合
  5. 時刻取得する場合

西暦を取得する場合

Dateオブジェクトで西暦を取得する場合は下記のメソッドを使用します。

  1. getFullYear()

getFullYear()は西暦を4桁で取得するメソッドになります。

⚫︎ Main.js

実行結果

Dateオブジェクトで西暦を取得した結果

getFullYear()によって西暦を取得しています。

そのため、「2022年」が表示されています。

月を取得する場合

Dateオブジェクトで月を取得する場合下記のメソッドを使用します。

  1. getMonth()

getMonth()は月を数値で取得するメソッドになります。

しかし、1月は「0」で12月は「11」として返ってくるため、画面に表示する場合は1を加算する必要があります。

⚫︎ Main.js

実行結果

Dateオブジェクトで月を取得した結果

getMonth()によって月を取得しています。

getMonth()は「月-1」を取得することから、「10+1」で「11月」が表示されています。

日にちを取得する場合

Dateオブジェクトで日にちを取得する場合は下記のメソッドを使用します。

  1. getDate()

getDate()は日にちを数値で取得するメソッドになります。

こちらは、日にちの数値がそのまま返ってくるので、画面に表示する場合でもそのまま使用することができます。

⚫︎ Main.js

実行結果

Dateオブジェクトで日にちを取得した結果

getDate()によって日にちを取得しています。

そのため、「12日」が表示されています。

時刻を取得する場合

Dateオブジェクトで時刻を取得する場合は下記のメソッドを使用します。

  1. getHours()
  2. getMinutes()
  3. getSeconds()
  4. getMilliseconds()

getHours()は時間を数値で取得するメソッドであり、getMinutes()は分数を数値で取得するメソッドとなります。

そして、getSeconds()は秒数を数値で取得するメソッドであり、getMilliseconds()はミリ秒数を数値で取得するメソッドとなります。

どのメソッドもそのまま使用しても問題ありませんが、getHours()は24時の場合「0」が返ってくるので注意が必要です。

⚫︎ Main.js

実行結果

Dateオブジェクトで時刻を取得した結果

getHours()によって時間を、getMinutes()によって分を、getSeconds()よって秒を、getMilliseconds()によってミリ秒を取得しています。

そのため、「15時」、「1分」、「55秒」、「796ミリ秒」が表示されています。

曜日を取得する場合

Dateオブジェクトで曜日を取得する場合は下記のメソッドを使用します。

  1. getDay()

getDay()は曜日を数値で取得するメソッドになります。

数値で取得するため画面に表示する場合はそのまま使用することができません。

そのため、返された数値を日本語の曜日に変換する必要があります。

数値は0から6の整数値が返されるようになり、「0」が「日曜日」で「6」が「土曜日」に対応します。

⚫︎ Main.js

実行結果

Dateオブジェクトで曜日を取得した結果

getDay()によって曜日を取得しています。

getDay()は数値を返すため、曜日の配列を作成し、取り出すためのインデックスとして使用しています。

そのため、「土曜日」が表示されています。

時刻の表記を日本式で取得する場合

時刻の表記を日本式で取得する場合は、下記のメソッドを使用します。

そのため、ここでは時刻の表記を日本式で取得する場合についてご紹介します。

日付の文字列を日本式で取得する場合

日付の文字列を日本式で取得する場合は、下記のメソッドを使用します。

  1. toLocaleString()

toLocaleString()は日付を文字列で取得するメソッドになります。

取得する文字列のフォーマットは「年/ 月/ 日 時: 分: 秒」となります。

⚫︎ Main.js

実行結果

Dateオブジェクトで日付の文字列を日本式で取得した結果

toLocaleString()によって日付の文字列を日本式で取得しています。

そのため、「2022/11/12 15:03:01」が表示されています。

日にちの文字列を日本式で取得する場合

日にちの文字列を日本式で取得する場合は、下記のメソッドを使用します。

  1. toLocaleDateString()

toLocaleDateString()は日にちを文字列で取得するメソッドになります。

取得する文字列のフォーマットは「年/ 月/ 日」となります。

⚫︎ Main.js

実行結果

Dateオブジェクトで日にちの文字列を日本式で取得した結果

toLocaleDateString()によって日にちの文字列を日本式で取得しています。

そのため、「2022/11/13」が表示されています。

時間の文字列を日本式で取得する場合

時間の文字列を日本式で取得する場合は、下記のメソッドを使用します。

  1. toLocaleTimeString()

toLocaleTimeString()は、時間を文字列で取得するメソッドとなります。

取得する文字列のフォーマットは「時: 分: 秒」となります。

⚫︎ Main.js

実行結果

Dateオブジェクトで時間の文字列を日本式で取得した結果

toLocaleTimeString()によって時間の文字列を日本式で取得しています。

そのため、「0:35:49」が表示されています。

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

日付の文字列からタイムスタンプを取得する場合は、下記のメソッドを使用します。

  1. Date.parse()

Date.parse()とは日付文字列からタイムスタンプの値を取得するメソッドになります。

そもそもタイムスタンプとは「1970年1月1日0時0分0秒」から現在までの経過時間となります。

ミリ秒で表示されており、プログラムで時間の計算を行う場合はタイムスタンプを基準として処理が行われます。

⚫︎ Main.js

実行結果

Dateオブジェクトで日付の文字列からタイムスタンプを取得した結果

Date.parse()によって日付文字列からタイムスタンプの値を取得しています。

そのため、「1592578800000」と「1655650800000」が表示されています。

Dateオブジェクトで別の日付を設定して取得する場合

Dateオブジェクトで別の日付を設定して取得するには下記の2つの方法があります。

  1. 引数で設定する場合
  2. メソッドで設定する場合

それぞれの方法についてご紹介します。

引数で設定する場合

引数で設定する場合は、下記のようにDateオブジェクトを作成します。

  1. const 変数名 = new Date(‘日付文字列’);
  2. const 変数名 = new Date(‘タイムスタンプ’);

作成したDateオブジェクトの引数に日付文字列を指定することで、別の日付を取得することができます。

また、日付の文字列だけでなく、タイムスタンプも指定することができます。

⚫︎ Main.js

実行結果

Dateオブジェクトで別の日付を設定して取得した結果(引数を指定した場合)

Dateオブジェクトに引数を指定することで、別の日付を設定して取得しています。

そのため、「Sun Feb 20 2022 20:19:50」と「Sun Nov 22 2020 19:00:00」が表示されています。

メソッドで設定する場合

メソッドで設定する場合は、下記のようなメソッドを使用します。

  1. setFullYear(‘yyyy’)
  2. setMonth(‘mm’)
  3. setDate(‘dd’)
  4. setHours(‘hh’)
  5. setMinutes(‘mm’)
  6. setSeconds(‘ms’)
  7. setMilliseconds()

setXXX()とは、年や月、日、時、分、秒、ミリ秒を指定できるメソッドになります。

⚫︎ Main.js

実行結果

Dateオブジェクトで別の日付を設定して取得した結果(setXXX()を使用した場合)

DsetXXX()メソッドを使用することで、別の日付を設定して取得しています。

そのため「2022/11/13 0:40:34」から「2000/12/24 11:10:10」に変わって表示されています。

現在までの経過時間を取得する場合

現在までの経過時間を取得する場合は、下記のメソッドを使用します。

  1. Date.now()

Date.now()とは基準時から現在までの経過時間をミリ秒(タイムスタンプ)で取得するメソッドになります。

基準時は「1970年1月1日0時0分0秒」となります。

⚫︎ Main.js

実行結果

Dateオブジェクトで現在までの経過時間を取得した結果

Date.now()によって現在までの経過時間を取得しています。

そのため「1688267774550」が表示されています。

日付や時間を計算する場合

Dateオブジェクトで取得した日付や時間は計算することが可能です。

例えば、取得した日付から1ヶ月後の日付を取得できたり、時刻と時刻の差分を取得することができたります。

そのため、ここでは日付や時間を計算する場合についてご紹介します。

日付や時間の足し算を行う場合

日付や時間の足し算を行う場合は、「+演算子」を使用します。

足し算を行うことで、指定した日付から「数ヶ月後や数時間後の日付」を取得することができます。

⚫︎ Main.js

実行結果

Dateオブジェクトで日付や時間の足し算を行った結果

+演算子によってDateオブジェクトで取得した日付や時間を計算しています。

そのため、1時間後の「2022/11/13 1:43:35」と3ヶ月後の「2022/2/13 1:43:35」が表示されています。

日付や時間の引き算を行う場合

日付や時間の引き算を行う場合は、「-演算子」を使用します。

引き算を行うことで、取得した日付から「数ヶ月前や数時間前の日付」を取得できたり、「指定した日付Aから指定した日付Bの差分」を取得することができます。

⚫︎ Main.js

実行結果

Dateオブジェクトで日付や時間の引き算を行った結果

-演算子によってDateオブジェクトで取得した日付や時間を計算しています。

そのため、2時間前の「2022/11/12 22:44:21」と3ヶ月前の「2022/8/12 22:44:21」、2022年11月12日と2020年11月12日の差分である「730日」が表示されています。

まとめ

⚫︎ Dateオブジェクトとは、日付や時間などを扱うことができるメソッドが格納されたデータの集まりである

⚫︎ Dateオブジェクトで西暦を取得するにはgetFullYear()を使用する

⚫︎ Dateオブジェクトで月を取得する場にはgetMonth()を使用する

⚫︎ Dateオブジェクトで日にちを取得するにはgetDate()を使用する

⚫︎ Dateオブジェクトで時刻を取得するにはgetHours()やgetMinutes()、getSeconds()、getMillisecond()を使用する

⚫︎ Dateオブジェクトで曜日を取得するにはgetDay()を使用する

⚫︎ Dateオブジェクトで日付の文字列を日本式で取得するにはtoLocaleString()を使用する

⚫︎ Dateオブジェクトで日にちの文字列を日本式で取得するにはtoLocaleDateString()を使用する

⚫︎ Dateオブジェクトで時間の文字列を日本式で取得するにはtoLocaleTimeString()を使用する

⚫︎ 日付の文字列からタイムスタンプを取得するにはDate.parse()を使用する

⚫︎ Dateオブジェクトで別の日付を設定するには以下の2つの方法がある
・引数に指定する
・setXXX()を使用する

⚫︎ 現在までの経過時間を取得するにはDate.now()を使用する

⚫︎ Dateオブジェクトで取得した日付や時間は、足し算や引き算を使って計算することができる

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA