はじめに
Next.jsを触ってみたいと、学習用に簡単なアプリを作っており、その中で新たに試したことを記事にしています。
同じようにこれからNext.js始めてみようという方の参考になれば嬉しいです。
やりたいこと
dndライブラリについて、どのようなものか知りたい。
今回は基本的な部分のみの記事です。
「はじめてのdnd-kit」シリーズ全4回の1回目です。
続きはこちら
環境
下記のDocker開発環境にて行います。
DnDライブラリについて
Next.jsで使えるDnDライブラリの選択肢がいくつかありました。
1. react-beautiful-dnd
- 特徴：シンプルで美しいUIが再現出来る
- 公式サイト：react-beautiful-dnd
2. react-dnd
- 特徴：細かい制御が可能。その分、DnDのロジックを自分で制御する必要がある
- 公式サイト：react-dnd
３. React Flow
- 特徴：ビジュアルエディタやフロー構築ツールに適したライブラリ。エッジを接続したりするインタラクティブなグラフ作成に最適
- 公式サイト：React Flow
４. dnd-kit
- 特徴：軽量でモダンなDnDライブラリ。低レベルAPIと高レベルAPIの両方を提供しており、シンプルなDnDから複雑なDnDインターフェースまでカバーできる
- 公式サイト：dnd-kit
今回の選択
- react-beautiful-dnd: メンテナンスが終了している
- react-dnd: ロジック制御が必要（初めてなのでよりシンプルなものを希望）
- React Flow: フロー構築向け（用途違い）
→今回は軽量なのと、シンプルな実装も可能なdnd-kitを使うことに決めました。
dnd-kitについて
特徴
詳細については、公式サイトに記載されていますので割愛しますが、良いなと思った点は下記です。
- 軽量:ライブラリのコア部分は約10KBとものすごく軽量でサクサク動く
- 依存関係なし：外部の依存関係がない状態で動作するように設計されているため、他のパッケージの更新や互換性問題を気にする必要がない
- Reactに最適化：useDraggableやuseDroppableなどのカスタムフックが予め準備されており、機能を簡単に組み込むことができる
基本コンポーネントとフック
DndContext
ドラッグ&ドロップの設定を行うためのコンテキスト。
全てのドラッグ＆ドロップ操作はこのコンテキストの中で行われるため、これで全体を囲みドラッグ&ドロップ機能を有効にします。
useDroppable
ドロップ可能な領域を作成するためのフック。
これを使って、移動先（カードの受け入れ先）の領域を作成します。
useDraggable
ドラッグ可能な要素を作成するためのフック。
これを使って、今回でいうところの動かすチケット（カード）を作成します。
イメージ
DndContextで全体を囲みその中に、useDroppable,useDraggableで作成したコンポーネントが入るイメージ。
<DndContext> // 全体を囲む
<Draggable /> // これをドラッグ出来る（動かせる）
<Droppable /> // ここにドロップ出来る（ここに移動出来る）
</DndContext>
クイックスタートでお試し
まずは簡単にクイックスタートに沿ってサンプルを作って試してみます。
インストール
以下のコマンドを実行して、@dnd-kit/coreパッケージをインストールします。
npm install @dnd-kit/core
Droppable.tsx
ドロップするコンポーネントからuseDroppableフックを使って作成します。
最低限idを渡す必要があり、idは全てのDroppableコンポーネントで一意にする必要があります。
返り値について
- setNodeRef：参照を設定する関数。操作したいコンポーネントのrefとして登録し、追跡して他のドラッグしてきた要素との衝突や交差を検出できるようにする
-
isOver：ドラッグ可能な要素がドロップ可能な要素の上に移動した時にTrueになる
それを使って、重なった時に色を変えたり大きさを変えたりして、ユーザーにドロップ可能であることのヒントを与えることができる
import {useDroppable} from '@dnd-kit/core';
type DroppableProps = {
children: React.ReactNode;
id: string;
isOverAddClass?: string;
};
export default function Droppable({children, id, isOverAddClass}: DroppableProps) {
const {isOver, setNodeRef} = useDroppable({
id: id,
});
return (
<div ref={setNodeRef} className={isOver && isOverAddClass ? isOverAddClass : ""}>
{children}
</div>
);
}
Draggable.tsx
続いてドラッグするコンポーネントをuseDraggableを使って作成します。
こちらも最低限idを渡す必要があり、全てのDraggableコンポーネントで一意にする必要があります。
返り値について
- setNodeRef：参照を設定する関数。こちらも操作したいコンポーネントのrefとして登録が必要
-
transform：Draggableアイテムが選択されると、画面上でアイテムを移動するために必要な座標が設定される
これを使って、ドラッグ移動を描画できる - attributes：Draggableアイテムに適した一連のデフォルト属性を提供してくれる
- listeners：ドラッグ操作のイベントリスナーを含むため、操作したいコンポーネントに登録する
import {useDraggable} from '@dnd-kit/core';
import {CSS} from '@dnd-kit/utilities';
type DraggableProps = {
children: React.ReactNode;
id: string;
};
export default function Draggable({children, id}: DraggableProps) {
const {attributes, listeners, setNodeRef, transform} = useDraggable({
id: id,
});
const style = {
transform: CSS.Translate.toString(transform),
}
return (
<button ref={setNodeRef} style={style} {...listeners} {...attributes}>
{children}
</button>
);
}
組み立てる
DndContextの中に、作成したDroppable、Draggableコンポーネントを組み込みます。
クイックスタートのものをそのまま使いました。
クライアントコンポーネントにしないと動かせないので"use client"を付けてます。
"use client";
import { DndContext, DragEndEvent, UniqueIdentifier } from '@dnd-kit/core';
import Droppable from '@/components/dnd_kit/Droppable';
import Draggable from '@/components/dnd_kit/Draggable';
import { useState } from 'react';
export default function Page() {
const containers = ['A', 'B', 'C'];
const [parent, setParent] = useState<UniqueIdentifier | null>(null);
const draggableMarkup = (
<Draggable id="draggable">
<div className='cursor-grab w-48 h-20 bg-blue-200 flex justify-center items-center'>
Drag me
</div>
</Draggable>
);
return (
<DndContext onDragEnd={handleDragEnd}>
<div className='flex flex-col justify-center items-center w-screen h-screen gap-8'>
// ドラッグするアイテム
<div className='flex h-20'>
{parent === null ? draggableMarkup : null}
</div>
// ドロップするコンテナ３個横並び
<div className='flex'>
{containers.map((id) => (
<Droppable key={id} id={id} isOverAddClass="bg-green-700">
<div className='w-52 h-24 border-2 border-dashed border-gray-100/50 flex justify-center items-center'>
{parent === id ? draggableMarkup : 'Drop here'}
</div>
</Droppable>
))}
</div>
</div>
</DndContext>
);
function handleDragEnd(event: DragEndEvent) {
const {over} = event;
setParent(over ? over.id : null);
}
}
前準備
1. ドロップエリアのコンテナとしてA、B、C を配列で準備
2. ドラッグしたコンポーネントがどこのコンテナに入ったかを管理するparentをuseStateで作成
3. 前項で作っておいたDraggable を使って、draggableMarkupを準備
組み立て
- 一番外側はDndContextで囲む
onDragEndで、ドラッグしたアイテムがドロップされた後に実行する処理を設定できる。
eventの返り値として受け取っているoverはDraggableがDraggable上でドロップされなければnullとなる。Draggable上でドロップされれば、ドロップ先のコンテナのidを含むので、parentへセット - ドラッグするアイテムを配置する領域は、parentがnull（Draggable上にドロップされていない状態）の時はドラッグするアイテムとしてdraggableMarkupを配置。すでにDraggable上にドロップいれば、何も表示しない
- ドロップエリアは３個コンテナ（エリア）を並べるため、map関数を利用し、idにはそれぞれのコンテナの値（A,B,C）を渡す。
parent(ドロップ先のコンテナのid)が自身のコンテナidと一致すれば、draggableMarkupを配置。
※上記２か３のいずれかにdraggableMarkupが表示されることになる
テスト
このような画面になりました。
DraggableがDraggableに重なった状態（isOverがtrueの状態）では、設定していた背景色が変わりました。
３つのコンテナそれぞれ、ドロップ出来ました。
併せて、枠外にドラッグ＆ドロップした場合は、無事初期状態に戻すことが出来ました。
さいごに
・とりあえず、基本中の基本の部分だけは、使い方が分かりました。
・次回はdnd-kit/sortableを使って並び替えを実装してみます。
つづき
参考