AI に住民異動届の処理を作らせてみた — ApprovalWorkflow が3回連続で別手続きに刺さり、チェックリストを3回出してコンポーネント化（やってみた #79）
/resident-move375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI に住民異動届の処理を作らせてみた — ApprovalWorkflow が3回連続で別手続きに刺さり、チェックリストを3回出してコンポーネント化（やってみた #79）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。公共/自治体5枚目——住民異動届 / 各種届出処理（異動内容 × 処理ワークフロー × 本人確認/必要書類 × 関連手続き × 受理記録）。
公共の5枚目は住民課の窓口——転入/転出/転居を受け、本人確認・書類・関連手続き（マイナンバー/国保/学校/印鑑…）を案内し、住民票を更新して受理する画面。ApprovalWorkflow が3回連続で別手続きに刺さり、同じ画面で3回出た「チェックリスト」をコンポーネント化した回。
結果 — 4.5/5
tsc/build 緑・console 0・375px・異動内容/対象世帯員・処理ワークフロー（受付→本人確認→異動内容確認→住民票更新→完了）・関連手続きチェックリスト・受理記録ロック。
今回の主役 — ApprovalWorkflow が3回連続、CheckList を3回ルールで作る
ApprovalWorkflow（#76 で作った）が、#77 施設予約・#79 住民異動 と3回連続で別領域に刺さった:
処理ワークフロー ←
ApprovalWorkflow. 「あらゆる段階的な事務方の審査」向けに設計されている——自治体の住民登録パイプラインに構造変更ゼロで載った。差戻し/却下/完了の既定を備え、担当者+時刻を記録し、差戻しでロールバックし、canAdvance＋advanceHintのゲートを「本人確認済 && 必須書類チェック済」「関連手続き全件解決済」にそのまま配線した。カタログの最初の走査で見つかる。
そして予備知識ゼロの AI が1画面で3回手組みしたものがあった——チェックリスト（対象世帯員・必要書類・関連手続き）:
チェックリスト/選択できるリストのコンポーネントが無い。
Listは表示専用、Checkboxは単体のコントロール——「先頭にコントロール + ラベル + 説明 + 末尾に状態/アクション の行」を組めるものが無い。核となる3つの業務リストが全部手組みだ。事務方/案件管理の画面で最大の欠落。
これは #67 リコール範囲確定でも出ていた。#67＋#79（×3）＝明確に3回以上 → 3回ルールで CheckList を作る（#135・PR #310）:
items[]（id/label/description/trailing/checked/disabled）・枠+区切り線・onCheckedChange(id, checked)。- 各チェックボックスが行ラベルを読み上げ名に（Checkbox の label/description 配線を流用＝ラベル無しのコントロールにならない）・
trailing（status Badge/アクション/金額）はトグルの外。checked無しの行は素の表示行（情報行と混在可）。
ブラウザ実証: トグル [T,F,F,F]→[T,T,F,F]・aria-labelledby 配線・行ごとの確認済/未確認 Badge。#135 は「チェックリスト」の顔を作り、選択+キーボード移動の ListBox（受信箱/一覧と詳細）は別のコンポーネントとして残す。
業界越えを継続: SignedRecord→受理記録・Badge icon→関連手続き状態ピル・DataTable→届出一覧。
課題に記録だけ（軽微）
- 🟡 DataTable のヘッダ要約が、狭い desktop のコンテナ（<480px）で崩れる（#311）。
- 🟢 ApprovalWorkflow + SignedRecord の「この段階は署名必須」の合成パターンが docs に無い（#312）。
学び — 「振る舞い」も「行の型」も、3回で固まる
#79 は2つの3回ルールが同時に効いた回：①振る舞いのコンポーネント（ApprovalWorkflow）が3回連続で別手続きに刺さる（複利）。②行の型（CheckList）が3回出て作る（新規）。デザインシステムは「画面の骨格」だけでなく「行の骨格（チェック+ラベル+状態）」もコンポーネント化する価値がある——予備知識ゼロの AI が同じ <ul> を1画面で3回書いた痛みが、そのまま設計仕様になった。公共5枚で、規制・事務方の領域の作法（署名確定・段階審査・チェックリスト・二重承認）がほぼ揃った。
公共シリーズ総括（#75〜#79）
| # | 画面 | 点 | ハイライト |
|---|---|---|---|
| 75 | 窓口/申請受付 | 4 | SignedRecord/CoSign 業界越え・DataTable onRowClick 修正 |
| 76 | 給付金審査 | 4 | ApprovalWorkflow を作る（3回手組み） |
| 77 | 施設予約 | 4.5 | ScheduleGrid＋ApprovalWorkflow 即再利用 |
| 78 | 税申告/納税 | 4.5 | SignedRecord→課税確定・新規コンポーネントなし |
| 79 | 住民異動 | 4.5 | ApprovalWorkflow 3回連続・CheckList を作る |
次回予告（やってみた #80）
- 別業界へ移る（メディア/出版・HR/人材 など）or 公共をもう1枚。CheckList が別画面で即再利用されるか・系譜#281・連続時間軸#142残りの大型も観測継続。
試す
まだ alpha。ApprovalWorkflow が3回連続で別手続きに刺さり、1画面で3回出たチェックリストを CheckList に固めた回。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。