本文へ移動

§10-02Layout

Kanban board

列ごとにカードを並べ、ドラッグで状態を動かす。

作業の進み具合を列の位置で見せる。タスクが決まった段階を経て進む案件や採用、開発の管理に向く。

実装のポイント

カードの移動は列 ID と並び順を持つデータ更新として扱い、サーバー反映は楽観更新にする。HTML5 DnD はタッチで動かないため、ポインターイベントかキーボード代替が必要。

特徴
  • ジェスチャー
  • 状態管理
デモで使っているもの
  • lucide-react
  • Pointer Events