AI に管理画面のデータテーブルを作らせてみた（やってみた #6）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青を一度も見たことのない AI に実際の画面で組ませていく連載。#1〜#5 ログイン に続いて、今回は⁠管理画面のデータテーブル⁠。

条件は同じ。⁠出荷物そのもの（#52/#53 修正入り）＋docs だけ、ソースは見せない、provider のヒントも渡さない。⁠ お題は、名前・ロール・ステータス・参加日・MRR を持つ ~16 行の⁠ユーザー一覧⁠に、テキスト検索＋ステータスの Select フィルタ＋列ソート＋ページネーション＋ステータス Badge。

結果 — 4/5、そして #52 がまた効いていた

npm run build 成功、static prerender、⁠コンソールエラー0⁠。検索・ステータス絞り込み・列ソート・ページ送りすべて動作。

予備知識ゼロの AI は DataTable（TanStack Table ベース）を選び、⁠ソート・ページネーション・テキストフィルタが最初から入っている⁠と。そして今回も:

⁠provider 不要——確認。⁠ DataTable はソートヘッダとページネーションに Radix Tooltip を使うが、群青の Tooltip が必要な provider を自分の内側に持つので <TooltipProvider> は要らない。⁠サーバー側の事前描画（SSR）でのクラッシュなし。⁠

#3 で見つけて #52 で直した欠陥が、tooltip を多用する DataTable でも⁠もう出ない⁠。ループは閉じたまま。

粗さ — また「公開漏れ」、ただし今度はパターンが見えた

build を止めはしなかったが、型で書きたい利用者を詰まらせる不備:

import { type ColumnDef } from "@gunjo/ui" // ❌ 出ていない

DataTable の columns prop は ColumnDef 型を要求するのに、それが、まとめて呼び出す入口（@gunjo/ui）から公開されていない。使う人は @tanstack/react-table から直接 import するしかなく、それは⁠間接的な依存⁠（自分の package.json に無い）だから、厳密なインストール設定では壊れうる。→ #56

これ、⁠#4 の ChartDataPoint（#53）と同じ種類⁠。「公開コンポーネントの公開 prop が要求する型を、まとめて呼び出す入口（@gunjo/ui）が公開していない」。1個のバグじゃなく⁠パターン⁠だと分かったので、#56 では ColumnDef を出すだけでなく⁠公開漏れしている公開 prop 型を一巡監査⁠する。#3 の Tooltip と同じで、1個見つけたら種類ごとまとめて潰す。

ほかに正直な粗さ:

• ⁠docs のコード例が fetch に映らない⁠（既出 #50）— 使う人は同梱の TS 型で組み合わせ方を再構築
• DataTable の filter は単一列テキストのみ（ステータスの Select 絞り込みは外側で useMemo）。設計上の制約で、合成はきれいに効く
• 内側 <table> の min-w-[720px]＝極端に狭い画面では reflow せず横スクロール（軽微）

学び

AI に使わせる → 粗さが出る → 1個ずつじゃなく種類ごと直す → また使わせる

#6 は2つを同時に見せた。⁠①直した欠陥（#52）は別の重いコンポーネントでも消えている⁠（ループが保たれている）。⁠②新しい不備（#56）は #53 と同じ種類＝公開漏れの監査で種類ごと潰せる⁠。粗さを一個ずつ潰すんじゃなく、⁠型・provider のように "種類" でまとめて潰す⁠のが、このシリーズで見えてきた品質の上げ方です。

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

• ⁠コマンドパレット（⌘K）⁠（Command / Dialog）— パワーユーザー向けの検索 UI。

試す

• ⁠gunjo.jp⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠
• 前回まで: #1 / #2 / #3 / #4 / #5
• まとめ記事: 群青（@gunjo/ui） ／ なぜ要るのか: AI 時代のデザインシステム論
• ⁠GunjoUI by UIXHERO⁠

まだ alpha、粗削りな青。粗さが出るたび、種類ごと直します。Issue 歓迎。