datasetの値は数値として使える？

datasetの値は常に文字列です。数値として扱いたい場合は Number() などで変換します。

datasetで書き換えてもHTMLに反映されないのはなぜ？

通常は dataset を変更すると data-* 属性にも反映されます。開発者ツールの表示が更新されていないことがあるので、Elementsタブを再読み込みして確認します。

対応ブラウザは？

現行の主要ブラウザで利用できます。IEは11以降のみ対応です。

datasetでdata-*属性を削除するには？

delete element.dataset.name; のように delete でプロパティを消すと、対応する data-name 属性も削除されます。

値に日本語や記号を使っても大丈夫？

基本的には使えますが、空白や特殊文字は避けるのが安全です。属性名は data-user-name='太郎' のように短く分かりやすくします。

getAttributeとdatasetの違いは？

どちらも data-* を扱えますが、datasetはキー変換が入る代わりに短く書けます。文字列として読むだけなら getAttribute、更新も含めて扱うなら dataset が便利です。

JavaScript

この記事では、HTMLのdata-*属性をJavaScriptのdatasetで読み取ったり書き換えたりする方法を、基本から説明します。

この記事でわかること

data-* 属性を dataset で読む・書き換える方法
ハイフン区切りの属性名がキャメルケースになる規則
値が常に文字列であることと、状態管理での使い方

dataset

HTMLのdata-*属性（data属性）は、JavaScriptのdatasetで簡単に取得・変更できます。

HTML

<div id="sample" data-id="100"></div>

JavaScript

const el = document.querySelector('#sample');
console.log(el.dataset.id);

HTMLに書いたdata-*属性を、JavaScriptのdatasetを使って読み取ったり書き換えたりできるしくみ。小さなデータをHTML要素ごとに持たせたいときに便利。

Table Of Contents

datasetとは？（JavaScriptでdata属性を扱う基本）

要点：dataset は、HTMLのdata-*属性（HTML dataset）を JavaScript から簡単に読み書きできる 特別なプロパティです。

例えば <div data-user="Taro"> と書いたら、div.dataset.user で読めます。

なぜ dataset を使う？

例えば同じことを setAttribute('data-name', 'Taro') と書くこともできますが、dataset.name = 'Taro' の方が短く読みやすく、JSらしい書き方です。

getAttribute/setAttribute より短く、見た目も分かりやすい
属性名の data- を自動で外し、ハイフンはキャメルケースに変換
オブジェクトとして扱えるので、ドットでアクセスや代入ができる

ハイフン名 → キャメルケースの覚え方

ルールはシンプルです。「data- を外す」→「ハイフンで区切る」→「2語目以降の先頭を大文字にする」。

data-user → dataset.user
data-user-name → dataset.userName
data-item-id → dataset.itemId
data-foo-bar-baz → dataset.fooBarBaz

HTML + JavaScript（動作イメージ）

HTML

<div id="element"
	data-user-name="taro"
	data-item-id="42"></div>

JavaScript

const el = document.getElementById('element');
el.dataset.userName;    // "taro"
el.dataset.itemId;      // "42"

ちなみに、datasetで値を変えると、HTMLのdata-*属性（DOM）も同時に更新されます。開発者ツールで確認すると、変更が反映されているのが分かります。

ボタンごとに処理内容を切り替える（UI制御）

複数のボタンに同じイベント処理を付けて、data-actionの値で「実行する処理」を切り替えるのが、datasetの典型的な使い方です。

基本パターン：`data-action`で分岐する

HTML

<div class="actionArea">
	<button type="button" data-action="save">保存</button>
	<button type="button" data-action="delete">削除</button>
	<button type="button" data-action="share">共有</button>
</div>
<div class="out" role="status" aria-live="polite" aria-atomic="true"> </div>

JavaScript（イベント委譲）

const output = document.querySelector('.out');
const area = document.querySelector('.actionArea');

area.addEventListener('click', (e) => {
	const button = e.target.closest('button');
	if (!button) return;

	const action = button.dataset.action;

	if (action === 'save') {
		output.textContent = '保存処理を実行しました';
		return;
	}

	if (action === 'delete') {
		output.textContent = '削除処理を実行しました';
		return;
	}

	if (action === 'share') {
		output.textContent = '共有処理を実行しました';
	}
});

ポイント：クリックされた要素のdata-actionだけを見て分岐できるので、ボタンが増えてもイベントリスナーを増やさずに済みます。結果領域にはrole="status"とaria-live="polite"を付け、あとから表示された処理結果も支援技術へ伝えています。

事故りやすいポイント（試験でも狙われる）

datasetで読む値は常に文字列です（'1' と 1 は別）。
data-actionは dataset.action で読む（dataset.dataAction ではありません）。
クリック対象が子要素になる構造では、e.targetにdata-actionが無い場合があります（必要ならclosest()でボタンまでたどる）。

data属性の値を取得する（JavaScriptで読み取る方法）

data-*属性の値を取得する方法です。JavaScriptではdatasetを使ってdata属性を簡単に取得できます。下記の HTMLから「data-name」の値を取得してみます。

HTML

<div id="element" data-name="test"></div>

idで要素を取得したら、datasetには「data-を外した名前」をそのまま使います。たとえば data-name は dataset.name です。

JavaScript

const element = document.getElementById('element');
element.dataset.name

もし、data-*属性名が「data-user-name」のように複数の単語をハイフンで繋いでいる場合は、ハイフンをキャメルケースに置き換えます。

JavaScript

const element = document.getElementById('element');
element.dataset.userName;

data属性に値を設定する（JavaScriptで追加・書き込む）

要素に data-*属性を設定（追加）する方法です。datasetを使うとHTMLのdata属性を簡単に変更できます。下記の HTMLに「data-name」という data-*属性に「test」という値を設定・追加してみます。

HTML

<div id="element"></div>

取得する際と同様に記述して、イコールで値を代入します。

JavaScript

const element = document.getElementById('element');
element.dataset.name = 'test';

もし、「data-user-name」のように複数の単語をハイフンで記述している場合は、キャメルケースに置き換えます。

JavaScript

const element = document.getElementById('element');
element.dataset.userName = 'test';

data属性の値を更新する（datasetで上書きする）

要素の data-*属性の値を更新する方法です。下記の HTMLの「data-name」が持っている値「test」を「testtest」に更新してみます。

HTML

<div id="element" data-name="test"></div>

設定（追加）する際と同様の記述になります。新しい値を代入することで、カスタムデータ属性の値を更新することができます。

JavaScript

const element = document.getElementById('element');
element.dataset.name = 'testtest';

もし、「data-user-name」のようにハイフンで記述している場合は、キャメルケースに置き換えて更新する値を代入します。

JavaScript

const element = document.getElementById('element');
element.dataset.userName = 'testtest';

data属性の値を削除する（属性ごと消す）

最後に、data-*属性を「削除する」方法です。ここでは、次のように最初から data-name を持っている要素を例にします。

HTML

<div id="element" data-name="test"></div>

datasetで扱うときも、「data-」を外した名前（ここではname）を使います。属性そのものを消したいときは、deleteを使います。

JavaScript

const element = document.getElementById('element');

// いまは data-name="test" が付いている
console.log(element.dataset.name);               // "test"

// 属性そのものを削除する（HTML上からも消える）
delete element.dataset.name;

// 削除後は dataset からも undefined になる
console.log(element.dataset.name);               // undefined
console.log(element.hasAttribute('data-name'));  // false

よくある勘違いとして、値を「空文字」にするだけでは属性自体は残るという点があります。

JavaScript（空にするだけの場合）

const element = document.getElementById('element');

// 値だけ空にする（属性は残る：data-name=""）
element.dataset.name = '';

console.log(element.getAttribute('data-name'));  // ""（空文字）
console.log(element.hasAttribute('data-name'));  // true のまま

使い分けの目安：

「未設定だけど枠は残しておきたい」という意味にしたいときは、element.dataset.name = ''; のように空文字を代入する。
「このカスタムデータ自体がもう不要」というときは、delete element.dataset.name; で属性ごと削除する。

裏側では delete element.dataset.name; を呼ぶと、data-name 属性自体が DOM から取り除かれます。開発者ツールの Elements タブで、削除前後の <div> を見比べてみると違いが分かりやすいです。

datasetの使い方のコツと注意点

dataset の各値は文字列です。数値として使うときは Number(el.dataset.count) のように変換。
属性名は英小文字とハイフンで書くのが基本（例：data-item-id）。
JavaScript側はキャメルケースでアクセス（例：dataset.itemId）。
HTMLのdata属性を追加・書き換え・削除する処理は、すべてdatasetで簡単に行えます。
プロパティ名を動的に扱いたいときや、キャメルケースの文字列をキーにしたいときはブラケット記法が使えます（例：el.dataset['userName']）。
真偽値や複雑なデータは文字列になるため、必要に応じて変換します。例：el.dataset.enabled === 'true'、またはJSON.parse(el.dataset.options)（保存時はel.dataset.options = JSON.stringify(obj)）。

JavaScript（動的キー）

const el = document.getElementById('element');
// "userName" というキー文字列を動的に使う
const key = 'userName';
el.dataset[key] = 'taro';
console.log(el.dataset.userName); // "taro"

datasetをまとめて見る（連想配列みたいに扱う）

dataset は「要素に付いている data-* の集まり」をまとめて持つオブジェクト（イメージ）です。中身を一気に確認したいときは次のようにします。

JavaScript

const el = document.getElementById('element');

// 一覧で確認（開発者ツールのコンソールに表示）
console.log(el.dataset);

// すべてのキーと値をなめる
Object.keys(el.dataset).forEach((key) => {
	console.log(key, el.dataset[key]);
});

ポイント：el.dataset は「data-* をキャメルケース化したキー」と「文字列の値」を持っています。キー名は HTML 側の変更に合わせて反映されます。

注意：data-*はHTMLから誰でも見える場所です。大きすぎるデータや機密情報は入れないでください（必要最小限・短い値にしましょう）。

CSSと組み合わせて「状態」を管理する

datasetで書き換えたdata-*属性は、CSSの属性セレクタからもそのまま見えます。これを利用すると、「開いている／閉じている」などの状態を、クラスではなくdata-*属性で管理するシンプルなパターンが使えます。

例えば、ボタンを押したときだけ詳細エリアを表示したい場合は、次のように書けます。

HTML

<button id="toggleButton">詳細を表示</button>
<div id="panel" data-open="false">
    ここに詳細な説明が入ります。
</div>

CSS

#panel[data-open="false"] {
    display: none;
}

#panel[data-open="true"] {
    display: block;
}

JavaScript

const button = document.getElementById('toggleButton');
const panel = document.getElementById('panel');

button.addEventListener('click', () => {
    const isOpen = panel.dataset.open === 'true';
    panel.dataset.open = isOpen ? 'false' : 'true';
    button.textContent = isOpen ? '詳細を表示' : '閉じる';
});

ポイント：

panel.dataset.openには'true'か'false'という文字列が入っています。比較するときも文字列として扱います。
JavaScriptでdataset.openを書き換えると、DOMのdata-open属性も同時に変わるので、CSSの[data-open="..."]にもすぐ反映されます。
クラス名を増やさなくても、data-openという1つのカスタムデータ属性だけで状態を管理できるのが便利です。

datasetでよくある間違いとエラー例

dataset["data-user"]

❌ data- は含めない。dataset.user が正解。

dataset.user-name

❌ ハイフンは使えない。dataset.userName とキャメルケースに。

dataset.0name

❌ 先頭を数字にしない。dataset.name0 のようにする。

<div dataUser="Taro">

❌ 属性名は必ず data-* で始める（data-user）。

「data-」を付け忘れた

→ 正しくは data-name="value" のように「data-」を付けます。

ハイフン付き属性をそのまま使った

→ JSではキャメルケースにします。例：data-user-name → dataset.userName

数値をそのまま足し算したら文字列連結になった

→ Number() で数値に変換してから計算します。

属性を削除したいときに空文字を代入した

→ 空文字では削除されません。delete element.dataset.name; を使います。

JavaScript（空にする vs 完全に消す）

const el = document.getElementById('element');

// 値を「空」にする（属性は残る：data-name="" の状態）
el.dataset.name = '';

// 属性そのものを消す（HTML上からも消える）
delete el.dataset.name;

使い分けの目安：

「未設定（空）」の意味にしたい → ''（空文字）
属性そのものをなくしたい → delete el.dataset.name

datasetに関するよくある質問

Q. datasetの値は数値として使える？: A. 値は文字列なので "123" になります。数値にしたいときは Number() などで変換します。
Q. datasetで書き換えてもHTMLに反映されないのはなぜ？: A. 通常、datasetで値を変更すると、DOM上のdata-*属性にもすぐ反映されます。もし反映されていないように見えるときは、開発者ツール（Elementsタブ）を更新して確認してみてください。表示が古いまま（キャッシュ表示）になっている場合があります。
Q. 対応ブラウザは？: A. 現行の主要ブラウザで利用できます（IEは11以降のみ対応）。
Q. datasetでdata-*属性を削除するには？: A. delete element.dataset.name; で削除できます。HTML上の data-name も消えます。
Q. 値に日本語や記号を使っても大丈夫？: A. 基本的には使えますが、空白や特殊文字は避けましょう。data-user-name="太郎" のように短く分かりやすい名前にすると安全です。
Q. getAttributeとdatasetの違いは？: A. どちらもdata-*を扱えますが、datasetはキー変換（data-user-name→dataset.userName）が入る代わりに短く書けます。文字列として読むだけならgetAttribute、更新も含めて扱うならdatasetが便利です。

よくあるエラー早見表

data- を付け忘れた: 必ず「data-」で始める。例：data-user="Taro"
ハイフン名をそのまま使った: JSではキャメルケースに変える。例：dataset.userName
数値のまま計算して文字列連結になった: Number()で数値変換してから使う。
属性を削除したいのに空文字を代入した: delete element.dataset.name; を使う。
ハイフン名をドット記法でそのまま読もうとした: dataset.user-name はエラー。キャメルケース（dataset.userName）か、ブラケット記法（el.dataset['userName']）を使う。

JavaScript

この記事でわかること

dataset

datasetとは？（JavaScriptでdata属性を扱う基本）

なぜ dataset を使う？

ハイフン名 → キャメルケースの覚え方

HTML + JavaScript（動作イメージ）

ボタンごとに処理内容を切り替える（UI制御）

基本パターン：data-actionで分岐する

事故りやすいポイント（試験でも狙われる）

data属性の値を取得する（JavaScriptで読み取る方法）

data属性に値を設定する（JavaScriptで追加・書き込む）

data属性の値を更新する（datasetで上書きする）

data属性の値を削除する（属性ごと消す）

datasetの使い方のコツと注意点

datasetをまとめて見る（連想配列みたいに扱う）

CSSと組み合わせて「状態」を管理する

datasetでよくある間違いとエラー例

datasetに関するよくある質問

よくあるエラー早見表

基本パターン：`data-action`で分岐する