Reactで、世界の都市の時刻を並べて表示する方法

// タイムゾーンごとの時刻・日付・時差を求める関数

type Formatters = {
  time: Intl.DateTimeFormat;
  date: Intl.DateTimeFormat;
  offset: Intl.DateTimeFormat;
  name: Intl.DateTimeFormat;
};

// Intl.DateTimeFormat は作るのに時間がかかるので、タイムゾーンごとに1回だけ作る
const cache = new Map<string, Formatters>();

function formattersFor(timeZone: string): Formatters {
  let f = cache.get(timeZone);
  if (!f) {
    f = {
      time: new Intl.DateTimeFormat('ja-JP', {
        timeZone, hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h23',
      }),
      date: new Intl.DateTimeFormat('ja-JP', { timeZone, month: 'short', day: 'numeric', weekday: 'short' }),
      offset: new Intl.DateTimeFormat('en-US', { timeZone, timeZoneName: 'longOffset' }),
      name: new Intl.DateTimeFormat('ja-JP', { timeZone, timeZoneName: 'longGeneric' }),
    };
    cache.set(timeZone, f);
  }
  return f;
}

// タイムゾーンの名前として使える文字列か
export function isValidTimeZone(timeZone: string): boolean {
  try {
    new Intl.DateTimeFormat('en-US', { timeZone });
    return true;
  } catch {
    return false; // 使えない名前は RangeError になる
  }
}

// ブラウザが内部で使う名前。別名（Asia/Kolkata と Asia/Calcutta など）を比べるときに使う
export function resolvedZone(timeZone: string): string {
  return new Intl.DateTimeFormat('en-US', { timeZone }).resolvedOptions().timeZone;
}

// formatToParts の結果から、type が合う部分の文字を取り出す
function part(f: Intl.DateTimeFormat, date: Date, type: Intl.DateTimeFormatPartTypes): string {
  return f.formatToParts(date).find((p) => p.type === type)?.value ?? '';
}

// その時点の UTC からのずれ（分）。"GMT+05:30" → 330、"GMT-04:00" → -240、"GMT" → 0
export function offsetMinutes(timeZone: string, date: Date): number {
  const m = part(formattersFor(timeZone).offset, date, 'timeZoneName').match(/([+-])(\d{2}):(\d{2})/);
  if (!m) return 0;
  const minutes = Number(m[2]) * 60 + Number(m[3]);
  return m[1] === '-' ? -minutes : minutes;
}

// 分を時と分に分ける。-330 → { sign: '−', h: 5, m: 30 }
function split(minutes: number) {
  const abs = Math.abs(minutes);
  return { sign: minutes < 0 ? '−' : '+', h: Math.floor(abs / 60), m: abs % 60 };
}

// その地域の暦で、1970-01-01 から何日目か
function dayNumber(date: Date, offset: number): number {
  return Math.floor((date.getTime() + offset * 60_000) / 86_400_000);
}

export type ZoneTime = {
  time: string; // "15:04:05"
  date: string; // "11月5日(木)"
  zoneName: string; // "米国東部時間"。名前がなく "GMT+00:00" のような形になるときは ""
  utcOffset: string; // "UTC−5"、"UTC+5:30"
  diff: string; // 基準の地域との時差。"−14時間"、"−3時間30分"、同じなら ""
  dayShift: -1 | 0 | 1; // 基準の地域から見て 前日 / 同じ日 / 翌日
};

export function zoneTime(timeZone: string, now: Date, baseZone: string): ZoneTime {
  const f = formattersFor(timeZone);
  const name = part(f.name, now, 'timeZoneName');
  const offset = offsetMinutes(timeZone, now);
  const baseOffset = offsetMinutes(baseZone, now);
  const o = split(offset);
  const d = split(offset - baseOffset);
  return {
    time: f.time.format(now),
    date: f.date.format(now),
    zoneName: name.startsWith('GMT') ? '' : name,
    utcOffset: offset === 0 ? 'UTC' : `UTC${o.sign}${o.h}${o.m ? `:${String(o.m).padStart(2, '0')}` : ''}`,
    diff: offset === baseOffset ? '' : `${d.sign}${d.h ? `${d.h}時間` : ''}${d.m ? `${d.m}分` : ''}`,
    dayShift: Math.sign(dayNumber(now, offset) - dayNumber(now, baseOffset)) as -1 | 0 | 1,
  };
}

東京 | 日本標準時（UTC+9） | 15:00:00 | 11月5日(木)
ニューヨーク | 米国東部時間（UTC−5） | 01:00:00 | 11月5日(木)−14時間
ロンドン | イギリス時間（UTC） | 06:00:00 | 11月5日(木)−9時間
デリー | インド標準時（UTC+5:30） | 11:30:00 | 11月5日(木)−3時間30分
シドニー | オーストラリア東部時間（UTC+11） | 17:00:00 | 11月5日(木)+2時間

東京 | 日本標準時（UTC+9） | 10:30:00 | 11月6日(金)翌日+14時間
ニューヨーク | 米国東部時間（UTC−5） | 20:30:00 | 11月5日(木)
ロンドン | イギリス時間（UTC） | 01:30:00 | 11月6日(金)翌日+5時間
デリー | インド標準時（UTC+5:30） | 07:00:00 | 11月6日(金)翌日+10時間30分
シドニー | オーストラリア東部時間（UTC+11） | 12:30:00 | 11月6日(金)翌日+16時間

2026-11-01T05:59:59.000Z  ニューヨーク | 米国東部時間（UTC−4） | 01:59:59 | 11月1日(日)−13時間
2026-11-01T06:00:00.000Z  ニューヨーク | 米国東部時間（UTC−5） | 01:00:00 | 11月1日(日)−14時間

import { useEffect, useState } from 'react';

// 秒が変わるごとに、今の時刻を返す
export function useNow(): Date {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    let id = 0;
    const tick = () => {
      const d = new Date();
      setNow(d);
      id = window.setTimeout(tick, 1000 - d.getMilliseconds());
    };
    tick();
    return () => clearTimeout(id);
  }, []);
  return now;
}

import { useId, useMemo, useState } from 'react';
import { useNow } from './useNow';
import { isValidTimeZone, resolvedZone, zoneTime } from './zoneTime';

export type City = { label: string; timeZone: string };

type Props = { initialCities: City[] };

// 閲覧している人のタイムゾーン（時差を数える基準）
const baseZone = Intl.DateTimeFormat().resolvedOptions().timeZone;

export function WorldClock({ initialCities }: Props) {
  const now = useNow(); // 全部の都市で、1つの時刻を使う
  const [cities, setCities] = useState(() =>
    initialCities.filter((c) => isValidTimeZone(c.timeZone)),
  );

  return (
    <section className="world-clock">
      <ul>
        {cities.map((c) => (
          <ClockRow
            key={c.timeZone}
            city={c}
            now={now}
            onRemove={() => setCities((list) => list.filter((x) => x.timeZone !== c.timeZone))}
          />
        ))}
      </ul>
      <AddCity
        onAdd={(timeZone) =>
          setCities((list) =>
            // 別名で同じ地域がもう並んでいたら、足さない
            list.some((x) => resolvedZone(x.timeZone) === resolvedZone(timeZone))
              ? list
              : [...list, { label: timeZone.split('/').pop()!.replaceAll('_', ' '), timeZone }],
          )
        }
      />
    </section>
  );
}

function ClockRow({ city, now, onRemove }: { city: City; now: Date; onRemove: () => void }) {
  const t = zoneTime(city.timeZone, now, baseZone);
  return (
    <li>
      <div className="city">
        <strong>{city.label}</strong>
        <small>{t.zoneName ? `${t.zoneName}（${t.utcOffset}）` : t.utcOffset}</small>
      </div>
      <time className="time" dateTime={now.toISOString()}>
        {t.time}
      </time>
      <div className="date">
        {t.date}
        {t.dayShift === -1 && <span className="shift">前日</span>}
        {t.dayShift === 1 && <span className="shift">翌日</span>}
        {t.diff && <small>{t.diff}</small>}
      </div>
      <button type="button" onClick={onRemove} aria-label={`${city.label}を消す`}>
        ×
      </button>
    </li>
  );
}

function AddCity({ onAdd }: { onAdd: (timeZone: string) => void }) {
  const id = useId();
  const [value, setValue] = useState('');
  // Intl.supportedValuesOf の一覧には "UTC" が入っていないので、先頭に足す
  const zones = useMemo(() => ['UTC', ...Intl.supportedValuesOf('timeZone')], []);
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        if (value) onAdd(value);
        setValue('');
      }}
    >
      <label htmlFor={id}>都市を足す</label>
      <select id={id} value={value} onChange={(e) => setValue(e.target.value)}>
        <option value="">選んでください</option>
        {zones.map((z) => (
          <option key={z} value={z}>
            {z}
          </option>
        ))}
      </select>
      <button type="submit" disabled={!value}>
        追加
      </button>
    </form>
  );
}

+599ms 進めた後: 2026-11-05T06:00:00.999Z 時刻の欄 15:00:00, 01:00:00, 06:00:00, 11:30:00, 17:00:00
+1ms 進めた後: 2026-11-05T06:00:01.000Z 時刻の欄 15:00:01, 01:00:01, 06:00:01, 11:30:01, 17:00:01

.world-clock ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.world-clock li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    'city time remove'
    'city date remove';
  align-items: center;
  gap: 0 12px;
  padding: 10px 0;
  border-bottom: 1px solid #d5eef4;
}
.world-clock .city { grid-area: city; }
.world-clock .city small,
.world-clock .date small {
  display: block;
  color: #5b6b73;
}
.world-clock .time {
  grid-area: time;
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
  color: #067a98;
  text-align: right;
}
.world-clock .date { grid-area: date; text-align: right; }
.world-clock .shift {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 4px;
  background: #eefafd;
  color: #067a98;
}
.world-clock li button { grid-area: remove; }
.world-clock form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}