導入
JavaScriptで日時を扱う際、何気なく使っている「Dateオブジェクト」ですが、実はサーバーとのデータ連携や多言語対応のサイト構築において「タイムゾーンのズレ」が大きな課題となります。日本標準時(JST)で保存したつもりが、サーバー側でUTCとして処理され、日付がずれてしまった経験はありませんか?そんな時に役立つのが、ローカルタイムではなく協定世界時(UTC)の「日」を取得する「Date.prototype.getUTCDate」メソッドです。
基礎知識
JavaScriptのDateオブジェクトには、大きく分けて「ローカルタイム」を基準にするメソッド(例:getDate)と、「協定世界時(UTC)」を基準にするメソッド(例:getUTCDate)が存在します。
getUTCDateは、指定した日付の「日(1〜31)」をUTC基準で返します。例えば、日本時間で「1月2日の午前1時」であっても、UTCでは「1月1日の午後4時」となるため、getUTCDateを呼び出すと「1」が返されます。このメソッドを使いこなすことで、環境に依存しない厳密な日時計算が可能になります。
実装/解決策
APIから受け取ったISO 8601形式の文字列(例:2023-10-05T15:00:00Z)を解析する際、ブラウザのタイムゾーン設定に左右されずに「何日か」を特定したい場合、getUTCDateは非常に強力です。単純にgetDateを使うと、ユーザーのPC設定によって日付が変わってしまうリスクがありますが、getUTCDateなら常にサーバーの基準値と一致させることができます。
サンプルプログラム
以下のコードは、現在時刻をUTC基準で取得し、その「日」を表示する実用例です。
// 現在の日時でDateオブジェクトを作成
const now = new Date();
// ローカルの日付(環境依存)
const localDate = now.getDate();
// UTCの日付(世界共通)
const utcDate = now.getUTCDate();
// 結果を比較してコンソールに表示
console.log("ローカルタイムの「日」: " + localDate);
console.log("UTC(世界標準時)の「日」: " + utcDate);
// APIから受け取った文字列をパースしてUTCの日付を取り出す例
const apiResponse = "2023-12-31T23:59:59Z";
const dateObj = new Date(apiResponse);
// 常に正しい「日」を取得できる
console.log("APIの日付(UTC): " + dateObj.getUTCDate() + "日");
応用・注意点
現場で注意すべきは、「UTCメソッドとローカルメソッドを混同しないこと」です。例えば、getUTCDateで取得した値を使って、setFullYear(これはローカル基準)などを呼び出すと、予期せぬ日付の計算ミスが発生します。UTCを扱う際は、setter側も必ずsetUTCDateやsetUTCMonthといった「UTC専用のメソッド」で統一するように徹底してください。また、ライブラリを使わずに複雑な日付計算を行う場合は、Dateオブジェクトの仕様だけでなく、閏年や月の日数判定も考慮が必要になるため、大規模なプロジェクトでは「date-fns」や「Day.js」などの軽量ライブラリの利用も検討しましょう。