導入
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` を使うといった使い分けが、バグのないフロントエンド開発の第一歩です。