AI に LMS ダッシュボードを作らせてみた — 直近で作ったコンポーネントが、全部その場で再利用された（やってみた #73）
/learning-progress375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI に LMS ダッシュボードを作らせてみた — 直近で作ったコンポーネントが、全部その場で再利用された（やってみた #73）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。教育4枚目——学習進捗 / LMS ダッシュボード（コース進捗 × 課題提出マトリクス × 到達度 × 要支援学習者 × 活動推移）。
教育の4枚目は LMS ダッシュボード。コース進捗・課題提出・到達度を追い、要支援の学習者を見つける画面。そして「直近で作ったコンポーネントが、その場で全部再利用された」——複利が最高潮に達した回。
結果 — 4.5/5
tsc/build 緑・console 0・375px・コース進捗バー・課題提出マトリクス・到達度メーター・要支援リスト・週次推移。手組みはゼロ——全てのデータ表示に実コンポーネントがあった。
今回の主題 — 直近で作ったコンポーネントが、全部その場で効いた
予備知識ゼロの AI が使った主要コンポーネントは、ほぼ全部この数ラウンドで作った/直したもの:
-
ScheduleGrid（#70 で作る・#71 で説明を拡張）→ 生徒×課題の提出マトリクス「摩擦なし、本当に優秀」。説明の枠を広げた効果が2回連続で実証（#72 出欠に続き #73 提出マトリクス）。-
Badgeのiconprop（#72=前ラウンドで作った #276）→ 採点済/提出済/期限切れ の色に頼らないステータスピル「色に依存しない要件を1つの prop で解決した」。出荷した翌ラウンドで即採用。-
Meter direction="higher-is-better"+target（#256）→ 到達度 vs 到達ライン。何ラウンド連続か数えられないほどの実戦採用。
「他に手組みするものは無かった。どのデータ表示にも実在のコンポーネントがあった。ライブラリが明らかに想定していなかった分野にしては、際立って高い的中率だ。」
#70 ScheduleGrid・#72 Badge icon を作り、#73 で両方ともその場で発見・採用された。「作る→翌ラウンドの別画面が使う」の複利が、教育4枚で完全に回った。だから #73 は手組みゼロ・新しいコンポーネントを作らずに済んだ回——ライブラリが LMS をまるごと既存コンポーネントで賄った。
src で反映 — Grid のレスポンシブ列（3回目で作る）
新しいコンポーネントを作らずに済んだ、と言いつつ、1つ3回ルールが満ちた:
- 🟡→✅ Grid
colsが固定列のみだった欠落を修正（#114 cold-test #21・#68 生産計画・#73 LMS で3回）。cols={4}は 375px で溢れる、モバイルで安全なのはminItemWidthだけ、という罠。3回ルールで作る（PR #295）:colsがレスポンシブオブジェクト{ base, sm, md, lg, xl }を受けるように（cols={{ base: 1, md: 3 }}＝モバイル1列→md で3列）。固定数cols={3}は後方互換で据え置き（リフローさせたくない用途用）。- Tailwind v4 は「ソースに literal で現れたクラスしか生成しない」ので、breakpoint 別の literal マップを列挙。ビルド後 CSS に
{sm,md,lg,xl}:grid-cols-Nが全部生成されたことを確認。
課題に記録だけ
- 🟡 ChartColor 型が緩い（
color:"danger"が型チェックを通ってしまい無色で描画＝見えないバグ・#296・1回目・最も深刻）。 - 🟡 Meter の label が ReactNode だと role=meter の名前が消える（#297・1回目・#277/#286 と Meter の PR で束ねる）。
- 🟡 DataTable に caption/読み上げ名の prop が無い（#298・1回目）。
学び — 複利のピークと、3回ルールの両立
#73 は2つを同時に示した: ①直近で作ったコンポーネント（ScheduleGrid・Badge icon）が、その場の別画面で全部再利用された＝デザインシステムの複利が回り切った証拠（手組みゼロ）。②それでも Grid のレスポンシブ列が3回目に達したので作る＝「賄えてる」と「まだ欠落がある」は両立する。教育4枚で、ライブラリは LMS をほぼ完全に賄いつつ、3回ルールで残った欠落（Grid 列）を1つ埋めた。
次回予告（やってみた #74）
- 教育5枚目（公欠/保健室・部活動・三者面談予約 など）で教育を締めるか、別業界へ移る。連続時間軸スケジューラ#142残り・系譜#281 の大型も観測継続。
試す
まだ alpha。直近で作った ScheduleGrid と Badge icon が翌ラウンドで全部再利用され、Grid のレスポンシブ列を3回ルールで反映した回。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。