JavaScriptで日付を比較する方法とその注意点【getTime()メソッド一択です】

みなさんこんにちは!

今回の記事は、

悩みを抱えた人
・JavaScriptで日付を比較する方法が知りたい!
・単に比較演算子を使うだけじゃダメなの?
・色々な方法があるけど、結局どれを使えばいいの?

というお悩みを解決する記事になっています。


この記事の内容

・JavaScriptを使って日付を比較する方法【4つご紹介します】
・比較演算子を使って日付を比較する際の注意点【==は使えません】
・【結論】getTime()メソッドだけ覚えておけば大丈夫です


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


JavaScriptで日付を比較する方法まとめ

JavaScriptを使って日付を比較するには、主に以下の4種類のやり方があります。

  • 比較演算子を使って比較する
  • getTime()メソッドを使って比較する
  • valueOf()メソッドを使って比較する
  • Number()関数を使って比較する

色々あって迷ってしまいそうですが、結論から申し上げますと、JavaScriptで日付を比較する際には、getTime()メソッドを使用するようにしましょう(※理由は後述します)。

4つの方法について、その使い方を順に解説していきます。

JavaScriptで日付を比較する方法その① 比較演算子を使う

まずご紹介するのは、比較演算子を使って日付を比較する方法です。

この方法はとてもシンプルで、数字を比較するのと同様に、Dateオブジェクトに対して比較演算子(「>」や「<」)を使用するだけで大丈夫です。

実装コード

const date1 = new Date("2020", "4", "20", "15", "00", "00")
const date2 = new Date("2020", "4", "30", "15", "00", "00")

console.log(date1 < date2)
=> true

このように、JavaScriptのDateオブジェクトは比較演算子を使用できるため、とてもシンプルに日付を比較することができます。

あわせて読みたい

今回の記事は、 JavaScriptで日時を扱いたいJavaScriptで現在日時を取得するのってどうしたらいいの?JavaScriptで取得した日時を日本時間に変更するのってどうしたらいいの? というお悩みをお持ちの方に向け[…]

カレンダーイメージ

比較演算子を使って日付を比較する際の注意点

比較演算子を使ったやり方はとても簡単ではあるのですが、1つだけ注意点があります。

それは、「日付が一致するかどうかは調べられない」ということです。

実際にコードを見ながら確認していきましょう。

実装コード

const date1 = new Date("2020", "4", "20", "15", "00", "00")
const date2 = new Date("2020", "4", "20", "15", "00", "00")

console.log(date1 == date2)
=> false

上記の通り、同じ引数を設定したインスタンスを使って比較しているにも関わらず、JavaScriptの内部では両者は異なるものとして扱われています。

これは、Dateオブジェクトに組み込まれている==演算子は、「インスタンスが同じものであるかどうか」ということを確かめる仕様のためです。

実際、date2にdate1を代入してみると、両者は同じものとして扱われます。

const date1 = new Date("2020", "4", "20", "15", "00", "00")
const date2 = date1

console.log(date1 == date2)
=> true

比較演算子を使うとこのような弊害もありますので、JavaScriptで日付を比較する際には次にご紹介するgetTime()メソッドを使用するようにしましょう。

JavaScriptで日付を比較する方法その② getTime()メソッドを使う

続いてご紹介するのは、getTime()メソッドを使って日付を比較する方法です。

getTime()メソッドはDateオブジェクトのメソッドであり、レシーバの日付を「ミリ秒」に直した文字列を返します。

実装コード

const date1 = new Date("2020", "4", "20", "15", "00", "00")
const date2 = new Date("2020", "4", "30", "15", "00", "00")

console.log(date1.getTime())
=> 1589954400000
console.log(date2.getTime())
=> 1590818400000
console.log(date1.getTime() < date2.getTime())
=> true

上記の通り、getTime()を使うと、レシーバである日付をミリ秒に変換した文字列が返され、この値を使用することで日付の比較が可能となります。

先ほどご紹介した、「日付が一致するかどうか」についても、getTime()メソッドを使用することで問題なく確かめることができます

実装コード

const date1 = new Date("2020", "4", "20", "15", "00", "00")
const date2 = new Date("2020", "4", "20", "15", "00", "00")

console.log(date1.getTime() == date2.getTime())
=> true

大小を比べるだけであれば比較演算子を使用すれば問題ないですが、日付が等しいかどうかを調べるにはこのgetTime()メソッドを使用するようにしましょう。

JavaScriptで日付を比較する方法その③ valueOf()メソッドを使う

続いてご紹介するのは、valueOf()メソッドです。

valueOf()メソッドは、先ほどご紹介したgetTime()メソッドと全く同じ動きをし、レシーバの日付をミリ秒に変換したものを返してくれます。

実装コード

const date1 = new Date("2020", "4", "20", "15", "00", "00")
const date2 = new Date("2020", "4", "30", "15", "00", "00")

console.log(date1.valueOf())
=> 1589954400000
console.log(date2.valueOf())
=> 1590818400000
console.log(date1.valueOf() < date2.valueOf())
=> true

使い方も挙動もgetTime()メソッドと同じですので、ここは正直、覚えやすい方を使う形で良いかなと思います。

JavaScriptで日付を比較する方法その④ Number関数を使う

最後は、Number関数を使って日付を比較する方法です。

Number関数の引数にDateオブジェクトを代入すると、その日付を数値(ミリ秒)に変換した値を返してくれます。

戻り値自体はgetTime()メソッドやvalueOf()メソッドと同じなのですが、正しく数値に変換できなかった場合(引数が不正だった場合)には、NaNを返却します。

const date1 = new Date("2020", "4", "20", "15", "00", "00")
const date2 = new Date("2020", "4", "30", "15", "00", "00")

console.log(Number(date1))
=> 1589954400000
console.log(Number(date2))
=> 1590818400000
console.log(Number(date1) < Number(date2))
=> true

こちらも、わざわざNumberオブジェクトに変換するメリットも特にありませんので、上述のgetTime()メソッドで十分事足りるかと思います。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

まとめ:JavaScriptで日付を比較するにはgetTime()メソッドを使う

さて、今回は、JavaScriptを使って日付を比較する方法として、以下の4つをご紹介しました。

  • 比較演算子を使って比較する
  • getTime()メソッドを使って比較する
  • valueOf()メソッドを使って比較する
  • Number()関数を使って比較する

比較演算子を使うとシンプルではありますが、二つの値が等しいか否かということは確かめられません

また、valueOf()メソッドやNumber()関数を使った方法は、getTime()メソッドと同じ結果が返ってきます。

前者の二つを使用しても問題はないですが、「getTime」という名前の方が覚えやすいと思いますので、「JavaScriptで日付を比較するときはgetTime()メソッドを使う!」と頭に入れておけば今後もスムーズに使っていけるかと思います。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。