【JavaScript】data属性の取得・設定・更新【dataset】

こんにちは、Ryohei（@ityryohei）です！

JavaScriptでdata属性（カスタムデータ属性）を操作するプロパティのご紹介です。

data属性、正式にはカスタムデータ属性は、HTMLの要素に「data-*」から始まる任意の名前を付けたカスタムデータを持たせることができる属性です。主にスクリプトでデータを扱う場合に指定することが多い属性になります。

スクリプトで扱うことが多いため、JavaScriptにはdata属性の取得・追加・更新といった操作を簡単に実行することができる便利なプロパティが用意されています。「dataset」というプロパティになります。

もちろん、HTML要素の属性を取得する「getAttribute」や属性を設定する「setAttribute」を使ってdata属性の取得や設定は可能ですが、datasetの方がシンプルに記述することができますし、パフォーマンスも高いようです。（比較結果については下記のリンク先をご参照ください。）

dataset vs getAttribute

HTMLにおけるカスタムデータ属性の詳細はにつきましてはこちらをご参照ください。

では、解説していきます。

datasetでdata属性（data-*）を取得する

data属性の値を取得する方法です。下記のHTMLから「data-name」の値を取得してみます。

<div id="element" data-name="ryoy"></div>

idで要素を取得して、datasetでdataを指定します。その際に「data-name」から「data-」を除いた属性名「name」を指定します。

let element = document.getElementById('element');

element.dataset.name

もし、data属性名が「data-user-name」のように複数の単語をハイフンで繋いでいる場合は、ハイフンをキャメルケースに置き換えます。

let element = document.getElementById('element');

element.dataset.userName;

datasetでdata属性（data-*）を設定する

要素にdata属性を設定（追加）する方法です。下記のHTMLに「data-name」というdata属性に「ryoy」という値を設定・追加してみます。

<div id="element"></div>

取得する際と同様に記述して、イコールで値を代入します。

let element = document.getElementById('element');

element.dataset.name = 'ryoy';

もし、「data-user-name」のように複数の単語をハイフンで記述している場合は、キャメルケースに置き換えます。

let element = document.getElementById('element');

element.dataset.userName = 'ryoy';

datasetでdata属性（data-*）を更新する

要素のdata属性の値を更新する方法です。下記のHTMLの「data-name」が持っている値「ryoy」を「ryoyryoy」に更新してみます。

<div id="element" data-name="ryoy"></div>

設定（追加）する際と同様の記述になります。新しい値を代入することで、カスタムデータ属性の値を更新することができます。

let element = document.getElementById('element');

element.dataset.name = 'ryoyryoy';

もし、「data-user-name」のようにハイフンで記述している場合は、キャメルケースに置き換えて更新する値を代入します。

let element = document.getElementById('element');

element.dataset.userName = 'ryoyryoy';

まとめ

最後に、detasetでdata属性を扱う方法をまとめます。

処理	サンプル
data属性（data-*）の取得	element.dataset.dataName
data属性（data-*）の設定	element.dataset.dataName = '値';
data属性（data-*）の更新	element.dataset.dataName = '値';

「dataset」は使い方がとてもわかりやすいプロパティになります。ハイフンの場合はキャメルケースに置き換えるという点だけ注意していただければと思います。

以上、JavaScriptでdata属性の取得・設定・更新する方法のご紹介でした！