AI にファイルブラウザを作らせてみた — 直した不備が全部「武器」になって返ってきた回（やってみた #28）
/files375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI にファイルブラウザを作らせてみた — 直した不備が全部「武器」になって返ってきた回（やってみた #28）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。今回は ファイルブラウザ / ファイルマネージャ（Finder / Google Drive 風）。
条件はいつも通り（出荷している npm パッケージ＋docs サイトだけ。ソース非公開）。お題は、フォルダツリー＋パンくず＋検索/ツールバー＋グリッド/リスト切替のファイル一覧＋右クリックメニュー＋その場でのリネーム＋プレビューペイン＋空状態。
結果 — 4.5/5
tsc/build 緑・console 0・サーバーとブラウザの表示ずれ（hydration）なし・h1 1個・ファイルは role=option/aria-selected の listbox・ツリーのキーボード操作・右クリックメニュー role=menu・375px でのはみ出し0・グリッドは2列に折り返し。
この回の主役 — 直した不備が全部「武器」になっていた
予備知識ゼロの AI が「最初から作り込まれたアクセシビリティの良さ」として名指ししたもの、全部これまでの修正でした:
| 予備知識ゼロの AI が褒めた点 | 直した回 |
|---|---|
| FileTree/TreeView のキーボード操作（arrow/Enter・フォーカスの持ち回り） | #16 (#87) |
| Resizable が素の数値を % に変換（ハマりどころを解消） | 前回 #26 (#133) |
| EmptyState.headingLevel / CardTitle.as / Badge.as（不正な入れ子を回避） | #20/#23/#25 |
| Img の aspectRatio/fallback/skeleton | #22 (#113) |
| ContextMenu（右クリック・キーボード・role=menu） | 既存 |
「見つけて直す→次の回で検証される」というループが、ついに "次の回が前の修正を称賛する" 段階に来ました。 TypeScript での摩擦ゼロ・全部の型が公開済み。
4.5/5 を阻んだ欠落 — やっぱり「選べるコレクション」が無い
選択できるグリッドのコンポーネントが無い（#135 をグリッドに拡張）。 グリッドとリストの両方が共有する選択の仕組み（単一/Cmd/Shift 範囲・role=option・チェックボックス・Enter で開く・ダブルクリックで移動）を ~250行手組みしました。
面白いのは: AssetGrid/AssetCard は選択の仕組みを持っていた（selectedIds/selectionMode）——でも メディアライブラリ向け（サムネイル前提・button/pressed・リスト表示もチェックボックスもフォルダもメニューも無し）で、ファイルマネージャには合わず、手組みになりました。＝「選択を持つコレクション」という核のコンポーネントが、#26 リスト・#28 グリッドで2回名指しされたわけです。
今ラウンドの修正（全部ソース・既存を壊さず）
- #147 TreeView: 開閉の矢印（chevron）を独立したクリック領域に → フォルダを「選択せずに展開」できる（ブラウザで実証: 矢印クリックで aria-expanded だけ反転）。
- #148 Breadcrumb:
items＋maxItemsでパスを自動で省略（途中を「…」メニューに畳む）。 - #149 Checkbox:
label/descriptionを追加（Switch #130 と同じ形・ラベル付けを呼び出す側任せにしない）。
学び — ループが複利で効いている
#1〜#27: 見つけて直す（ソース/Codex）→ 次の回で予備知識ゼロの AI が検証
#28: 直した不備が "デザインシステムの強み" としてまとめて称賛される段階に
残る核: 「選択を持つコレクション」のコンポーネント（リスト #135 ＋ グリッド #28）
毎ラウンドの小さな修正は、捨てコストではなく "次の信頼性" に複利で積み上がる——#28 はそれが一番はっきり出た回です。残る大物は、予定表(#142)・typography(#110)・選べるコレクション(#135) といった "まだ作っていない核のコンポーネント" 群です。
次回予告（やってみた #29）
- エラー画面 / 設定ウィザード / ダッシュボード設定 ほか。
試す
まだ alpha。直した不備が武器になって返ってくる——ループが複利で回り始めた回。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。