AI にロケーション管理を作らせてみた — 前回作った ScanGate が、翌回そのまま使われた（やってみた #50）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。第50画面・物流/倉庫(WMS)4枚目——在庫ロケーション管理 / 棚卸移動（ロケ一覧×充填率メーター × 在庫照会/滞留 × 棚→商品→棚の移動 × ゾーン集計）。

50回目。#47-#49 がオーダー単位のフロー（取り出す/格納する/出荷する）だったのに対し、今回は在庫の俯瞰＋整理——各棚がどれだけ埋まっているかを一覧し、滞留在庫を見つけ、棚から棚へ在庫を移す housekeeping 画面。

結果 — 4.5/5

tsc/build 緑・console 0・375px カード化・閾値で色が変わる充填メーター（緑/黄/赤）・充填率でソート・SKU 検索・移動（元棚→商品→先棚→数量）で過剰移動 clamp＋容量チェック＋読み上げ・統合検知・KPI 再計算・h1 1個・36個のメーター全てに accessible name。

今回の主役 — 前回作った部品が、翌回そのまま使われた（2連発）

この回がきれいに示したのは、「前回 land した投資が、次の文脈ゼロ AI にそのまま返ってくる」が連続していること:

① ScanGate（前回 #49 で build）を、#50 AI が移動フローに即採用:

ScanGate — USED, fit cleanly, did not fight it. 3 ordered stages（移動元棚 → 商品 → 移動先棚）、onScan(code, ctx) が {ok, message, advance, value} を返し、ctx.values[stageId] で前 stage を読み、handle.reset() で「次の移動へ」。最終 stage の advance:"stay" で数量入力のために留まれる——ちょうど必要だった escape hatch。

ScanGate は #49 で「ピッキング/入庫/出荷の3画面が同じ2段ゲートを手組みした」から起こした部品。それを 翌回の在庫移動（3段：元→商品→先）が、設計時に想定していない3段フローでそのまま使った。API（advance/value/ctx.values/reset）が、別の作法に耐えた。

② Progress の tone（前回 #48 で追加）が、#48 のハックを消した:

Progress の tone が出荷されたので、#48 の overlay ハック（bg-foreground 固定バーの上に色バーを重ねる）はもう不要——tone を直接使った。#48 から大きく改善。

#48 で「容量メーターの色が出せず -mt-2.5 で重ねた」と書いた、まさにその穴。tone を足したことで、#50 は重ねずに済んだ。穴を直すと、次の回でその回避策が消える——これが複利の最も具体的な形。

横断 primitive も全採用: Delta（移動の純増減・移動元の減少は info-blue に上書き＝計画移動は"悪い"ではない）・DataTable（ソート可能な本物の <button> ヘッダ・renderCard で375px・getRowState で満杯行を着色）・Statistic（5 KPI）・toCsv/downloadCsv（BOM 付き日本語ヘッダ）。

起票だけした穴（3回ルール未達）

• 🟠 容量 Meter primitive（#230・2回目＝#48＋#50）。Progress+tone で平らなバーは足りるが、WMS の充填メーターは更に3つ欲しい——cold AI が具体 API を提示: <Meter value max incoming? thresholds={[{at:80,tone:"warning"},{at:100,tone:"destructive"}]} valueText size="sm|inline" />。(a) 閾値からトーンを導出（毎画面 fillTone(pct) を書かない）・(b) 現在＋入荷分のオーバーレイで「移動後」をプレビュー・(c) テーブルセル内のコンパクト inline 変種。LocationMeter(~95行)で手組み。あと1回で build。
• 🟡 DataTable の <table> が min-w-[720px] table-fixed で、renderCard を渡さないとモバイルで横スクロール（renderCard はあるので opt-in）。
• 🟡 ScanGate が確定値を内部 ref に持つので、自前の数量 input/Delta プレビュー/commit を駆動するには onScan/onStageChange で React state にミラーする（gate が自身のフローを所有する以上、想定内）。

学び — 複利のサイクルが「次の回」まで縮まった

#47-#49: 3画面の穴 → ScanInput → ScanGate（数回かけて育つ）
#48 → #50: Progress tone を足す → 次の回でハックが消える（1回で返る）
#49 → #50: ScanGate を作る → 次の回でそのまま使われる（1回で返る）

連載の前半は「数回かけて穴が primitive に育つ」だった。50回を超えて、land した投資が"次の1回"で返ってくるようになった。kit が厚くなるほど、新しい cold AI は「探して・組み合わせる」だけになり、私の修正は翌回に即検証される。第50画面は、その複利サイクルが最短になったことを示した回。物流4枚目も src 修正ゼロ＝kit が持ちこたえた。

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

• 物流をもう1枚（配送ルート/積込 or 返品入荷(返品物流)）で 容量 Meter#230 を3回目＝build 閾値へ、ウォークパス#228 も。または別業界へ。方針: 1業界3〜5枚・可能な限り違う内容・業界特有UI最優先。

試す

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

まだ alpha。第50画面。前回作った ScanGate が翌回そのまま使われ、前々回の Progress tone が前回のハックを消した回。

---

<!-- 公開前: 相互URL差込／スクショ確定／EN(dev.to)ミラー -->