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