Day 11。Trelloのクローンを作ってくれと頼んだ。カンバンボード、ドラッグ＆ドロップ、カードの詳細、全部入り。
プロンプト#
“Build a Trello-style kanban board app with boards, lists, cards, and drag-and-drop”
名前は「Treelo」にした。ネーミングセンスが抜群だからね。
どうやって作られたか#
Watchfireがこれを18個のタスクに分解した。まずコア部分：ボード、リスト、カード、ドラッグ＆ドロップ。そこからさらに続いた。ラベル。期限。カード詳細モーダル。カスタムボード背景。検索とフィルタリング。カードのアーカイブ。一括操作付きの複数選択。アクティビティフィード。カレンダービュー。そして最後にパフォーマンス最適化パスで全体をスムーズに保つ。
1つのプロンプトにしては機能が多すぎる。ほとんどは僕が明示的に頼んでいない。最初のプロンプトはボード、リスト、カード、ドラッグ＆ドロップだけだった。他のすべてはWatchfireが「カンバンボードならこういう機能も必要だよね」と判断して勝手に作ったものだ。
できあがったもの#
Trelloそっくりだ。 レイアウト、カードのスタイリング、青い背景、リストのカラム。目を細めれば本物と見分けがつかない。上部バーには検索、アクティビティ、カレンダー、フィルターボタンがある。リストにはカード数が表示される。カードにはラベルと期限バッジが表示される。
複数のボード。 ホームページには最近閲覧したボードと「Create new board」ボタンがある。最近どのボードを見たかを追跡してくれる。シンプルだけど実用的。
カード詳細モーダルが驚くほど完成度が高い。 カードをクリックすると、ラベル、期限ピッカー、進捗トラッキング付きチェックリスト、説明フィールド、コメント、アクティビティログを備えたフルモーダルが開く。右側には移動、コピー、アーカイブのアクションがある。これは手作業でちゃんと作ろうとしたら何日もかかるやつだ。
ラベルがちゃんと機能する。 カードに色分けされたラベルを割り当てて、それでフィルタリングできる。フィルターパネルは右側からスライドして出てくる。ボード上のカードには、上部に小さな色の帯としてラベルカラーが表示される。
アクティビティフィードがある。 すべてのアクションが記録される。カード作成、カード移動、ラベル追加、チェックリスト完了。タイムスタンプと何が起きたかの説明が表示される。これはおもちゃと実用的なツールを分ける機能の一つだ。ボードで何が起きたかを実際に追跡できる。
カレンダービュー。 ボードビューからカレンダーに切り替えると、期限のあるカードが月間グリッドに並んで表示される。期限のないカードはサイドバーに表示される。何が控えているかを確認するのに本当に便利な方法だ。
カレンダーからもカードモーダルが開く。 カレンダー上のカードをクリックすると、同じ詳細モーダルが開く。期限、ラベル、すべてがどちらのビューからもアクセスできる。
カスタムボード背景。 ボードの背景をさまざまな色やグラデーションに変更できる。ダークモードも完全対応。アプリ全体がテーマの設定を尊重する。
他に入っているもの#
スクリーンショットではわかりにくいけど、言及する価値のあるもの：
- ドラッグ＆ドロップは@dnd-kitを使用。リスト内でカードを並べ替えたり、リスト間で移動したり、リスト自体を並べ替えたりできる。
- 複数選択。 ShiftやCtrlを押しながら複数のカードを選択して、一括で移動、アーカイブ、ラベル付けができる。
- 元に戻す/やり直し。 Ctrl+ZとCtrl+Shift+Zで完全な履歴サポート。
- キーボードショートカット。 Nでカード追加、Fで検索、Bでボード一覧に戻る、Qで期限フィルター、?で全ショートカット表示。
- チェックリストはカード内にプログレスバー付き。
- アーカイブと復元。 カードやリストは削除せずにアーカイブできる。
- ローカルストレージ永続化。 すべてがブラウザに保存される。タブを閉じて戻っても、ボードはそのまま残っている。
バグレポート#
正直、これはかなりクリーンだった。主な問題はドラッグ＆ドロップのエッジケース（リストの一番下にカードをドロップすると登録されないことがある）と、カレンダービューがモーダルで期限を変更しても最初は更新されなかったこと。些細な問題だ。構造的なものはなかった。
数字で見る#
- 18個のWatchfireタスク コアカンバンからパフォーマンス最適化まで
- Next.js + TypeScript + Tailwind CSS スタック
- @dnd-kit でドラッグ＆ドロップ
- 完全なキーボードナビゲーション ショートカットオーバーレイ付き
- 2つのビュー： ボードとカレンダー
- すべてのデータはlocalStorage バックエンド不要
試してみて#
ボードを作って、リストを追加して、カードをドラッグしてみて。思った以上に楽しいから。
Day 11の評価#
カンバンボードは表面的にはシンプルに聞こえるけど、うまく動かさないといけない小さなインタラクションがたくさんある：ドラッグターゲット、モーダルの状態、フィルタリング、元に戻す履歴、ビュー間の一貫性。これが1つのプロンプトと18個の自動タスクから生まれたという事実は、いまだに信じられない。
同じことをずっと考えてしまう：これを1日で自分一人では作れなかった。ドラッグ＆ドロップだけでライブラリとエッジケースと格闘して丸一日かかっただろう。代わりに、カレンダービュー、アクティビティフィード、一括操作、キーボードショートカット付きの動くTrelloクローンを手に入れた。そして僕の時間はテストとバグレポートの提出に使った。
「カンバンボードが欲しい」から「はい、カンバンボードです」までの距離が、どんどん短くなっている。
これは30 Days of Vibe Codingの11日目です。AIアシストコーディングを使って30日間で30個のプロジェクトをシップする様子をフォローしてください。
