【中学生でもわかる】JavaScript〜datasetでデータを扱う！

こんにちは、フローです。

今回は、JavaScriptの非常に便利な機能である

datasetについて簡単に説明します。

1. datasetとは

HTML要素のカスタムデータ属性（data-*属性）を扱うためのJavaScriptのプロパティです。

これを利用すると、

HTML要素に任意の情報を追加したり取得したりすることができます。

2. datasetの使用場面

ウェブページ上のHTML要素に関連するデータを格納、

取得したい場合にdatasetは役立ちます。

例えば、

ユーザーが選択したアイテムの情報をボタン要素に関連付けたり、

ダイナミックなコンテンツを生成したりする場合に使います。

3. datasetの使用例

それでは、具体的な使用例を見てみましょう。

以下の3つのパターンを紹介します。

データの追加と取得

<div id="myDiv" data-user="John"></div>

let element = document.getElementById('myDiv');
console.log(element.dataset.user); // "John"

このコードは、

data-user属性の値を取得します。

データの変更

<div id="myDiv" data-user="John"></div>

let element = document.getElementById('myDiv');
element.dataset.user = "Doe";
console.log(element.dataset.user); // "Doe"

このコードは、

data-user属性の値を”Doe”に変更します。

新しいデータ属性の追加

<div id="myDiv"></div>

let element = document.getElementById('myDiv');
element.dataset.newAttribute = "NewValue";
console.log(element.dataset.newAttribute); // "NewValue"

このコードは、

新しいデータ属性data-new-attributeを追加し、

値を”NewValue”に設定します。

4. datasetの注意点

datasetは非常に便利な機能ですが、一つだけ注意すべきポイントがあります。

それは、

datasetプロパティで扱えるカスタムデータ属性の名前は、

単語をハイフンで繋ぐケバブケース（kebab-case）である必要がありますが、

JavaScript側ではキャメルケース（camelCase）に変換して扱うということです。

以下のようなコードはエラーを発生します。

<div id="myDiv" data-user-name="John"></div>

let element = document.getElementById('myDiv');
console.log(element.dataset.user-name); // エラー発生

このコードは、

data-user-name属性を取得しようとしていますが、

JavaScriptではハイフンは減算演算子として認識されてしまうため、エラーが発生します。

代わりにelement.dataset.userNameとすることで正しく値を取得できます。

5. まとめ

datasetはHTML要素のカスタムデータ属性を扱う非常に便利なJavaScriptのプロパティです。

ただし、

HTML側の属性名（ケバブケース）と

JavaScript側のプロパティ名（キャメルケース）の間で変換が必要であることに注意が必要です。

この記事があなたのJavaScript学習に役立つことを願っています。

レッツチャレンジ！