#77スコア 4.5/5公共・行政

AI に公共施設予約を作らせてみた — 前ラウンドで作った2部品が、今日まとめて再利用された（やってみた #77）

ルート: /facility-booking
デスクトップ表示
モバイル表示

375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。

解説記事

AI に公共施設予約を作らせてみた — 前ラウンドで作った2部品が、今日まとめて再利用された（やってみた #77）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。公共/自治体3枚目——公共施設予約 / 貸館予約管理（時間帯×日予約グリッド × 承認フロー × 利用区分料金 × 重複防止）。

公共の3枚目は公民館/体育館の貸館予約。予約グリッドを見て、申請を承認フローに通す画面。そして今セッションで作った2つの部品（ScheduleGrid・ApprovalWorkflow）が、今日まとめて発見・再利用された——複利の最高到達点。

結果 — 4.5/5

tsc/build 緑・console 0（警告1件は後述）・375px横溢れ0・予約グリッド・承認フロー（次へ/差戻し/却下）・利用区分料金計算・重複検出。

今回の主題 — 直近の build 2本が、まとめてその場で効いた

cold AI の核心の答え:

  • Booking grid ← ScheduleGrid. Built entirely from it. Highly discoverable: JSDoc and gunjo.jp both literally list "availability and room/resource booking grids". Bent onto facility booking with zero friction.
  • Approval flow ← ApprovalWorkflow. Built entirely from it. Extremely discoverable: JSDoc says "any staged back-office review," and the gunjo.jp preview itself shows a 申請受付→… Japanese government-style pipeline. Dropped onto 公共施設 approval verbatim.
  • ScheduleGrid（#70 build・#71 framing拡張）→ 予約グリッドで4回連続の再利用（出欠/課題提出/面談予約 に続く）。
  • ApprovalWorkflow（前ラウンド #76 で build したばかり）→ 予約承認フローで翌ラウンド即発見・採用（Badge icon #72→#73 と同じパターン）。「差戻し」「却下」「戻し先の段階」のデフォルトラベルが既にドメイン一致。
  • DataTable onRowClick fix（#75）・Badge icon（#72）・formatCurrency も全部再利用。

"No gunjo.jp docs page I looked for was missing."

手組みは業務ロジック（料金計算・重複検出）のみ。UI primitive は全部既存で賄えた。 「作る→翌ラウンドの別画面が即使う」の複利が、ScheduleGrid と ApprovalWorkflow で同時に回った。

src 変更ゼロ（no-build）

観測点（ScheduleGrid 再利用・ApprovalWorkflow 即再利用）が両方クリーンに成立し、新たな大穴は出ず。kit が公共施設予約をまるごと既存部品で賄った。

起票だけ（papercut・1回目〜）

  • 🟡 Sheet が description 警告を出す（SheetDescription を入れても Radix の missing-description 警告が初回に出る・aria は正しく配線済・#293 に追記・2回目）。
  • 🟡 DataTable のソートボタン aria が冗長な英語デフォルト（#73/#75/#77 で3回・JP-first の罠・ローカライズ可だがキー9個・#307・能力欠如でなく refinement）。
  • 🟢 ScheduleGrid は1セル1予約（ダブルブッキングの2件目はリスト/アラートでのみ可視）。

学び — 「振る舞い primitive」も即座に複利が回る

これまで「作法の骨格を捉えた表示 primitive（Meter/ReferenceValue/ScheduleGrid）が業界を越える」ことは何度も見た。#77 は、振る舞いを内包する primitive（ApprovalWorkflow）も、作った翌ラウンドで別ドメインの審査フローに即採用されることを示した。デザインシステムの複利は、表示部品だけでなく、状態機械を内包する部品でも回る——しかも framing（JSDoc/docs に用途を広く書く）が効いて「発見」される。公共3枚で、kit が規制・back-office ドメインをほぼ完全に賄うことを確認した。

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

  • 公共をもう1枚（税申告/納税・住民異動・ごみ/インフラ通報 など）で4枚目、or 別業界へ。系譜#281・連続時間軸#142残りの大型も観測継続。旅行は後で腰据えて作り込む枠。

試す

まだ alpha。前ラウンドで作った ApprovalWorkflow と、framing を広げた ScheduleGrid が、今日まとめて公共施設予約に再利用された回。

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

使用した @gunjo/ui コンポーネント

この画面のソースが直接 import している部品です。

AlertAlertDescriptionAlertTitleApprovalWorkflowBadgeBadgePropsCardCardContentCardDescriptionCardHeaderCardTitleColumnDefContainerDataTableMetadataListScheduleAxisItemScheduleCellScheduleCellToneScheduleGridSelectSeparatorSheetSheetContentSheetDescriptionSheetHeaderSheetTitleStatisticWorkflowValue

cold AI が組み上げた実コード

ファイル名をクリックでソースを展開できます。