JavaScriptのdata属性とは？
使い方とアニメーション
実装を徹底解説

2026.05.11

はじめに

概要

この記事では、JavaScriptのdata属性の使い方を初心者向けに解説します。data-*属性の基本、datasetで値を取得する方法、違うタグを同じ目印でまとめて扱う考え方、CSSからdata属性へスタイルを当てる方法、クリックやアニメーションへの応用まで理解できます。

1data属性とは？HTMLに情報を持たせる仕組み
- 1.1data-* の基本形
- 1.2datasetで値を取得する
2違うタグでも同じdata属性でまとめて扱える
3【応用】data属性でクリック処理を分ける
- 3.1data-actionで処理名を持たせる
- 3.2ボタンを増やしても処理を追加しやすい
4data属性はCSSにも使える
- 4.1data-stateで表示状態を切り替える
- 4.2状態や種類をHTMLから読み取れる
5data属性の動きを確認する
- 5.1完成イメージ
- 5.2完成コード
6まとめ

※本記事の情報は執筆時点のものです。実装する環境やテーマ、プラグインの設定によって表示や動作が異なる場合があります。

data属性とは？HTMLに情報を持たせる仕組み

data属性とは、HTMLタグに独自の情報を追加できるdata-*形式の属性です。たとえばdata-role="tab"のように書くと、「この要素はタブとして扱う」という目印をHTML側に持たせられます。

classは見た目を整えるために使うことが多いですが、data属性はJavaScriptで判断するための情報として使いやすいです。HTMLに意味を持たせることで、あとから処理を読み返しやすくなります。

data-* の基本形

data属性はdata-名前="値"の形で書きます。名前と値は、実装したい内容に合わせて決められます。

<button type="button" data-role="tab">お知らせ</button>
<a href="#news" data-role="tab">ニュースへ移動</a>
<section data-role="tab">ニュース本文</section>

この例では、button、a、sectionという違うタグに、同じdata-role="tab"を付けています。タグが違っても、data属性が同じなら同じ目的の要素として扱えます。

ただし、data-*は必ずしも値が必要なわけではありません。
たとえば、

<div data-fade></div>

のように、「この要素はフェード対象」という目印だけとして使うこともあります。

この場合は、

document.querySelectorAll('[data-fade]');

のように書けば、

「この要素はフェード対象」

という目印として使うこともできます。

使い分けとしては、

値あり → 動作の種類を分けたい
値なし → 対象の目印だけ付けたい

というイメージです。

実務では、

class → デザイン用
data属性 → JavaScript用

のように役割を分けることが多く、コードを整理しやすくなります。

datasetで値を取得する

JavaScriptでは、data属性の値をdatasetから取得できます。data-roleはdataset.roleとして読み取ります。

const item = document.querySelector('[data-role="tab"]');

console.log(item.dataset.role);
// tab

datasetで取得できる値は基本的に文字列です。数値として扱いたい場合はNumber()で変換するなど、用途に合わせて調整します。

違うタグでも同じdata属性でまとめて扱える

data属性の大きなメリットは、タグの種類に関係なく、同じ目印を付けた要素をまとめて取得できることです。ボタン、リンク、カードなど、HTMLの役割が違っても同じ処理の対象にできます。

data属性のメリットは、
class や id に依存せず、JavaScript用の目印を作れるところです。

通常、class はデザインのために使われることが多く、

色
レイアウト
サイズ
デザインパーツ

など、見た目を管理する役割があります。

そのため、JavaScriptでも class を取得対象にしてしまうと、

「デザイン用なのか、動作用なのか」

がわかりづらくなり、コードが複雑になりやすくなります。

さらに、デザイン変更で class 名が変わると、JavaScript が動かなくなることもあります。

そこで data属性を使うことで、

<div class="news-card" data-fade>
<div class="about-box" data-fade>
<div class="service-item" data-fade>

のように、見た目が異なる要素でも、同じ data属性を付けるだけで、JavaScript 側でまとめて制御できるようになります。

document.querySelectorAll('[data-fade]');

このように取得できるため、

class → デザイン用
data属性 → JavaScript用

と役割を分けることができ、コードが整理しやすくなります。

実務でも非常によく使われる考え方です。

※data属性を理解することも大切ですが、
実務では「どう動かしたいか」を言語化できることが非常に重要です。

例えば、

「クリックした要素と同じ data属性を持つ要素に active クラスを付与したい」

このように動きを文章で説明できれば、AIや他のエンジニアにも意図を正確に伝えられます。

JavaScriptはコードを書く力だけでなく、

どの要素を取得したいのか
いつ動かしたいのか
どのクラスを付与したいのか
どの条件で動かしたいのか

を整理して説明する力がとても大切です。

特に現在はAIを活用する場面も増えているため、

「この要素をクリックしたら、同じ data属性を持つ要素に active を付けたい」

のように、日本語で動きを具体的に説明できるだけでも、大きな強みになります。

【応用】data属性でクリック処理を分ける

複数のボタンを扱うとき、ボタンごとに別々のイベントを設定するとコードが長くなります。data属性を使えば、クリックされた要素のdata-actionを見て、処理を分けられます。

data-actionで処理名を持たせる

HTML側では、ボタンにdata-actionを付けて、何をするボタンなのかを値として書きます。

<div class="data-menu">
  <button type="button" data-action="open">開く</button>
  <button type="button" data-action="close">閉じる</button>
  <button type="button" data-action="reset">リセット</button>
</div>

JavaScript側では、クリックされたボタンのdataset.actionを確認して、処理を分岐します。

const menu = document.querySelector('.data-menu');

menu.addEventListener('click', (event) => {
  const button = event.target.closest('[data-action]');

  if (!button) {
    return;
  }

  const action = button.dataset.action;

  if (action === 'open') {
    console.log('開く処理を実行');
  }

  if (action === 'close') {
    console.log('閉じる処理を実行');
  }

  if (action === 'reset') {
    console.log('リセット処理を実行');
  }
});

event.target.closest("[data-action]")は、クリックされた場所から近いdata-actionを持つ要素を探します。ボタンの中にアイコンや文字が入っていても、親のボタンを取得しやすい書き方です。

ボタンを増やしても処理を追加しやすい

新しく「保存」ボタンを追加したい場合は、HTMLにdata-action="save"を付け、JavaScriptにaction === "save"の処理を追加します。

このように、data属性を処理名として使うと、HTMLを見ただけでも「このボタンは何をするのか」が分かりやすくなります。

data属性はCSSにも使える

data属性はJavaScriptで取得するだけでなく、CSSのセレクタとしても使えます。つまり、data属性の値に合わせて見た目を変えることができます。

data-stateで表示状態を切り替える

次の例では、カードにdata-state="close"を付けています。ボタンを押したら、JavaScriptでopenとcloseを切り替えます。

<article class="data-card" data-state="close">
  <button type="button" class="data-card__button">表示を切り替える</button>
  <p class="data-card__text">data-stateの値に合わせて表示が変わります。</p>
</article>

CSSでは、[data-state="open"]のときだけ文字を表示するように指定します。

.data-card__text {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.data-card[data-state="open"] .data-card__text {
  opacity: 1;
  transform: translateY(0);
}

JavaScriptでは、現在の値を確認して、次の状態をdata属性へ入れ直します。

const card = document.querySelector('.data-card');
const button = card.querySelector('.data-card__button');

button.addEventListener('click', () => {
  const isOpen = card.dataset.state === 'open';
  card.dataset.state = isOpen ? 'close' : 'open';
});

この考え方にすると、JavaScriptは状態を変える役割、CSSは見た目を変える役割になります。アニメーションの速度や色を変えたいときは、CSSだけを見ればよくなります。

状態や種類をHTMLから読み取れる

data-state="open"やdata-effect="blue"のように書くと、HTMLを見ただけで現在の状態や種類が分かります。これは、タブ、アコーディオン、モーダル、絞り込みボタンなどでも使いやすい考え方です。

data属性の動きを確認する

ここでは、ボタンに付けたdata-effectの値を読み取り、パネル側のdata-effectに反映する例を確認します。ボタンを押すと、パネルの色と表示状態が変わります。

完成イメージ

下の例では、青・緑・紫のボタンにそれぞれdata-effectを付けています。JavaScriptはクリックされたボタンの値を読み取り、パネルへ同じ値を渡します。

クリックしたボタンのdata-effectが、このパネルのdata-effectに反映されます。

完成コード

同じ動きを作るコードです。ポイントは、button.dataset.effectでボタンの値を取得し、panel.dataset.effectに代入している部分です。

<div class="data-attr-sample">
  <style>
    .data-attr-sample {
      display: grid;
      gap: 16px;
      margin: 32px 0;
      padding: 24px;
      border: 1px solid #d9e2ec;
      background: #f8fafc;
    }

    .data-attr-sample__buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .data-attr-sample__button {
      min-height: 42px;
      padding: 0 16px;
      border: 0;
      background: #1f6feb;
      color: #ffffff;
      font-weight: 700;
      cursor: pointer;
    }

    .data-attr-sample__panel {
      padding: 18px;
      border-left: 4px solid #94a3b8;
      background: #ffffff;
      opacity: 0.4;
      transform: translateY(18px);
      transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    }

    .data-attr-sample__panel[data-state="show"] {
      opacity: 1;
      transform: translateY(0);
    }

    .data-attr-sample__panel[data-effect="blue"] {
      border-color: #1f6feb;
      background: #eaf2ff;
    }

    .data-attr-sample__panel[data-effect="green"] {
      border-color: #0f766e;
      background: #ecfdf5;
    }

    .data-attr-sample__panel[data-effect="purple"] {
      border-color: #7c3aed;
      background: #f3e8ff;
    }
  </style>

  <div class="data-attr-sample__buttons">
    <button type="button" class="data-attr-sample__button" data-effect="blue">青にする</button>
    <button type="button" class="data-attr-sample__button" data-effect="green">緑にする</button>
    <button type="button" class="data-attr-sample__button" data-effect="purple">紫にする</button>
  </div>

  <div class="data-attr-sample__panel" data-state="hide" data-effect="blue">
    クリックしたボタンのdata-effectが、このパネルのdata-effectに反映されます。
  </div>

  <script>
    (() => {
      const root = document.currentScript.closest('.data-attr-sample');
      const buttons = root.querySelectorAll('[data-effect]');
      const panel = root.querySelector('.data-attr-sample__panel');

      buttons.forEach((button) => {
        button.addEventListener('click', () => {
          panel.dataset.effect = button.dataset.effect;
          panel.dataset.state = 'show';
        });
      });
    })();
  </script>
</div>

この実装では、ボタンを増やすときもdata-effectの値を変えるだけで対応しやすくなります。アニメーションの種類を増やしたい場合も、CSS側に[data-effect="値"]のスタイルを追加すれば管理できます。

まとめ

data属性は、HTMLタグにJavaScriptやCSSで使うための独自情報を持たせられる
違うタグでも同じdata属性を付ければ、同じ目印としてまとめて取得できる
datasetを使うと、JavaScriptからdata属性の値を読み書きできる
data-actionを使うと、クリックされた要素に合わせて処理を分けやすい
CSSの属性セレクタを使えば、data属性の値に合わせて見た目やアニメーションを切り替えられる

2023.11.09

著者・プロフィール

Souichi_Kimura

-history-

① 正社員として20年間の社会人経験を積み、現在はフリーランスとして活動しています。

② プログラミングスクールや職業訓練校LaLaメイツに通い、Web制作の技術を探求。

③ Web活Blogを通じてWeb制作に関する情報を発信。

④ フリーランスとして、クラウドソーシングを通じてクライアント様からの制作依頼を受注。実績はこちら

⑤ お仕事の依頼につきましては、以下のリンクからメッセージいただけますと幸いです。

⑥ Web制作の初心者に伴走します。

- MENTA

Web制作Output&初心者のための徹底ガイド

注目のタグ

JavaScriptのdata属性とは？
使い方とアニメーション
実装を徹底解説

data属性とは？HTMLに情報を持たせる仕組み

data-* の基本形

datasetで値を取得する

違うタグでも同じdata属性でまとめて扱える

【応用】data属性でクリック処理を分ける

data-actionで処理名を持たせる

ボタンを増やしても処理を追加しやすい

data属性はCSSにも使える

data-stateで表示状態を切り替える

状態や種類をHTMLから読み取れる

data属性の動きを確認する

完成イメージ

完成コード

まとめ

関連記事

本ページで実装中のマウスの動きに合わせて、円を移動させる方法を解説します。こちらのJavascriptを用いてアニメーションさせています。

スクロールイベントを監視し、メニューの表示状態を切り替えるためのコードを書いていきます。CSSを使用して、メニューのデザインや配置を調整することもできま…

Vanta.jsは、ウェブサイトの背景に美しい、インタラクティブな3Dアニメーションを簡単に追加できるJavaScriptライブラリです。このライブラリは、Three.jsやWeb…

このページでは、Swiperライブラリを使用して、ウェブページ上でスライダー（カルーセル）を作成する方法が説明されています。基本的なセットアップ方法、オプ…

注目のタグ

JavaScriptのdata属性とは？使い方とアニメーション実装を徹底解説

data属性とは？HTMLに情報を持たせる仕組み

data-* の基本形

datasetで値を取得する

違うタグでも同じdata属性でまとめて扱える

【応用】data属性でクリック処理を分ける

data-actionで処理名を持たせる

ボタンを増やしても処理を追加しやすい

data属性はCSSにも使える

data-stateで表示状態を切り替える

状態や種類をHTMLから読み取れる

data属性の動きを確認する

完成イメージ

完成コード

まとめ

関連記事

本ページで実装中のマウスの動きに合わせて、円を移動させる方法を解説します。こちらのJavascriptを用いてアニメーションさせています。

スクロールイベントを監視し、メニューの表示状態を切り替えるためのコードを書いていきます。CSSを使用して、メニューのデザインや配置を調整することもできま…

Vanta.jsは、ウェブサイトの背景に美しい、インタラクティブな3Dアニメーションを簡単に追加できるJavaScriptライブラリです。このライブラリは、Three.jsやWeb…

このページでは、Swiperライブラリを使用して、ウェブページ上でスライダー（カルーセル）を作成する方法が説明されています。基本的なセットアップ方法、オプ…

JavaScriptのdata属性とは？
使い方とアニメーション
実装を徹底解説