data-* 属性は、任意の HTML 要素にカスタム、プライベートデータを保存できます。これは、非標準の属性やクラスを乱用することなく、JavaScript が読み込める DOM にメタデータを付加する標準的な方法です。
html
<button
data-id="42"
data-user-role="admin"
data-is-active="true"
>Edit</button>
datasetconst btn = document.querySelector("button");
btn.dataset.id; // "42"
btn.dataset.userRole; // "admin" ← kebab-case becomes camelCase
btn.dataset.isActive; // "true" ← always a STRING
// writing updates the attribute too
btn.dataset.id = "99"; // sets data-id="99" in the DOM
2つの重要なルール: data-user-role は dataset.userRole としてアクセスされます（ダッシュがキャメルケースになります）、そしてすべての値は文字列です — 必要に応じて変換してください（Number(btn.dataset.id)、btn.dataset.isActive === "true"）。
button[data-is-active="true"] { font-weight: bold; }
button::after { content: attr(data-id); } /* display the value */
list.addEventListener("click", (e) => {
const id = e.target.dataset.id; // know which item was clicked
if (id) deleteItem(id);
});
各要素に id を保存すれば、親の 1 つのリスナーがすべての項目を処理できます。
data-* は、サーバーデータを DOM に渡してクライアント側の JS 用に使用する（追加の API 呼び出しなしで）、イベント委譲を配線する、そして CSS の状態を駆動する清潔で標準準拠の方法です — HTML を無効にする非標準属性を発明することなく。
ただし、大規模または機密データはそこに保存しないでください。マークアップに表示されます。