◆ div ごとに name をつけていって親の name をたどってパスを求めるか
◆ 末尾の要素にパス全体を指定するか

ネストするグループにあるデータを DOM で表す場合

<div data-name="a">
<div data-name="x">
<button data-name="i">v</button>
</div>
<div data-name="y">
<button data-name="i">v</button>
</div>
</div>
<div>
<div>
<button data-path="a.x.i">v</button>
</div>
<div>
<button data-path="a.y.i">v</button>
</div>
</div>

のどっちがいいのか結構迷います
ボタンが押されたときにどのボタンかを判断するための情報をどこに持たせるかです

これだけを見ると 下のほうがシンプルで良さそうに思えます
しかし 今は 3 段階なのが 5 段階になって ボタンがそれぞれに 5 つ以上となったり data-name 以外の属性にも同じ情報をもたせる必要があると逆になります
button に書く情報がすごく多くなりますし 似た構造なのでコピペしても修正が大変です

上の構造にしておけばボタン自体はそこまでのパス (a.x など) は気にせずボタンは自身の名前だけを知っておけば済みます

またイベント時の処理の観点で言うと 下の方は event.target.dataset.path を見るだけでパスがわかります
上の方では親を辿る必要があります closest("[data-name]") をルートとみなす要素まで繰り返して name からパスを作る必要があります

最初の方は下側でいいかなと思っていたのですが 構造が複雑になるほど上のほうがよかったなと思い始めました
hyperHTML も組み合わせて使うと DOM の親とか子に自分でアクセスをあんまりしたくないということもあって上を避けてました
ですが せっかく HTML が親子のツリー構造になっていてこういう構造を表すのに向いているのにあえて捨てるのもどうなんだろうと考えるとやっぱり HTML で表す以上 上の方が良いのではと思えてきます



どっちじゃないといけない みたいなことはないですが結構こういう部分って迷うのですよね
しかもやってみてやっぱりもう片方がいい と思って全部書き直してしばらくしたらさっきのほうが良かったということになってまた戻したり
どっちでも動くので人によってはどうでもいいことと思われそうですが 最近はコード書く以上にこういうところで迷ってます
慣れないうちは動くものを作れれば細かいところはどっちでもいいのですが 動くものを作る事自体は特に困ることがなく作れるようになっても別のところで悩むのでサッと何かが作れるわけではないですね