HTMLのdata属性とは？JavaScriptでの使い方を解説

PR HTML

HTMLのdata属性とは？JavaScriptでの使い方を解説

💡 この記事でわかること

  • data属性とは何か
  • data属性の基本的な書き方
  • JavaScriptのdatasetでの取得・変更方法
  • CSSセレクタからdata属性を参照する方法
  • 初心者がつまずきやすいポイント

1. data属性とは？

data属性とは、
👉 HTML標準の属性にはない、自分で自由に名前を決めて値を持たせられる「カスタムデータ属性」です。

「この要素に紐づくID番号」「並び替え用の数値」「開閉状態」など、JavaScriptで使いたいけれど画面には表示したくない情報を、HTMLタグの中に直接埋め込んでおけるのが特徴です。

👉 JavaScriptのDOM操作についての記事はこちら

💡 「HTMLタグに付箋を貼っておいて、あとでJavaScriptから読み取る」とイメージすると分かりやすいはずです。

2. data属性の基本的な書き方

属性名の先頭にdata-を付けて、好きな名前を続けます。値は文字列として指定します。

<div class="item" data-id="123" data-status="active">
  商品A
</div>

この例では、要素にidという意味の情報をdata-id、状態を表す情報をdata-statusとして持たせています。

💡 属性名はdata-の後ろを自由に決められますが、大文字は使えません。複数の単語をつなげる場合はハイフンで区切ります(例:data-user-name)。

3. JavaScriptのdatasetでの取得・変更方法

値を取得する

JavaScriptでは、要素のdatasetプロパティを使ってdata属性の値を取得します。

const item = document.querySelector(".item");

console.log(item.dataset.id);      // "123"
console.log(item.dataset.status);  // "active"

👉 console.logについての記事はこちら

👉 data-idはdataset.id、data-user-nameはdataset.userNameのように、ハイフンの後ろの文字が大文字になる「キャメルケース」に自動変換される点に注意してください。

値を変更する

datasetプロパティに直接代入することで、値を書き換えることもできます。

item.dataset.status = "inactive";

💡 datasetはあくまで文字列を扱います。数値として計算に使いたい場合はNumber(item.dataset.id)のように変換してから使いましょう。

4. CSSセレクタからdata属性を参照する

data属性は属性セレクタを使うことで、CSS側からも参照できます。

.item[data-status="active"] {
  border: 2px solid green;
}

JavaScriptでdata属性の値を書き換えるだけで、対応するCSSのスタイルを切り替えられるため、「状態に応じて見た目を変える」UIとの相性が良い書き方です。

5. 初心者がつまずきやすいポイント

  • 属性名とdatasetのプロパティ名の変換ルールを忘れる:ハイフン区切り→キャメルケースになります
  • id属性と混同する:data属性は複数個・自由な名前で持たせられますが、id属性はページ内で1つだけ・要素を一意に識別するためのものです
  • 数値や真偽値をそのまま扱おうとする:dataset経由の値は常に文字列なので、必要に応じて変換が必要です
  • 大文字を属性名に使ってしまう:data属性名は必ず小文字で書きます

まとめ

data属性を使うと、HTMLとJavaScriptの間で「画面には出さないけれど必要な情報」を自然な形でやり取りできます。タブ切り替えやソート、フィルタリングなど、状態を持つUIを作る際に特に役立ちます。

まずはdata-*属性を1つ書いて、datasetで取得してみるところから試してみましょう。

-HTML
-, ,