クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

カスタムデータ属性をCSSやJSで読み込む(テキストをHTMLに集中させる)

HTML5から追加された「カスタムデータ属性」。data-hogeといった形式で独自の属性を作れます。これを使うと、これまでCSSやJSの中に直接書いていたテキスト情報をHTMLに集中させて、CSSやJSはカスタムデータ属性からテキストを読み込む形にできます。テキストの修正が1ファイルで完結して便利だと思います!実際に触ってみた。

カスタムデータ属性をCSSで読み込む

通常の擬似要素によるツールチップ

擬似要素を使った通常のツールチップの例

See the Pen custom data 1 by イイダリョウ (@i_ryo) on CodePen.

HTMLコード

<section>
  <h1>ガンダム大地に立つ</h1>
  <p>アムロは<span>ガンダム</span>のコクピットに飛び乗り、機器メーターを見て「こいつ、動くぞ!」と言った。</p>
</section>
  • ツールチップを出したい「ガンダム」というワードをspanタグで囲む。
span:before  {
  content: "RX-78-2";
  display: none;
}

span:hover:before {
  display: block;
}
  • spanの擬似要素のcontentにツールチップとして表示したいテキスト「RX-78-2」を入れる。初期のdisplaynoneに。
  • ホバー(hover)するとdisplayblockになる。

これだと、テキストを修正したいときに毎回CSSを開かなければならない。

カスタムデータ属性をCSSで読み込んだツールチップ

カスタムデータ属性を使う。

See the Pen custom data 2 by イイダリョウ (@i_ryo) on CodePen.

見た目は変わらない。

<section>
  <h1>ガンダム大地に立つ</h1>
  <p>アムロは<span data-text="RX-78-2">ガンダム</span>のコクピットに飛び乗り、機器メーターを見て「こいつ、動くぞ!」と言った。</p>
</section>
  • spanタグにカスタムデータ属性data-textを追加。値は「RX-78-2」

カスタムデータ属性は頭にdata-を付けることで自作できる属性。今回はdata-textを作った。

span:before  {
  content: attr(data-text);
  display: none;
}

span:hover:before {
  display: block;
}
  • contentをCSS関数attr()に。属性のを取得。引数はカスタムデータ属性のdata-text

※参考:attr() - CSS: カスケーディングスタイルシート | MDN

これで、ツールチップのテキストもHTMLで修正できる。

カスタムデータ属性をJSで読み込む

次に、ツールチップじゃなくてアラートを設定する。

通常のアラート

See the Pen custom data 3 by イイダリョウ (@i_ryo) on CodePen.

「ガンダム」をクリックすると先ほどのツールチップより長いテキストがアラートで出る(テキストはwikipediaより拝借)

※参考:ガンダム (架空の兵器) - Wikipedia

JSコード

//DOM     
const span = document.querySelector("span");

span.addEventListener('click', function () {
  alert('ガンダム(GUNDAM)は、「ガンダムシリーズ」に登場する架空の兵器。有人操縦式の人型ロボット兵器「モビルスーツ」(MS)の一つ。初出は、1979年放送のテレビアニメ『機動戦士ガンダム』。作中の軍事勢力の一つ「地球連邦軍」が開発した試作機の1機で、主人公「アムロ・レイ」の搭乗機。額のV字型ブレードアンテナと、人間の目を模した複眼式のセンサーカメラが特徴で、ほかのMSに比べ人間に近い形状を持つ。これらの特徴は、以降のシリーズ作品に登場する「ガンダムタイプ」の基本となった。敵対勢力である「ジオン公国軍」のMSの多くを凌駕する性能を持ち、パイロットのアムロの成長と相まって「一年戦争」で伝説的な戦果を上げる。(※Wikipediaより)');
}, false);
  • 変数spanでDOM要素のspanタグを取得
  • spanのクリックイベントでアラートを設定。

CSSのツールチップと同様、こちらもアラートのテキストを修正するときにJSファイルを開かなければならない。

カスタムデータJSで読み込んだアラート

こちらもカスタムデータ属性を使う。

See the Pen custom data 3 by イイダリョウ (@i_ryo) on CodePen.

見た目は変わらない。

JSコード

//DOM     
const span = document.querySelector("span");
const dataText = span.getAttribute("data-text");

span.addEventListener('click', function () {
  alert(dataText);
}, false);
  • 変数dataTextspangetAttribute()関数で属性を取得する。引数はカスタムデータ属性のdata-text
  • クリックイベントのアラートはdataTextを読み込む。

カスタムデータ属性名しか出てこないのでグッとコンパクトになった。書き方が違うだけで、やっていることはCSSと同じ。

最後に

f:id:idr_zz:20190806071301j:plain

カスタムデータ属性を使うことでHTMLはコンテンツ、CSSはスタイル、JSは動き、という役割分担がより明確になり、メンテナンス性が上がると思います!普段忘れがちですが、こういう方法もあるということを頭に入れて作っていきたく思います。それではまた!


※参考:ネイティブHTML & CSSやってみたシリーズ
qiita.com