技術選定しよう！

技術選定は、重要で大変な作業ですよね。
適切な技術を選ぶためには、候補をしっかりとリストアップし、それらを比較し根拠を持って判断することが欠かせません。
そこでこの記事では、技術選定を行う際のポイントや役立つ情報について紹介しています。
それにより、担当システムに最適な選択肢を見つける手助けとなるでしょう。
ぜひこの記事を参考にして、より適切な技術選定ができるようにしてください！

今回選定する技術

今回選定するのは

「dndライブラリ」　です！

所謂ドラッグ&ドロップ機能の実装になります。
AppleMusicやAsanaなどにも使われている主要な機能です。

候補一覧

ダウンロード数が多い下記4つのライブラリをピックアップしました！

比較しよう！

ダウンロード数

npm trendsによると、
現時点（2024年7月現在）でのダウンロード数は下記の順番となっています。
ただし近年 dnd-kit の人気が高まっており、2024年5月には react-beatiful-dnd を抜いています。しかし2024年6月をピークに下降している現状です。

	ライブラリ名
1	react-draggable
2	react-dnd
3	react-beatiful-dnd
4	dnd-kit

スター数

同じくnpm trendsによると、スター数は下記の順番となっています。

	ライブラリ名
1	react-beatiful-dnd
2	react-dnd
3	dnd-kit
4	react-draggable

バージョン更新

react-beautiful-dnd と react-dnd の最終更新は2年前と久しく更新されておりません。react-beautiful-dnd については下記のようにgithubでアナウンスしています。

we are focused on other priorities right now and have no current plans for further feature development or improvements.
（和訳）現在は他の優先事項に注力しており、さらなる機能開発や改善の計画はありません。

一方でdnd-kit と react-draggable は比較的最近更新されております。

特徴を知ろう！

dnd-kit

ゼロ依存のうえ 超軽量 !

ライブラリのコアは縮小すると約 10 KB になり、外部依存性はなし

幅広いユースケース をサポート !

リスト、グリッド、複数のコンテナー、ネストされたコンテキスト、可変サイズのアイテム、仮想化されたリスト、2D ゲームなどサポート

react-beautiful-dnd

美しく、自然な ドラッグ＆ドロップ !

物理法則に基づいてアイテムの動きをアニメーション化しているので自然な動き実現

react-dnd

HTML5 のドラッグ&ドロップサポート !

デスクトップからのドラッグ&ドロップ、ウィンドウ間でドラッグ&ドロップなどが可能
※ 別の専用のバックエンドを指定することでタッチデバイスも対応可能

react-draggable

実装が 超シンプル !

<Draggable> で要素をラップするだけでドラッグ&ドロップ可能
```
<Draggable>
  <div>これで移動可能！</div>
</Draggable>
```

まとめ

各ライブラリの特性を把握していただけましたでしょうか。
さらに、それぞれの公式Webページにはサンプルもご用意されていますので、実際に手を動かしてUI/UXを評価することもおすすめします！
要件やユースケースによって最適な選択肢は異なるかもしれませんが、この記事が技術選定の参考になれば幸いです。

最後に私が選定したライブラリを紹介し、ここで本記事を締めくくります。

筆者が選定したライブラリ

ライブラリ

dnd-kit

ユースケース

ドラッグ＆ドロップリスト型フォームを実装する

選定理由

アニメーションや操作感の観点から、dnd-kit と react-beautiful-dnd が優れている印象
- react-beautiful-dnd は職場で使用しているため比較してみたい
人気が高まっており、日本語の記事やドキュメントが豊富
幅広いユースケースに対応しているため、今後リスト以外の用途でドラッグ＆ドロップ機能が必要になった時にも対応できそう
バージョン更新頻度も比較的多いので改善が期待できる

所感

react-beautiful-dnd に劣らないストレスフリーな操作感
- ドラッグ＆ドロップする際、カクツキなどのパフォーマンス問題も特に気になりませんでした
Material UIとの相性もよく、問題なく実装可能
- Material UIと組み合わせた記事は少ない印象でしたが、問題なく実装できました