Reactで、予定を横棒で並べるガントチャートを作る方法

const DAY = 24 * 60 * 60 * 1000;

// 'YYYY-MM-DD' を、1970-01-01 から数えた日数にする。
// Date.UTC で計算するので、ブラウザのタイムゾーンや夏時間の影響を受けない
export function toDay(date: string): number {
  const [y, m, d] = date.split('-').map(Number);
  return Date.UTC(y, m - 1, d) / DAY;
}

// 日数から、見出しに出す月・日・曜日（0 が日曜）を取り出す
export function dayParts(day: number) {
  const dt = new Date(day * DAY);
  return { month: dt.getUTCMonth() + 1, date: dt.getUTCDate(), weekday: dt.getUTCDay() };
}

$ TZ=America/New_York node dst.mjs
TZ = America/New_York
2026-03-07 → 2026-03-09: ローカル時刻の差 1.9583333333333333（Math.floor 1、Math.ceil 2）、Date.UTC の差 2
2026-10-31 → 2026-11-02: ローカル時刻の差 2.0416666666666665（Math.floor 2、Math.ceil 3）、Date.UTC の差 2
new Date('2026-11-02') の getDate() 1、getDay() 0、getUTCDate() 2、getUTCDay() 1

import { Fragment } from 'react';
import type { CSSProperties } from 'react';
import { dayParts, toDay } from './dates';

// end は最終日（その日を含む）
export type Task = { id: string; name: string; start: string; end: string };

type Props = { tasks: Task[]; firstDay: number; days: number };

const WEEKDAYS = ['日', '月', '火', '水', '木', '金', '土'];

export function Gantt({ tasks, firstDay, days }: Props) {
  const lastDay = firstDay + days - 1;
  const columns = Array.from({ length: days }, (_, i) => firstDay + i);
  const grid: CSSProperties = {
    // 1列目は作業名、2列目からが1日ずつの列
    gridTemplateColumns: `8em repeat(${days}, minmax(32px, 1fr))`,
    gridTemplateRows: `auto repeat(${tasks.length}, 40px)`,
  };

  return (
    <div className="gantt-scroll">
      <div className="gantt" style={grid}>
        <div className="corner" style={{ gridColumn: 1, gridRow: 1 }}>作業</div>
        {columns.map((day, i) => {
          const { month, date, weekday } = dayParts(day);
          const weekend = weekday === 0 || weekday === 6;
          return (
            <Fragment key={day}>
              <div className={weekend ? 'day weekend' : 'day'} style={{ gridColumn: i + 2, gridRow: 1 }}>
                {i === 0 || date === 1 ? `${month}/${date}` : date}
                <br />
                {WEEKDAYS[weekday]}
              </div>
              {weekend && <div className="weekend-bg" style={{ gridColumn: i + 2, gridRow: '2 / -1' }} />}
            </Fragment>
          );
        })}
        {tasks.map((task, r) => {
          const row = r + 2;
          const start = toDay(task.start);
          const end = toDay(task.end);
          // 表示している期間からはみ出す部分を切り落とす
          const from = Math.max(start, firstDay);
          const to = Math.min(end, lastDay);
          const cut = [from > start && 'cut-start', to < end && 'cut-end'].filter(Boolean).join(' ');
          return (
            <Fragment key={task.id}>
              <div className="row-line" style={{ gridColumn: '1 / -1', gridRow: row }} />
              <div className="name" style={{ gridColumn: 1, gridRow: row }}>{task.name}</div>
              {from <= to && (
                <div
                  className={`bar ${cut}`.trim()}
                  style={{ gridColumn: `${from - firstDay + 2} / ${to - firstDay + 3}`, gridRow: row }}
                  title={`${task.name}：${task.start}〜${task.end}`}
                >
                  {end - start + 1}日
                </div>
              )}
            </Fragment>
          );
        })}
      </div>
    </div>
  );
}

import { useState } from 'react';
import { Gantt } from './Gantt';
import type { Task } from './Gantt';
import { dayParts, toDay } from './dates';

const tasks: Task[] = [
  { id: 'req', name: '要件の整理', start: '2026-11-02', end: '2026-11-04' },
  { id: 'design', name: 'デザイン', start: '2026-11-04', end: '2026-11-10' },
  { id: 'impl', name: '実装', start: '2026-11-09', end: '2026-11-20' },
  { id: 'test', name: 'テスト', start: '2026-11-16', end: '2026-11-24' },
  { id: 'release', name: '公開準備', start: '2026-11-23', end: '2026-11-25' },
  { id: 'retro', name: '振り返り', start: '2026-11-27', end: '2026-11-27' },
];

const DAYS = 14;
const label = (day: number) => {
  const { month, date } = dayParts(day);
  return `${month}/${date}`;
};

export function App() {
  const [firstDay, setFirstDay] = useState(() => toDay('2026-11-02'));
  return (
    <main>
      <div className="toolbar">
        <button onClick={() => setFirstDay((d) => d - 7)}>‹ 前の週</button>
        <span className="range">{label(firstDay)}〜{label(firstDay + DAYS - 1)}</span>
        <button onClick={() => setFirstDay((d) => d + 7)}>次の週 ›</button>
      </div>
      <Gantt tasks={tasks} firstDay={firstDay} days={DAYS} />
    </main>
  );
}

.bar {
  align-self: center;
  height: 24px;
  margin: 0 2px;
  border-radius: 6px;
  background: #00c8e8;
  color: #1f2a30;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

/* 期間の外へ続いている側は、角を丸めず端まで伸ばす */
.bar.cut-start { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.bar.cut-end { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }

[最初の表示] 範囲 11/2〜11/15
要件の整理: grid-column 2 / 5, 11/2(月)〜4(水), class="bar", 文字「3日」
デザイン: grid-column 4 / 11, 4(水)〜10(火), class="bar", 文字「7日」
実装: grid-column 9 / 16, 9(月)〜15(日), class="bar cut-end", 文字「12日」
土日の列 7土 8日 14土 15日
[次の週を1回押したあと] 範囲 11/9〜11/22
デザイン: grid-column 2 / 4, 11/9(月)〜10(火), class="bar cut-start", 文字「7日」
実装: grid-column 2 / 14, 11/9(月)〜20(金), class="bar", 文字「12日」
テスト: grid-column 9 / 16, 16(月)〜22(日), class="bar cut-end", 文字「9日」
[次の週を2回押したあと] 範囲 11/16〜11/29
実装: grid-column 2 / 7, 11/16(月)〜20(金), class="bar cut-start", 文字「12日」
テスト: grid-column 2 / 11, 11/16(月)〜24(火), class="bar", 文字「9日」
公開準備: grid-column 9 / 12, 23(月)〜25(水), class="bar", 文字「3日」
振り返り: grid-column 13 / 14, 27(金)〜27(金), class="bar", 文字「1日」

.gantt-scroll { overflow-x: auto; border: 1px solid #9aa5ab; }
.gantt {
  display: grid;
  min-width: max-content; /* 幅を列の合計に合わせる（作業名の sticky が途中で外れないように） */
  font-size: 13px;
}
.corner, .day { padding: 4px 0; border-bottom: 1px solid #9aa5ab; text-align: center; line-height: 1.3; }
.day.weekend { color: #067a98; }
.weekend-bg { background: #eefafd; }
.row-line { border-bottom: 1px solid #e3e8ea; }
.corner, .name {
  position: sticky; /* 横にスクロールしても、作業名は左端に残す */
  left: 0;
  z-index: 1;
  background: #fff;
  border-right: 1px solid #9aa5ab;
}

[14日、min-width: max-content あり] 枠の幅 326px、中身の幅 552px、.gantt の幅 552px。scrollLeft→作業名の左端: 0→1, 200→1, 226→1, 226→1
[14日、min-width: max-content なし] 枠の幅 326px、中身の幅 552px、.gantt の幅 326px。scrollLeft→作業名の左端: 0→1, 200→1, 226→-3, 226→-3
[31日、min-width: max-content あり] 枠の幅 326px、中身の幅 1096px、.gantt の幅 1096px。scrollLeft→作業名の左端: 0→1, 200→1, 400→1, 770→1
[31日、min-width: max-content なし] 枠の幅 326px、中身の幅 1096px、.gantt の幅 326px。scrollLeft→作業名の左端: 0→1, 200→1, 400→-177, 770→-547