DndContext、useDraggable、useDroppable

dnd-kitのすべてのドラッグ＆ドロップ機能は、DndContextコンポーネントでラップする必要があります。DndContextは調整の中心となるハブであり、アクティブなドラッグを追跡し、ドラッグ可能要素とドロップ可能要素の間を連携させ、イベントコールバックを実行します。通常は、ドラッグ状態を管理するコンポーネントの階層に配置します。

useDraggable({ id })フックを使うと、コンポーネントをドラッグ可能にできます。このフックは4つの主要な値を返します。attributes（要素に展開するARIAプロパティ）、listeners（ドラッグ開始用のイベントハンドラー）、setNodeRef（ドラッグ可能要素のrefを設定する関数）、transform（{x, y, scaleX, scaleY}として表される現在の移動量）です。

要素をドラッグ可能にするには、attributesとlistenersを要素に展開し、setNodeRefをrefプロパティとして渡します。attributesにはrole="button"、tabIndex、ARIAプロパティが含まれます。listenersは、dnd-kitがドラッグ開始を検出するために必要なポインターおよびキーボードのイベントハンドラーを設定します。

useDraggableのtransform値は、ドラッグしていないときはnullで、ドラッグ中は座標オブジェクトになります。@dnd-kit/utilitiesパッケージのCSS.Translate.toString(transform)を使って、CSS文字列に変換します。これをドラッグ可能要素のtransform CSSプロパティに適用すると、要素がカーソルを視覚的に追従します。

useDroppable({ id })フックは、コンテナを有効なドロップ先として登録します。このフックは、isOver（ドラッグ可能要素がこのドロップ可能要素の上にある間trueになる真偽値）と、ドロップ可能要素にrefを設定するsetNodeRefを返します。useDraggableとは異なり、展開するイベントリスナーはありません。

useDroppableのisOver値を使うと、ドラッグ中に視覚的なフィードバックを提供できます。isOverがtrueのとき、ドロップ可能な領域にハイライトカラー、枠線、背景色の変更などを適用できます。これにより、ユーザーはアイテムをドロップできる場所を理解しやすくなります。これは使いやすさとアクセシビリティにとって重要です。

DndContextのonDragEndコールバックは、2つの重要なプロパティを持つイベントオブジェクトを受け取ります。event.activeにはドラッグされたアイテム（そのidを含む）が入り、event.overにはドロップ先が入ります。ドロップ可能要素の外にドロップした場合、event.overはnullです。これらのIDを使ってアプリケーションの状態を更新します。

onDragEnd では、event.over が null でないことを確認した後、移動内容を反映するように状態を更新します。たとえば、Kanban ボードでカードを列間で移動する場合は、移動元の列からカードを削除し、event.over.id で識別される移動先の列に追加します。

DragOverlay は、カーソルに追従するドラッグ中の項目のフローティングプレビューをレンダリングします。ポータルとして（通常の DOM ツリーの外側に）レンダリングされるため、overflow:hidden コンテナによって切り取られることはありません。元の要素とは異なり、オーバーレイにはドロップシャドウ、スケール変換、回転を適用して、ドラッグ中であることを示せます。

DragOverlay に正しいコンテンツをレンダリングするには、onDragStart コールバックを使って現在ドラッグされている項目を追跡します。アクティブな ID を状態に保存します：setActiveDragId(event.active.id)。onDragEnd では null にリセットします。DragOverlay 内では、activeDragId を使って正しい項目を検索し、レンダリングします。

実際のドラッグ＆ドロップ UI では、DndContext、複数の useDraggable 要素、複数の useDroppable ゾーン、そして項目の配置を追跡する状態管理を組み合わせます。重要なポイントは、dnd-kit が仕組みを提供する一方で、onDragEnd で状態を更新し、新しい配置を反映するよう UI を再レンダリングするのはあなたの役割だということです。

useDraggable の transform オブジェクトを CSS transform 文字列に変換するユーティリティはどれですか？

DndContext は、dnd-kit のすべてのドラッグ操作を調整する中核です。useDraggable は、ドラッグ可能な要素向けに attributes、listeners、setNodeRef、transform を提供します。useDroppable は、ドロップ先向けに isOver と setNodeRef を提供します。onDragEnd からは event.active.id と event.over?.id を取得でき、それらを使って状態を更新します。DragOverlay はポータルベースのフローティングプレビューをレンダリングします。