HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのdata-*属性を使ってページ・アプリ専用のカスタムデータを保存する方法

HTMLでは data-* 属性を使用することで、そのページやアプリケーションに固有のカスタムデータ（プライベートな情報）を要素に保存できます。JavaScriptなどからアクセスする必要のある補足的な値を、マークアップ上に直接埋め込める便利な仕組みです。

data-*属性の命名ルール

data-* 属性にはいくつかの決まりがあります。

  • 必ず「data-」という接頭辞から始めること
  • 属性名に大文字（A〜Z）は使用できないこと（すべて小文字で記述）
  • 接頭辞の後に続ける名前は自由に設定できる（例：data-rank-type、data-user-id など）

実装例

以下のコードでは、リスト項目に data-rank-type 属性でポイント数を持たせ、クリックするとその値を取得して表示します。実際にブラウザで実行して動作を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <script>
         function display(rank) {
            var myRank = rank.getAttribute("data-rank-type");
            alert("Rank " + rank.innerHTML + " has " + myRank + " points.");
         }
      </script>
   </head>
   
   <body>
      <h1>Rank and Points</h1>
      <p>Click on any rank to generate the details.:</p>

      <ul>
      <li onclick = "display(this)" id = "fifth" data-rank-type = "500">Fifth</li>
      <li onclick = "display(this)" id = "sixth" data-rank-type = "600">Sixth</li>
      </ul>
   </body>
   
</html>

コードのポイント

この例では、JavaScript の getAttribute("data-rank-type") メソッドを使って、クリックされた要素からカスタムデータの値を取り出しています。モダンな書き方としては、より簡潔にアクセスできる dataset プロパティ（例： rank.dataset.rankType）も利用できます。

data-*属性を使うメリット

  • HTMLの標準仕様に準拠した形で独自データを保持できる
  • CSSの属性セレクタ（例： [data-rank-type="500"]）と組み合わせてスタイリングにも活用できる
  • 表示内容とデータを分離でき、JavaScriptとの連携がしやすくなる

  1. HTML5のlocalStorage APIを使ってブラウザにデータを保存する方法

    HTML5 localStorageとは HTML5のlocalStorageは、文字列データをブラウザ内に保存し、現在のセッションが終了してもデータを保持し続けることができる仕組みです。localStorageは有効期限なしでデータを保存します。一方、sessionStorageはセッション中のみ有効であり、ブラウザを閉じると保存されたデータは失われます。 localStorageの用途と特徴 ローカルストレージは、複数のウィンドウ間で共有でき、セッションをまたいでもデータが持続するストレージとして設計されています。特に、Webアプリケーションではパフォーマンス向上のために、ユーザーが作成

  2. Google Playストアでアプリを公開する方法【初心者向けステップバイステップガイド】

    これまでの記事では、Chrome拡張機能の開発と公開について解説してきました。今回は少し趣向を変えて、Google Playストアにアプリケーションを公開するために必要なプロセスをご紹介します。それでは、さっそく始めましょう。 事前に確認しておくべきこと Playストアに進む前に、以下の3つの項目を必ずクリアしておきましょう。 APKへのデジタル署名 — Googleがアプリの作者を本人確認できるよう、デジタル署名が必須となっています。 APKのビルド — デバッグ版ではなく、アプリのリリース版(release)をビルドしておく必要があります。 開発者アカウントの作成 — Google P