【プログラミング初心者向け】date-fnsの「closestIndexTo」で日付を賢く操作！

"closestIndexTo" の役割

"closestIndexTo" は、基準となる日付と配列内の日付の差を比較し、最も近い差を持つ日付のインデックスを返します。つまり、基準となる日付に近いほど、インデックス値は小さくなります。

"closestIndexTo" の使い方

import { closestIndexTo } from 'date-fns';

// 基準となる日付
const baseDate = new Date(2024, 6, 3); // 2024年7月3日

// 比較対象となる日付の配列
const dateArray = [
  new Date(2024, 6, 2), // 2024年7月2日
  new Date(2024, 6, 4), // 2024年7月4日
  new Date(2024, 6, 10), // 2024年7月10日
  new Date(2024, 5, 25), // 2024年6月25日
];

// closestIndexTo() を使用して、最も近い日付のインデックスを取得
const closestIndex = closestIndexTo(baseDate, dateArray);
console.log(closestIndex); // 0 を出力 (2024年7月2日が最も近い)

"closestIndexTo" の注意点

• 複数の候補が存在する場合は、最も小さいインデックスが返されます。
• 比較対象となる日付の配列に空の日付が含まれている場合、"closestIndexTo" は誤ったインデックスを返す可能性があります。空の日付を処理する場合は、事前に除去することをおすすめします。
• 基準となる日付と比較対象となる日付の配列は、同じ日付形式である必要があります。

• ユーザ入力の日付を最も近い標準的な日付に置き換え
• 未来の予定から最も近い予定を取得
• 過去のデータから最新の日付を取得

---

import { closestIndexTo } from 'date-fns';

// 過去のデータの配列
const dataArray = [
  { date: new Date(2024, 5, 20), value: 10 },
  { date: new Date(2024, 5, 25), value: 15 },
  { date: new Date(2024, 6, 1), value: 20 },
  { date: new Date(2024, 6, 5), value: 25 },
];

// 基準となる日付 (現在の日付)
const baseDate = new Date();

// closestIndexTo() を使用して、最新のデータのインデックスを取得
const latestIndex = closestIndexTo(baseDate, dataArray.map(data => data.date));
console.log(latestIndex); // 3 を出力 (2024年6月5日のデータが最新)

// 最新のデータを取得
const latestData = dataArray[latestIndex];
console.log(latestData); // { date: Date 2024-06-05T00:00:00.000Z, value: 25 }

未来の予定から最も近い予定を取得

import { closestIndexTo } from 'date-fns';

// 未来の予定の配列
const scheduleArray = [
  { title: 'ミーティング', date: new Date(2024, 7, 10) },
  { title: 'プレゼンテーション', date: new Date(2024, 7, 15) },
  { title: '研修', date: new Date(2024, 7, 22) },
];

// 基準となる日付 (現在の日付)
const baseDate = new Date();

// closestIndexTo() を使用して、最も近い予定のインデックスを取得
const closestIndex = closestIndexTo(baseDate, scheduleArray.map(schedule => schedule.date));
console.log(closestIndex); // 0 を出力 (2024年7月10日の予定が最も近い)

// 最も近い予定を取得
const closestSchedule = scheduleArray[closestIndex];
console.log(closestSchedule); // { title: 'ミーティング', date: Date 2024-07-10T00:00:00.000Z }

import { closestIndexTo, isSameDay } from 'date-fns';

// ユーザ入力の日付
const userInputDate = new Date('2024-07-05 18:30:00');

// 標準的な日付の配列
const standardDates = [
  new Date(2024, 7, 5, 9, 0), // 午前9時
  new Date(2024, 7, 5, 12, 0), // 午後12時
  new Date(2024, 7, 5, 15, 0), // 午後3時
];

// closestIndexTo() を使用して、最も近い標準的な日付のインデックスを取得
const closestIndex = closestIndexTo(userInputDate, standardDates);

// ユーザ入力の日付と最も近い標準的な日付が同じ日かどうか確認
const isSameDate = isSameDay(userInputDate, standardDates[closestIndex]);

if (isSameDate) {
  console.log('ユーザ入力の日付は標準的な日付と同じです。');
} else {
  console.log('ユーザ入力の日付を最も近い標準的な日付に置き換えます。');
  console.log(standardDates[closestIndex]); // 2024年7月5日 午後3時
}

---

forEach と Math.abs を使用する方法

import { isSameDay } from 'date-fns';

// 基準となる日付
const baseDate = new Date(2024, 6, 3); // 2024年7月3日

// 比較対象となる日付の配列
const dateArray = [
  new Date(2024, 6, 2), // 2024年7月2日
  new Date(2024, 6, 4), // 2024年7月4日
  new Date(2024, 6, 10), // 2024年7月10日
  new Date(2024, 5, 25), // 2024年6月25日
];

// 最も近い日付のインデックスと差を初期化
let closestIndex = 0;
let closestDiff = Infinity;

// forEach で配列内の各日付を処理
dateArray.forEach((date, index) => {
  const diff = Math.abs(baseDate.getTime() - date.getTime());

  // 差が小さい場合は、インデックスと差を更新
  if (diff < closestDiff) {
    closestIndex = index;
    closestDiff = diff;
  }
});

// closestIndex を出力
console.log(closestIndex); // 0 を出力 (2024年7月2日が最も近い)

Array.prototype.reduce を使用する方法

import { isSameDay } from 'date-fns';

// 基準となる日付
const baseDate = new Date(2024, 6, 3); // 2024年7月3日

// 比較対象となる日付の配列
const dateArray = [
  new Date(2024, 6, 2), // 2024年7月2日
  new Date(2024, 6, 4), // 2024年7月4日
  new Date(2024, 6, 10), // 2024年7月10日
  new Date(2024, 5, 25), // 2024年6月25日
];

// reduce で配列内の各日付を処理
const closestIndex = dateArray.reduce((closestIndex, date, index) => {
  const diff = Math.abs(baseDate.getTime() - date.getTime());

  // 差が小さい場合は、インデックスを更新
  if (diff < Math.abs(baseDate.getTime() - dateArray[closestIndex].getTime())) {
    return index;
  }

  return closestIndex;
}, 0);

// closestIndex を出力
console.log(closestIndex); // 0 を出力 (2024年7月2日が最も近い)

import { isSameDay } from 'date-fns';

// 基準となる日付
const baseDate = new Date(2024, 6, 3); // 2024年7月3日

// 比較対象となる日付の配列
const dateArray = [
  new Date(2024, 6, 2), // 2024年7月2日
  new Date(2024, 6, 4), // 2024年7月4日
  new Date(2024, 6, 10), // 2024年7月10日
  new Date(2024, 5, 25), // 2024年6月25日
];

// 最も近い日付のインデックスと差を初期化
let closestIndex = 0;
let closestDiff = Infinity;

// for ループで配列内の各日付を処理
for (let i = 0; i < dateArray.length; i++) {
  const diff = Math.abs(baseDate.getTime() - dateArray[i].getTime());

  // 差が小さい場合は、インデックスと差を更新
  if (diff