Terms Privacy

© Rollpie

JavaScript
18 Jan 2026

dataset でカスタムデータ属性を扱う

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-iddataset.id
data-user-namedataset.userName
data-is-admindataset.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 から簡単に参照できます。

8 views