この記事を読めば、HTMLのdata属性を使いこなすことができるようになります。
今回は、初心者にも分かりやすく、HTMLのdata属性について解説していきます。
はじめに
HTMLのdata属性とは何か、どのように使うのか、応用例や注意点などを含めて、初心者でも分かりやすいように解説していきます。
サンプルコードを見ながら、自分のサイトに適用していくことができます。
●HTMLのdata属性とは
data属性は、HTML要素にカスタムデータを追加するために使われる属性です。
これを使うことで、JavaScriptやCSSからデータを簡単に取得・設定することができます。
○data属性の基本
data属性は、”data-“で始まる属性名で、その後ろに任意の名前を付けることができます。
例えば、”data-example”や”data-user-id”など、自由に命名できます。
●data属性の使い方
data属性を使うことで、HTML要素に独自の情報を付与することができます。
それでは、具体的な使い方をいくつかのサンプルコードを通して解説していきます。
○サンプルコード1：ボタンにdata属性を使う
例えば、次のようなボタンにdata属性を使って情報を付与することができます。
<button data-action="save">保存</button>
<button data-action="delete">削除</button>○サンプルコード2：カスタムデータを取得する
JavaScriptを使って、data属性に設定されたカスタムデータを取得することができます。
<button id="exampleButton" data-example="customData">ボタン</button>
<script>
const button = document.getElementById('exampleButton');
const customData = button.dataset.example;
console.log(customData); // "customData"が出力される
</script>○サンプルコード3：カスタムデータを設定する
JavaScriptを使って、data属性にカスタムデータを設定することもできます。
<button id="exampleButton" data-example="customData">ボタン</button>
<script>
const button = document.getElementById('exampleButton');
const customData = button.dataset.example;
console.log(customData); // "customData"が出力される
</script>○サンプルコード4：data属性を使ったタブ切り替え
data属性を使って、タブ切り替えの機能を実装することができます。
<ul>
<li data-tab="tab1" class="active">タブ1</li>
<li data-tab="tab2">タブ2</li>
<li data-tab="tab3">タブ3</li>
</ul>
<div data-content="tab1">タブ1の内容</div>
<div data-content="tab2" style="display:none;">タブ2の内容</div>
<div data-content="tab3" style="display:none;">タブ3の内容</div>
<script>
const tabs = document.querySelectorAll('[data-tab]');
const contents = document.querySelectorAll('[data-content]');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
tabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
contents.forEach(content => {
content.style.display = content.dataset.content === tab.dataset.tab ? 'block' : 'none';
});
});
});
</script>●data属性の応用例
data属性を使って、さまざまな応用例を実現することができます。
下記に、いくつかの応用例とサンプルコードを紹介します。
○サンプルコード5：data属性を使った簡単なグラフ作成
data属性を使って、グラフのデータをHTMLに直接記述し、JavaScriptでグラフを描画することができます。
<div class="bar" data-value="30">30%</div>
<div class="bar" data-value="60">60%</div>
<div class="bar" data-value="90">90%</div>
<script>
const bars = document.querySelectorAll('.bar');
bars.forEach(bar => {
const value = bar.dataset.value;
bar.style.width = `${value}%`;
});
</script>○サンプルコード6：data属性を使ったソート機能
data属性を使って、リストのソート機能を実装することができます。
<button id="sortButton">並び替え</button>
<ul id="list">
<li data-value="3">項目3</li>
<li data-value="1">項目1</li>
<li data-value="2">項目2</li>
</ul>
<script>
const sortButton = document.getElementById('sortButton');
const list = document.getElementById('list');
sortButton.addEventListener('click', () => {
const sortedItems = Array.from(list.children).sort((a, b) => {
return parseInt(a.dataset.value) - parseInt(b.dataset.value);
});
list.innerHTML = '';
sortedItems.forEach(item => list.appendChild(item));
});
</script>○サンプルコード7：data属性を使ったスライダー
data属性を使って、スライダーの機能を実装することができます。
<div id="slider">
<div class="slide" data-index="1">スライド1</div>
<div class="slide" data-index="2">スライド2</div>
<div class="slide" data-index="3">スライド3</div>
</div>
<button id="prevButton">前へ</button>
<button id="nextButton">次へ</button>
<script>
const slider = document.getElementById('slider');
const slides = slider.querySelectorAll('.slide');
const prevButton = document.getElementById('prevButton');
const nextButton = document.getElementById('nextButton');
let currentIndex = 1;
const updateSlides = () => {
slides.forEach(slide => {
slide.style.display = slide.dataset.index == currentIndex ? 'block' : 'none';
});
};
prevButton.addEventListener('click', () => {
currentIndex = currentIndex - 1 <= 0 ? slides.length : currentIndex - 1;
updateSlides();
});
nextButton.addEventListener('click', () => {
currentIndex = currentIndex + 1 > slides.length ? 1 : currentIndex + 1;
updateSlides();
});
updateSlides();
</script>○サンプルコード8：data属性を使ったフィルタリング
data属性を使って、リストのフィルタリング機能を実装することができます。
<select id="filter">
<option value="all">すべて</option>
<option value="fruits">果物</option>
<option value="vegetables">野菜</option>
</select>
<ul id="list">
<li data-category="fruits">りんご</li>
<li data-category="fruits">みかん</li>
<li data-category="vegetables">キャベツ</li>
<li data-category="vegetables">トマト</li>
</ul>
<script>
const filter = document.getElementById('filter');
const list = document.getElementById('list');
const items = list.querySelectorAll('li');
filter.addEventListener('change', () => {
const selectedCategory = filter.value;
items.forEach(item => {
item.style.display = selectedCategory === 'all' || item.dataset.category === selectedCategory ? 'block' : 'none';
});
});
</script>○サンプルコード9：data属性を使ったレーティング
data属性を使って、レーティング機能を実装することができます。
<div id="rating">
<span data-rate="1">★</span>
<span data-rate="2">★</span>
<span data-rate="3">★</span>
<span data-rate="4">★</span>
<span data-rate="5">★</span>
</div>
<script>
const rating = document.getElementById('rating');
const stars = rating.querySelectorAll('span');
stars.forEach(star => {
star.addEventListener('click', () => {
const rate = star.dataset.rate;
stars.forEach(s => {
s.style.color = s.dataset.rate <= rate ? 'orange' : 'gray';
});
});
});
</script>○サンプルコード10：data属性を使ったカスタムプロパティ
data属性を使って、カスタムプロパティを設定し、それを利用することができます。
<button data-action="open">開く</button>
<button data-action="save">保存</button>
<button data-action="close">閉じる</button>
<script>
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('click', () => {
const action = button.dataset.action;
switch (action) {
case 'open':
console.log('ファイルを開きます');
break;
case 'save':
console.log('ファイルを保存します');
break;
case 'close':
console.log('ファイルを閉じます');
break;
}
});
});
</script>●注意点と対処法
data属性の名前に大文字を使わないように注意しましょう。
大文字は自動的に小文字に変換されますが、予期しないエラーを防ぐために小文字だけを使用してください。
data属性はカスタムデータを保持するためのものであるため、スタイルや構造を操作する目的で使用しないようにしましょう。
data属性を使った際に、ページの読み込み速度が遅くなる場合があります。
大量のデータを扱う場合は、JSONやAJAXを使ってデータを取得することを検討してください。
●カスタマイズ方法
- data属性の値に応じて、スタイルを動的に変更することができます。
JavaScriptでdata属性の値を取得し、それに基づいてスタイルを適用してください。 - data属性を使って、カスタムプロパティを設定し、それを利用することができます。
JavaScriptでカスタムプロパティの値を取得し、それに基づいて処理を実行してください。
まとめ
これで、data属性の基本的な使い方や応用例を紹介しました。
今回の記事を読むことで、HTMLのdata属性の使い方を理解し、カスタマイズや対処法についても学ぶことができました。
注意点としては、data属性の名前には大文字を使わないようにしましょう。
また、JavaScriptでデータを取得・設定する際には、datasetプロパティを使用することが一般的です。
これからもdata属性を活用して、さまざまなWebアプリケーションを作成していきましょう。
