【JS応用|豆知識】タイムゾーンに惑わされない!Date.prototype.getUTCMonth で日付を正しく扱う方法

導入

JavaScriptで日付を扱う際、多くの開発者が一度は「サーバーの時間とブラウザの時間にズレがある」「意図した月が取得できない」という問題に直面します。特にユーザーが世界各地にいるWebアプリでは、ローカル環境のタイムゾーンに依存しない「UTC(協定世界時)」での処理が不可欠です。本日は、日付の「月」を正確に取得するためのメソッド `Date.prototype.getUTCMonth` について解説します。

基礎知識

JavaScriptの `Date` オブジェクトには、大きく分けて「ローカル時間用」と「UTC用」のメソッドが存在します。
例えば、`getMonth()` は実行環境のタイムゾーンに基づいた月を返しますが、これはPCの設定によって結果が変わるリスクがあります。一方、`getUTCMonth()` は世界共通の標準時(UTC)に基づいた月を返します。
ここで重要な注意点が一つ。JavaScriptの月は「0から始まる(0=1月、11=12月)」というルールです。この仕様は `getUTCMonth()` でも変わらないため、表示や計算時には必ず「+1」する習慣をつけましょう。

実装/解決策

`getUTCMonth()` を使用する際は、現在の日付を取得する `new Date()` と組み合わせるのが一般的です。サーバーから取得したISO形式の文字列(例: “2023-10-05T15:00:00Z”)を扱う際、ブラウザのタイムゾーン補正を無視して、純粋な「月」の値だけを取り出したい場合にこのメソッドが真価を発揮します。

サンプルプログラム

以下のコードをブラウザのコンソールに貼り付けて、実行結果を確認してみてください。

// 現在のUTC時刻でDateオブジェクトを作成
const now = new Date();

// UTCでの月を取得(0~11で返される)
const utcMonth = now.getUTCMonth();

// 表示用に人間が読みやすい形(1~12)に変換
const displayMonth = utcMonth + 1;

console.log("現在のUTCの月(0-11):", utcMonth);
console.log("現在のUTCの月(1-12):", displayMonth);

// 特定の日付でテスト
const specificDate = new Date("2023-12-25T00:00:00Z");
console.log("2023年12月のUTC月:", specificDate.getUTCMonth() + 1); // 12 と出力される

応用・注意点

現場でよくあるミスは、`getUTCMonth()` で取得した数値をそのままデータベースのクエリや表示に使ってしまうことです。「11月を取得したつもりが10月になっていた」というバグは、この0始まりの仕様を忘れた時に発生します。

また、タイムゾーンを考慮したUIを構築する場合は、`Intl.DateTimeFormat` などのモダンなAPIと併用することをおすすめします。`getUTCMonth()` は「特定のロジックで世界共通の基準値が必要なとき」に使い、ユーザーに表示する日付は `toLocaleString` を使うといった使い分けが、バグのないフロントエンド開発の第一歩です。

タイトルとURLをコピーしました