【超解説】date-fns の Hour Helpers: subHours 関数で時間の魔法使いに!


使い方

import { subHours } from 'date-fns';

const date = new Date(2024, 7, 15, 13, 30, 0); // 2024年7月15日 13時30分
const result = subHours(date, 2); // 2時間減算
console.log(result); // 2024年7月15日 11時30分

この例では、subHours 関数は date オブジェクトから 2 時間を減算し、新しい日付オブジェクト result を作成します。

subHours 関数の引数

  • amount
    減算する時間数 (負の値で時間を増やすこともできます)
  • date
    操作対象の日付オブジェクト
  • 新しい日付オブジェクト
  • subHours 関数は、日付を跨いで時間を減算 することもできます。 例えば、subHours(new Date(2024, 7, 15, 0, 0, 0), 25) は、2024年7月14日 23時00分になります。
  • subHours 関数は、元の Date オブジェクトを変更しません。 新しい日付オブジェクトが返されます。
  • subHours 関数は、日付と時刻の両方 を変更します。
  • isWithinHours: 指定された時間範囲内に日付が含まれているかどうかを確認する
  • setHours: 特定の時刻を設定する
  • addHours: 指定された時間数だけ時間を増やす


特定の時刻に 2 時間前の時間を取得する

import { subHours } from 'date-fns';

const date = new Date(2024, 7, 15, 13, 30, 0);
const twoHoursAgo = subHours(date, 2);
console.log(twoHoursAgo); // 2024年7月15日 11時30分

日付を跨いで時間を減算する

import { subHours } from 'date-fns';

const date = new Date(2024, 7, 15, 0, 0, 0);
const yesterday = subHours(date, 25);
console.log(yesterday); // 2024年7月14日 23時00分

subHours 関数と他の date-fns 関数を組み合わせる

import { subHours, format } from 'date-fns';

const date = new Date(2024, 7, 15, 13, 30, 0);
const twoHoursAgo = subHours(date, 2);
const formattedDate = format(twoHoursAgo, 'yyyy-MM-dd HH:mm:ss');
console.log(formattedDate); // 2024-07-15 11:30:00

これらの例は、subHours 関数の基本的な使用方法を示しています。 具体的なニーズに合わせて、さまざまな方法でこの関数を組み合わせて使用することができます。

  • JavaScript の日付と時刻の操作は複雑な場合があるため、十分な理解を持って使用するようにしてください。
  • date-fns ライブラリの最新バージョンを使用していることを確認してください。


JavaScript の原生日付オブジェクトを使用する

JavaScript の原生日付オブジェクトには、時間を操作するための様々なメソッドが用意されています。 例えば、以下のコードは setHours メソッドを使用して 2 時間前の時間を取得します。

const date = new Date(2024, 7, 15, 13, 30, 0);
date.setHours(date.getHours() - 2);
console.log(date); // 2024年7月15日 11時30分

Moment.js ライブラリを使用する

Moment.js は、JavaScript での日付と時刻を操作するためのもう 1 つのの人気ライブラリです。 Moment.js には subtract メソッドがあり、subHours 関数と同様に時間を減算することができます。

const moment = require('moment');

const date = moment(2024, 7, 15, 13, 30, 0);
const twoHoursAgo = date.subtract(2, 'hours');
console.log(twoHoursAgo.toDate()); // 2024年7月15日 11時30分

Lodash ライブラリを使用する

Lodash は、JavaScript のユーティリティ関数の豊富なコレクションを提供するライブラリです。 Lodash には subtract メソッドがあり、subHours 関数と同様に時間を減算することができます。

const _ = require('lodash');

const date = new Date(2024, 7, 15, 13, 30, 0);
const twoHoursAgo = _.subtract(date, 2, 'hours');
console.log(twoHoursAgo); // 2024年7月15日 11時30分

どの代替方法を選択すべきか

どの代替方法を選択するかは、個々のニーズと好みによって異なります。

  • Lodash ライブラリ
    すでに Lodash をプロジェクトで使用している場合に適しています。
  • Moment.js ライブラリ
    より多くの機能とフォーマットオプションが必要な場合に適しています。
  • JavaScript の原生日付オブジェクト
    シンプルで軽量な方法を求めている場合に適しています。
  • ベンチマークを使用して、ニーズに合った最速のオプションを判断することをお勧めします。
  • 特定の代替方法を選択する前に、そのドキュメントをよく読んでください。
  • 上記の代替方法はすべて、subHours 関数と同様の機能を提供しますが、パフォーマンスや精度に若干の違いがある可能性があります。