【jQuery】data属性の取得・設定・絞り込み完全ガイド｜.data()・attr()・セレクタ比較

HTMLのカスタムデータ属性（data-*）は、HTML要素に任意のデータを持たせるための標準的な仕組みです。jQueryではこのdata属性を扱う方法が複数あり、それぞれに特性と使い分けがあります。

この記事では、.data()メソッドと.attr()メソッドによるdata属性の取得・設定、および属性セレクタを使った要素の絞り込み方法を、比較表と実践例を交えて徹底解説します。

HTMLのdata属性の基本書き方

data-*属性は、HTMLの標準仕様（HTML5以降）で定義されたカスタム属性です。data-のあとに任意の名前をつけて、要素に情報を埋め込むことができます。

<div id="user" data-id="123" data-name="田中" data-role="admin">
  田中さんのプロフィール
</div>

<button data-target="#modal1" data-label="詳細を見る">
  開く
</button>

<ul>
  <li data-category="fruit" data-price="150">りんご</li>
  <li data-category="fruit" data-price="200">バナナ</li>
  <li data-category="veggie" data-price="100">にんじん</li>
</ul>

方法1: .data()メソッドで取得・設定

jQuery の .data() は、data属性の値を取得・設定するためのメソッドです。内部的にキャッシュ機構を持ち、高速にデータを扱えます。

取得: $(el).data(‘key’)

<div id="user" data-id="123" data-name="田中" data-score="98.5" data-active="true">
  ユーザー情報
</div>

// 基本的な取得
var id = $("#user").data("id");       // 123 (number型)
var name = $("#user").data("name");   // "田中" (string)
var score = $("#user").data("score"); // 98.5 (number型)
var active = $("#user").data("active"); // true (boolean型)

console.log(typeof id);     // "number"
console.log(typeof active); // "boolean"

設定: $(el).data(‘key’, value)

// .data() で値を設定する
$("#user").data("name", "佐藤");
$("#user").data("score", 75);

// 設定後に取得すると新しい値が返る
console.log($("#user").data("name")); // "佐藤"

// オブジェクトをまとめて設定することも可能
$("#user").data({ name: "鈴木", score: 88 });

方法2: .attr()メソッドで取得・設定

.attr() は HTML 要素の属性を直接操作するメソッドです。data-*属性も通常の属性として取得・設定できます。

取得: $(el).attr(‘data-key’)

// .attr() での取得 - 必ず文字列で返る
var id = $("#user").attr("data-id");     // "123" (string型!)
var name = $("#user").attr("data-name"); // "田中" (string)

console.log(typeof id); // "string" (.data()と異なる)

設定: $(el).attr(‘data-key’, value)

// .attr() での設定 - DOM属性が実際に更新される
$("#user").attr("data-name", "佐藤");

// DOM上の属性が更新されているので .attr() で取得できる
console.log($("#user").attr("data-name")); // "佐藤"

// 開発者ツールのElementsタブでも変化が確認できる
// → <div id="user" data-id="123" data-name="佐藤" ...>

.data()と.attr()の違い比較表

2つのメソッドの違いを整理します。用途に応じて適切に使い分けることが重要です。

属性セレクタで絞り込む方法

jQueryでは属性セレクタを使って、特定のdata属性を持つ要素だけを絞り込んで取得できます。CSSの属性セレクタと同じ文法で使えます。

完全一致: $([data-key=”value”])

<ul>
  <li data-role="admin">管理者</li>
  <li data-role="user">一般ユーザー</li>
  <li data-role="admin">別の管理者</li>
</ul>

// data-role が "admin" に完全一致する要素を取得
var admins = $("[data-role=\"admin\"]");
console.log(admins.length); // 2

admins.css("color", "red");

前方一致: $([data-key^=”value”])

// data-tag が "btn-" で始まる要素を取得
var btnElements = $("[data-tag^=\"btn-\"]");
btnElements.addClass("button-style");

// 例: data-tag="btn-primary", data-tag="btn-danger" は一致
//     data-tag="icon-btn" は不一致

後方一致: $([data-key$=”value”])

// data-tag が "-end" で終わる要素を取得
var endElements = $("[data-tag$=\"-end\"]");
endElements.hide();

// 例: data-tag="section-end", data-tag="row-end" は一致
//     data-tag="end-section" は不一致

部分一致: $([data-key*=”value”])

// data-info に "example" が含まれる要素を取得
var exampleItems = $("[data-info*=\"example\"]");
exampleItems.addClass("highlight");

// 例: data-info="this is an example", data-info="example-code" は一致
//     data-info="sample" は不一致

複数条件の組み合わせ

// data-category="fruit" かつ data-price が "1" から始まる要素
var cheapFruits = $("[data-category=\"fruit\"][data-price^=\"1\"]");
cheapFruits.css("background", "#e8f5e9");

属性セレクタの比較表

実践例: data属性を使ったモーダルウィンドウ

data属性の実践的な活用例として、複数のモーダルをdata属性で制御する実装を紹介します。ボタンのdata-target属性に対象モーダルのIDを指定します。

<!-- 複数のボタン: data-target で対象モーダルを指定 -->
<button class="modal-open" data-target="#modal1">プロフィールを見る</button>
<button class="modal-open" data-target="#modal2">お知らせを見る</button>

<!-- モーダルHTML -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h3>プロフィール</h3>
    <p>田中太郎 / エンジニア</p>
    <button class="modal-close">閉じる</button>
  </div>
</div>

<div id="modal2" class="modal">
  <div class="modal-content">
    <h3>お知らせ</h3>
    <p>新機能をリリースしました。</p>
    <button class="modal-close">閉じる</button>
  </div>
</div>

// モーダルを開く
$(".modal-open").on("click", function() {
  // data-target 属性でどのモーダルを開くか判定
  var target = $(this).data("target"); // "#modal1" or "#modal2"
  $(target).fadeIn(300);
});

// モーダルを閉じる
$(".modal-close").on("click", function() {
  $(this).closest(".modal").fadeOut(200);
});

// 背景クリックでも閉じる
$(".modal").on("click", function(e) {
  if ($(e.target).hasClass("modal")) {
    $(this).fadeOut(200);
  }
});

data属性の型変換（数値・真偽値・オブジェクト）

.data()メソッドは、HTML属性の文字列値を自動的に適切なJavaScript型に変換します。一方、.attr()は常に文字列を返します。

<div id="item"
  data-count="42"
  data-price="9.99"
  data-active="true"
  data-tags="[1,2,3]"
  data-info='{"name":"test","value":100}'>
</div>

var $item = $("#item");

// .data() の型変換
console.log($item.data("count"));  // 42          (number)
console.log($item.data("price"));  // 9.99        (number)
console.log($item.data("active")); // true         (boolean)
console.log($item.data("tags"));   // [1, 2, 3]   (Array)
console.log($item.data("info"));   // {name:..}   (Object)

// .attr() は常に文字列
console.log($item.attr("data-count"));  // "42"    (string)
console.log($item.attr("data-active")); // "true"  (string)

// .attr()の返り値を数値として使う場合は変換が必要
var count = parseInt($item.attr("data-count"), 10);

関連記事

jQueryの属性操作や要素の選択・繰り返し処理についてはこちらの記事も参考にしてください。

• 【jQuery】attr()でHTMLの属性操作を行う方法
• 【jQuery】eq()で要素の順番を指定して選択する
• 【jQuery】each()を使ったDOM、配列、オブジェクトに対するループ処理

よくある質問（FAQ）