#27スコア 4.5/5基盤UI・汎用

AI に週表示カレンダー（予定表）を作らせてみた — 汎用部品は綺麗、でも"ドメインの view 層"がゼロ（やってみた #27）

ルート: /schedule
デスクトップ表示
モバイル表示

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

解説記事

AI に週表示カレンダー（予定表）を作らせてみた — 汎用部品は綺麗、でも"ドメインの view 層"がゼロ（やってみた #27）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。今回は 週表示カレンダー / スケジューラ（イベント配置つき）。

条件はいつも通り（出荷物の npm パッケージ＋docs サイトだけ。ソース非公開）。お題は Google カレンダー風の週ビュー: ツールバー（週移動・Day/Week/Month 切替・新規）・7日×時間軸グリッド・終日レーン・イベントブロック（開始/終了から配置・重なりは side-by-side・カテゴリ色）・現在時刻ライン・イベント詳細 Popover・空きスロットで作成 Dialog・375px は単日/アジェンダに collapse。

結果 — 4.5/5（汎用部品は綺麗・ドメイン層がゼロ）

tsc/build 緑・console 0・hydration なし（now-line は mounted フラグで遅延）・h1 1個・イベントは "title, 10:00–11:00" の labelled button・today は色＋sr-only "(Today)"・重なりは side-by-side・終日は上レーン・375px overflow 0・dark mode 完全。

scheduling 以外は綺麗に組めた: ToggleGroup（segmented・role=radio）・Dialog（focus trap・aria 自動）・Popover（幅は className で上書き可）・tone トークン（bg-{tone}-subtle で5カテゴリ色）。そして CardTitle as(#116) をまた称賛（4回目）。直した穴が連鎖的に効いてる。

でも 4.5/5 を阻んだ — カレンダーという"ドメイン"が無い

@gunjo/ui には scheduling の view 層が皆無（#142・Major）。 time-grid も、配置済みイベントブロックも、重なり packing も、終日レーンも、現在時刻ラインも無い。Calendar は date picker（react-day-picker）で、「日付にイベントを表示する」first-class API すら無い（className フックのみ）。結果、週ビューの中身 ~280行＋自前の重なり packing アルゴリズムを全部手巻きした。

汎用部品（Card/Popover/Dialog/Button/tone トークン）は手巻きグリッドの周りで綺麗に組めた——でもカレンダーのドメインレイアウトはゼロ。

今ラウンドの修正

  • #141: Calendar が 日本の祝日をデフォルト ON（公開 npm パッケージで国際的な利用者には意外）→ showHolidays を false 既定に（祝日は opt-in）。
  • #140 は再スコープ: Popover の w-72 w-[288px]/rounded-md rounded-lg 重複は、実は 2つの drift 検査（molecule-drift と style-hints）が違う表現を要求する load-bearing だった（単純掃除でなく drift-infra の整合が要る・follow-up）。
  • #106 Badge 意味トーン: info/success/warning が無くカテゴリ色分け不可（#20 success に続き2回目）→ .pen 含むので Codex 系で full tone set へ。

scheduler primitive(#142)は beta ゲート（大物）。

学び — 「汎用キット」と「ドメインの view 層」は別物

汎用層（shell/forms/overlay/charts/tone トークン）→ 強い・どんな画面でも周りは組める
ドメイン view 層（scheduler/calendar/time-grid）→ ゼロ。カレンダーの"中身"がこっち

これまでの穴は primitive のバグや prop 欠如だった。#27 は質が違う——「カレンダーという1ドメイン丸ごとの view 層が無い」。汎用 DS としては強い（a11y も手巻きで完璧に組めた）が、scheduler のようなドメインを謳うなら専用 primitive が要る。汎用が強いほど、ドメイン層の不在が際立つ——#80 PricingTemplate と同じ構図の、もう一段大きい版。

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

  • エラー画面 / 設定ウィザード / ファイルブラウザ ほか。ドメイン層と合成を引き続き。

試す

まだ alpha。汎用は綺麗、次はドメインの view 層。回すほど、穴の"層"が深くなる。

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

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

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

BadgeButtonCalendarCardDialogDialogContentDialogDescriptionDialogFooterDialogHeaderDialogTitleIconPopoverPopoverAnchorPopoverContentScrollAreaSelectSeparatorToggleGroupToggleGroupItemTooltipProvider

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

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