【JavaScript】data属性の値を取得する方法

data属性とは
- data属性を使う理由
JavaScriptでdata属性の値を取得する方法
- イベントと組み合わせてdata属性の値を取得する方法
jQueryでデータ属性を取得する方法

この記事では、JavaScriptとjQueryでdata属性の値を取得する方法を解説します。

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属性の値を取得するには次のように書きます。

JavaScript

Copy

const element = document.querySelector('#target');

const userId = element.dataset.userId;

const role = element.dataset.role;

console.log(userId); // "1"

console.log(role); // "admin"

POINT

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>

JavaScript

Copy

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属性の値を取得するには次のように書きます。

jQuery

Copy

const userId = $('#target').data('userId');

console.log(userId); // 1

POINT

新しいバージョンのjQueryではキャメルケース（.data('userId')）で指定することが推奨されますが、（.data('user-id')のように、ハイフン区切りのまま指定することも可能です。
古いバージョンのjQueryを使用している場合、キャメルケースで指定することはできないため、ハイフン区切りで指定する必要があります。

リンク

udemyでJavaScriptを学ぶ

講座名

学習時間

24.5時間

学習内容