Reactで、土日と祝日を除いた営業日を数える方法

import holiday_jp from '@holiday-jp/holiday_jp';
import type { Holidays } from './businessDays';

export const holidays: Holidays = holiday_jp.holidays;

// 一覧に入っている最初の年の1月1日から、最後の年の12月31日まで
const dates = Object.keys(holidays).sort();
export const coverage = {
  from: `${dates[0].slice(0, 4)}-01-01`,
  to: `${dates[dates.length - 1].slice(0, 4)}-12-31`,
};

// input type="date" の value（"YYYY-MM-DD"）で、土日と祝日を除いた営業日を扱う関数

// 祝日の一覧。キーは "YYYY-MM-DD"
export type Holidays = Readonly<Record<string, { readonly name: string }>>;

const MS_PER_DAY = 86_400_000;

// 1970-01-01 から何日目か（UTC で数えるので、タイムゾーンの影響を受けない）
function toDayNumber(value: string): number {
  const [y, m, d] = value.split('-').map(Number);
  const date = new Date(0);
  date.setUTCFullYear(y, m - 1, d);
  return date.getTime() / MS_PER_DAY;
}

function fromDayNumber(n: number): string {
  return new Date(n * MS_PER_DAY).toISOString().slice(0, 10);
}

// 土日でも祝日でもない日か
export function isBusinessDay(value: string, holidays: Holidays): boolean {
  const dow = new Date(toDayNumber(value) * MS_PER_DAY).getUTCDay(); // 0 = 日曜 … 6 = 土曜
  return dow !== 0 && dow !== 6 && !Object.hasOwn(holidays, value);
}

// start から end まで（両端を含む）の営業日の数と、平日に当たったので除いた祝日
export function countBusinessDays(start: string, end: string, holidays: Holidays) {
  let count = 0;
  const skipped: { date: string; name: string }[] = [];
  for (let n = toDayNumber(start); n <= toDayNumber(end); n++) {
    const value = fromDayNumber(n);
    if (isBusinessDay(value, holidays)) count++;
    else if (Object.hasOwn(holidays, value) && isBusinessDay(value, {})) {
      skipped.push({ date: value, name: holidays[value].name });
    }
  }
  return { count, skipped };
}

// start の翌日から数えて、days 日目の営業日
export function addBusinessDays(start: string, days: number, holidays: Holidays): string {
  let n = toDayNumber(start);
  for (let left = days; left > 0; ) {
    n++;
    if (isBusinessDay(fromDayNumber(n), holidays)) left--;
  }
  return fromDayNumber(n);
}

import { useId, useState } from 'react';
import { addBusinessDays, countBusinessDays, type Holidays } from './businessDays';

type Props = {
  holidays: Holidays;
  // 祝日の一覧が用意されている範囲（"YYYY-MM-DD"）
  coverage: { from: string; to: string };
  defaultStart?: string;
  defaultEnd?: string;
};

export function BusinessDayCounter({ holidays, coverage, defaultStart = '', defaultEnd = '' }: Props) {
  const id = useId();
  const [start, setStart] = useState(defaultStart);
  const [end, setEnd] = useState(defaultEnd);
  const [days, setDays] = useState(10);

  // "YYYY-MM-DD" は、文字列のまま比べても日付の順になる
  const inCoverage = (v: string) => coverage.from <= v && v <= coverage.to;
  const ready = start !== '' && end !== '' && start <= end;
  const result = ready && inCoverage(start) && inCoverage(end)
    ? countBusinessDays(start, end, holidays)
    : null;
  const validDays = Number.isInteger(days) && days >= 1 && days <= 1000;
  const due = start !== '' && inCoverage(start) && validDays
    ? addBusinessDays(start, days, holidays)
    : null;

  return (
    <div className="business-days">
      <label htmlFor={`${id}-start`}>開始日</label>
      <input id={`${id}-start`} type="date" min={coverage.from} max={coverage.to}
        value={start} onChange={(e) => setStart(e.target.value)} />
      <label htmlFor={`${id}-end`}>終了日</label>
      <input id={`${id}-end`} type="date" min={coverage.from} max={coverage.to}
        value={end} onChange={(e) => setEnd(e.target.value)} />

      <output htmlFor={`${id}-start ${id}-end`} aria-live="polite">
        {!ready ? (
          <p>開始日と、それより後の終了日を選んでください</p>
        ) : !result ? (
          <p>{coverage.from.slice(0, 4)}年から{coverage.to.slice(0, 4)}年までの日付を選んでください</p>
        ) : (
          <>
            <p className="count">営業日 <strong>{result.count}</strong> 日</p>
            {result.skipped.length > 0 && (
              <>
                <p>平日の祝日（数えていません）</p>
                <ul>
                  {result.skipped.map((h) => (
                    <li key={h.date}>{h.date.slice(5).replace('-', '/')} {h.name}</li>
                  ))}
                </ul>
              </>
            )}
          </>
        )}
      </output>

      <label htmlFor={`${id}-days`}>営業日数</label>
      <input id={`${id}-days`} type="number" min={1} max={1000}
        value={Number.isNaN(days) ? '' : days} onChange={(e) => setDays(e.target.valueAsNumber)} />
      <output htmlFor={`${id}-start ${id}-days`} className="due">
        {!due
          ? '範囲内の開始日と、1〜1000 の営業日数を入れてください'
          : inCoverage(due)
            ? `開始日の ${days} 営業日後は ${due}`
            : '祝日の一覧がない年にかかるため、計算できません'}
      </output>
    </div>
  );
}

.business-days {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 12px;
  align-items: center;
  max-width: 360px;
}
.business-days output {
  grid-column: 1 / -1;
}
.business-days output p,
.business-days ul {
  margin: 4px 0;
}
.business-days .count strong {
  font-size: 2rem;
  color: #067a98;
}

<BusinessDayCounter holidays={holidays} coverage={coverage}
  defaultStart="2026-04-27" defaultEnd="2026-05-08" />

const companyHolidays: Holidays = {
  ...holidays,
  '2026-12-29': { name: '年末年始休業' },
  '2026-12-30': { name: '年末年始休業' },
  '2026-12-31': { name: '年末年始休業' },
  '2027-01-02': { name: '年末年始休業' },
  '2027-01-03': { name: '年末年始休業' },
};

import h2026 from '@holiday-jp/holiday_jp/lib/holidays_every_year/2026';
import h2027 from '@holiday-jp/holiday_jp/lib/holidays_every_year/2027';
import h2028 from '@holiday-jp/holiday_jp/lib/holidays_every_year/2028';
import type { Holidays } from './businessDays';

// 使う年の分だけ読み込む
export const holidays: Holidays = { ...h2026, ...h2027, ...h2028 };
export const coverage = { from: '2026-01-01', to: '2028-12-31' };