時にWEB制作では今日の日付などを取得して表示したり、比較したりすることがあります。

そんな中で私が直面したエラーについて解説します。

なぜか「今日」ではない⁉︎

どういうことか説明します。

Next.jsを最近はよく触っていて、近頃はメモアプリを試しに使っているところです。

メモの項目には期限を設定するためのinputタグを設置しており、その期限に対して今日の日付を比較することでアラートを出したり、背景色を変更する処理を書いていました。

const date = new Date()
const year = date.getFullYear();
const month = date.getFullMonth();
const day = date.getFullDay();
const today = `${year}${month}${day}`;
// today = 例) 220101

しかし、日付の変わる0時を過ぎた頃にローカルページとサーバーアップをしたページを見るとローカルページは当日期限のメモに対して背景色が変更されてアラートされていました。

ただ、サーバーアップをしたページは前日のままになっており、正しく日付の比較がなされていないようでした。

原因

すっかり頭になかったのですが、サーバーの設定が正しくなされていないとタイムゾーンが日本で取得されないことがあります。

私の場合、ローカル環境はもちろん日本のタイムゾーンになっていましたが、サーバーではグリニッジ標準時で取得がされているようだったので日本では0時で日付が変わったとしても、グリニッジ標準時では9時間の時差があるためサーバーアップをしたページでは日付の比較がされていなかったと言うことです。

解決法

New Date() で取得する日時を日本のタイムゾーンで取得するよう設定をしましょう。

const jpTime = new Date().toLocaleString("ja-JP", { timeZone: "Asia/Tokyo" });
const year = jpTime.slice(0, 4);
const month = jpTime.slice(5, 7);
const day = jpTime.slice(8, 10);
const today = `${year}${month}${day}`;

ローカル環境では帰ってくる日付は同じですがサーバー環境では日本のタイムゾーン日時で取得がされます。

試しに修正をしてサーバーアップをしたところアラートが正しく動作していたため、日本時間で日付の比較が出来ているようでした。

同じような事象が発生した場合は、タイムゾーンを疑ってみるといいと思います。

関連記事:

WebページでJavaScriptが動かない場合の解決法 TS2305: Module ‘”react-router-dom”‘ has no exported member ‘RouteComponentProps’.が表示された時の解決方法 オブジェクトとオブジェクトをマージしてコピーする方法 配列から要素をコピーする方法（slice、splice）