HTMLの要素と要素を紐付けて管理できる「カスタムデータ属性」の使い方を、具体的な実装例を見ながら紹介します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればと思います！
カスタムデータ属性とは
idやclassなどと同じhtmlの属性で、自分オリジナルの名前をつけられるという特徴があります。
<div data-◯◯="□□"></div>のように使います。
この説明だけでは使いみちがよくわかりませんので、本記事で具体例を出して説明します。
また、以下記事の「タブメニューの実装」でもカスタムデータ属性を使っていますので、応用例としてご覧ください。
目次
例）テキストを入力すると、特定のボタンが連動してクリックできるようにする
左の入力欄に何か文字列（数値）を入れると、対応する右のボタンが有効になります。
HTML & JavaScript コード
<label>入力欄(1)<input type="text" data-btn="btn-1"></label>
<button class="custom-btn" id="btn-1" disabled>(1)の内容を送信</button>
<label>入力欄(2)<input type="text" data-btn="btn-2"></label>
<button class="custom-btn" id="btn-2" disabled>(2)の内容を送信</button>
<label>入力欄(3)<input type="text" data-btn="btn-3"></label>
<button class="custom-btn" id="btn-3" disabled>(3)の内容を送信</button>- 各input要素に「data-btn」というカスタムデータ属性を設定。
- 「data-btn」の値は、対応するbutton要素のid属性と同じ値をセット。
（入力欄(1) → input要素のdata-btn=”btn-1″、button要素のid=”btn-1″）
const texts = document.querySelectorAll('input');
texts.forEach(text => {
text.addEventListener('input', () => {
const btn = document.getElementById(text.dataset.btn);
if (text.value) {
btn.disabled = false;
} else {
btn.disabled = true;
}
});
});- まずinput属性をquerySelectorAllで取得。
- 何か入力されたら（input）、そのinput属性にセットされているdata-btnの値と同じid属性をもつbutton要素を取得。
（カスタムデータ属性は、datasetというキーワードで取得します。） - 入力欄に何か入力されていたら、取得したbutton要素のdisabledをfalse（＝有効）に。
何も入力されいなかったら、取得したbutton要素のdisabledをtrue（＝無効）に。
本実装において、カスタムデータ属性を使うメリットは以下のとおりです。
- HTMLでどの要素とどの要素が紐付いているか分かりやすくなる。
- もし関連する要素を変更したい場合、HTMLを変更するのみで対応できる。（JavaScriptを書き換えなくてよい。）
例）ラジオボタンを選択すると、特定のエリアが連動して色が変わる
選択した色に変わります。
選択した色に変わります。
選択した色に変わります。
ラジオボタンを選択すると、対応するテキストの背景が選択した色になります。
HTML & JavaScript コード
<div>
<label>シアン<input type="radio" name="color-1" data-color="cyan" data-text="text-1"></label>
<label>マゼンタ<input type="radio" name="color-1" data-color="magenta" data-text="text-1"></label>
<label>イエロー<input type="radio" name="color-1" data-color="yellow" data-text="text-1"></label>
<p id="text-1">選択した色に変わります。</p>
</div>
<div>
<label>シアン<input type="radio" name="color-2" data-color="cyan" data-text="text-2"></label>
<label>マゼンタ<input type="radio" name="color-2" data-color="magenta" data-text="text-2"></label>
<label>イエロー<input type="radio" name="color-2" data-color="yellow" data-text="text-2"></label>
<p id="text-2">選択した色に変わります。</p>
</div>
<div>
<label>シアン<input type="radio" name="color-3" data-color="cyan" data-text="text-3"></label>
<label>マゼンタ<input type="radio" name="color-3" data-color="magenta" data-text="text-3"></label>
<label>イエロー<input type="radio" name="color-3" data-color="yellow" data-text="text-3"></label>
<p id="text-3">選択した色に変わります。</p>
</div>- 各input要素に「data-color「data-box」というカスタムデータ属性を設定。
（カスタムデータ属性は複数セットすることができます。） - 「data-color」には選択時に変更する色を、「data-box」には対応するテキスト要素のid属性と同じ値をセット。
const colors = document.querySelectorAll('input');
colors.forEach(color => {
color.addEventListener('input', () => {
const colorBox = document.getElementById(color.dataset.text);
colorBox.style.backgroundColor = color.dataset.color;
});
});- まずinput属性をquerySelectorAllで取得。
- ラジオボタンが選択されたら（input）、そのinput属性にセットされているdata-textの値と同じid属性をもつテキスト要素を取得。
（カスタムデータ属性は、datasetというキーワードで取得します。） - 対応するテキスト要素の背景色を、選択したボタンにセットされているdata-colorの値にする。
例1同様、カスタムデータ属性を使うことで要素同士のつながりが分かりやすくなり、関連する要素や色を変更する場合はHTMLを変更するのみで対応できるようになります。
まとめ
以上、カスタムデータ属性の使い方を紹介しました。
ここで紹介した例はカスタムデータ属性を使わずとも実装可能ですが、カスタムデータ属性を使うことでどの要素同士が関連しているのか見やすくなり、またJavaScriptやCSSのコードをシンプルにできます。
ぜひ使ってみてください！