Reactで、列の間でカードを動かせるカンバンボードを作る方法

export type ColumnId = 'todo' | 'doing' | 'done';
export type Card = { id: string; title: string };
export type Board = Record<ColumnId, Card[]>;

export const columnTitles: Record<ColumnId, string> = {
  todo: '未着手',
  doing: '作業中',
  done: '完了',
};

export const columnIds = Object.keys(columnTitles) as ColumnId[];

export const initialBoard: Board = {
  todo: [
    { id: 'c1', title: '見積もりを作る' },
    { id: 'c2', title: '画像を差し替える' },
    { id: 'c3', title: '議事録をまとめる' },
  ],
  doing: [{ id: 'c4', title: 'ログイン画面を直す' }],
  done: [],
};

// id がどの列のものかを探す（列の id ならその列、カードの id ならカードがある列）
export function findColumn(board: Board, id: string): ColumnId | undefined {
  if (id in board) return id as ColumnId;
  return columnIds.find((col) => board[col].some((card) => card.id === id));
}

// カードを別の列へ移す（overId がカードならその位置へ、列ならその列の末尾へ）
export function moveToColumn(board: Board, activeId: string, from: ColumnId, to: ColumnId, overId: string): Board {
  const card = board[from].find((c) => c.id === activeId)!;
  const overIndex = board[to].findIndex((c) => c.id === overId);
  const index = overIndex === -1 ? board[to].length : overIndex;
  return {
    ...board,
    [from]: board[from].filter((c) => c.id !== activeId),
    [to]: [...board[to].slice(0, index), card, ...board[to].slice(index)],
  };
}

npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import type { Card } from './board';

export function SortableCard({ card }: { card: Card }) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
    useSortable({ id: card.id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    // 動かしている間、元の場所には薄い影だけを残す
    opacity: isDragging ? 0.3 : 1,
  };

  return (
    <li ref={setNodeRef} style={style} className="card" data-id={card.id} {...attributes} {...listeners}>
      {card.title}
    </li>
  );
}

import { useDroppable } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { columnTitles, type Card, type ColumnId } from './board';
import { SortableCard } from './SortableCard';

export function Column({ id, cards }: { id: ColumnId; cards: Card[] }) {
  // 列そのものも、カードを落とせる場所にする（カードが1枚もない列に落とすため）
  const { setNodeRef } = useDroppable({ id });

  return (
    <section className="column" data-column={id}>
      <h2>
        {columnTitles[id]}（{cards.length}）
      </h2>
      <SortableContext id={id} items={cards} strategy={verticalListSortingStrategy}>
        <ul ref={setNodeRef} className="cards">
          {cards.map((card) => (
            <SortableCard key={card.id} card={card} />
          ))}
        </ul>
      </SortableContext>
    </section>
  );
}

import { useState } from 'react';
import {
  DndContext,
  DragOverlay,
  closestCorners,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  type DragEndEvent,
  type DragOverEvent,
  type DragStartEvent,
} from '@dnd-kit/core';
import { arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
import { columnIds, findColumn, initialBoard, moveToColumn, type Board, type Card } from './board';
import { Column } from './Column';

export function KanbanBoard() {
  const [board, setBoard] = useState<Board>(initialBoard);
  const [activeCard, setActiveCard] = useState<Card | null>(null);

  const sensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
  );

  // つかんだカードを覚えておく（DragOverlay に描くため）
  function handleDragStart({ active }: DragStartEvent) {
    const col = findColumn(board, String(active.id));
    setActiveCard(col ? board[col].find((c) => c.id === active.id) ?? null : null);
  }

  // ドラッグ中に別の列へ入ったら、その場でカードを移す
  function handleDragOver({ active, over }: DragOverEvent) {
    if (!over) return;
    const activeId = String(active.id);
    const overId = String(over.id);
    setBoard((prev) => {
      const from = findColumn(prev, activeId);
      const to = findColumn(prev, overId);
      if (!from || !to || from === to) return prev;
      return moveToColumn(prev, activeId, from, to, overId);
    });
  }

  // 離したら、同じ列の中での並べ替えを確定する
  function handleDragEnd({ active, over }: DragEndEvent) {
    setActiveCard(null);
    if (!over) return;
    const activeId = String(active.id);
    const overId = String(over.id);
    setBoard((prev) => {
      const col = findColumn(prev, activeId);
      if (!col || col !== findColumn(prev, overId)) return prev;
      const oldIndex = prev[col].findIndex((c) => c.id === activeId);
      const newIndex = prev[col].findIndex((c) => c.id === overId);
      if (newIndex === -1 || oldIndex === newIndex) return prev;
      return { ...prev, [col]: arrayMove(prev[col], oldIndex, newIndex) };
    });
  }

  return (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCorners}
      onDragStart={handleDragStart}
      onDragOver={handleDragOver}
      onDragEnd={handleDragEnd}
      onDragCancel={() => setActiveCard(null)}
    >
      <div className="board">
        {columnIds.map((id) => (
          <Column key={id} id={id} cards={board[id]} />
        ))}
      </div>
      <DragOverlay>
        {activeCard ? <div className="card overlay">{activeCard.title}</div> : null}
      </DragOverlay>
    </DndContext>
  );
}

最初: 未着手: 見積もりを作る, 画像を差し替える, 議事録をまとめる | 作業中: ログイン画面を直す | 完了: (なし)
1. 「見積もりを作る」を作業中の列の下のほうへ
   → 作業中: ログイン画面を直す, 見積もりを作る
2. 「画像を差し替える」を空の完了の列へ
   → 完了: 画像を差し替える
3. 作業中の列で「ログイン画面を直す」を1つ下へ
   → 作業中: 見積もりを作る, ログイン画面を直す
最後: 未着手: 議事録をまとめる | 作業中: 見積もりを作る, ログイン画面を直す | 完了: 画像を差し替える

if (from !== to) return moveToColumn(prev, activeId, from, to, overId);

onDragOver あり:  未着手: 画像を差し替える, 議事録をまとめる | 作業中: ログイン画面を直す, 見積もりを作る
onDragOver なし:  未着手: 見積もりを作る, 画像を差し替える, 議事録をまとめる | 作業中: ログイン画面を直す

2. 「画像を差し替える」を空の完了の列へ
   → 作業中: 画像を差し替える, ログイン画面を直す, 見積もりを作る | 完了: (なし)

DragOverlay あり:
  作業中の列の中の li  中心 (380, 128)  opacity 0.3
  列の外の DragOverlay  中心 (380, 167)  opacity 1
DragOverlay なし:
  作業中の列の中の li  中心 (380, 167)  opacity 0.3

後: 未着手: 画像を差し替える, 議事録をまとめる | 作業中: 見積もりを作る, ログイン画面を直す | 完了: (なし)

node_modules/@dnd-kit/core/dist/components/DragOverlay/DragOverlay.d.ts(8,28): error TS2503: Cannot find namespace 'JSX'.