AI に時間割を作らせてみた — 3回出た「タイムグリッド」を、ついにコンポーネントにした（やってみた #70）
/class-timetable375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI に時間割を作らせてみた — 3回出た「タイムグリッド」を、ついにコンポーネントにした（やってみた #70）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。新業界・教育1枚目——時間割 / 授業管理（時限×曜日グリッド × 競合検出 × 担当コマ数 × 休講/補講）。
製造6枚を締めて、教育へ移る。1枚目は学校の時間割。時限（縦）×曜日（横）のグリッドに授業を並べ、教員/教室の重複を検出する画面。そして3回連続で新しいコンポーネントを作らずに済んだ後、ついに作った回——3回出た欠落が満ちたから。
結果 — 3/5（予備知識ゼロの AI 版）→ src でコンポーネント化
予備知識ゼロの AI のスコアは 3/5。理由は明快：「スケジューリング画面の核＝タイムグリッドのコンポーネントが無い」。tsc/build 緑・role=grid のアクセシビリティ・競合2件検出・375px——だがグリッドは~280行 手組みだった。
今回の主役 — 3回目でルールが満ちて、作った
タイムグリッド（時間軸の配置レイヤー）の欠如は、これで3回目:
#27 週次スケジューラ（時刻×イベント・~280行手組み）
#68 生産ガント（ライン×時間軸・手組み）
#70 学校時間割（時限×曜日・~280行手組み）
予備知識ゼロの AI も「前の /schedule ルートが同じ欠落を独立に踏んでいる」と確認（#27）。3回ルールが満ちた → 作る（#142・PR #287）。
ただしこの欠落は3つの顔を持つ：①連続時刻グリッド+重なり詰め（WeekView）②リソース×連続時間軸の Gantt ③離散の 時限×曜日 マトリクス。最も扱いやすく最頻出の③を ScheduleGrid として作った:
-
role="grid" + rowheader/columnheader/gridcell・aria-row/colindex・セルの合成読み上げ名（曜日+時限+詳細）で競合/利用不可/空きを読み上げ（色だけに頼らない）。- セルごとの
tone（destructive で競合リング）・unavailable破線・onSelectでセルをボタン化。- roving-tabindex の矢印キー移動（Arrow/Home/End・Enter/Space で選択・グリッド全体で tab 1つ）。
- 固定ヘッダ ＋ 閉じ込めた横スクロール（
[contain:paint]）で 375px でもページを押し出さない——予備知識ゼロの AI が毎回手で診断していたモバイルでの横溢れバグを、コンポーネントに内蔵。
ブラウザ実証: role=grid（4 rowheader+6 columnheader+20 gridcell）・競合セルの合成 aria＋ring-destructive・矢印キーで focus 移動・375px でページ横溢れ 0px（グリッドは内部スクロール 662>311）。
#142 は ScheduleGrid で離散グリッドの顔だけ閉じ、連続時間軸の WeekView(#27)/Gantt(#68) は別の大型コンポーネントとして残す。
業界越えはここでも
-
Meter direction/target/thresholds（倉庫/SLA）→ 教員の週コマ数オーバー。value=コマ数 max=上限 target=上限で超過を自動 destructive。6業界連続の実戦採用。 Banner(role=status)/Alert(role=alert) → 競合なし/あり・Sheet→ セル編集パネル。
課題に記録だけ
- 🟡 ToggleGroup に項目ごとの variant が無い（通常/休講/補講の区分で 休講=赤・補講=青 にできず手組み・#288・1回目）。
- 🟡 広い表/グリッドが 375px でページに横スクロールを漏らす（
contain:paintが要・ScheduleGrid は内蔵済だが Table/DataTable で再発・#289）。 - 🟢 Calendar の名前が誤解を招く（date-picker なのに week-view を期待される・#142 にメモ）。
学び — 3回ルールは「待つ」だけでなく「満ちたら作る」
#67(DAG)→#68(ガント)→#69(引当) と3回、新しいコンポーネントを作らずに済んだが、それは欠落が1〜2回目で「待ち」だったから。#70 でタイムグリッドが3回目になり、ルールが満ちて作った。3回ルールは消極的な見送りじゃなく、"3回手で埋めた痛みが揃った瞬間に作る" 積極的な合図。しかも予備知識ゼロの AI が3回かけて磨いた解（アクセシブルな grid ロール・競合リング・contain:paint）を、そのままコンポーネントに固められた——手組みの試行が設計仕様になる。残る大型は系譜グラフ(#281)と連続時間軸スケジューラ(#142 の残り)。
次回予告（やってみた #71）
- 教育をもう1枚（成績管理/出席 or 学習進捗LMS）で2枚目。系譜#281・連続時間軸#142残りの再出現も観測。
試す
まだ alpha。3回出たタイムグリッドをついに ScheduleGrid にまとめ、教育へ移った回。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。