JavaScriptのnew Date()で引数に時間を指定しないと時間はタイムゾーンを参照する

本番環境でやらかしたので備忘録として書きます。

はじめに　　

JavaScriptではnew Date()と書くと現在時刻からDateインスタンスを生成できます。

const now = new Date();
console.log(now);
// Wed Dec 08 2021 17:49:02 GMT+0900 (日本標準時)

一般的なブラウザ実行環境においては、タイムゾーンなどが日本のものに設定されていると思われます。　　

日付文字列を引数として渡す

引数に日付文字列（yyyy-mm-dd hh:mm:ss）を指定すると2022/06/06 00:00:00のDateオブジェクトが生成されます。

const now = new Date('2022-06-06 00:00:00');
console.log(now);
// Mon Jun 06 2022 00:00:00 GMT+0900 (日本標準時)

日付文字列を渡すが、時刻を省略する

引数に日付文字列（yyyy-mm-dd）を指定すると…　　

const now = new Date('2022-06-06');
console.log(now);
// Mon Jun 06 2022 09:00:00 GMT+0900 (日本標準時)

９時間ズレました。
時間を指定しないとUTC（協定世界時）を参照するようで、日本の時差９時間ズレてDateオブジェクトが生成されるようです。

今回、画面上で日付が変わったタイミングで表示を切り替えるロジックを実装したところ、切り替わらないとの報告があったため調査しました。

まとめ　　

MNSを見てみると

注: Date コンストラクター (および同じように動作する Date.parse()) を使用した日付文字列の解析は、ブラウザーによって違いや矛盾があるため、使用を避けることを強くお勧めします。　　

とのことなのでDate()に日付文字列を渡すのは避けるべきなのかもしれません。