はじめに
今回はdnd-kitを使ったドラッグ&ドロップ機能の環境構築をします。
ドラッグ&ドロップのライブラリはreact-dndなど他にもありますがメンテがされていなかったり、使いづらさがあったりしますよね。
dnd-kitはその中でも使いやすそうということで触ってみることにしました。
私自身はJavaScriptはmapメソッドくらいしか知らないレベルでしたが、dnd-kitを通して色々なメソッドの使い方が非常に勉強になりましたので皆さんにもおすすめします。(もちろんNext.jsもTypeScriptも初めて)
長くなりそうですので、まずはdnd-kitの概要とサンプルアプリ、環境準備だけ紹介させていただきます。
次以降でdnd-kitの説明と解説部分をさせていただきます。
それでは説明に移ります。
dnd-kitとは
dnd-kitとは、Reactアプリケーションでドラッグアンドドロップ機能を簡単に実装できるモダンなライブラリです。
このライブラリは、以下のような特徴があります。
- モジュール性
dnd-kitはモジュール化されており、必要な機能だけをインポートして使用することができるのでアプリケーションのサイズを最小限に抑えることができる。 - アクセシビリティ
キーボードナビゲーションやスクリーンリーダーのサポートを提供しているので様々なユーザーがドラッグアンドドロップ機能を使いやすくなる。 - カスタマイズ性
カスタマイズが容易でデザインや挙動を独自に変更することができるのでUXを向上させることができる。 - アニメーション
ドラッグ中やドロップ時にスムーズな動きを実現できるのでアプリケーションの見た目がより魅力的になる。
サンプルアプリ
まずはサンプルアプリを載せておきます。
サンプルアプリは以下です。
サンプルコードは以下です。
codesandboxではNext.jsの埋め込みはエラーになるようでしたのであきらめてコードの部分だけ載せておきました。
dnd-kitを使ってみたい方はサンプルコードをそのままダウンロードして動かしてみてください。
アプリは簡単なToDoアプリを想定しています。
ToDoアプリで実装しなければならない処理としてはSortable機能とマルチカラム対応の2つです。
それぞれの意味合いとしては以下です。
- Sortable機能
要素の並び替えができる機能を指します。
たとえばカードのリストなどのことでユーザーは要素を別の位置にドラッグして配置することができます。 - マルチカラム対応
複数の縦の列（カラム）を持つレイアウトのことを指します。
ToDoアプリではタスクを複数のカラムに分けて表示し、タスクの状態やカテゴリに応じて整理します。
「未着手」、「進行中」、「完了」などのカラムのことですね。
ドラッグ&ドロップをした場合にタスクを異なるカラムに移動できるようになります。
環境準備とインストール
dnd-kitを動作させるための方法を紹介していきます。
ここではNext.js + TypeScriptでの環境構築を想定しています。
Next.jsプロジェクトの作成
新しいNext.jsプロジェクトを作成するには、ターミナルで以下のコマンドを実行します。
npx create-next-app your-app-name
√ Would you like to use TypeScript with this project? ... No / Yes ← Yes
√ Would you like to use ESLint with this project? ... No / Yes ← Yes
√ Would you like to use `src/` directory with this project? ... No / Yes ← Yes
√ Would you like to use experimental `app/` directory with this project? ... No / Yes ← No
? What import alias would you like configured? » @a/*your-app-nameはお好きなアプリケーション名に置き換えてください。
プロジェクトが作成されたら、ディレクトリに移動します。
cd your-app-namednd-kitのインストール
次に、dnd-kitの主要なパッケージと必要なユーティリティをインストールします。
npm i -D @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilitiesそれぞれのモジュールの機能は以下になります。
| 機能 | 内容 |
| @dnd-kit/core | dnd-kitの中心となる部分で、基本的なドラッグアンドドロップ機能を提供している。DndContextやDraggable, Droppableなどの主要なコンポーネントや機能が含まれており、どんなdnd-kitプロジェクトでも必須。 |
| @dnd-kit/sortable | リスト内のアイテムの並べ替え機能を提供します。SortableContextやsortableKeyboardCoordinatesなど、並べ替えに関連するコンポーネントやユーティリティが含まれている。 |
| @dnd-kit/utilities | dnd-kitの機能を拡張するためのユーティリティを提供している。 これには、アニメーションや座標の計算、キーボード操作など、 多くの便利な関数やコンポーネントが含まれている。 これらのユーティリティを使用して、dnd-kitのカスタマイズや機能拡張が可能。 |
これで、Next.js + TypeScriptを使用した環境構築とdnd-kitのインストールが完了しました。
次からドラッグアンドドロップ機能を実装するために、コンポーネントの作成とdnd-kitの実装に進みます。
おわりに
以上dnd-kitの概要とサンプルアプリ、環境準備だけ紹介をしました。
いかがだったでしょうか。
次回からこのサンプルサプリとサンプルコードをベースにdnd-kitの説明と解説していきます。
コメント