dataset・data-actionとは何か？data属性の正体を理解する

HTMLとJavaScriptを触っていると、次のような属性を見かけます。

<button data-action="delete">削除</button>

そしてJavaScript側では、

element.dataset.action

という書き方が登場します。

「data-actionって何？」
「datasetってどこから出てきた？」
「idと何が違うの？」

私自身、未経験からIT企業への転職に向けてTypeScriptを学ぶ中で、
イベントデリゲーションを実装した際に、この data属性の存在意義 が分からず混乱しました。

結論から言うと、
data属性は「HTMLに意味を持たせるための仕組み」 です。

data属性とは何か
datasetとは何か
なぜidやclassではダメなのか
1. idは「一意」であるべき
2. classは「見た目寄りの役割」
data-actionがイベント処理で便利な理由
data属性は「UIとロジックの橋渡し」
まとめ

data属性とは何か

data属性とは、HTML要素に
開発者が自由に情報を埋め込める属性 のことです。

<button data-id="3" data-action="complete">完了</button>

この data-〇〇 は、

見た目には影響しない
JavaScriptから安全に取得できる

という特徴を持っています。

datasetとは何か

dataset は、
HTMLのdata属性をまとめて扱うためのJavaScriptインターフェース です。

const btn = document.querySelector("button")!;
console.log(btn.dataset.action); // "complete"
console.log(btn.dataset.id);     // "3"

ポイントは次の通りです。

data-action → dataset.action
data-user-name → dataset.userName（キャメルケース）

HTMLとJavaScriptを自然につなぐ役割を持っています。

なぜidやclassではダメなのか

idは「一意」であるべき

<button id="delete">削除</button>

idは本来、
ページ内で一意に使うもの です。

イベントの種類や状態管理をidで表すと、
設計が破綻しやすくなります。

classは「見た目寄りの役割」

classは本来、
スタイルやUI構造のためのもの です。

ロジックの分岐条件として使いすぎると、
CSSとJSが密結合になります。

data-actionがイベント処理で便利な理由

イベントデリゲーションとの相性が非常に良いです。

<button data-action="complete">完了</button>
<button data-action="delete">削除</button>

parent.addEventListener("click", (e) => {
  const target = e.target as HTMLElement;
  const action = target.dataset.action;

  if (action === "complete") {
    // 完了処理
  }

  if (action === "delete") {
    // 削除処理
  }
});

これにより、

どのボタンかをidで判定しない
文字列ルールで分岐できる
DOM構造変更に強くなる

というメリットがあります。

data属性は「UIとロジックの橋渡し」

data属性は、

HTML：意味を持たせる
JavaScript：意味を読む

という役割分担を作ります。

これは、
UIとロジックを分離する考え方の第一歩 でもあります。

Reactでいう props 的な発想にも近く、
DOM操作経験者がReactに進む際の理解を助けてくれます。

まとめ

data属性は「開発者用の情報タグ」
datasetはdata属性をJSで扱うための仕組み
data-actionはイベント分岐と相性が良い

idやclassで無理に管理するより、
意味をdata属性に持たせる方が設計は安定します。