Reactで、日付ごとに区切ったタイムラインを表示する方法

import type { Entry } from './group';

// わざと順番をばらばらにしてある
export const entries: Entry[] = [
  { id: 'a1', at: '2026-11-03T21:40:00+09:00', text: '記事の下書きを保存しました' },
  { id: 'a2', at: '2026-11-04T08:30:00+09:00', text: 'コメントに返信しました' },
  // …（全部で12件）
];

--- TZ=Asia/Tokyo ---
2026-11-04T00:20:00+09:00  toISOString: 2026-11-03  getDate: 2026-11-04  dayKey(Asia/Tokyo): 2026-11-04
2026-11-04T08:30:00+09:00  toISOString: 2026-11-03  getDate: 2026-11-04  dayKey(Asia/Tokyo): 2026-11-04
2026-11-03T07:15:00+09:00  toISOString: 2026-11-02  getDate: 2026-11-03  dayKey(Asia/Tokyo): 2026-11-03
2026-11-02T00:10:00+09:00  toISOString: 2026-11-01  getDate: 2026-11-02  dayKey(Asia/Tokyo): 2026-11-02
2026-11-01T23:50:00+09:00  toISOString: 2026-11-01  getDate: 2026-11-01  dayKey(Asia/Tokyo): 2026-11-01
--- TZ=UTC ---
2026-11-04T00:20:00+09:00  toISOString: 2026-11-03  getDate: 2026-11-03  dayKey(Asia/Tokyo): 2026-11-04
2026-11-04T08:30:00+09:00  toISOString: 2026-11-03  getDate: 2026-11-03  dayKey(Asia/Tokyo): 2026-11-04
2026-11-03T07:15:00+09:00  toISOString: 2026-11-02  getDate: 2026-11-02  dayKey(Asia/Tokyo): 2026-11-03
2026-11-02T00:10:00+09:00  toISOString: 2026-11-01  getDate: 2026-11-01  dayKey(Asia/Tokyo): 2026-11-02
2026-11-01T23:50:00+09:00  toISOString: 2026-11-01  getDate: 2026-11-01  dayKey(Asia/Tokyo): 2026-11-01

export type Entry = { id: string; at: string; text: string };

export type DayGroup<T> = { key: string; items: T[] };

// timeZone で見たときの日付を "2026-11-04" の形で返す
export function dayKey(date: Date, fmt: Intl.DateTimeFormat): string {
  const parts = fmt.formatToParts(date);
  const get = (type: Intl.DateTimeFormatPartTypes) => parts.find((p) => p.type === type)!.value;
  return `${get('year')}-${get('month')}-${get('day')}`;
}

// 新しい順に並べてから、同じ日付が続く間を1つのグループにまとめる
export function groupByDay<T extends { at: string }>(entries: T[], timeZone: string): DayGroup<T>[] {
  const fmt = new Intl.DateTimeFormat('en-US', { timeZone, year: 'numeric', month: '2-digit', day: '2-digit' });
  const sorted = [...entries].sort((a, b) => Date.parse(b.at) - Date.parse(a.at));
  const groups: DayGroup<T>[] = [];
  for (const entry of sorted) {
    const key = dayKey(new Date(entry.at), fmt);
    const last = groups.at(-1);
    if (last && last.key === key) {
      last.items.push(entry);
    } else {
      groups.push({ key, items: [entry] });
    }
  }
  return groups;
}

// "2026-11-04" を「2026年11月4日(水)」にする
const dayLabel = new Intl.DateTimeFormat('ja-JP', { timeZone: 'UTC', year: 'numeric', month: 'long', day: 'numeric', weekday: 'short' });
export function formatDay(key: string): string {
  const [y, m, d] = key.split('-').map(Number);
  return dayLabel.format(new Date(Date.UTC(y, m - 1, d)));
}

2026年11月4日(水) 2026-11-04 12:05, 08:30, 00:20
2026年11月3日(火) 2026-11-03 21:40, 16:20, 13:30, 07:15
2026年11月2日(月) 2026-11-02 18:00, 09:45, 00:10
2026年11月1日(日) 2026-11-01 23:50, 10:00

グループの数: 12
2026-11-03(1) 2026-11-04(1) 2026-11-02(1) 2026-11-04(1) 2026-11-03(1) 2026-11-01(1) 2026-11-04(1) 2026-11-02(1) 2026-11-03(1) 2026-11-01(1) 2026-11-02(1) 2026-11-03(1)

import { useId, useMemo } from 'react';
import { formatDay, groupByDay, type Entry } from './group';

type Props = { entries: Entry[]; timeZone?: string };

export function Timeline({ entries, timeZone = 'Asia/Tokyo' }: Props) {
  const id = useId();
  const groups = useMemo(() => groupByDay(entries, timeZone), [entries, timeZone]);
  const time = useMemo(
    () => new Intl.DateTimeFormat('ja-JP', { timeZone, hour: '2-digit', minute: '2-digit' }),
    [timeZone],
  );

  return (
    <div className="timeline">
      {groups.map((group) => (
        <section key={group.key} aria-labelledby={`${id}-${group.key}`}>
          <h2 id={`${id}-${group.key}`} className="day">
            <time dateTime={group.key}>{formatDay(group.key)}</time>
          </h2>
          <ol>
            {group.items.map((entry) => (
              <li key={entry.id}>
                <time dateTime={entry.at}>{time.format(new Date(entry.at))}</time>
                <p>{entry.text}</p>
              </li>
            ))}
          </ol>
        </section>
      ))}
    </div>
  );
}

- region "2026年11月4日(水)":
  - heading "2026年11月4日(水)" [level=2]:
    - time: 2026年11月4日(水)
  - list:
    - listitem:
      - time: 12:05
      - paragraph: 記事を公開しました
    - listitem:
      - time: 08:30
      - paragraph: コメントに返信しました
    - listitem:
      - time: 00:20
      - paragraph: 目次を直しました

body { margin: 0; background: #fff; color: #1f2a30; font-family: "IPAGothic", sans-serif; }
.timeline { max-width: 360px; margin: 0 auto; }
.day {
  position: sticky; top: 0; z-index: 1; margin: 0; padding: 8px 12px;
  background: #eefafd; color: #067a98; font-size: 16px;
  border-bottom: 1px solid #00c8e8;
}
.timeline ol { list-style: none; margin: 0 0 0 20px; padding: 4px 12px 16px 20px; border-left: 2px solid #00c8e8; }
.timeline li { position: relative; padding: 8px 0; }
.timeline li::before {
  content: ''; position: absolute; left: -28px; top: 13px;
  width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #00c8e8;
}
.timeline li time { font-size: 13px; color: #555f66; }
.timeline li p { margin: 2px 0 0; }