date-fnsのDecade Helpersで日付を10年単位にグループ分け！サンプルコード付きで分かりやすく解説！

使い方

import { getDecade } from 'date-fns';

const date = new Date(2024, 6, 29); // 2024 年 6 月 29 日
const decade = getDecade(date); // 2020

console.log(decade); // 2020

返り値

• 指定された日付が属する 10 年間の範囲 (例: 2020)

• 閏年かどうかは考慮されません。
• 10 年間の範囲は、0 年から始まり、9 年で終わります (例: 2020-2029)。
• 返される値は、常に 4 桁の数字 (例: 2020) となります。
• getDecade 関数は、Date オブジェクト または 有効な日付文字列 を引数として受け取ることができます。

例

• 2025 年 1 月 1 日は、2030 年代に属します。
• 2024 年 12 月 31 日は、2020 年代に属します。
• 2023 年 1 月 1 日は、2020 年代に属します。

• 10 年間の統計データを分析する
• 10 年間の経過時間を計算する
• 特定の 10 年間のデータをフィルタリングする

• getNextDecade: 指定された日付よりも後の 10 年間の範囲を取得します。
• getPreviousDecade: 指定された日付よりも前の 10 年間の範囲を取得します。
• isLastDecadeOfYear: 指定された日付がその年の最後の 10 年間に属するかどうかを判断します。
• isFirstDecadeOfYear: 指定された日付がその年の最初の 10 年間に属するかどうかを判断します。

• date-fns ライブラリは、npm または yarn でインストールできます。

---

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

const transactions = [
  { date: new Date(2020, 5, 10), amount: 100 },
  { date: new Date(2021, 3, 15), amount: 200 },
  { date: new Date(2022, 1, 20), amount: 300 },
  { date: new Date(2023, 9, 25), amount: 400 },
  { date: new Date(2024, 4, 30), amount: 500 },
];

const twentiesTransactions = transactions.filter(transaction => {
  const decade = getDecade(transaction.date);
  return decade === 2020;
});

console.log(twentiesTransactions);

出力

[
  { date: 2020-06-10T00:00:00.000Z, amount: 100 },
  { date: 2021-03-15T00:00:00.000Z, amount: 200 },
  { date: 2022-01-20T00:00:00.000Z, amount: 300 }
]

例 2: 10 年間の経過時間を計算する

import { getDecade, differenceInYears } from 'date-fns';

const startDate = new Date(2010, 1, 1);
const endDate = new Date(2020, 1, 1);

const startDecade = getDecade(startDate);
const endDecade = getDecade(endDate);

const yearsDiff = differenceInYears(endDate, startDate);
const decadesDiff = endDecade - startDecade;

console.log(`Years passed: ${yearsDiff}`);
console.log(`Decades passed: ${decadesDiff}`);

出力

Years passed: 10
Decades passed: 1

例 3: 10 年間の統計データを分析する

import { getDecade, groupBy } from 'date-fns';

const salesData = [
  { date: new Date(2020, 2, 10), amount: 1000 },
  { date: new Date(2020, 5, 15), amount: 2000 },
  { date: new Date(2020, 8, 20), amount: 3000 },
  { date: new Date(2021, 3, 25), amount: 4000 },
  { date: new Date(2021, 7, 30), amount: 5000 },
  { date: new Date(2022, 1, 5), amount: 6000 },
  { date: new Date(2022, 10, 10), amount: 7000 },
  { date: new Date(2023, 4, 15), amount: 8000 },
  { date: new Date(2023, 11, 20), amount: 9000 },
];

const salesByDecade = groupBy(salesData, (sale) => getDecade(sale.date));

console.log(salesByDecade);

{
  "2020": [
    { date: 2020-02-10T00:00:00.000Z, amount: 1000 },
    { date: 2020-05-15T00:00:00.000Z, amount: 2000 },
    { date: 2020-08-20T00:00:00.000Z, amount: 3000 }
  ],
  "2021": [
    { date: 2

---

以下に、getDecade 関数の代替方法として検討できるいくつかの方法をご紹介します。

Math.floor() 関数を使用する

const date = new Date(2024, 6, 29);
const year = date.getFullYear();
const decade = Math.floor(year / 10) * 10;

console.log(decade); // 2020

説明

• 商に 10 を掛けて、10 年間の範囲を取得します。
• Math.floor() 関数を使用して、年を 10 で割った商を計算します。
• getFullYear() メソッドを使用して、日付の年を取得します。

手動で計算する

const date = new Date(2024, 6, 29);
const year = date.getFullYear();

let decade;

if (year >= 2030) {
  decade = 2030;
} else if (year >= 2020) {
  decade = 2020;
} else if (year >= 2010) {
  decade = 2010;
} else {
  decade = 2000;
}

console.log(decade); // 2020

説明

• 条件に一致する範囲があれば、その 10 年間の値を decade 変数に代入します。
• 各 10 年間の範囲を個別にチェックします。

ライブラリを使用する

• これらのライブラリは、より多くの機能やオプションを提供している可能性があります。
• Moment.js や Luxon などのライブラリは、getDecade 関数と同様の機能を提供している場合があります。

最適な方法の選択

• コードの簡潔性、読みやすさ、パフォーマンスなどを考慮して選択してください。
• 使用しているライブラリや、必要な機能によって最適な方法は異なります。

• 10 年間の範囲を文字列として取得する必要がある場合は、toString() メソッドを使用する必要があります。
• 閏年かどうかを考慮する必要がある場合は、Math.floor() 関数を使用する代わりに、Math.ceil() 関数を使用する必要があります。

const date = new Date(2024, 6, 29);
const decadeString = Math.floor(date.getFullYear() / 10) * 10 + "-2029";

console.log(decadeString); // 2020-2029