AI にロット追跡を作らせてみた — 67枚目で初めて「越えられない欠落」が出た（やってみた #67）
/lot-traceability375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI にロット追跡を作らせてみた — 67枚目で初めて「越えられない欠落」が出た（やってみた #67）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。製造4枚目——ロット追跡 / トレーサビリティ（ロット系譜 × リコール範囲特定 × 入出庫工程履歴 × 出荷先追跡）。
製造の4枚目は食品工場のトレーサビリティ。不良ロットが出たとき、どの原材料から作られ、どこへ出荷されたかを辿ってリコール範囲を特定する画面。67枚やってきて、初めて「コンポーネントでは描けない」構造に当たった回。
結果 — 4/5
tsc/build 緑・console 0・375px（横スクロール0）・ロット概要・受払照合・双方向系譜ツリー・リコール範囲確定（ライブ集計）・工程監査証跡・出荷先テーブル・h1 1個。今回 src 修正はゼロ——ライブラリが85%を摩擦なく賄い、残り15%＝系譜の核が初の大きな欠落。
今回の主役（の不在）— ロット系譜は DAG なのに、ツリーしか無い
トレーサビリティの心臓はロット系譜。これは本質的に DAG（有向非巡回グラフ＝枝分かれして再合流する、循環しないネットワーク）だ：1つの原材料ロットが複数の製品ロットに入り、1つの製品ロットが複数の原材料ロットを消費する（親も子も複数）。だがライブラリの階層コンポーネントは TreeView（厳密に親が1つのツリー）だけ:
DAG / node-link / グラフのコンポーネントが無い——最大の欠落。 ロット系譜は本質的に DAG だ。階層コンポーネントは
TreeView（親が1つのツリー）だけ。回避策: DAG を上流/下流の2本の方向付きツリーに割って、交差リンクをプレーンテキスト（⚠ 共有ロット — RM-CONC-2405-23 にも投入）で注記する——ツリーは物理的に交差リンクを描けないから。ユーザーが最も見たい構造——リコールの影響範囲を決める、共有ロットの分岐・合流——が、まさにこのコンポーネントで表現できないものだ。
つまりリコールの影響範囲を決める「共有ロットの分岐・合流」が、ツリーでは描けない。これは #281 に課題として記録。グラフ/node-link は配置・線の配線・グラフをたどるアクセシビリティを伴う大きなコンポーネントなので、3回ルールで（トレーサビリティ/組織図/依存グラフ/部品表 で再出現したら）作る。1回目は正直に課題に記録して見送り。
それでも業界越えはまた効いた
コンポーネント単体でのカバー率は高く、他業界で育てたコンポーネントがまた骨格そのまま効いた:
-
SafetyBanner（臨床のアレルギー/禁忌警告用）→ QA のリコール警告に完璧に合った。requireAck＋controlled acknowledged が「QA 責任者がリコール範囲を承認してから確定」に1:1。「この画面で最良の1コンポーネント、摩擦ゼロ」。-
Meter direction="higher-is-better"+target（#256・2回前に反映）→ 受払照合バーに自力で採用（受領 vs 出荷+保留+在庫残＝100%で success）。#65/#66/#67 と3回連続、実戦で効き続けている。-
Timeline（variant＋marker）→ 入庫/工程投入/製造/検査/出庫の監査証跡・DistributionBar → 出荷済/保留/在庫残の内訳・DataTable.renderCard → 375px で出荷先がカード崩し。
医療/物流/会計で育てたコンポーネントが、製造トレーサビリティでもそのまま効いた。
課題に記録だけ（3回ルールで育てる）
- 🔴 系譜グラフ/DAG/node-link（親が複数の系譜・#281・1回目・大型）。
- 🟡 RouteStops が配送分野に固定、が2回目（#64 工程ルート＋#67 系譜/出荷チェーン・#282）。status の種類が固定・配送ラベルが埋め込み・ETA/遅延の時間モデルが固定で「消費/製造/検査」を表せない。汎用の status＋任意の time で作る（あと1回）。
- 🟡 TreeView がラベルクリックで開閉と選択の両方を発火（ノード詳細を開く
onNodeActivateが無い・#283）。 - 🟡 MetadataList が値を強制的に切り詰める（長い製造ライン名が折り返さず切れる・#284）。
- 🟡 選択できるリスト がまた必要（リコール範囲確定＝checkbox＋status＋ライブ集計・リコール/返品/一括承認で再出現・#135 に追記）。
学び — 「ライブラリが持ちこたえた」も「初の大きな欠落」も、両方が正直なデータ
67枚目で初めて、コンポーネントの合成では表現しきれない構造（親が複数の DAG）に当たった。これは負けじゃなく、この連載の狙いそのもの——「実業務をやらせると、どこで足りなくなるか」が炙り出される。一方で SafetyBanner（臨床）や Meter の「値が大きいほど良い」（#256）がまた別業界で骨格そのまま効き、85%は摩擦ゼロ。「持ちこたえた範囲」と「初めて足りなかった核」を同じ精度で記録するのが、次に何を作るべきかを決める材料になる。系譜グラフは大きいので急がず、3回ルールで再出現を待って作る。
次回予告（やってみた #68）
- 製造をもう1枚（生産計画/負荷山積み or 出荷/在庫引当）で5枚目、or 別業界へ移る（教育/公共）。系譜グラフ#281・RouteStops汎用化#282 の再出現も観測。
試す
まだ alpha。67枚目で初めてコンポーネントでは描けない構造（親が複数の DAG 系譜）に当たり、それでも SafetyBanner/Meter がまた業界を越えた回。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。