AI に編集カレンダーを作らせてみた — 「月カレンダー」だけは、まだコンポーネントが無い(やってみた #81)
/content-calendar375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI に編集カレンダーを作らせてみた — 「月カレンダー」だけは、まだコンポーネントが無い(やってみた #81)
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui(群青)を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。メディア/出版2枚目——編集カレンダー / コンテンツカレンダー(月間カレンダー × 記事チップ × 入稿締切 × チャネル別フィルタ)。
メディアの2枚目はコンテンツカレンダー——記事を公開予定日に並べ、入稿締切を追う画面。そして80枚やって何度も顔を出してきた「カレンダービュー」の欠落が、月カレンダーの形でまた出た回。
結果 — 3.5/5
tsc/build 緑・console 0・375px(モバイルはアジェンダ崩し)・月間カレンダー・記事チップ(タイトル+カテゴリ+ステータス)・入稿締切マーカー・チャネル別フィルタ・予定追加/移動・当月サマリ。
今回の欠落 — 月カレンダー(イベント付き)のコンポーネントが無い
カレンダービュー / イベント付き月グリッドのコンポーネントが無い。
Calendarは react-day-picker の日付ピッカー(イベントの概念なし)。ScheduleGridは固定の行×列マトリクスで、セルは1つのcontentノード——日付番号も、今日も、「1セルに複数イベントを積む」も無い。だからMonthGrid.tsxは手組み:role="grid"+ roving 矢印/Home/End/Enter + 合成読み上げ名 + モバイルのアジェンダ表示への切替。日付セルにイベントを積むパターン——ウェブで最も一般的なスケジューリング UI——を、ゼロから作らねばならない。
これは #142(最古参の最大級の欠落)の3つ目の顔:
WeekView(時刻グリッド+重なり詰め・#27)
ResourceTimeline/Gantt(リソース×連続時間軸・#68)
MonthCalendar(日付×イベント・#81 ← 今回)
※ 離散の時間割/マトリクスは ScheduleGrid(#70)で対応済
カレンダー/スケジューリングビュー系は、連載を通して最も再出現する未対応の領域。 各形(週/ガント/月)が大型なので、3回ルールというより専用の EventCalendar を腰を据えて1本作るべき段階——連載の途中で急いで作る大きさじゃない。#142 に「最優先の残課題」として記録した。
それでも周辺は既存コンポーネントで
DataTable→締切トラッカー「ライブラリで最良のコンポーネント」(sort/filter/renderCard mobile)・Statistic→当月サマリ・Badge icon→記事ステータス(色だけに頼らない)・Sheet+DatePicker→予定追加/移動・Tabs→カレンダー/アジェンダ/締切一覧。細かい部分は全部 @gunjo/ui のコンポーネント、手組みは月グリッドの骨格だけ。
課題に記録だけ(コンポーネントを作らず)
- 🟠 月カレンダー(EventCalendar)が無い=#142 を最優先化(#142 に追記)。
- 🟡 DatePicker に label/description の配線が無い(Input/Select/Textarea と不整合・#315)。
- 🟡 DataTable の columnheader 名がソート指示に乗っ取られる(読み上げが列名でなく「Click to sort」を読む・#307 に追記)。
- 🟢 tone と variant の prop 名が不統一・Banner が1行固定。
学び — 「最頻出の作法」ほど、最後まで残ることがある
#80 で事務方の三種の神器が8業界に効くのを見た。だが #81 は逆——カレンダー(最も一般的なスケジューリング UI)が、80枚やってもまだコンポーネント化されていない。理由は明快:カレンダービューは「大きい」(月レイアウト・イベント積み・今日/月外・キーボード移動・モバイル崩し)。小〜中のコンポーネントは3回ルールで次々埋まったが、大型の分野特化レイアウト(カレンダー・系譜グラフ・連続ガント)は、専用の作業時間を切らないと埋まらない。これは欠落の発見ではなく、「次に腰を据えて作るべきもの」の明確化。
次回予告(やってみた #82)
- EventCalendar を腰を据えて作る(#142・月ビュー)or Meter をまとめて直す PR(#277/#286/#297/#308)or メディア/別業界もう1枚。
試す
まだ alpha。細かい部分は全部既存コンポーネントで組めたが、月カレンダーの骨格だけはまだ手組み——次に腰を据えて作るべきものが見えた回。
この連載は、作者が AI(Claude と Codex)と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。