JavaScript初心者でもわかる！date-fnsで日付と現在の日時の差を表示する

date-fnsのformatDistanceToNow関数：分かりやすく解説

date-fnsのformatDistanceToNow関数は、指定された日付と現在の日時の差を、人間が読みやすい形式で表示するための便利なヘルパー関数です。

使い方

import { formatDistanceToNow } from 'date-fns';

// 例：現在から3日前の日付
const date = new Date(2024, 3, 19);

// 日本語で表示
const distance = formatDistanceToNow(date, { locale: ja });
console.log(distance); // => "3日前"

// 英語で表示
const distanceEn = formatDistanceToNow(date, { locale: en });
console.log(distanceEn); // => "3 days ago"

オプション

formatDistanceToNow関数には、以下のオプションを設定できます。

• locale: 表示言語を指定します。デフォルトは英語です。日本語の場合はjaを指定します。
• addSuffix: 過去の日付の場合はago、未来の日付の場合はfrom nowのような接尾辞を追加します。デフォルトはtrueです。
• unit: 時間の単位を指定します。デフォルトは'second'です。
• roundingMethod: 時間の丸め方を指定します。デフォルトは'floor'です。

詳細は date-fns公式ドキュメント: [無効な URL を削除しました] を参照してください。

例

// 1時間前
const oneHourAgo = formatDistanceToNow(new Date(Date.now() - 3600000));
console.log(oneHourAgo); // => "1時間前"

// 1週間後
const oneWeekFromNow = formatDistanceToNow(new Date(Date.now() + 604800000));
console.log(oneWeekFromNow); // => "1週間後"

// 1ヶ月前、英語で、接尾辞なし
const oneMonthAgoEn = formatDistanceToNow(new Date(Date.now() - 2592000000), {
  locale: en,
  addSuffix: false,
});
console.log(oneMonthAgoEn); // => "1 month ago"

date-fnsのformatDistanceToNow関数は、日付と現在の日時の差を分かりやすく表示するのに役立ちます。オプションを使いこなすことで、さまざまな表示形式を実現することができます。

formatDistanceToNow 関数のサンプルコード

過去の日付

• 1時間前

const oneHourAgo = formatDistanceToNow(new Date(Date.now() - 3600000));
console.log(oneHourAgo); // => "1時間前"

• 3日前

const threeDaysAgo = formatDistanceToNow(new Date(2024, 3, 19));
console.log(threeDaysAgo); // => "3日前"

• 1ヶ月前

const oneMonthAgo = formatDistanceToNow(new Date(Date.now() - 2592000000));
console.log(oneMonthAgo); // => "1ヶ月前"

• 1年前

const oneYearAgo = formatDistanceToNow(new Date(2023, 3, 22));
console.log(oneYearAgo); // => "1年前"

未来の日付

• 1時間後

const oneHourFromNow = formatDistanceToNow(new Date(Date.now() + 3600000));
console.log(oneHourFromNow); // => "1時間後"

• 3日後

const threeDaysFromNow = formatDistanceToNow(new Date(2024, 3, 25));
console.log(threeDaysFromNow); // => "3日後"

• 1ヶ月後

const oneMonthFromNow = formatDistanceToNow(new Date(Date.now() + 2592000000));
console.log(oneMonthFromNow); // => "1ヶ月後"

• 1年後

const oneYearFromNow = formatDistanceToNow(new Date(2025, 3, 22));
console.log(oneYearFromNow); // => "1年後"

オプションの利用

• 日本語で表示

const date = new Date(2024, 3, 19);
const distanceJa = formatDistanceToNow(date, { locale: ja });
console.log(distanceJa); // => "3日前"

• 英語で表示

const date = new Date(2024, 3, 19);
const distanceEn = formatDistanceToNow(date, { locale: en });
console.log(distanceEn); // => "3 days ago"

• 接尾辞なし

const date = new Date(2024, 3, 19);
const distanceNoSuffix = formatDistanceToNow(date, { addSuffix: false });
console.log(distanceNoSuffix); // => "3"

• 時間を単位として表示

const date = new Date(2024, 3, 19);
const distanceHours = formatDistanceToNow(date, { unit: 'hour' });
console.log(distanceHours); // => "72時間前"

• 時間を切り捨てて表示

const date = new Date(2024, 3, 19);
const distanceFloor = formatDistanceToNow(date, { roundingMethod: 'floor' });
console.log(distanceFloor); // => "3日前"

• 時間を四捨五入して表示

const date = new Date(2024, 3, 19);
const distanceRound = formatDistanceToNow(date, { roundingMethod: 'round' });
console.log(distanceRound); // => "2日前"

• 現在の日付と比較

const now = new Date();
const isPast = formatDistanceToNow(now) < 0;
console.log(isPast); // => false

• 日付オブジェクトを渡す

formatDistanceToNow関数の代替方法

手動で計算する

以下のコードは、日付と現在の日時の差を手動で計算する方法です。

function formatDistance(date) {
  const now = new Date();
  const diff = now - date;

  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((diff % (1000 * 60)) / 1000);

  if (days > 0) {
    return `${days}日前`;
  } else if (hours > 0) {
    return `${hours}時間前`;
  } else if (minutes > 0) {
    return `${minutes}分前`;
  } else {
    return `${seconds}秒前`;
  }
}

const date = new Date(2024, 3, 19);
const distance = formatDistance(date);
console.log(distance); // => "3日前"

moment.jsは、日付を扱うためのライブラリです。moment.jsを使うと、formatDistanceToNow関数と同様の機能を実現できます。

import moment from 'moment';

const date = moment(2024, 3, 19);
const distance = date.fromNow();
console.log(distance); // => "3日前"

その他のライブラリ

date-fnsやmoment.js以外にも、日付を扱うライブラリはたくさんあります。それぞれのライブラリには独自の特徴があるので、自分に合ったライブラリを選びましょう。

formatDistanceToNow関数は、日付と現在の日時の差を分かりやすく表示するのに役立ちます。しかし、手動で計算したり、他のライブラリを使ったりすることもできます。