dataset は、data-* 属性を簡単に扱うためのプロパティです。カスタムデータをHTML要素に埋め込んで、JavaScript から読み書きできます。
data-* 属性とは
HTML では data- で始まる属性を自由に定義できます。
<div id="user" data-id="123" data-name="田中太郎" data-is-admin="true"> ユーザー情報 </div>
dataset で取得する
element.dataset でオブジェクトとしてアクセスできます。
const user = document.getElementById('user'); console.log(user.dataset.id); // "123" console.log(user.dataset.name); // "田中太郎" console.log(user.dataset.isAdmin); // "true"
ハイフン区切りの属性名はキャメルケースになります。
| HTML属性 | dataset プロパティ |
|---|---|
| data-id | dataset.id |
| data-user-name | dataset.userName |
| data-is-admin | dataset.isAdmin |
dataset で設定する
user.dataset.id = '456'; user.dataset.role = 'editor'; // data-role が追加される
削除する
delete user.dataset.role;
実際に動かしてみよう
カードをクリックすると、埋め込まれたデータを表示します。
HTML
CSS
JavaScript
<div class="card" data-product="りんご" data-price="150" data-stock="25"> 商品A </div> <div class="card" data-product="みかん" data-price="100" data-stock="50"> 商品B </div> <p id="info">カードをクリックしてください</p>
.card { padding: 15px; margin: 5px; background: #f5f5f5; border-radius: 4px; cursor: pointer; } .card:hover { background: #e0e0e0; }
document.querySelectorAll('.card').forEach(card => { card.addEventListener('click', function() { const info = document.getElementById('info'); const d = this.dataset; info.textContent = d.product + ' / ' + d.price + '円 / 在庫' + d.stock; }); });
getAttribute との違い
dataset
キャメルケースでアクセス。オブジェクトとして扱いやすい
getAttribute
属性名そのままで指定。data- プレフィックスが必要
// 同じ結果 user.dataset.userName user.getAttribute('data-user-name')
実践的な使い方
イベント委譲と組み合わせると、動的な UI を作りやすくなります。
<button data-action="save">保存</button> <button data-action="delete">削除</button> <button data-action="cancel">キャンセル</button>
document.addEventListener('click', function(e) { const action = e.target.dataset.action; if (action === 'save') saveData(); if (action === 'delete') deleteData(); if (action === 'cancel') cancel(); });
dataset を使えば、HTML にデータを埋め込んで JavaScript から簡単に参照できます。
