はじめに
概要
Reactのハローワールド代わりになりそうなカンバンボードを作りました。
作成したモノのGifはコチラです👇
実装
ドラッグアンドドロップの実現方法
React Dnd
カンバンはドラッグアンドドロップ（DnD）をどう実現するかが根幹になるかと思います。
今回は、Reduxの作者であるDan AbramovによるReact Dndを利用しました1。
DnDのパッケージは他にもreact-beautiful-dndがありますが、各パッケージの長所 / 短所を比較した「React DnDを使ったので知見をまとめた」を参考にしつつ、React Dndの導入を決定しました。
個人的にはクセのあるAPIに感じたので、基本的な概念のキャッチアップに割と時間がかかりました👶
ある程度正しさを捨象し丸め込んだ説明をすると、
- ドラッグしたいコンポーネントに
useDragを導入し、ドロップしたいコンポーネント（ドラッグしているコンポーネントとの「当たり判定」を得たいコンポーネント）にuseDropを導入 - ドラッグしたコンポーネントと接触した際にトリガーされる
hoverコールバック内に並べ替えロジックを記述する
みたいな感じです。
今回は、hover内でカード要素の順番を保持したState（状態）を変更することで、各カードを並べ替えて再レンダリングしています。
実装の上では下記の記事を大変参考にさせていただきましたので、合わせて読むと理解が深まるかと思います。
スタイル周り
Github projects（旧版）のUIを意識して実装しました。
スタイルにはTailwind CSSを利用しています。
アイコン
Tailwind CSSが作っているheroiconsを利用しました。
こちら、普通にimportしてtsx内から呼び出せるので、svgを直接触る必要がなくメチャクチャ楽チンでした。
import { PlusIcon } from "@heroicons/react/outline";
...
return (
...
<PlusIcon />
...
);
ユーティリティクラスの順番
ユーティリティクラスを書く順番について当初は悩んでいましたが、Concentric CSSに従って書くと良さそうです。
Concentric CSSのアプローチを使うのが良さそうです。
Concentric CSSでは、プロパティをアルファベット順とかにするのではなくて、それぞれのプロパティの役割ごとに並び替えます。
...
このルールに従うと下記のような順番でユーティリティクラスをつけていく形になります。
① : ポジショニング系
② : ボックスモデル
③ : ボーダ系
④ : コンテンツのサイズとスクロールバー周りのやつ
⑤ : テキスト周りのやつ
⑥ : その他の視覚的な調整を行うもの
ルールを手動で実装するのは骨が折れるので、eslint-plugin-tailwindcssを導入し、自動で適切な順番に並び替えると楽でした。
下記の記事に導入方法が書いてあります。
まとめ
Reactを用いてGithub projectsっぽいカンバンボードを実装しました。
状態管理とか画面の作り方とか、Reactの入門に良いなと感じました。
書き捨てる気持ちで書いたので大変コードが汚く悲しくなっています...。