こんにちは、ライターのマサトです！
今回は、jQueryで簡単にdata属性を操作することができるdata()メソッドについて学習をしていきましょう！この記事では、
- data()とは？
- セレクタを使おう！
- data属性の取得
- data属性の設定
- data属性の変更
という基本的な内容から「data()」と「attr()」の違いについてや「$.data()」と「data()」の違いなど、応用的な使い方に関しても解説していきます。この記事で、data()メソッドをしっかり学習して自分のスキルアップを目指しましょう！
data()とは？
それでは、まず最初にdata()メソッドについて基本的な知識を身につけていきましょう！「data()」を使うとHTML要素内に付与されたdata属性に対して、取得・設定・変更などが簡単に行えるようになります。
ここで、data属性について簡単におさらいしておきましょう！HTML要素には「id属性」「class属性」などの属性を付与できますが、独自の属性を作成して付与できるのがdata属性の特徴です。
例えば次のように「data-」から始まる属性は、すべて独自に作った「data属性」になります。
<p data-name="taro" data-age="30" data-tel="080-1234-5678">私は太郎です</p>
このように「data属性」へ任意の値を保持させておくことで、あとからJavaScriptやjQueryで取得・変更できるわけです。これにより、非常に効率の良いプログラミングができるようになるので大変便利です！
本記事では、この「data属性」を自在に操作することが可能な「data()」メソッドについて解説しますので、ぜひ参考にしてみてください！
セレクタを使おう！
ここからは、「data()」メソッドを実際に使いながらプログラミングをしてみましょう！まずは簡単な使い方として、HTML要素に付与されているdata属性をすべて取得してみます。
記述方法は簡単で、【 対象要素.data() 】のように取得しようと考えている要素にdata()メソッドを実行するだけです。対象要素は通常のjQueryと同じようにセレクタ指定すればOKです！次のサンプル例を見てください。
<body>
<p data-name="taro" data-age="30" data-tel="080-1234-5678">私は太郎です</p>
<script>
const result = $('p').data();
console.log( result );
</script>
</body>
実行結果
{age: 30, name: "taro", tel: "080-1234-5678"}
この例では、冒頭で紹介したp要素を配置しており、いくつかのdata属性が付与されていますね。このp要素に対して、data()メソッドを実行することですべてのdata属性が取得できるわけです。
実行結果を見ると、しっかりと3つのdata属性が表示されています。ちなみに、「data-」の部分は自動的に除外される点についても合わせて覚えておきましょう！
data属性の取得
次に、個別のdata属性を取得する方法について見ていきましょう！先ほどは、一気にすべてのdata属性を取得しましたが、場合によってはそれぞれ1つずつを個別に取得したいこともあります。
このような場合は、【 対象要素.data( 属性名 ) 】のように引数へdata属性名を指定すれば実現できます！次のサンプル例を見てください。
<body>
<p data-name="taro" data-age="30">私は太郎です</p>
<script>
const result = $('p').data('name');
console.log( result );
</script>
</body>
実行結果
taro
この例では、p要素に「data-name」「data-age」という2つのdata属性が付与されています。このp要素に対して「data(‘name’)」と記述することで「data-name属性」の値だけを取得することが出来るわけです。
実行結果を見ると、見事にdata-name属性の値である「taro」が取得できているのが分かります。もちろん、「data(‘age’)」と指定すれば「30」が取得できます！
data属性の設定
「data()」メソッドは、取得だけでなく新しいdata属性を設定することも可能です。記述方法としては、【 対象要素.data( 属性名, 値 ) 】のように引数へ設定したい「属性名と値」を指定すれば実現できます。次のサンプル例を見てください！
<body>
<p>おはようございます</p>
<script>
$('p').data('keyword', 'morning');
</script>
</body>
この例では、単純なp要素が1つだけ配置されていますね。このp要素に対して「data(‘keyword’, ‘morning’)」と記述することで、data-keyword属性が新しく設定されることになります。設定後は、先ほど学んだ方法でdata属性を取得することも可能です。
$('p').data('keyword', 'morning');
const result = $('p').data('keyword');
console.log( result );
実行結果
morning
このように、対象となるp要素に新しく設定したdata属性名を「data(‘keyword’)」のように指定すれば取得できますね。data()メソッドを使った取得と設定は、ペアでよく使われるので忘れないようにしておきましょう！
data属性の変更
今度は、設定したdata属性を途中で変更する方法について見ていきましょう！変更方法はとても簡単で、実はdata属性を設定する方法と同じです。
data()メソッドの引数へ、属性名と値を指定すれば途中で変更することができるのです！次のサンプル例を見てください！
<body>
<p>おはようございます</p>
<script>
$('p').data('keyword', 'morning');
console.log( $('p').data('keyword') );
$('p').data('keyword', 'evening');
console.log( $('p').data('keyword') );
</script>
</body>
実行結果
morning evening
この例では、単純なp要素に対してdata属性を2回設定しているのが分かります。1回目の設定では、「data(‘keyword’, ‘morning’)」と記述することでdata-keyword属性に「morning」という値を設定しています。
そして、2回目の設定では同じようにdata-keyword属性にeveningという値を再設定しているわけです。実行結果を見ると、途中で値が変化しているのが分かりますね。
このように、途中で値を変化させることでdata属性の利便性を高められるので覚えておきましょう！
「data()」と「attr()」の違いについて
jQueryには「data()」メソッドと同じように使える「attr()」メソッドがあります。「attr()」でdata属性を設定する場合も、これまでと同様に【 対象要素.attr( 属性名, 値 ) 】と記述すればOKです！
ただ、属性名の指定は「data-」の部分も一緒に記述しなければいけません。次のサンプル例を見てください。
<body>
<p>おはようございます</p>
<script>
$('p').attr('data-keyword', 'morning');
</script>
</body>
このようにattr()メソッドもdata()とほとんど同じように設定できるわけです。もちろん、data属性の取得や変更も同様です。それでは、この2つのメソッドは一体何が違うのでしょうか？
そこで、それぞれのメソッドを比較してみましょう。次のサンプル例を見てください！
<body>
<p id="one">サンプルテキスト</p>
<p id="two">サンプルテキスト</p>
<script>
$('#one').attr('data-name', 'taro');
console.log( $('#one')[0] );
$('#two').data('name', 'taro');
console.log( $('#two')[0] );
</script>
</body>
実行結果
<p id="one" data-name="taro">サンプルテキスト</p> <p id="two">サンプルテキスト</p>
この例では、id属性名が異なる2つのp要素が配置されています。それぞれのp要素に「attr()」「data()」で、data-name属性を新しく作成し「taro」という値を設定してみました。実行結果には、設定後のp要素を表示させています。
よく見ると、attr()メソッドで設定したdata属性だけがp要素に付与されているのが分かりますね。実は、これこそが「attr() / data()」の大きな違いであり最大の特徴になるのです。要点をまとめると次のようになります！
- 「attr()」で設定した属性はHTML要素へ直接追加される
- 「data()」で設定した属性はjQuery内へ一時的に保持される
つまり、この違いを理解せずに「attr() / data()」を混在させてプログラミングしてしまうと、大きな問題が発生するということになります。その理由を、次の章で詳しく見ていきましょう！
キャッシュについて
先ほど、「data()」メソッドを使って設定した属性はjQuery内へ一時的に保持されると説明しました。これを一般的にキャッシュと呼びますが、重要なのは設定した属性がHTMLへ直接追加されないという点です！
例えば、「data()」で設定したdata属性を「attr()」で取得しようとすればどうなるでしょうか？次のサンプル例を見てください！
<body>
<p>サンプルテキスト</p>
<script>
$('p').data('name', 'taro');
const result = $('p').attr('name');
console.log( result );
</script>
</body>
実行結果
undefined
この例では、p要素に「data()」を使ってdata-name属性を設定しています。次に、「attr()」を使ってこのdata-name属性を取得していますよね？
しかし、実行結果を見ると「undefined」が表示されており、data-name属性が設定されていないことになっています。理由は簡単で、「attr()」メソッドはHTML内に記述されたdata属性しか取得できないからです！
つまり、「data()」で設定されたdata属性はjQuery内でキャッシュされているのでHTMLには存在していません。これでは「attr()」メソッドを使って何度試しても取得できないわけです。
このような問題が起こらないために、「attr()」で設定したら「attr()」で取得する…または「data()」で設定したら「data()」で取得しましょう！
「$.data()」と「data()」は違う
「data()」メソッドには、別の書き方として「$.data()」が存在します。
しかしながら、さまざまな利便性を考慮して現在では「$.data()」を利用する機会はほとんどありません。ただ、どのような違いがあるのかについてはしっかりと把握しておくべきでしょう。
まず、最も大きく違う点として記述方法が挙げられます。一般的な属性を設定する方法は、【 $.data( DOM要素, 属性名, 値 ) 】のように引数へ「DOM要素」を指定する必要があります。
次のサンプル例を見てください！
<body>
<p>サンプルテキスト</p>
<script>
const element = $('p')[0];
$.data( element, 'name', 'taro' );
const result = $.data( element, 'name');
console.log( result );
</script>
</body>
実行結果
taro
この例では、p要素に対してdata属性を付与しています。最初に「$(‘p’)[0]」と記述することで、対象となるpタグの「DOM要素」を取得する必要があるのを忘れないようにしましょう。
取得したDOM要素は、一時的に変数「element」に格納しておくと利便性が高くなりますね。あとは、「$.data( element, ‘name’, ‘taro’ )」と記述することでp要素にdata-name属性を追加することができます。
また、属性を取得する方法は「data()」と似ており、「$.data( element, ‘name’)」のように属性名を指定すれば値を取得できるわけです。結果的に、data-name属性の値「taro」が取得できているのが実行結果からも分かりますね。
もう1つ大きな違いとして、「$.data()」はあらかじめHTMLに記述されているdata属性を取得することができません。次のサンプル例を見てください。
<body>
<p data-name="taro">サンプルテキスト</p>
<script>
const element = $('p')[0];
const result = $.data(element, 'name');
console.log( result );
</script>
</body>
実行結果
undefined
この例では、p要素に最初からdata-name属性が付与されているのが分かりますね。そこで、先ほどと同じように「$.data(element, ‘name’)」と記述して属性を取得しようとしています。
しかし、実行結果を見ると「undefined」になるのが分かります。つまり、「$.data()」によってキャッシュされた属性データにしかアクセスできないことを意味しているわけです。
このように、DOM要素が必要であったり属性データへのアクセスに不便がある点を考慮すると「data()」を使うのがベストでしょう。
まとめ
今回は、jQueryからdata属性を操作することができる「data()」について学習をしてきました！最後に、もう一度ポイントをおさらいしておきましょう！
- 「data()」はHTML要素のdata属性を取得・設定・変更することができる
- 「attr()」はHTML要素へ直接追加するが「data()」はキャッシュされる違いがある
- 「$.data()」はDOM要素が必要でありHTMLのdata属性にアクセスできない
上記内容を踏まえて、ぜひ自分のプログラムへ積極的に活用できるように頑張っていきましょう！
