【HTML5】カスタムデータ属性を使い要素に値を持たせる方法

経緯

弊社はスチールラックを主とした商品を販売していますが検索システムを作成する際にJSをよく使います。
検索システムでサイズなど選ばれたものが何かをJSで判別するためにHTMLにカスタムデータ属性で値を持たせるというテクニックがあるためご紹介させていただきます。

カスタムデータでできること

htmlタグの属性にはclassやidなど色々ありますが「data-好きな名前」でオリジナルの属性を作ることができます。

 <section class="product_section">
    <div class="test_id" data-id="10340">商品A</div>
 </section>

※カスタムデータ属性の名前に使えるのは、文字、数字、ハイフン（-）、ドット（.）、アンダースコア（_）だけで大文字は使えないため名前をつけるときは上記のルール内で名前を付けてください。

JSで取得する方法

var product_id = $(".test_id").data('id');
console.log(product_id)  // "10340"

まとめ

検索システムや複雑な処理をJSで作る時は結構な頻度でカスタムデータ属性を使います。
JSのソースコードを見直した際もカスタムデータ属性の名前がしっかりしていると可読性が良く読みやすいと感じました。ぜひカスタムデータ属性を活用して幅を広げてみてください。