62.データ属性って、なに？　～自分で決めて、使える～

先日、課題の中でJavaScriptを使って動きをつける中で、

「データ属性を使う方法もある」と紹介がありました。

そして、ライブラリにも「データ属性」を使っているものが見られました。

これはちょっと、しっかり整理しておかないと…ということで

早速やっていきましょう。

data属性とは

HTMLタグの属性の１つです。

class属性や、id属性、href属性、src属性などは頻繁に出てきますよね。

ただ、このdata属性、最近まで実際目にする機会が無かったのです。

data属性は自身で自由に属性を設定できます。

属性を設定できるというと意味がわからないと思いますが、

そこは追々やっていきましょう。

data属性はその特徴から「カスタムデータ属性」なんて言う風にも呼ばれています。

自由に属性が設定できる？

先程は言葉足らずでした。

自由に属性が設定できるとは、

「属性の名前の一部と、属性の値を自由に設定できる」

ということです。

具体的に見ていきましょう。

まず、

data属性のルールとして

属性名は

「data-」で始まる必要があります。

このdata-のハイフン以降に自由に名前を指定することができます。

例えば、

data-food

data-fruit

のようにdata-＊＊＊＊というルールを守れば、自由に指定できます。

属性の値は、

data-food="curry"

上記のように、いつもの形で設定できます。

class="header__nav"みたいな感じですね。

何がいいの？

ここまでで、自由に設定できるのはわかりました。

結局のところ何が良いの？

ということになりますよね。

どんな使い方ができるのか見ていきましょう。

CSSのセレクタとして使うことができる

例えば、

というdata属性が設定された、HTMLがあったとします。

この時、単にCSSのセレクタに

.food{

～

}

としてスタイルを適用すると

food1もfood2も同じスタイルになりますよね。

データ属性を使うと、

[data-food="curry"]{

～

}

と書くことで、food1に対してのみスタイルを適用することができます。

これはピンポイントはこうしたいといったときに、

HTMLで視認出来る形でデザイン変更できるということになりますよね。

例えば、予めCSSに

[data-font-color ="red"]{

color : red;

}

を用意しておけば、テキストを赤くしたい箇所に

データ属性として付与すれば適用される

みたいなイメージです。

ただ、これはCSS設計だとか運用ルールとか決めていないと

後々管理が大変になってしまうかもしれないので注意が必要です。

JavaScriptで使う情報として用いる

あるボタンをクリックしたら、モーダルウィンドウを表示させたい。

という時にdata属性を使ってみましょう。

表示する為のボタン
表示されるモーダルウィンドウ
操作するJavaScript

の関係性を見ていきましょう。

まずはHTMLから、

ボタン

モーダル

ここで、注目するポイントはボタンに設定されたdata属性。

この値が「表示されるモーダルウィンドウのクラス」を指定している所です。

HTMLを見て、このボタンの対象はmodalなんだなと意図も伝わりやすいですね。

そしてJavaScriptでは(今回はjQueryで書きます)

$('.modal-open').click(function() {

　　let target = $(this).data("target");

　　$('.' + target).fadeIn();

}

このように書くとこで、クリックされたらモーダルが表示されます。

一応1行ずつコードを確認すると、

$('.modal-open').click(function() {

.modal-openクラスがクリックされたら

let target = $(this).data("target");

変数targetを用意して、そこへクリックされた要素のdata属性data-targetの値を代入

$('.' + target).fadeIn();

「ドット」と変数targetに格納されている文字を連結（セレクタとして指定している）

そのクラス名の要素をfadeIn関数で表示させる。

こんな所です。

jQueryの説明が長くなりましたが、このメリットはクラス名が変わっても、

「HTMLの変更のみで済む」という点です。

例えばmodalクラスがmodal-windowクラスに変わったら、data-target="modal-window"にすれば整合性がとれます。

たった属性１つなのに、CSSとJavaScriptと組み合わせることで

使い方が無限大な気がしているのは私だけでしょうか。

今日のまとめ

data属性は自分で名前と値を決められる
主な用途はセレクタとしての使用とJavaScriptからの参照
使い方によって保守性を高めたり、拡張性をあげたりできる
ただしルールは必要

data属性おもしろいですね。最初にweb制作を勉強し始めた頃、

google検証ツールで色々なページのHTMLを見ていた時に

長い名前のdata属性を見て、ビビっていたのを思い出しました。

きっと何か色々と操作するためにルールに基づいて付けられた名前だったのでしょう。

では、また。

web制作のしおり

日々の学習をアウトプットします。