ロジックツリーのツール作ってみた

mehm8128
·

友達が「こういうのほしいけどなかなかよさそうなツールないなー」みたいなこと言ってたので要件聞いて数時間でスッと作ってみた話を一応記事にしておきます。

ロジックツリーとは: https://www.google.com/search?q=%E3%83%AD%E3%82%B8%E3%83%83%E3%82%AF%E3%83%84%E3%83%AA%E3%83%BC

リポジトリとアプリのリンクはこちら。

Next.jsのテンプレート使ってますが、こういう小さいもの作るとき用にもう少し小さいReactのテンプレート用意しておくといいかもですね(今回jotaiとかtanstack queryとか使ってないので)。

inputに文字を入力してAddボタンを押すと追加できます。子ノードを追加するためのinputは勝手に右側に出てきて、同じ深さのノードを追加する場合は同じ深さのノードをどれか1つクリックすると、一番下に新しくinputが出てきます。

また、ノードを右クリックで文字を修正したりノードを削除したりできます。ノード削除すると子ノードも全て消えます。

こんなツールどこにでもありそうですが、勝手に上の方に子ノードが生えたりしちゃうものが多くて、全部下に順番に生えていくものはあんまりないらしいです。

traPにいると結構「ないものは作ればいい」みたいな考えの人が多いので、実践できてよかったです。

@mehm8128
Cybozu / ex-traP / Frontend Engineer