AI にファイルアップロードを作らせたら、自分のコンポーネントが半完成だった（やってみた #10）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。作りの複雑な画面に入って #9 Kanban に続き、今回は ⁠ファイルアップロード⁠。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は /upload に、ドロップゾーン、選択したファイルの一覧（名前・サイズ・種類・削除）、⁠ファイルごとの進捗バー⁠、全体の Upload all、そして空状態。

結果 — 3/5（シリーズ最低点）

npm run build 成功。ビルド時に静的生成され、コンソールエラー0。

支えのコンポーネント（Progress/Button/Badge/EmptyState）と、コンポーネントが1か所に型つきでそろっている使い勝手は今回も良好で、provider 不要・サーバー側の事前描画（SSR）でのクラッシュもなし。でも⁠主役の FileUploader が、このシリーズで一番の地雷でした。⁠

目玉 — FileUploader が半完成で、docs が嘘をついていた

予備知識ゼロの AI の報告:

① 進捗が "未実装"。しかも、やり残しのコメントが残っている

FileUploader の内部状態には progress も status も⁠項目としては存在する⁠のに、⁠画面に描かれません⁠。ソースにはこう書いてあります:

{/* Progress Simulation would go here */}

実装するつもりで放置された、やり残しのコメントです。⁠なのに docs は「アップロード中の進捗を表示できる」と書いている⁠。＝⁠docs が、実体より先に約束してしまっている⁠（できると言い切りすぎ）。これは #7 の「アクセシビリティ内蔵が破れていた」と同じ、⁠主張と実体のズレ⁠です。→ #62

② 外から状態を制御できない

value prop が無く、onValueChange は⁠最新のひとまとまりだけ⁠を返します（それまでの累積リストは返さない）。さらに、内部で独自のファイル行と削除ボタンを描くのに、そこへ手を差し込めないので、外で自前のリストを出すと⁠二重表示⁠になる。予備知識ゼロの AI は [data-slot="file-uploader"] > div:nth-child(2){display:none} という ⁠CSS の小細工で内部リストを隠す⁠しかありませんでした。「showFileList={false} が欲しい」と。

③ そして、また固定幅（点検の取りこぼし）

Progress が w-[200px]、ProgressWidget が w-[320px] の固定幅。これは——⁠#58 で「固定幅デフォルトを再点検した」はずなのに、Progress 系を取りこぼしていました。⁠ 「種類ごとに点検した」つもりが、漏れていた。正直に #62 に入れました。

（予備知識ゼロの AI 自身が書いた React 19 Strict Mode まわりのバグも1個ありましたが、それは AI 側で自分で直したもので、群青とは無関係。正直に記録しておきます。）

学び — 一番低い点が、一番誠実

#10 は⁠シリーズ最低の 3/5⁠。でもこれこそ、このシリーズをやる理由です。

• ⁠自分のコンポーネントが半完成⁠（進捗が、やり残しのコメントのまま）
• ⁠自分の docs が、実体より先に約束していた⁠（進捗表示の嘘）
• ⁠「点検した」と言った固定幅が、取りこぼしていた⁠

これを⁠自分のテストで、公開前に、自分で見つけました。⁠ 盛らない・隠さない——低い点は低いまま出して、issue にして直す。作りの複雑な画面は、単純な画面ではまず出ない「半完成」と「docs の嘘」を炙り出してくれます。⁠まだ全然出尽くしていません。⁠

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

• ⁠カレンダー予約⁠（Calendar / DatePicker / Select）— 日付まわりの複雑な画面。

試す

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

まだ alpha。半完成も docs の嘘も、見つけたら全部直す。それが青になるということ。