dataset は「HTML に自由にメモを書いておけるポケット」
dataset は、
HTML 要素に “自分で決めたデータ” を安全に持たせておくための仕組み です。
HTML の data-◯◯ 属性に値を書いておくと、
JavaScript からは element.dataset.◯◯ で読み書きできます。
HTML に余計な class や id を増やさず、
「このボタンには商品IDを持たせたい」
「このカードには状態を持たせたい」
「この要素がどのデータを表しているか知りたい」
といったときに大活躍します。
まずは基本の形から見ていきましょう。
data-◯◯ 属性 → dataset.◯◯ に変換される仕組み
HTML に data-◯◯ を書く
<button id="buy" data-product-id="123" data-price="500">購入</button>
JavaScript から dataset で読む
const btn = document.querySelector("#buy");
console.log(btn.dataset.productId); // "123"
console.log(btn.dataset.price); // "500"
ここで重要なのは、
data-product-id → dataset.productIddata-price → dataset.price
のように、
ハイフン区切りが “キャメルケース” に変換される という点です。
つまり、
data-user-name → dataset.userNamedata-item-type → dataset.itemType
という対応になります。
dataset は「文字列として読み書きできる」シンプルな API
値を読み取る
console.log(btn.dataset.productId);
これは常に 文字列 として返ってきます。
数値として使いたいなら、自分で変換します。
const price = Number(btn.dataset.price);
値を書き換える
btn.dataset.price = "800";
すると HTML 側もこう変わります。
<button data-price="800"></button>
dataset は 双方向 です。
HTML を変えれば JS に反映され、
JS を変えれば HTML に反映されます。
新しい data 属性を追加することもできる
btn.dataset.category = "fruit";
すると HTML はこうなります。
<button data-category="fruit"></button>
「必要になったらその場で data 属性を追加できる」
という柔軟さが dataset の魅力です。
例題：商品ボタンをクリックしたら商品情報を取得する
HTML
<button class="item" data-id="1" data-name="りんご" data-price="200">りんご</button>
<button class="item" data-id="2" data-name="バナナ" data-price="150">バナナ</button>
<button class="item" data-id="3" data-name="みかん" data-price="300">みかん</button>
JavaScript
const items = document.querySelectorAll(".item");
items.forEach((item) => {
item.addEventListener("click", () => {
const id = item.dataset.id;
const name = item.dataset.name;
const price = Number(item.dataset.price);
console.log(`商品: ${name} (ID: ${id}) 価格: ${price}円`);
});
});
ここでのポイントは、
HTML に「商品情報」を埋め込んでおき
JavaScript は dataset からそれを読むだけ
という役割分担になっていることです。
こうすると、
「商品データを JS の配列に持つ」必要がなく、
HTML と JS の連携がとてもシンプルになります。
重要ポイント：dataset を使うメリットを深掘りする
class や id を “データ用途” に使わなくて済む
初心者がやりがちな悪い例はこれです。
<div class="user-123"></div>
class は「見た目のためのラベル」なので、
データを埋め込む用途には向きません。
dataset を使えば、
データと見た目をきれいに分離できます。
<div data-user-id="123"></div>
HTML と JS の橋渡しが簡単になる
例えば、リストの各アイテムに ID を持たせたいとき、
dataset があるとこう書けます。
<li data-id="10">ユーザー10</li>
<li data-id="11">ユーザー11</li>
<li data-id="12">ユーザー12</li>
JS 側では dataset を読むだけ。
li.dataset.id;
「HTML にデータを持たせる → JS が読む」
という流れが自然に作れます。
dataset は “軽い状態管理” にも使える
例えば、アコーディオンメニューで
「開いているかどうか」を dataset に持たせることもできます。
<div class="accordion" data-open="false"></div>
if (acc.dataset.open === "true") {
// 開いている
}
class で状態を管理する方法もありますが、
dataset は「状態を文字列で持てる」ので、
複雑な状態を扱うときに便利です。
例題：タブ切り替えを dataset でシンプルに書く
HTML
<button class="tab" data-target="#panel1">タブ1</button>
<button class="tab" data-target="#panel2">タブ2</button>
<div id="panel1" class="panel">パネル1</div>
<div id="panel2" class="panel">パネル2</div>
JavaScript
const tabs = document.querySelectorAll(".tab");
const panels = document.querySelectorAll(".panel");
tabs.forEach((tab) => {
tab.addEventListener("click", () => {
const target = document.querySelector(tab.dataset.target);
panels.forEach(p => p.classList.remove("active"));
target.classList.add("active");
});
});
ここで dataset が果たしている役割は、
「このタブはどのパネルを開くのか？」
という 関連情報を HTML 側に持たせている ことです。
JavaScript は dataset を読むだけなので、
HTML と JS の責務がとても明確になります。
dataset の注意点：値はすべて文字列になる
dataset の値は 必ず文字列 です。
<div data-count="10"></div>
div.dataset.count; // "10"（文字列）
数値として使いたいなら変換が必要です。
Number(div.dataset.count); // 10
真偽値も同じです。
<div data-open="true"></div>
div.dataset.open === "true"; // true
「文字列である」という前提を忘れないようにしてください。
dataset を使うべき場面・使わないほうがいい場面
dataset を使うべき場面
HTML と JS の間で小さなデータを渡したい
要素ごとに ID や種類を持たせたい
UI の状態を軽く持たせたい
class や id をデータ用途に使いたくない
dataset は「軽いデータの受け渡し」に最適です。
dataset を使わないほうがいい場面
大量のデータを持たせたい
複雑なオブジェクトを持たせたい
アプリ全体の状態管理をしたい
dataset はあくまで「文字列の小さなメモ」です。
大きなデータは JS 側で管理するほうが安全です。
初心者として dataset API で本当に掴んでほしいこと
dataset は「HTML の data-◯◯ 属性を JS から扱うための API」
data-user-id → dataset.userId のようにキャメルケースに変換される
値はすべて文字列なので、必要なら Number や Boolean に変換する
HTML と JS の橋渡しとして、要素ごとのデータを持たせるのに最適
class や id をデータ用途に使うより、dataset のほうが安全で読みやすい
まずは、
ボタンに data-id を付けて、
クリックしたらその ID を console.log する
という小さな例から始めてみてください。
「HTML にデータを持たせる → JS が読む」という流れが体に入ると、
dataset はただの API ではなく、
UI とロジックをつなぐための“便利なメモポケット” に見えてきます。