HTML5では、data-*という形式のカスタム属性（通称：data属性）を使って、マークアップ内にプライベートな情報を保存することができます。このdata属性はJavaScriptやjQueryで簡単にアクセスでき、動的な挙動やスタイリングに利用することができます。今回は、jQueryを使ってdata属性の値で要素を絞り込み、取得する方法について解説します。
基本的なセレクタの使用
属性セレクタによる絞り込み
jQueryでは、属性セレクタを使って特定の属性を持つ要素を簡単に取得できます。data属性も例外ではありません。
// data-role属性が"button"である要素を取得
const buttons = $('[data-role="button"]');このコードは、data-role属性の値が”button”であるすべての要素を選択します。
複数のdata属性での絞り込み
複数のdata属性を持つ要素を絞り込む場合も、属性セレクタを連結して使用することができます。
// data-roleが"button"で、data-typeが"submit"である要素を取得
const submitButtons = $('[data-role="button"][data-type="submit"]');高度なセレクタとフィルタリング
値に部分一致する要素の取得
値が特定の文字列を含む要素を取得する場合、*=セレクタを使用できます。
// data-info属性の値に"example"という文字列が含まれる要素を取得
const exampleElements = $('[data-info*="example"]');値に前方一致、後方一致する要素の取得
前方一致や後方一致で要素を取得する場合は、^=や$=を使用します。
// data-tag属性の値が"btn-"で始まる要素を取得
const btnElements = $('[data-tag^="btn-"]');
// data-tag属性の値が"-end"で終わる要素を取得
const endElements = $('[data-tag$="-end"]');まとめ
jQueryを使用すると、data属性を用いて非常に柔軟な要素の絞り込みが可能です。基本的な属性セレクタから、部分一致、前方一致、後方一致による高度なフィルタリングまで、幅広いニーズに対応できます。この機能を活用することで、より効率的かつ綺麗なコードを書くことができるでしょう。
