Web制作やフロントエンド開発をしていると、「HTML要素ごとにちょっとしたデータを持たせたい」「JavaScriptやjQueryからその値を簡単に取得したい」と思う場面がよくあります。
そんなときに便利なのが「data属性」です。
この記事では、初心者の方にも分かりやすく、data属性の基本からJavaScript・jQueryで値を取得する方法まで、実例を交えて丁寧に解説します。
data属性とは
data属性
は、HTML5から使えるようになったカスタムデータ属性です。
HTML要素に「開発者が自由に定義したデータ」を埋め込むために使います。
書き方はとてもシンプルで、data-
から始まる属性名をHTMLタグに追加するだけです。
例:
<div id="target" data-user-id="1" data-role="admin">ユーザー情報</div>
上記の例では、<div>
タグに「user-id」と「role」という2つのデータが含まれています。
data属性を使う理由
- 要素ごとに異なるデータを持たせたいときに便利
- クラス名やIDでは管理しづらい細かい情報を埋め込める
- JavaScriptやjQueryから簡単にアクセス・操作できる
たとえば、ECサイトで「商品ID」や「価格」などを各ボタンに持たせたい場合などに非常によく使われます。
例:
<button id="add-cart" data-product-id="1001" data-price="1980">カートに追加</button>
このようにdata属性は、HTMLとJavaScriptの「橋渡し」のような役割を果たしてくれます。
JavaScriptでdata属性の値を取得する方法
JavaScriptでdata属性の値を取得するには、dataset
プロパティを使うのがもっとも一般的で簡単な方法です。
以下のようなHTMLがあったとします。
HTML:
<div id="target" data-user-id="1" data-role="admin">ユーザー情報</div>
この要素に対して、JavaScriptでdata属性の値を取得するには次のように書きます。
const element = document.querySelector('#target');
const userId = element.dataset.userId;
const role = element.dataset.role;
console.log(userId); // "1"
console.log(role); // "admin"
data-
の後ろは キャメルケース(userId, roleなど) に変換して使います。data-user-id
→dataset.userId
になることに注意しましょう。
イベントと組み合わせてdata属性の値を取得する方法
実際の開発では、ユーザーがボタンをクリックしたタイミングでdata属性の値を取得したいケースが非常に多いです。
たとえば、以下のように商品IDをボタンに埋め込んでおき、クリック時にそのIDを取得して処理を行うような場面です。
HTML:
<button data-product-id="1001">商品A</button> <button data-product-id="1002">商品B</button> <button data-product-id="1003">商品C</button>
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('click', function() {
const productId = this.dataset.productId;
console.log(`クリックされた商品ID: ${productId}`);
});
});
jQueryでデータ属性を取得する方法
jQueryでdata属性の値を取得するには、.data()
メソッドを使用します。
以下のようなHTMLがあったとします。
HTML:
<div id="target" data-user-id="1">ユーザー情報</div>
この要素に対して、jQueryでdata属性の値を取得するには次のように書きます。
const userId = $('#target').data('userId');
console.log(userId); // 1
新しいバージョンのjQueryではキャメルケース(
.data('userId')
)で指定することが推奨されますが、(.data('user-id')
のように、ハイフン区切りのまま指定することも可能です。古いバージョンのjQueryを使用している場合、キャメルケースで指定することはできないため、ハイフン区切りで指定する必要があります。