#81スコア 3.5/5メディア・出版

AI に編集カレンダーを作らせてみた — 「月カレンダー」だけは、まだコンポーネントが無い(やってみた #81)

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

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

解説記事

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 が組み上げた実コード

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

業界別「AI指示書パック」、先行登録を受付中です。