jQueryのdataの使い方を解説！dataメソッドは便利な機能をマスターしよう！

システム
エンジニア

dataメソッドについて教えてください。

プロジェクト
マネージャー

このメソッドはHTML要素内に付与されたdata属性を取得したり変更ができる大変便利なメソッドです。

jQueryのdataの使い方を解説

jQueryのdataとは？

jQueryは豊富な機能を持つJavaScriptのライブラリです。その機能の一つのdataメソッドは、HTMLのdata属性を取得することができます。この記事ではまずdata属性とは何かという所から解説するので、初心者の方は是非ご覧ください。

なおこの記事のサンプルを利用する場合は、htmlのheadタグに以下を記述してください。以下が最新版のjQueryとは限りませんが、古くても動作はします。

<script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>

HTMLのデータ属性とは

jQueryのdataメソッドを解説する前に、HTMLのdata属性について確認しておきましょう。data属性とは以下のようにdataで始まる属性を意味します。

<div data-type=”ラーメン店” data-address=”Tokyo” data-tel=”123-4567″>〇〇〇屋</div>

data属性が追加される前はHTMLタグに情報を持たせる場合、class属性やid属性に持たせていましたが、それらは本来はそのような目的で使う属性ではありません。HTML5でdata属性が追加されることで、タグの属性に自由に情報を持たせることができるようになったのです。

jQueryのdataのサンプル

それでは上のタグのdata属性を、jQueryのdataメソッドで取得してみましょう。htmlのscriptタグ内に以下を記述してください。

$(document).ready(function() {
var data = $(‘div’).data();
console.log(data);
});

documentや’div’はセレクタ、readyやdataはメソッドと呼びます。$(document).ready(function() {～});はページ全体が読み込まれたらreadyのfunction内の処理を行うという意味です。

dataメソッドでdata属性の内容を取得

上のjQueryはdataメソッドによりdivタグのdata属性の内容を取得して変数に入れています。それをconsole.logでログに表示しています。結果は以下のようになります。

address: “Tokyo”
tel: “123-4567”
type: “ラーメン店”

なおコンソールはGoogle Chromeの場合は、表示しているページでF12を押してDevToolsでConsoleのタブを選択することで見られます。

data属性を1つだけ取得する

上の例ではdata属性の全ての値を取得しましたが、特定のdata属性を1つ取得したい場合はどうしたらよいのでしょうか。その場合はjQueryを以下のようにします。

$(document).ready(function() {
var data = $(‘div’).data(‘type’);
console.log(data);
});

これでdata-typeの値が取得できます。ログの結果は以下の通りです。

ラーメン店

dataメソッドはdata属性の追加も可能

dataメソッドはdata属性の追加も可能です。jQueryを以下のようにすると、

$(document).ready(function() {
$(‘div’).data(‘teikyubi’,’Monday’);
var data = $(‘div’).data(‘teikyubi’);
console.log(data);
});

ログの結果は

Monday

となります。divタグにdata-teikyubi=”Monday”が追加されたということです。ただしブラウザでソースを見てもそれが追加されたことはわかりません。jQueryによる後からの変更はソース表示機能で見ることはできないのです。

既にあるdata属性の変更も可能

なお上の機能はdata属性の追加だけでなく変更も可能です。以下のようにすると、

$(document).ready(function() {
$(‘div’).data(‘address’,’Osaka’);
var data = $(‘div’).data(‘address’);
console.log(data);
});

ログの結果はOsakaになります。既にあったdata-address=”Tokyo”が変更されたということです。

attrメソッドについて

jQueryにはattrというdataに似たメソッドがあります。attrはattributeの略です。以下でattrメソッドによりdata属性を取得できます。

$(document).ready(function() {
var attr = $(‘div’).attr(‘data-type’);
console.log(attr);
});

結果は「ラーメン屋」と表示されます。注意点はdataメソッドと違い、data-を省略できないことです。attrはdata属性専用のメソッドではないからです。

dataとattrで注意する点

dataとattrについて注意すべき点があります。以下を実行してみてください。

$(document).ready(function() {
$(‘div’).attr(‘data-menu1’, ‘とんこつ’);
var data = $(‘div’).data(‘menu1’);
console.log(data);
$(‘div’).data(‘menu2’, ‘味噌バター’);
var attr = $(‘div’).attr(‘data-menu2’);
console.log(attr);
});

ログの出力結果は以下になります。

とんこつ
undefined

attrとdataの併用は避けるべき

attrメソッドで設定したdata属性はdataメソッドで取得できていますが、dataメソッドで設定したdata属性はattrメソッドで取得できていません。これはdataメソッドで設定した場合、jQuery内部だけでキャッシュされて、HTMLとしては存在していないからなのです。

このような問題が生じるので、attrとdataを併用するのは避けるべきですね。attrはattrだけ、dataはdataだけで利用しましょう。

$.data()とは？

jQueryにはdataメソッドとは別に$.data()という機能があります。使い方は以下の通りです。

$(document).ready(function() {
var elem = $(‘p’)
$.data( elem, ‘menu’, ‘塩味’ );
var data = $.data( elem, ‘menu’);
console.log(data);
});

elemにpタグ全体の要素を取得し、$.dataでelemにdata-menu=”塩味”を追加しています。それをまた$.dataで取得して、ログに出力しています。結果は「塩味」になります。

$.data()のメリットとデメリット

実は$.data()はdataメソッドと違い、HTMLで既にあるdata要素を取得することができません。なのでdataメソッドに比べてあまり使い道が無いように思えます。ただし$.data()はdataメソッドより処理速度がとても速いと言われています。

もし高速化を要求する場面で$.data()を使う機会があれば、試してみるとよいでしょう。

システム
エンジニア

dataメソッドを使うことで、独自の属性を付与することができるのですね。

プロジェクト
マネージャー

大変便利なメソッドです。効率の良いプログラムが可能ですので、ぜひマスターしてください。

jQueryのdataはHTMLにデータを持たせたい時に使える

jQueryのdataメソッドについて解説しましたが、ご理解頂けましたでしょうか。HTMLにデータを持たせたい時にとても便利な機能と言えるでしょう。是非使い方をマスターして、高度なWebページを作成してください。