【PR】を含みます。

フロントエンド

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

JavaScript・jQuery data属性の値を取得する方法

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

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を使用している場合、キャメルケースで指定することはできないため、ハイフン区切りで指定する必要があります。

-フロントエンド
-,