【HTML Living Standard】data要素の使い方
data要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
data要素は、ユーザーに表示されるテキストコンテンツに、機械が読み取り可能な形式の値を関連付けるために使用される要素です。この要素の主な目的は、ウェブページ上の特定の情報を、検索エンジンやスクリプトなどのプログラムがより正確に、かつ容易に解釈・処理できるようにすることです。
例えば、ウェブページで商品名が「Apple Watch Series 9」と表示されている場合でも、その裏には「AW-S9-GPS-45MM」のような内部的な商品コードが存在することがあります。data要素を使用すると、「Apple Watch Series 9」という人間が読むテキストと、「AW-S9-GPS-45MM」という機械が処理する値を明確に紐づけることができます。
この要素は必須のvalue属性を持ち、この属性に機械が読み取るべき具体的な値を指定します。一方、data要素の開始タグと終了タグの間に記述されるコンテンツは、ユーザーが画面上で確認する人間が理解できるテキストとなります。
日付や時刻に特化したtime要素とは異なり、data要素はより汎用的なデータを扱います。製品のSKU（Stock Keeping Unit）コード、内部的なID、カテゴリ識別子など、表示されるテキストと内部的な表現を区別したいあらゆる種類のデータに適用可能です。
data要素を適切に利用することで、ウェブコンテンツのセマンティック（意味論的）なマークアップが強化され、データの構造が明確になります。これにより、ウェブサイトのアクセシビリティ向上や、自動処理によるデータ活用の効率化に貢献します。
構文(syntax)
1<data value="2024-07-26">2024年7月26日</data>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML data属性で商品情報を取得・表示する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML data属性の例</title> 7 <style> 8 /* スタイルは必須ではありませんが、視覚的にわかりやすくするために追加 */ 9 body { font-family: sans-serif; margin: 20px; } 10 .product-card { 11 border: 1px solid #ccc; 12 padding: 15px; 13 margin-bottom: 20px; 14 border-radius: 5px; 15 max-width: 300px; 16 } 17 .product-card button { 18 padding: 8px 15px; 19 background-color: #007bff; 20 color: white; 21 border: none; 22 border-radius: 4px; 23 cursor: pointer; 24 margin-top: 10px; 25 } 26 .product-card button:hover { 27 background-color: #0056b3; 28 } 29 </style> 30</head> 31<body> 32 33 <h1>商品詳細</h1> 34 35 <!-- data-* 属性を持つdiv要素の例 --> 36 <div 37 class="product-card" 38 data-product-id="P001" 39 data-product-name="ゲーミングキーボード" 40 data-price="9800" 41 data-category=" périphériques" 42 data-in-stock="true" 43 > 44 <h2>ゲーミングキーボード</h2> 45 <p>価格: <span id="priceDisplay">9,800円</span></p> 46 <p>在庫あり: <span id="stockDisplay">はい</span></p> 47 <button id="addToCartButton" data-action="add">カートに追加</button> 48 </div> 49 50 <script> 51 // DOMContentLoaded イベントでスクリプトが確実に要素にアクセスできるようにする 52 document.addEventListener('DOMContentLoaded', () => { 53 // data属性を持つ要素を取得 54 const productCard = document.querySelector('.product-card'); 55 const addToCartButton = document.getElementById('addToCartButton'); 56 const priceDisplay = document.getElementById('priceDisplay'); 57 const stockDisplay = document.getElementById('stockDisplay'); 58 59 // dataset プロパティを通じてdata属性の値にアクセス 60 // data-product-id は dataset.productId のようにキャメルケースに変換される 61 const productId = productCard.dataset.productId; 62 const productName = productCard.dataset.productName; 63 const price = productCard.dataset.price; // 値は文字列として取得される 64 const category = productCard.dataset.category; 65 const inStock = productCard.dataset.inStock === 'true'; // 文字列 'true' を真偽値に変換 66 67 // 取得したデータをコンソールに出力して確認 68 console.log('--- 商品情報 ---'); 69 console.log('商品ID:', productId); // P001 70 console.log('商品名:', productName); // ゲーミングキーボード 71 console.log('価格:', price); // 9800 (文字列) 72 console.log('カテゴリ:', category); // périphériques 73 console.log('在庫状況:', inStock ? '在庫あり' : '在庫なし'); // true 74 75 // 取得したデータをHTMLに表示 76 priceDisplay.textContent = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(parseInt(price, 10)); 77 stockDisplay.textContent = inStock ? 'はい' : 'いいえ'; 78 79 // ボタンのクリックイベントリスナー 80 addToCartButton.addEventListener('click', () => { 81 const action = addToCartButton.dataset.action; // data-action属性の値を取得 82 83 if (action === 'add' && inStock) { 84 alert(`${productName} (ID: ${productId}) をカートに追加しました！`); 85 // ここで、商品のIDや数量などをサーバーに送信する処理などを記述 86 } else if (!inStock) { 87 alert(`${productName} は現在在庫切れです。`); 88 } else { 89 alert('不明なアクションです。'); 90 } 91 }); 92 }); 93 </script> 94 95</body> 96</html>
HTMLのdata-*属性は、標準のHTML属性では表現できない、任意のカスタム情報をHTML要素に直接格納するための機能です。この属性は常に「data-」という接頭辞で始まり、その後に自由に名前をハイフン区切りで付けます（例: data-product-id）。主に、ウェブページ上に直接表示されないような、要素に関連する追加データ（商品ID、設定値など）を埋め込み、JavaScriptからそれらのデータにアクセスして動的な処理を行うことを目的としています。
この属性には、特定の引数や戻り値という概念は直接存在しませんが、HTML要素がカスタムな値を保持するための「入れ物」としての役割を果たします。サンプルコードでは、商品の情報を表示するdiv要素に、data-product-idやdata-priceといった形で商品の詳細情報を格納しています。
JavaScriptからは、要素のdatasetプロパティを通じてこれらのカスタムデータにアクセスします。例えば、data-product-idという属性は、JavaScriptではelement.dataset.productIdのように、ハイフン区切りがキャメルケースに変換されて取得されます。取得される値は常に文字列型となるため、数値として利用したい場合はparseIntなどで明示的に型変換を行う必要があります。このようにdata-*属性を活用することで、HTMLとJavaScript間のデータ連携をスムーズに行い、ユーザー体験を向上させる動的な機能を実現できます。
data-*属性の値は常に文字列として扱われるため、JavaScriptで数値や真偽値として利用する際はparseInt()や=== 'true'のように明示的な型変換が必要です。data-product-idのようなハイフン区切りの属性名は、JavaScriptのdatasetプロパティからdataset.productIdのようにキャメルケースに変換してアクセスします。この属性は、HTMLには表示せずJavaScriptでのみ利用したいカスタムデータを要素に持たせる目的で使用し、動的な処理に役立ちます。ただし、ユーザー入力など信頼できない情報を直接設定すると、クロスサイトスクリプティング（XSS）といったセキュリティリスクにつながる可能性があるため、利用には十分な注意が必要です。
HTML datalistによる入力候補表示
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Datalist Example</title> 7</head> 8<body> 9 10 <h1>好きなプログラミング言語を選んでください</h1> 11 12 <!-- input要素のlist属性でdatalist要素のIDを指定し、入力候補のリストを関連付けます --> 13 <label for="language-choice">プログラミング言語:</label> 14 <input type="text" id="language-choice" name="language" list="language-options"> 15 16 <!-- datalist要素は、input要素に入力候補として提示するオプションのリストを定義します --> 17 <datalist id="language-options"> 18 <!-- option要素のvalue属性が、入力候補として表示されます --> 19 <option value="Python"> 20 <option value="JavaScript"> 21 <option value="Java"> 22 <option value="C#"> 23 <option value="Go"> 24 <option value="Ruby"> 25 <option value="PHP"> 26 <option value="Swift"> 27 <option value="Kotlin"> 28 <option value="Rust"> 29 </datalist> 30 31 <p>入力フィールドに文字を入力すると、関連する候補が表示されます。</p> 32 33</body> 34</html>
HTMLのdatalist要素は、ウェブフォームのテキスト入力欄（input要素）に対して、ユーザーが文字を入力する際の候補リストを提供するものです。この要素自体は直接画面には表示されず、関連付けられたinput要素と連携して動作します。
具体的な使い方は、まずdatalist要素にid属性で一意な名前を付け、その中にoption要素を使って入力候補となる項目を複数定義します。各option要素のvalue属性に、実際に表示したい候補の文字列を設定します。
次に、入力候補を表示させたいinput要素のlist属性に、datalist要素で指定したid名を記述することで、両者を関連付けます。サンプルコードでは、input要素のlist="language-options"とdatalist要素のid="language-options"が対応しています。
これにより、ユーザーがinputフィールドに文字を入力し始めると、datalistに定義された候補の中から、入力された文字に一致するものがプルダウンリストのように表示されます。ユーザーはその候補を選択することも、リストにない新しい値を自由に入力することも可能です。
このdatalist要素は、HTMLのマークアップ要素であり、一般的なプログラミング言語の関数のように直接的な引数や戻り値を持つものではありません。ウェブページのユーザーインターフェースを向上させ、入力の手間を軽減するために利用されます。
datalist要素は、input要素に入力候補を提供し、ユーザーの補助に役立ちます。最も重要な注意点は、input要素のlist属性とdatalist要素のid属性を正確に一致させることです。これが異なると候補は表示されません。候補はdatalist内のoption要素のvalue属性で定義し、value属性は必須です。datalistはあくまで候補提示であり、ユーザーはリスト外の値も自由に入力できます。入力値を厳密に制限したい場合はselect要素を検討してください。ブラウザによる表示差に注意し、複数環境で動作確認を行いましょう。