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

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠教育3枚目⁠——⁠出席管理 / 出欠⁠（生徒×日付の出欠マトリクス × 出席率 × 日次サマリ × 欠席連絡）。

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

結果 — 4.5/5

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

今回の主役 — 「広げた説明」が、翌回の予備知識ゼロの AI にちゃんと届いた

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

⁠ScheduleGrid コンポーネントを使った——手組みしなかった。⁠ 見つけやすさ: ⁠この時間割以外の用途でも申し分ない。⁠ 「ScheduleGrid」という名前にもかかわらず、その JSDoc と gunjo.jp の docs ページは「成績表」「シフト表」「比較/コホート行列」を明記している。「出欠」という語そのものは無いが、「生徒 × 日付、リッチで操作・編集できるセル、セルごとの tone」がほぼそのまま説明されている。⁠カタログの最初の走査で見つけた。これは、名前の由来の分野の外でも再利用されるように、コンポーネントをどう説明すべきかの手本だ。⁠

⁠閉ループが完成した⁠:

#70 ScheduleGrid を作る（時間割）
#71 成績表で必要 → 説明が狭く見つからず → 説明を広げる
#72 出欠で必要 → 一発で発見・採用「最初の走査で」

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

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

src で反映 — Badge に icon prop（3回目で作る）

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

課題に記録だけ

• 🟡 ⁠Sheet/Dialog に本文のスクロール領域が無い⁠（長いフォームで overflow-y-auto を手当て・#293・1回目）。
• 🟡 ⁠トーンの語彙が4種類で重複⁠（ScheduleCellTone/ChartTone/MeterTone/BadgeVariant）で、標準となる状態の型が無く、同じ状態をグリッド/バッジ/チャートに出すたび自前で対応付け（#294・1回目・設計）。
• 🟢 凡例(legend)コンポーネントが無い（Badge icon で状態のトークンは揃ったので合成できる）。

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

#71 で「在るのに見つからない＝無いのと同じ」と書いた。#72 はその逆——⁠説明を広げたら、翌日ちゃんと見つかった⁠。デザインシステムの品質は「正しいコンポーネントが在る／正しく動く」だけでなく「⁠正しいコンポーネントが見つかる⁠」を含む。予備知識ゼロの AI に作らせるテストは毎回「予備知識ゼロの利用者が探して見つけられるか」を試すので、説明の枠の良し悪しが数字で出る。そして Badge icon を3回ルールで反映——色だけに頼らないステータスが、もう1プロパティで書ける。

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

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

試す

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

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