jQueryでのカスタムデータ属性を取得・変更するメソッド【data】
初心者向けjQueryメソッド紹介の第四回です。
今回は、jQueryの数あるメソッドの中でちょっと特殊な、「カスタムデータ属性を取得・変更するメソッド」を紹介しようと思います。聞き慣れない方もいるかと思いますが、使いこなせるとかなり便利なので是非覚えておきましょう。
注意点として、dataには要素に対して実行する$(selector).data()と、$にそのまま続けて実行する$.data()があり、今回は前者の説明となります。後者はあまり使うタイミングがないため、割愛します。
今回は以下の流れで解説していこうと思います。
各メソッドの概要
data
dataは、任意のデータをマッチした要素に紐付けて、取得・設定する仕組みを提供します。
data – リファレンス
上記の説明だけではよくわからないと思います。dataのメリットを知るには下記のHTML5の仕組みを知っておくとスムーズです。
HTML5では、HTML要素に対して「data-〇〇」という任意の名前を設定して、そこに値を入れて保存しておくことができます。例えば
<p data-category="dog">トイプードル</p>
<p data-category="cat">ペルシャ</p>
<p data-category="hamster">ジャンガリアン</p>のような形で、好きな名前（ここではcategory）を付け、そこに値を入れておけます。そしてこのdata属性をjQueryのdata()メソッドで取得、追加、削除など操作することができます。
使い方
使い方はそんなに難しくありません。引数が1つならそのキーの値を取得、引数が2つなら引数1のキーに引数2の値を格納します。
// data-[key]の値を取得する
$('target').data( key );
// data-[key]にvalueを格納する
$('target').data( key, value );target：
動作を行う対象となるHTML要素です。
key：data属性のキーが入ります。
value：
ここに入れた値が設定されます。
基本はこれだけです。実際の使い方は下記のようになります。
// pのdata-idに1を格納
$('p').data( 'id', 1 );
// pのdata-idを取得
let dataId = $('p').data( 'id' ); // 1
// data属性には一応オブジェクトも格納できる。でもあまり使わない...
$('p').data( 'person', { name: 'Taro', age: 18 } );
// 呼び出す時はこんな感じ
let name = $('p').data( 'person' ).name; // Taro
// ↑ は、こうした方が基本的には使いやすい
$('p').data( 'name', 'Taro' ).data( 'age', 18 );まとめ
例えばデータベースなどから取得したデータからHTML要素を作ったりする場合に、タグ付けのような感覚でdata属性を与えておけば後でその値によって絞り込んだり検索したりしやすくなりますよね。
また、idやclassなど他の属性と違い、jQuery等で操作する以外の意味を持たないので、どれだけ設定しても邪魔にならないのもメリットです。これをもしclass等で付与していたら、後で見返した時にCSSを設定したりしているかも？と戸惑うことでしょう。
「JavaScriptやjQueryで操作する専用の、好きな名前でいくつでも設定できる値」ということで、慣れてくれば来るほどこの使いやすさが理解できるようになると思います。
是非覚えておきましょう。