AI に倉庫ピッキングを作らせてみた — 小売で作ったコンポーネントが、別業界の予備知識ゼロの AI に発掘されて 5/5（やってみた #47）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠業界を移して物流/倉庫(WMS＝倉庫管理)の1枚目⁠——⁠ピッキング / 出荷オーダー引当⁠（ピッキングリスト × ロケーション照合 × 商品照合 × 進捗 × 欠品 × 完了引き渡し）。

小売を5枚踏破して判断がついたので、⁠別業界（物流/倉庫管理）へ⁠。観測ポイントは1つ——⁠小売で育てた ScanInput を、物流の予備知識ゼロの AI が自力で発掘して使うか⁠。コンポーネントが業界の境界を越えて通用するか、の試金石です。

結果 — 5/5（#39 以来の満点）

tsc/build 緑・console 0・⁠375px ハンディ端末プライマリ⁠でカード化・ロケーション→商品の2段スキャン・棚違いはブロック＋読み上げ・商品スキャンで該当行+1＋読み上げ・リスト外はエラー・欠品理由が無いと完了ブロック・完了 read-only・h1 1個（CardTitle as で階層整え）。

今回の本題 — コンポーネントが「業界の壁」を越えた

これまでの複利は、同じ小売の中（#45→#46）で起きていました。今回はそれが⁠業界をまたぎました⁠。ScanInput(#220) は、小売3画面（棚卸#43・返品#45・入荷#46）の3回ルールで作ったコンポーネント。それを、⁠物流という別業界の予備知識ゼロの AI が、ロケーション照合と商品照合の両方に、自力で採用しました⁠:

⁠ScanInput — 見つけて、両方のスキャンに使った。ここが見出しだ: このライブラリには、まったく新しい業界に対しても "ちょうど正しいコンポーネント" があった⁠。その onScan → ScanResult と組み込みの aria-live 読み上げは、スキャンガンに対して本当に正しい設計だ。ロケーション→商品のゲートのために、2つのインスタンスを scanStage の状態管理の後ろに置いた。⁠スキャンを手作りはしていない。（隣の入荷画面は素の <Input> でスキャンを手作りしていた——ここで本物の ScanInput を使うほうが明確に優れている。）⁠

ここが効いています。ScanInput は ⁠小売の3画面から生まれた⁠コンポーネントなのに、⁠物流のまっさらな AI が「この業界に必要なコンポーネントが、ちゃんとライブラリにあった」と判定して使いました⁠。予備知識ゼロの AI が業界をまたいで同じコンポーネントに辿り着く——これは、そのコンポーネントが⁠業界特有でなく、本当に汎用で発見できる⁠という最強の証拠です。

複利はこれだけではありません。今回、予備知識ゼロの AI は、これまでに育てたコンポーネントを⁠ほぼ全部⁠発掘して使いました:

• ⁠Delta⁠ — 残数表示に hideArrow＋tones 上書き（残=muted・完了=success）。セルに収まる。
• ⁠EditableDataTable⁠ — ピッキングリスト・getRowError・renderFooterCell・375px カード化。
• ⁠Progress⁠ — label＋valueText「ピッキング 2 / 40 点（5%）」で aria-valuetext 実証。
• ⁠RevealSection⁠ — 欠品ゲート＋完了エラー要約、両方 role=region。
• ⁠CardTitle as="h2"⁠ — h1→h2、飛びなし（アクセシビリティの検証で実証）。

Delta(#44)・Progress の名前(#43→#219)・CardTitle as(#45→#224)——⁠過去回の投資が、別業界の1枚で一斉に返ってきた⁠。

今回は src 修正ゼロ（ライブラリが業界の壁を越えて持ちこたえた回）

5/5 なので、直す不備はありませんでした。誠実にそう記録します。出た欠落は全て⁠物流1回目⁠（3回ルール未達）なので、課題に記録だけ:

• 🟠 ⁠2段スキャンのゲート（ScanGate）コンポーネント⁠（#227・1回目）。ScanInput は単発。ピッキングは「ロケーション照合→商品照合」の段階ゲートで、予備知識ゼロの AI が scanStage の状態管理（~40行）を手組みしました。段階の組み立て（各段の解決処理＋確定の状態共有＋自動で次へ進む/フォーカス）があれば、倉庫管理の picking/put-away/2段認証が楽になる。put-away/出荷検品で再出現したら作る候補。
• 🟠 ⁠巡回経路/ルートの表示⁠（#228・1回目）。Stepper は {label,state} だけで、ロケーション+数量+状態+次の指し示し、の行には薄い。ピッキング/棚卸/配送ルートの巡回表示は、物流向けコンポーネントの候補。
• 🟡 欠品のチェックボックスを標準要素で（Checkbox でも可・仕上げ）・NumberInput stepper の上限ガードがスキャン経路と二重（設計上）。

学び — 「業界特有UI」を5枚やると、横断的なコンポーネントが浮かび、それが次の業界で効く

小売 #42-#46（5枚）: スキャン③→ScanInput 作成・過不足③→Delta 作成
物流 #47（1枚目）  : ScanInput を別業界の AI が自力発掘＝業界の壁を越えた・5/5

「1業界3〜5枚・可能な限り違う内容・業界特有UI最優先」で回すと、各業界で⁠3回再発した"足りないコンポーネント"がコンポーネントに育ちます⁠。そして次の業界に移ると、⁠そのコンポーネントが "この業界にも必要なもの" として、まっさらな AI に発掘される⁠。小売で ScanInput/Delta を作り切ったから、物流の1枚目がいきなり 5/5 になりました。これが「業界を移す」ことの意味——コンポーネントは業界を越えて複利します。

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

• ⁠物流をもう1枚⁠（入庫/棚入れ put-away or 出荷検品）で 2段スキャンゲート#227・巡回経路#228 を2回目確認へ。方針: 1業界3〜5枚・可能な限り違う内容・業界特有UI最優先。

試す

• ⁠gunjo.jp⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠
• 前回まで: #1〜#46
• ⁠GunjoUI by UIXHERO⁠

まだ alpha。小売で作ったコンポーネントが、別業界の予備知識ゼロの AI に発掘されて 5/5 を取った回。