dnd-kitのアーキテクチャとアクセシビリティファースト設計

react-beautiful-dndはReact向けのドラッグ＆ドロップライブラリの定番でしたが、2023年に正式にアーカイブされ、現在はメンテナンスされていません。コミュニティはすぐに推奨される代替ライブラリとしてdnd-kitを支持するようになりました。dnd-kitは、最新のReactとアクセシビリティを考慮してゼロから設計されています。

dnd-kitは、3つの主要なアーキテクチャ概念を中心に構築されています。DndContextはすべてのドラッグ状態を管理し、ドラッグ可能要素とドロップ可能要素の間を調整します。sensorsは入力方法を抽象化するため、マウス、タッチ、キーボードで同じドラッグロジックを利用できます。modifiersを使うと、ドラッグの移動をスナップ、制限、変換できます。

dnd-kitには3つの組み込みセンサーが用意されています。PointerSensorは統一されたPointer Events APIを通じて、マウスとタッチの両方の入力を処理します。KeyboardSensorはキーボードだけで完全なドラッグ＆ドロップ操作を可能にします。TouchSensorは従来のタッチイベントを処理します。センサーはDndContextのsensorsプロパティで設定します。

dnd-kitには、アクセシビリティのためのキーボードナビゲーションが組み込まれています。ユーザーはSpaceでアイテムをつかみ、Arrow keysで新しい位置に移動し、もう一度Spaceを押してドロップします。Escapeを押すと、変更せずにドラッグをキャンセルできます。これらの操作はスクリーンリーダーに自動的に通知されます。

dnd-kitは、支援技術にアイテムをつかんでいる状態を示すため、ドラッグ可能なアイテムにaria-grabbedを自動的に適用します。ドロップ可能な領域にはaria-dropeffectを使用し、アイテムをドロップしたときに何が起きるかを伝えます。ライブリージョンが状態の更新を通知するため、スクリーンリーダーのユーザーは「アイテムを取得しました」や「アイテムを正常にドロップしました」といった確認を聞くことができます。

dnd-kitはツリーシェイキングに対応するよう設計されており、実際に使用する部分だけをインポートできます。CSSは同梱されていません。ドラッグ可能な要素、オーバーレイ、ドロップ領域の見た目を完全に制御できるよう、すべてのスタイル設定を開発者が担当します。そのため、バンドルサイズを最小限に抑えられます。

DndContextには、ドラッグのライフサイクルを追跡するための3つの主要なイベントコールバックがあります。onDragStartはユーザーがドラッグを開始したときに実行され、アクティブなアイテムのIDを受け取ります。onDragOverは、ドラッグ中のアイテムがドロップ可能な対象の上を移動している間、継続的に実行されます。onDragEndはドラッグが完了したときに実行され、アクティブなアイテムとドロップ先を渡します。

useSensorsフックとsensorsプロパティを組み合わせて、センサー設定の配列をDndContextに渡します。各センサーはuseSensor(SensorClass, options)で初期化します。たとえば、PointerSensorにドラッグ開始までの最小距離を設定し、クリック時の意図しないドラッグを防止できます。

モディファイアは、ドラッグ中の要素に適用する前にドラッグ座標を変換します。restrictToVerticalAxisは移動を一方向に制限します。restrictToParentElementはドラッグ中のアイテムをコンテナ内にとどめます。snapCenterToCursorは要素の中心がカーソルを追従するようにスナップします。複数のモディファイアは配列で組み合わせます。

ドラッグ可能要素とドロップ可能要素には、それぞれ一意の文字列または数値のIDが必要です。これらのIDは、何がドラッグされ、どこにドロップされるかをdnd-kitが追跡するための基本的な手段です。onDragEndでは、ドラッグされたアイテムのevent.active.idと、ドロップ先のevent.over?.idを読み取り、アプリケーションの状態を更新します。

キーボード対応を後付けの機能として扱う多くのDnDライブラリとは異なり、dnd-kitは設計の中心にアクセシビリティを据えています。KeyboardSensorは、PointerSensorと同じ機能を備えた主要な機能として提供されています。ARIA属性はすべて自動的に管理され、カスタム通知はDndContextのaccessibilityプロパティで設定できます。

dnd-kitは、アーカイブされたreact-beautiful-dndに取って代わり、Reactのドラッグ＆ドロップにおけるコミュニティ標準になりました。そのアーキテクチャは、状態管理のDndContext、入力を抽象化するセンサー（Pointer、Keyboard、Touch）、移動を制約するモディファイアを中心に構成されています。アクセシビリティも最初から重視されており、ARIA属性、ライブリージョンによる通知、完全なキーボードナビゲーションが組み込まれています。