みなさんこんにちは!
今回の記事は、

・単に比較演算子を使うだけじゃダメなの?
・色々な方法があるけど、結局どれを使えばいいの?
というお悩みを解決する記事になっています。
・JavaScriptを使って日付を比較する方法【4つご紹介します】
・比較演算子を使って日付を比較する際の注意点【==は使えません】
・【結論】getTime()メソッドだけ覚えておけば大丈夫です
フリーランス案件を探すならこのエージェント!
転職を考えているならこのエージェント!
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()メソッドで十分事足りるかと思います。
まとめ:JavaScriptで日付を比較するにはgetTime()メソッドを使う
さて、今回は、JavaScriptを使って日付を比較する方法として、以下の4つをご紹介しました。
- 比較演算子を使って比較する
- getTime()メソッドを使って比較する
- valueOf()メソッドを使って比較する
- Number()関数を使って比較する
比較演算子を使うとシンプルではありますが、二つの値が等しいか否かということは確かめられません。
また、valueOf()メソッドやNumber()関数を使った方法は、getTime()メソッドと同じ結果が返ってきます。
前者の二つを使用しても問題はないですが、「getTime」という名前の方が覚えやすいと思いますので、「JavaScriptで日付を比較するときはgetTime()メソッドを使う!」と頭に入れておけば今後もスムーズに使っていけるかと思います。
このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。
フリーランス案件を探すならこのエージェント!
転職を考えているならこのエージェント!