導入
JavaScriptで日付や時刻を扱う際、特定の時刻（時）を取得するために最も頻繁に使用されるメソッドがDate.prototype.getHours()です。フロントエンド開発において、営業時間の判定、投稿日時の表示、あるいはタイマー機能の実装など、正確な時刻取得は避けて通れません。本記事では、このメソッドの基礎から、現場でハマりやすい「タイムゾーン」に関する落とし穴までを解説します。
基礎知識
Date.prototype.getHours()は、Dateオブジェクトが保持している時刻情報から、「時間（hour）」を0から23の整数値で返却するメソッドです。
ここで重要なのは、戻り値がローカル時刻（実行環境のブラウザやサーバーのタイムゾーン）に基づくという点です。例えば、ユーザーのPC設定が日本標準時（JST）であれば日本時間での「時」が返り、UTC（協定世界時）であればUTCでの「時」が返ります。この挙動は、開発環境と本番環境のサーバー時刻設定が異なる場合に予期せぬバグを生む原因となります。
実装/解決策
getHours()を使用するには、まず対象となる日時を持つDateインスタンスを作成する必要があります。現在時刻を取得する場合は new Date() を使用し、特定の日時を扱いたい場合はコンストラクタに日時文字列または数値を渡します。
サンプルプログラム
以下のコードは、現在時刻を取得して、それが午前か午後か、あるいは深夜かを判定してメッセージを表示する実用的な例です。
// 現在の日時を取得
const now = new Date();
// getHours()で現在の「時」を取得（0〜23の整数）
const currentHour = now.getHours();
function getGreetingMessage(hour) {
// 業務ロジック：時間帯によって挨拶を変える
if (hour >= 5 && hour < 12) {
return "おはようございます。";
} else if (hour >= 12 && hour < 18) {
return "こんにちは。";
} else if (hour >= 18 && hour < 22) {
return "こんばんは。";
} else {
return "深夜の時間帯です。お疲れ様です。";
}
}
console.log(`現在の時刻: ${currentHour}時`);
console.log(getGreetingMessage(currentHour));
応用・注意点
現場で最も注意すべきは「UTCとローカル時間の混同」です。
もしAPIから受け取ったUTC形式のタイムスタンプ（例: 2023-10-01T00:00:00Z）をそのままgetHours()で処理すると、ユーザーのローカル環境のタイムゾーンに変換された値が取得されてしまいます。
・UTCの時間を正確に扱いたい場合: getUTCHours() を使用してください。これによりタイムゾーンの影響を受けずにUTCの時間を取得できます。
・ライブラリの検討: 日付操作が複雑になる場合（タイムゾーン変換やフォーマット変換が必要な場合）、標準のDateオブジェクトだけでは限界があります。その際は、Day.js や date-fns といった軽量なライブラリを導入することを強く推奨します。
特にグローバル展開するアプリケーションでは、getHours()がユーザーのブラウザ設定に依存することを常に意識し、必要に応じてUTCベースの実装を行うことがバグを防ぐ鍵となります。