JavaScript

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

要点：dataset は、HTMLに書いた data-* 属性を 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（動作イメージ）

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

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

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

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

data-*属性の値を取得する方法です。下記の HTMLから「data-name」の値を取得してみます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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)）。

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

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

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

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から誰でも見える場所です。大きすぎるデータや機密情報は入れないでください（必要最小限・短い値にしましょう）。

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. 数字はそのまま使える？

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の方が短く読みやすいです。setAttributeよりも自然に書けるのが利点です。

よくあるエラー早見表

data- を付け忘れた

必ず「data-」で始める。例：data-user="Taro"

ハイフン名をそのまま使った

JSではキャメルケースに変える。例：dataset.userName

数値のまま計算して文字列連結になった

Number()で数値変換してから使う。

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

delete element.dataset.name; を使う。

ハイフン名をドット記法でそのまま読もうとした

dataset.user-name はエラー。キャメルケース（dataset.userName）か、ブラケット記法（el.dataset['userName']）を使う。