date-fns で特定の年代に属するデータをフィルタリング

date-fns の getDecade 関数：わかりやすい解説

getDecade 関数の役割

• 与えられた日付が属する10年単位の期間（年代）を数値で返します。
• 例えば、2024年4月12日であれば、getDecade(new Date(2024, 3, 12)) は 2020 を返します。

使い方

import { getDecade } from 'date-fns';

const date = new Date(2024, 3, 12);
const decade = getDecade(date);
console.log(decade); // 2020

動作の仕組み

• getDecade 関数は、まず引数として渡された日付の年を取得します。
• その年の値を10で割った商を求め、その商を10倍した値を返します。
• 例えば、2024年であれば、2024 / 10 = 202.4 となり、202.4 * 10 = 2024 となります。
• 返される値は常に整数となります。

活用例

• 特定の年代に属するデータをフィルタリング
• 年代ごとのデータを集計
• 年代を文字列として表示

その他

• getDecade 関数は、オプションでフォーマットオプションを指定することができます。

getDecade 関数は、日付を年代単位で扱う際に非常に便利な機能です。使い方も簡単なので、ぜひ活用してみてください。

date-fns の getDecade 関数：サンプルコード集

import { getDecade } from 'date-fns';

const data = [
  { date: new Date(2020, 1, 1), value: 10 },
  { date: new Date(2021, 2, 2), value: 20 },
  { date: new Date(2022, 3, 3), value: 30 },
  { date: new Date(2023, 4, 4), value: 40 },
];

const filteredData = data.filter(item => getDecade(item.date) === 2020);
console.log(filteredData); // [{ date: Date 2020-02-01T00:00:00.000Z, value: 10 }]

年代ごとのデータを集計

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

const data = [
  { date: new Date(2020, 1, 1), value: 10 },
  { date: new Date(2021, 2, 2), value: 20 },
  { date: new Date(2022, 3, 3), value: 30 },
  { date: new Date(2023, 4, 4), value: 40 },
];

const groupedData = groupBy(data, (item) => getDecade(item.date));
console.log(groupedData); // { 2020: [{ date: Date 2020-02-01T00:00:00.000Z, value: 10 }], 2021: [{ date: Date 2021-03-01T00:00:00.000Z, value: 20 }], 2022: [{ date: Date 2022-04-01T00:00:00.000Z, value: 30 }], 2023: [{ date: Date 2023-05-01T00:00:00.000Z, value: 40 }] }

年代を文字列として表示

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

const date = new Date(2024, 3, 12);
const decade = getDecade(date);
const decadeString = format(decade, 'yyyy\'s');
console.log(decadeString); // 2020's

特定の年代の範囲を指定

import { getDecade, startOfDecade, endOfDecade } from 'date-fns';

const startDate = startOfDecade(new Date(2020, 0, 0));
const endDate = endOfDecade(new Date(2029, 11, 31));

const data = [
  { date: new Date(2019, 12, 31), value: 5 },
  { date: new Date(2020, 1, 1), value: 10 },
  { date: new Date(2021, 2, 2), value: 15 },
  { date: new Date(2022, 3, 3), value: 20 },
  { date: new Date(2023, 4, 4), value: 25 },
];

const filteredData = data.filter(item => item.date >= startDate && item.date <= endDate);
console.log(filteredData); // [{ date: Date 2020-01-01T00:00:00.000Z, value: 10 }, { date: Date 2021-02-01T00:00:00.000Z, value: 15 }, { date: Date 2022-03-01T00:00:00.000Z, value: 20 }, { date: Date 20

date-fns 以外で年代を取得する方法

getFullYear() と算術演算

最もシンプルな方法は、Date オブジェクトの getFullYear() メソッドと算術演算を組み合わせる方法です。

const date = new Date(2024, 3, 12);
const decade = Math.floor(date.getFullYear() / 10) * 10;
console.log(decade); // 2020

Moment.js ライブラリ

Moment.js は、日付時刻を扱うためのオープンソースライブラリです。getDecade() 関数を提供しており、簡単に年代を取得できます。

import moment from 'moment';

const date = moment(2024, 3, 12);
const decade = date.getDecade();
console.log(decade); // 2020

Lodash ライブラリの _.floor と _.divide 関数

Lodash は、JavaScript のユーティリティライブラリです。_.floor と _.divide 関数を組み合わせて、年代を取得できます。

import _ from 'lodash';

const date = new Date(2024, 3, 12);
const decade = _.floor(_.divide(date.getFullYear(), 10)) * 10;
console.log(decade); // 2020

自作関数

上記の方法に加えて、自作関数を作成する方法もあります。

function getDecade(date) {
  return Math.floor(date.getFullYear() / 10) * 10;
}

const date = new Date(2024, 3, 12);
const decade = getDecade(date);
console.log(decade); // 2020

それぞれの方法のメリットとデメリット

上記のように、date-fns 以外にも、JavaScript で年代を取得する方法はいくつかあります。それぞれの方法のメリットとデメリットを理解した上で、状況に応じて最適な方法を選択してください。