【JS応用|初心者向け】JavaScriptで日付を操る!Date.prototype.setHoursの基本と活用術

なぜsetHoursが必要なのか?

JavaScriptでWebサイトを作成していると、「昨日の23時59分に処理を終了したい」「来週の朝9時に通知を出したい」といった、特定の日時の時間を変更したい場面によく遭遇します。しかし、JavaScriptのDateオブジェクトは直接値を変更するメソッドが少なく、扱いが難しいと感じる方も多いでしょう。そこで活躍するのがsetHoursメソッドです。これを使えば、日付オブジェクトが持つ「時間」の部分をピンポイントで書き換えることができます。

基礎知識:Dateオブジェクトと時間の概念

JavaScriptのDateオブジェクトは、内部的に「1970年1月1日からの経過ミリ秒」という形式で日時を管理しています。setHoursメソッドは、その管理されている時刻のうち、「時・分・秒・ミリ秒」を自由に変更できる便利なツールです。
このメソッドを使う際のポイントは、「元のDateオブジェクト自体が書き換わる(破壊的変更)」という点です。新しい日付を作りたい場合は、一度コピーを取ってから操作するのが現場での定石となります。

実装方法:setHoursの書き方

setHoursは、引数に最大4つの数値を渡すことができます。
・第1引数:時間(0~23)
・第2引数:分(0~59)
・第3引数:秒(0~59)
・第4引数:ミリ秒(0~999)
これらを指定することで、一気に時刻を調整可能です。例えば「15時30分」にしたい場合は、setHours(15, 30)と記述するだけで完了します。

サンプルプログラム

以下のコードをブラウザのコンソールや、JavaScript環境で実行してみてください。

// 現在の日時を取得
const today = new Date();

// 日付オブジェクトをコピー(元のtodayを変更しないための工夫)
const deadline = new Date(today.getTime());

// 18時0分0秒に設定する
deadline.setHours(18, 0, 0, 0);

console.log("現在時刻:", today.toLocaleString());
console.log("設定後の時刻:", deadline.toLocaleString());

// 応用:明日の朝9時に設定する例
const tomorrowMorning = new Date();
tomorrowMorning.setDate(tomorrowMorning.getDate() + 1); // 1日進める
tomorrowMorning.setHours(9, 0, 0, 0); // 9時にセット

console.log("明日の朝9時:", tomorrowMorning.toLocaleString());

応用・注意点:現場での落とし穴

実務でsetHoursを使う際に注意すべき点が2つあります。

1. 範囲外の数値を入れるとどうなる?
setHoursは優秀で、例えば「25時」と入力すると、自動的に「翌日の1時」へと繰り上がります。この挙動は非常に便利ですが、意図せず日付が変わってしまう原因にもなるため、入力値のバリデーション(チェック)には注意してください。

2. 破壊的変更の罠
前述の通り、setHoursは実行した変数の値を直接書き換えます。もし関数内で「引数として受け取った日付」にsetHoursを適用すると、呼び出し元の変数まで書き換わってしまい、思わぬバグを生むことがあります。必ず新しいインスタンス(new Date())を作成してから操作する習慣をつけましょう。

これらを意識するだけで、JavaScriptでの日時操作は格段に安全で分かりやすくなります。ぜひ試してみてください!

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