Javascriputで日付がずれる現象について

はじめに

Javascriptを使ってWEBページを作る際、思ったようにいかないことがあります。

今回は、Javascriptの日付がずれる問題について体験した症状と対策を紹介したいと思います。

Javascriptでの日付の基本

最初に少しJavascriptの日付について説明します。

Javascriptで日付を使う場合はDateオブジェクトを使います。

例えば今の日付を取得するにはnew Date()を使ってこのようにします。

var date = new Date();
console.log(date.toString());     //Wed Dec 01 2021 10:06:44 GMT+0900 (日本標準時)

こうして取得した日付を.getFullYear()や.getMonth()などで年、月、日、時、分、秒ごとに取得して日付を作ります。

日付がずれる現象　パターン１

new Date()で取得した日付が現在の時間とは違う場合があります。

var date = new Date();
console.log(date.toString());     //Wed Dec 01 2021 01:41:06 GMT+0000 (グリニッジ標準時)

この場合はJavascriptの実行環境のタイムゾーンが日本以外になっています。

実行環境のタイムゾーンを合わせるか、toLocaleString()という関数を使ってAsia/Tokyoをタイムゾーンに設定します。

var date = new Date();
console.log(date.toString());                                           //Wed Dec 01 2021 01:57:23 GMT+0000 (グリニッジ標準時)
console.log(date.toLocaleString("ja-JP", { timeZone: "Asia/Tokyo" }));  //2021/12/1 10:57:23

日付がずれる現象　パターン２

データベースなどから日付を取得するときにずれることがあります。

例えばデータ型がdatetime型の値をDB_dateに入れて表示してみます。

console.log(DB_date);                                                 //2021-12-01T12:15:15.000Z
var date = new Date(DB_date);
console.log(date.toString());                                         //Wed Dec 01 2021 21:15:15 GMT+0900 (日本標準時)

この現象はデータベースから取得した日付に対してもタイムゾーンを適応してしまい、日本との時間の差９時間を足してしまうために起こる問題です。

解決方法としては、一度基準時間のUTCに変換することでタイムゾーンによる影響をなくします。

console.log(DB_date);                                                 //2021-12-01T12:15:15.000Z
var date = new Date(DB_date);
date = date.toLocaleString("ja-JP", { timeZone: "Europe/London" });
date=new Date(date);
console.log(date.toString());                                         //Wed Dec 01 2021 12:15:15 GMT+0900 (日本標準時)

おわりに

今回あげた問題以外でも、Javascriptの日付はオブジェクトで保持されるので、思ったようにはいかないことも多々あります。

その場合はJavaScriptライブラリを使ったりしても良いかもしれません。