AI に IDE 風エディタを作らせてみた — "出尽くし" の境界線がはっきりした（やってみた #16）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。今回は ⁠IDE 風のエディタ画面⁠。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は /editor に、メニューバー＋ツールバー、パンくず、左のファイルツリー、中央のタブ＋エディタ、右パネル、下のステータスバー。

前回 #15 で「基本コンポーネントは出尽くした、課題は上の層へ移った」と分かりました。今回はそれを⁠もう一段はっきりさせにいきました⁠。

結果 — 3/5

tsc/build 緑・ビルド時に静的生成・コンソールエラー0・サーバーとブラウザの表示ずれ（hydration）なし。予備知識ゼロの AI の結論は、前回と一致しました:

⁠基本コンポーネントは出そろった⁠（Button/Badge/Kbd/Breadcrumb/Menubar/Tabs/CodeBlock/Tooltip… が最初から動く・アクセシビリティも型の公開も問題なし）。⁠不安定さは1段上——組み合わせや上位のコンポーネントに移った。⁠

「出尽くし」の境界線が、画面1枚でくっきり出ました。

粗さ — 境界の "上側" に3つ

⁠① ファイルツリーがキーボードで動かない（アクセシビリティの4度目）。⁠ FileTree/TreeView は role="tree"/treeitem は正しいのに、⁠onKeyDown もフォーカスの持ち回り（roving tabindex）も無い⁠。↑↓←→（ツリー UI の標準的なキーボード操作）が無反応でした → #87。#57/#71/#83 に続きます。

⁠② また名前負け（4例目）。⁠ EditorTemplate は docs に無く（404）、ステータスバーのスロット無し・幅が固定・⁠モバイルで左右パネルが消えて代替も無い⁠（スマホだとファイルツリーに辿り着けない）。StatusBar も、初期設定がアプリの外枠に向かない（fixed で画面に貼り付き＋640px で頭打ち）→ #90。

⁠③ パッケージングの衛生＋生成が原因の矛盾したクラス。⁠ package.json の files が⁠存在しないファイルを参照⁠していて、design/ のメタデータが出荷されていませんでした（移行の取り残し）→ #88。加えて Breadcrumb/Menubar/StatusBar に、矛盾した flex-col flex-row（生成元での向きのミス）→ #89。

直した

• ⁠#87 ツリーのアクセシビリティ⁠ → ツリー UI 標準のキーボード操作（↑↓←→/Home/End/フォーカスの持ち回り）を実装。FileTree は TreeView に委ねているので同時に直る。⁠反映（PR #91）⁠。実ブラウザで矢印移動・展開/折りたたみを検証。
• ⁠#88 パッケージング⁠ → files を実在するパスへ。design/ のメタデータが出荷されるように。同じ PR で反映。
• ⁠#90 名前負け⁠（EditorTemplate/StatusBar）→ #74/#80/#85 と束ねて、⁠beta ゲートでまとめて整理⁠。
• ⁠#89 矛盾したクラス⁠ → 生成元から断ちました。⁠反映（PR #92）⁠。原因は「デザインツール（Pencil）が横並びを既定として省略→変換処理がそれを誤解釈して flex-col を生成」で、.pen 自体は元々正しかったため、変換処理の側を修正しました（.pen は無編集）。

学び — "出尽くし" は、層の境界として現れる

基本コンポーネント（Button/Badge/Tabs/CodeBlock…） ── 出尽くした
組み合わせ・上位のコンポーネント（EditorTemplate/FileTree/StatusBar/NotificationCenter） ── まだ
アクセシビリティ ── 種類ごとにまだ（#57/#71/#83/#87）
パッケージ/インストールの衛生 ── 新しい課題（#79/#84/#88）

#15・#16 で⁠境界線が安定しました⁠。もう基本コンポーネントは疑わなくていい。残るのは ⁠組み合わせ・上位コンポーネントをデータで動く形にすること／アクセシビリティ／衛生⁠——どこを作り込めば beta かが、画面の積み重ねで具体的に見えてきました。低い点ほど誠実。

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

• ⁠エラー画面 / 検索結果 / プロフィール⁠ ほか。境界の "上側" を中心に。

試す

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

まだ alpha。基本コンポーネントは出尽くした、上位はこれから——"出尽くし" の境界を、隠さず1枚ずつ確かめています。