AI に出欠管理を作らせてみた — 昨日「広げた」部品が、今日ちゃんと見つかった（やってみた #72）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。教育3枚目——出席管理 / 出欠（生徒×日付の出欠マトリクス × 出席率 × 日次サマリ × 欠席連絡）。

教育の3枚目は出欠管理。生徒×日付のマトリクスに出席/欠席/遅刻を記録する画面。そして前回(#71)の学び——「ScheduleGrid の framing が狭くて見つからなかった→広げた」——が、今日その通りに効いたかを検証する回になった。

結果 — 4.5/5

tsc/build 緑・console 0・375px横溢れ0・生徒×日付マトリクス・出席率メーター・日次サマリ・出欠入力 Sheet（ライブ再計算）・要注意フラグ。

今回の主役 — 「広げた framing」が、翌回の cold AI にちゃんと届いた

前回 #71 で、ScheduleGrid が「時間割用」と狭く説明されて見つからなかった。説明を「汎用2Dマトリクス（成績表/シフト/比較行列…）」に広げた。今回 #72、出欠マトリクス（生徒×日付）を組む cold AI は——

I used the ScheduleGrid primitive — I did not hand-roll it. Discoverability: excellent for this non-schedule use. Despite the name "ScheduleGrid," its JSDoc and the gunjo.jp docs page explicitly list "gradebooks," "shift rosters," and "comparison/cohort matrices." "Attendance" isn't named verbatim, but "students × days, rich navigable/editable cells, a tone per cell" is described almost exactly. I found it on the first catalog scan. This is a model of how to document a component so it gets reused outside its namesake domain.

閉ループが完成した:

#70 ScheduleGrid を build（時間割）
#71 成績表で必要 → framing 狭く見つからず → 説明を広げる
#72 出欠で必要 → 一発で発見・採用「first catalog scan」

「部品を作る」だけでなく「発見されるように説明を広げる」ことの効果が、翌回の実測で証明された。framing は飾りじゃなく、再利用の可否を決める設計要素。

越境も継続: Meter direction="higher-is-better"+target={90}→出席率（90%目標ライン・要注意=destructive・連続越境）・DistributionBar→日次サマリ・Statistic→クラスKPI。

src で land — Badge に icon prop（3回目で build）

• 🟡→✅ Badge が色のみだった穴を fix（#66 OEE・#69 引当・#72 出欠で3回手組み＝<Badge className="gap-1"><Icon h-3 w-3/>{label}</Badge>）。ReferenceValue/Delta は色非依存なのに最頻出の Badge が色だけ＝内部不整合。3回ルールで build（#276・PR #292）:
  • icon?: ReactNode — 先頭グリフを自動サイズ（svg→12px）＋余白（gap-1）。装飾扱い（aria-hidden）でラベルが意味を担う＝色だけに頼らないステータスピルが1プロパティ。
  • docs の「アイコン付き」例を手組みから prop に・variant 表に info/success/warning 補完。ブラウザ実証済。

起票だけ

• 🟡 Sheet/Dialog に Body スクロール領域無（長いフォームで overflow-y-auto を手当て・#293・1回目）。
• 🟡 トーン語彙が4種重複（ScheduleCellTone/ChartTone/MeterTone/BadgeVariant）で正準な semantic-status 型が無く、同じ状態をグリッド/バッジ/チャートに出すたび自前マッピング（#294・1回目・アーキ）。
• 🟢 凡例(legend)コンポーネント無（Badge icon で status token は揃ったので合成可）。

学び — 「発見可能性」は機能と同格の品質

#71 で「在るのに見つからない＝無いのと同じ」と書いた。#72 はその逆——説明を広げたら、翌日ちゃんと見つかった。デザインシステムの品質は「正しい部品が在る／正しく動く」だけでなく「正しい部品が見つかる」を含む。cold-test は毎回「文脈ゼロの利用者が探して見つけられるか」を試すので、framing の良し悪しが定量的に出る。そして Badge icon を3回ルールで land——色だけに頼らないステータスが、もう1プロパティで書ける。

次回予告（やってみた #73）

• **教育をもう1枚（学習進捗 / LMS ダッシュボード）**で4枚目。Progress/Meter 系の到達度・課題提出を観測。

試す

• gunjo.jp ／ npm @gunjo/ui ／ GitHub
• 前回まで: #1〜#71
• GunjoUI by UIXHERO

まだ alpha。昨日「広げた」ScheduleGrid が今日ちゃんと発見され、Badge icon を3回ルールで land した回。

---

<!-- 公開前: 相互URL差込／スクショ確定／EN(dev.to)ミラー -->