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

2024-06-17

date-fnsにおける「Second Helpers」と「subSeconds」の解説

使い方

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

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

引数

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

戻り値

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

補足

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

応用例

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

date-fns には Second Helpers以外にも様々な便利な関数が用意されています。詳細は https://date-fns.org/ を参照してください。



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

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);


    "subSeconds" の代替方法

    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 は、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 関数に特化した機能は少ない

    最適な代替方法の選択

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

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

    上記以外にも、独自の関数を作成したり、他のライブラリを使用したりして subSeconds 関数を代替することができます。