data属性を使ってHTMLとJavaScriptを連携しよう

data-*属性は、HTML要素へJavaScriptで利用する補助データを持たせる仕組みです。

今回は、複数の記事カードに「お気に入り」ボタンを設け、どの記事が操作されたかをdata-*属性から判断します。

今回使用するファイル構成

javascript-practice/
├── index.html
└── js/
    └── script.js

data属性を連携に利用する

data属性を記述する

<button class="detail-button" type="button" data-article-id="38" data-category="javascript">
  詳細を見る
</button>

属性名はdata-で始め、その後ろへ用途が分かる名前を付けます。

datasetから値を取得する

const button = document.querySelector('.detail-button');

console.log(button.dataset.articleId);
console.log(button.dataset.category);

HTMLのdata-article-idは、JavaScriptではdataset.articleIdになります。取得結果は文字列です。

複数要素で利用する

document.querySelectorAll('.detail-button').forEach((button) => {
  button.addEventListener('click', () => {
    const articleId = Number(button.dataset.articleId);
    console.log(`記事ID：${articleId}`);
  });
});

数値として計算や比較に使う場合はNumber()で変換します。秘密情報や信頼できない値を置かず、サーバー側では受け取ったIDと権限を改めて確認します。

お気に入りボタンを作る

記事ごとのIDをHTMLへ持たせる

<article>
  <h2>JavaScriptの歴史</h2>
  <button class="favorite-button" type="button" data-article-id="38" data-favorite="false">
    お気に入りに追加
  </button>
</article>

<article>
  <h2>JavaScriptを動かす</h2>
  <button class="favorite-button" type="button" data-article-id="39" data-favorite="false">
    お気に入りに追加
  </button>
</article>

<p id="favorite-message" aria-live="polite"></p>

同じクラスのボタンでも、data-article-idによって操作対象を区別できます。属性値はHTML上では常に文字列です。

datasetを更新する

const buttons = document.querySelectorAll('.favorite-button');
const message = document.querySelector('#favorite-message');

buttons.forEach((button) => {
  button.addEventListener('click', () => {
    const articleId = Number(button.dataset.articleId);
    const isFavorite = button.dataset.favorite === 'true';
    const nextFavorite = !isFavorite;

    button.dataset.favorite = String(nextFavorite);
    button.textContent = nextFavorite
      ? 'お気に入りから削除'
      : 'お気に入りに追加';

    message.textContent = nextFavorite
      ? `記事ID ${articleId}をお気に入りに追加しました。`
      : `記事ID ${articleId}をお気に入りから削除しました。`;
  });
});

dataset.favoriteから得られるのは'true'という文字列です。真偽値のtrueとは異なるため、明示的に比較します。属性へ戻すときもString()で文字列にしています。

ハイフンを含む属性名の変換規則

data-article-idはdataset.articleId、data-user-roleはdataset.userRoleになります。data-以降のハイフンを除き、直後の文字を大文字にしたキャメルケースへ変換されます。

button.dataset.articleId;
button.dataset.userRole;

data属性へ置くものを判断する

data属性は、要素の操作に必要なID、表示状態、種類などに向いています。ただしHTMLはDevToolsから誰でも確認・変更できます。

• パスワードや秘密鍵を入れない
• data属性の権限名だけでアクセスを許可しない
• サーバーへ送るIDは改ざんされる前提で再検証する
• 大量のデータをHTMLへ埋め込まない

data属性は信頼できる保管場所ではなく、HTMLとJavaScriptを結ぶ目印です。

動作を確認する

ボタンを数回押し、表示文、ボタンの文章、DevTools上のdata-favoriteが同時に変化することを確認します。

まとめ

data-*属性とdatasetを使うと、HTML要素と処理対象のデータを対応させられます。次の記事ではイベントの伝播を利用し、親要素で複数の操作を受け取ります。