JavaScriptでの日付型の扱い方

はじめに

JavaScriptで日付型を扱う際に少しつまづいたので、日付型について調査して記事にしてみました。

JavaScriptでの時の表現について

JavaScriptでは、時刻をDateクラスのインスタンスで表現します。

UTC（Coordinated Universal Time、協定世界時）の1970年1月1日木曜日0時0分0秒を基準として、そこから何ミリ秒経過したかを測定することで時を表現しています。

Dateクラス

Dateクラスのインスタンスは、例えば以下のように作成することができます。

  const someDate = new Date();
  console.log(someDate.toLocaleString());
 

  "2023/1/23 15:25:02"
 

上記のように引数無しでDateを構築すると、現在時刻が得られます。
特定の時刻を指定したい場合、例えば2023年1月7日11時23分56秒であれば以下のようにします。

  const someDate = new Date(2023, 0 /*1月*/, 7, 11, 23, 56);
  console.log(someDate.toLocaleString());
 

  "2023/1/7 11:23:56"
 

Date型の引数に着目してください。2023, 1, 7, 11, 23, 56と続くかと思いきや、月だけ1ではなくなぜか0になっています。
これは、歴史的な理由により月だけ0から数えるという仕様になっているためです。
ですので、YYYY年MM月DD日HH時MM分SS秒を指定したい場合には、new Date(YYYY, MM - 1, DD, HH, MM, SS)とします。

Dateクラスの主なメソッド

toLocaleString

上記の例でも使っていたメソッドで、対応する時刻を文字列で返します。
第1引数にはlocaleを、第2引数にはoptionsを取ることができます。

  const someDate = new Date(2023, 0 /*1月*/, 7, 11, 23, 56);
  console.log(someDate.toLocaleString());
  console.log(someDate.toLocaleString("en"));
  console.log(someDate.toLocaleString("jp", {era:"short"}));
 

  "2023/1/7 11:23:56"
  "1/7/2023, 11:23:56 AM"
  "西暦2023/1/7 11:23:56"
 

引数に"en"を指定すると、英語圏でよく使われる月→日→年という順番になります。
また、第2引数には様々なオプションを指定することができます。
toLocaleStringメソッドについて、詳細は以下をご参照ください。

getFullYear, getMonth, getDate, ...

年月日や時刻を取得します。

  const someDate = new Date(2023, 0 /*1月*/, 7, 11, 23, 56);
  console.log(someDate.getFullYear());
  console.log(someDate.getMonth());
  console.log(someDate.getDate());
  console.log(someDate.getHours());
  console.log(someDate.getMinutes());
  console.log(someDate.getSeconds());
 

  2023
  0
  7
  11
  23
  56
 

ここでもやはり、月だけ0から始まることに注意してください。

Dateクラスの演算

最初に説明した通り、Dateクラスの実態はUTC1970年1月1日木曜日0時0分0秒からの経過ミリ秒ですので、そのまま四則演算や大小比較をすることができます。

  const a = new Date(2023, 0 /*1月*/, 7);
  const b = new Date(2023, 0 /*1月*/, 2);
  console.log(a - b);
  console.log(a < b);
 

  432000000
  false
 

aは2023/1/7、bは2023/1/2ですので、5日差です。
a-bの計算結果は432000000と表示されていますが、1日は 24×60×60×1,000=86,400,000ミリ秒 であり、432,000,000÷86,400,000=5日 となるので、aとbがちゃんと5日差と計算されています。

日付の取得について

日付から文字列を取得する

あるDate型の変数を「YYYY年MM月DD日」のような文字列に変換したい場合、上記のメソッドを用いて以下のようにします。

  const someDate = new Date(2023, 0 /*1月*/, 7, 11, 23, 56);
  console.log(someDate.getFullYear() + "年" + (someDate.getMonth() + 1) + "月" + someDate.getDate() + "日");
 

  "2023年1月7日"
 

しかし、上記のようにいちいちメソッドを呼び出すのは面倒ですし、月に+1をし忘れてしまう可能性もあります。
例えばPythonであればformat関数を用いてformat(someDate,'%Y年%m月%d日')とすることができるのですが、JavaScriptには標準ではformat関数に相当するものがありません。

date-fns

そこで、date-fnsというライブラリを使用します。
ターミナルで

 
  npm i date-fns
 

と入力してインストールし、以下のように使用します。

  import { format } from "date-fns";

  const someDate = new Date(2023, 0 /*1月*/, 7, 11, 23, 56);
  console.log(format(someDate, "YYYY年MM月DD日"));
 

  "2023年01月7日"
 

簡潔であるだけではなく、月に+1しなくても正しく表示される点に注目です。
非常に便利なライブラリですので、ぜひ活用しましょう。

まとめ

JavaScriptにおける日付型の概要とつまづきやすい点、そして便利なライブラリについて紹介しました。
他にも、基準時についての仕様やdate-fnsの他のメソッドなど日付型は奥が深いですので、機会があれば記事にしたいと思います。