カンバンのUIが一瞬で作れるライブラリを公開しました

はじめに

カンバンボードって結構体裁は決まっている（カラムが在ってその中にタスクが在って、カラムやタスクはドラッグ&ドロップで移動可能で、、、みたいな）のに、カンバン作ろうと思って調べてみると「〇〇を使ってカンバン実装してみた（〇〇は任意のドラッグ&ドロップライブラリ）」ばかり出てきてドラッグ&ドロップとかを良い感じに抽象化してくれるカンバン向けの良いライブラリが全然無さそうだったので自分で作りました。

Fast Kanban

名前はFast Kanban（こんな名前すでに使われてそうなのに無かったのが驚き）で

npm install fast-kanban

したらすぐに使えます。
リポジトリ：https://github.com/sp-yduck/fast-kanban
デモサイト：https://sp-yduck.github.io/fast-kanban/

Fast Kanbanを使ってJira風のカンバンを実装してみると、こんな感じ。もちろんカラム、タスクはドラッグ&ドロップ可能。デモサイトで実際に動かせるので是非触ってみてください。

これを100行もあれば実装できちゃうのでまあまあちゃんとFastなはず。。

中身

Fast KanbanはUI部分はshadcn/ui、ドラッグ&ドロップ部分は@dnd-kitをベースに実装されています。使うときにはdndのロジックを全く意識しないで使えるようになっているのでJS・TS初心者でもすぐにカンバンが作れます。
基本的にはカンバンを実装する際に必要な枠組みだけを提供しているのでタスクの中身にassignee表示したいとか日付表示したいとかカスタマイズも自由自在です。

おわり

今のところはまだ機能は少ないですが、必要最低限の機能は揃ったので公開します。