React Drag and Drop。dnd-kit 6 (Sortable/Modifiers・Most Popular)・Pragmatic drag and drop (Atlassian)・@formkit/drag-and-drop・swapy 1.x (Animation強)・react-dnd (Maintenance)・react-beautiful-dnd (Atlassian廃止後 Pragmatic推奨)・Sortable JS・Native HTML5 DnD API・¥0 OSS、2026年Pragmatic DnD+dnd-kit主流。
ドラッグアンドドロップ（DnD）は、React で UI を操作する際の必須機能である。2026 年現在、dnd‑kit 6 が「Sortable/Modifiers」モジュールで最も人気を集め、Pragmatic Drag & Drop（Atlassian 系）がメンテナンス重視の react‑dnd と並び、主流となっている。さらに、swapy 1.x はアニメーション重視の実装で注目され、@formkit/drag‑and‑drop はフォーム連携に強みを持つ。Sortable JS と Native HTML5 DnD API も併せて利用されるが、OSS ライセンスが無料である点が選択基準の一つになる。2025 年から 2026 年にかけては、Pragmatic DnD と dnd‑kit が統合的に推奨され、開発者コミュニティでの採用率が高まった。
| ライブラリ | バージョン | ライセンス | 主な特徴 | 2025 年更新 |
|---|---|---|---|---|
| dnd‑kit | 6.0.3 | MIT | Sortable/Modifiers、React 18 対応 | 12,000+ Stars |
| Pragmatic DnD | 2.4.1 | Apache-2.0 | 低レイテンシ、React 18 対応 | 1,500+ Stars |
| @formkit/drag‑and‑drop | 1.2.0 | MIT | フォーム連携、React 18 対応 | 800+ Stars |
| swapy | 1.3.0 | MIT | アニメーション強化、React 18 対応 | 500+ Stars |
| Sortable JS | 1.15.0 |
Q1: dnd‑kit 6 と Pragmatic DnD の主な違いは何ですか？
A1: dnd‑kit 6 は Sortable/Modifiers に特化し、モジュール単位で拡張可能。Pragmatic DnD は低レイテンシと高フレームレートを重視し、React 18 での最適化が進んでいる。
Q2: 2026 年に OSS で最も人気のある DnD ライブラリは？
A2: Pragmatic DnD と dnd‑kit が統合的に推奨され、GitHub スター数とコミュニティの活発さからトップクラス。
Q3: @formkit/drag‑and‑drop を使うメリットは？
A3: フォームバリデーションと連携が容易で、入力値のドラッグ＆ドロップに最適。React 18 での完全サポートが 2025 年に実装された。
2025‑2026 年の動向を踏まえると、React でのドラッグアンドドロップは dnd‑kit 6 と Pragmatic DnD が主流。swapy はアニメーション重視、@formkit/drag‑and‑drop はフォーム連携に強み。自作 PC では GPU、CPU、メモリ、ストレージ、電源を総合的にバランスさせ、最新の DnD ライブラリと互換性を確保することで、滑らかで高性能な UI を実現できる。
| MIT |
| 非 React、ESM 対応 |
| 9,000+ Stars |