【サンプルコード満載】date-fns の subSeconds 関数を使いこなして開発効率アップ！

使い方

const { subSeconds } = require('date-fns');

// 現在の日付から 30 秒減算
const newDate = subSeconds(new Date(), 30);
console.log(newDate); // 2024-06-16T21:23:30.000Z

引数

amount
減算する秒数 (整数)
date
操作対象の日付オブジェクト

戻り値

減算後の新しい日付オブジェクト

ミリ秒単位の精度調整はサポートされていません。
負の値を amount に渡すと、日付は加算されます。

時差を考慮した日付処理を行う
過去のイベントから経過した時間を計算する
特定の時刻にタイマーを設定する

特定の時刻にタイマーを設定する

const { subSeconds } = require('date-fns');

const targetTime = new Date(2024, 6, 16, 22, 0, 0); // 2024年6月17日 22時0分0秒
const now = new Date();

// タイマーまでの残り時間を秒数で計算
const remainingSeconds = Math.floor((targetTime - now) / 1000);

// 残り時間が 0 秒になったら何か処理を実行
if (remainingSeconds <= 0) {
  console.log('タイマー終了！');
} else {
  console.log(`残り ${remainingSeconds} 秒`);
}

過去のイベントから経過した時間を計算する

const { subSeconds } = require('date-fns');

const eventDate = new Date(2024, 6, 1, 10, 0, 0); // 2024年6月1日 10時0分0秒
const now = new Date();

// 経過時間を秒数で計算
const elapsedSeconds = Math.floor((now - eventDate) / 1000);

// 経過時間を分かりやすい形式で表示
const elapsedHours = Math.floor(elapsedSeconds / 3600);
const remainingMinutes = Math.floor((elapsedSeconds % 3600) / 60);
const remainingSeconds = Math.floor(elapsedSeconds % 60);

console.log(`イベントから ${elapsedHours} 時間 ${remainingMinutes} 分 ${remainingSeconds} 秒経過しています。`);

const { subSeconds } = require('date-fns');

const targetDate = new Date(2024, 6, 16, 15, 0, 0); // UTC 時間
const userOffset = 9 * 3600; // JST (+9 時間)

// JST に変換した日付
const localDate = subSeconds(targetDate, userOffset);

console.log('UTC 時間:', targetDate);
console.log('JST 時間:', localDate);

JavaScript の純正関数を使用する

JavaScript には、日付操作に役立ついくつかの純正関数が用意されています。例えば、以下のコードは subSeconds 関数と同等の処理を Date.prototype.setSeconds メソッドを使用して実現しています。

const targetDate = new Date(2024, 6, 16, 22, 0, 0);
const amount = 30;

// 純正関数を使用
targetDate.setSeconds(targetDate.getSeconds() - amount);
const newDate = targetDate;

console.log(newDate); // 2024-06-16T21:23:30.000Z

利点

コードが簡潔になる
追加ライブラリのインストールが不要

欠点

可読性がやや低くなる
subSeconds 関数ほど機能が豊富ではない

Moment.js を使用する

Moment.js は、JavaScript で広く利用されている日付操作ライブラリです。subSeconds 関数と同等の処理は以下のコードで実現できます。

const moment = require('moment');

const targetDate = moment(2024, 6, 16, 22, 0, 0);
const amount = 30;

// Moment.js を使用
const newDate = targetDate.subtract(amount, 'seconds');

console.log(newDate.toDate()); // 2024-06-16T21:23:30.000Z

利点

独自の書式設定オプションなどを利用可能
subSeconds 関数よりも多くの機能を提供

欠点

別途インストールが必要
date-fns よりもライブラリのサイズが大きい

Lodash を使用する

Lodash は、JavaScript における様々なユーティリティ関数を提供するライブラリです。subSeconds 関数と同等の処理は以下のコードで実現できます。

const _ = require('lodash');

const targetDate = new Date(2024, 6, 16, 22, 0, 0);
const amount = 30;

// Lodash を使用
const newDate = _.addSeconds(targetDate, -amount);

console.log(newDate); // 2024-06-16T21:23:30.000Z

利点

比較的軽量なライブラリ
date-fns 以外にも様々な便利な関数が利用可能

欠点

subSeconds 関数に特化した機能は少ない

最適な代替方法の選択

どの代替方法が最適かは、状況によって異なります。以下の点を考慮して選択してください。

使い慣れ度
すでに使い慣れているライブラリを選択すると、開発効率が向上します。
ライブラリのサイズ
プロジェクトの制約によっては、ライブラリのサイズを考慮する必要があります。
必要な機能
特定の機能が必要であれば、その機能を提供するライブラリを選択する必要があります。