Dataset の基本 — el.dataset.foo = 'bar'
data-* 属性は、HTML要素に開発者が自由なカスタムデータを埋め込むための仕組みです。JavaScriptでは element.dataset 経由で、オブジェクトのプロパティとして直感的に読み書きできます。
使い方の基本と camelCase ルール
<div id="book"
data-title="きよしこ"
data-author="重松 清"
data-book-title="舞姫"
data-book-author="森 鴎外"></div>
<script>
const el = document.getElementById("book");
// 読み取り（data-xxx → dataset.xxx）
console.log(el.dataset.title); // "きよしこ"
console.log(el.dataset.author); // "重松 清"
// ダッシュ区切りは camelCase 変換
console.log(el.dataset.bookTitle); // "舞姫"
console.log(el.dataset.bookAuthor); // "森 鴎外"
// 書き込み（存在しないキーは新規作成）
el.dataset.status = "new"; // → data-status="new" が追加される
</script>
- 変換ルール: HTMLでは
data-book-titleのようなケバブケース。JSではdataset.bookTitleのようにダッシュを削除し、次の文字を大文字にする camelCase でアクセスします。 - 型: 値は文字列として読み書きされます。数値や真偽値が欲しい場合は自分で変換します。
getAttribute との違いと使い分け
- 直感性:
datasetはプロパティアクセスなので、el.dataset.userIdのように扱えて読み書きが簡単です。getAttribute("data-user-id")/setAttribute("data-user-id", "...")に比べ可読性が高い場面が多いです。 - 変換の違い:
getAttribute("data-book-title")は属性名そのままの文字列で扱い、dataset.bookTitleは camelCase を自動適用します。属性名のまま扱いたい時はgetAttributeが便利です。
よく使うテンプレート集
クリックした要素から ID を取得して処理
<ul id="items">
<li class="item" data-id="101">Item 101</li>
<li class="item" data-id="102">Item 102</li>
</ul>
<script>
const list = document.getElementById("items");
list.addEventListener("click", (e) => {
const li = e.target.closest(".item");
if (!li) return;
const id = li.dataset.id; // "101" など文字列
processItem(Number(id)); // 必要なら Number() で数値化
});
</script>
- ラベル: イベントと組み合わせて、押された「その要素」に埋めたデータを簡単に取得できます。
入力値を data-* に保持して、後で参照する
<input id="q" placeholder="検索語">
<script>
const q = document.getElementById("q");
q.addEventListener("input", (e) => {
q.dataset.lastQuery = e.target.value.trim();
});
// 別のタイミングで参照
function runSearch() {
const keyword = q.dataset.lastQuery || "";
console.log("検索:", keyword);
}
</script>
- ラベル: 軽い状態保持に
datasetは便利。フォームやボタンにひも付けておけます。
data-* をまとめて設定・更新
const el = document.querySelector("#user");
// まとめて書き込み
el.dataset.userId = "42";
el.dataset.role = "admin";
// 更新
el.dataset.role = "editor";
- ラベル: 存在しないキーでも代入すれば属性が新規作成されます。
実務でのコツ
- 型変換を明示する:
- 数値:
const id = Number(el.dataset.id) - 真偽:
const active = el.dataset.active === "true" - JSON:
const cfg = JSON.parse(el.dataset.config || "{}")
値は文字列で保存されるため、用途に応じて変換します。
- 数値:
- 命名は意味優先:
data-status,data-user-id,data-errorのように「状態や意味」で名前を付けると保守しやすいです。 - dataset と属性名の対応を理解:
data-user-id↔dataset.userIdのように camelCase へ変換されます。ダッシュ以外の文字（ドットやコロン）は利用できるが、一般的にはダッシュ区切りが推奨です。
ありがちなハマりポイントと対策
- クラスや ID と混同する:
データはdata-*、見た目はクラス、識別は ID と役割分担を明確にします。 - camelCase の誤記:
data-user-idをdataset.userIDと書いてもuserIdが正しく、userIDは一致しません。ダッシュの直後を大文字にするルールを徹底。 - 型の誤解（文字列保存）:
計算で使うならNumber()、条件で使うなら比較で真偽に変換。そのままでは文字列です。
練習問題（手を動かして覚える）
<button id="buy" data-product-id="9001" data-price="1280" data-active="true">購入</button>
<script>
const btn = document.getElementById("buy");
// 1) 読み取り（型変換あり）
const pid = Number(btn.dataset.productId); // 9001
const price = Number(btn.dataset.price); // 1280
const active = btn.dataset.active === "true"; // true
// 2) 書き込み（状態更新）
btn.dataset.active = "false"; // → data-active="false"
// 3) イベントで利用
btn.addEventListener("click", () => {
if (btn.dataset.active !== "true") {
console.log("今は購入不可です");
return;
}
console.log(`商品${btn.dataset.productId}を購入（価格: ${btn.dataset.price}）`);
});
</script>
直感的な指針
- 軽い状態や識別子は
data-*に置き、JS ではdataset.xxxで直感的に扱う。 data-kebab-nameはdataset.kebabNameに変換される。誤記に注意。- 値は文字列。必要なら数値・真偽・JSONに変換して使う。