今回は日付の差分を利用し、発売日までの日付を表示させるメソッドを作ってみました！
日付の差分を求めることがたまにあるので、困ったときはこちらを利用してもらえると嬉しいです！
■使用したスキル
・javaScript（ES2022 ）
■デモ（時間を変更して確認してみてください！）
◾️カウンター（比較日との比較のみ）
See the Pen
カウンター（比較日との比較のみ） by kozawa (@buqkpjfd-the-builder)
on CodePen.
◾️カウンター（比較日と日数差分により要素を出し分けたい場合）
See the Pen
カウンター（比較日と日数差分により要素を出し分けたい場合） by kozawa (@buqkpjfd-the-builder)
on CodePen.
■やりたかったこと
日付（日数）の比較、比較日より現在の時間が超えたかどうか確認する。
上記を確認したのち、その差分から要素を出し分けたり、動的に日数を表示させる。
■何を行ったのか。
まず、現在の日付と比較したい日付を２つ定義します。（デモの場合：dateNow（現在）, dateRelease（比較日））
次にそれぞれの年月日というフォーマットに精査したものを別の変数として定義します。（デモの場合：formattedDateNow（現在/年月日）, formattedDateRelease（比較日/年月日））
これらが定義できたら次に日数の差分を求めていきます。ここで年月日（formattedDateNow, formattedDateRelease）の変数を使用するのですが、ただ引き算するとミリ秒で結果が出るので、ミリ秒から日（24時間）に変えるために24時間分のミリ秒（24 * 60 * 60 * 1000 = 86400000）で割ります。これがデモにあるDateDiff（差分を日数に変えたもの）になります。
これで日数の差分は求められました。あとは比較日と現在の比較ですが、これは比較日から現在の日付を引くだけなので最初の変数を使用します（dateReleaseとdateNowの比較：true or false）。
これにより、やりたいことのうち「日付（日数）の比較」は「DateDiff」を、「比較日より現在の時間が超えたか」は「dateReleaseとdateNowの比較」により確認することができます。
あとはこれを利用して要素の出し分けをする流れになります！お疲れ様でした！
補足として、比較内容が日数だけであれば「DateDiff」だけで大丈夫です。今回は時間まで比較日の時間（何時何分）まで比較する必要があったため「dateReleaseとdateNowの比較」を使用しました。
これは一度覚えておけばいろんなところで使用できるためぜひ使い回してもらえると嬉しいです😆
最後まで読んでいただきありがとうございました！
それではまたお会いしましょう。
コーダーからWebデザイナーからフロントエンドエンジニアへ。クライアントページ作成や開発周りなど広くやらせてもらってます。作るのが好き！
