フロントエンドエンジニアを目指す! JavaScript講座(10)カスタムデータ属性を使用する
前回は、イベントリスナーについて学習しました。
・動作に関してはjavascriptが担当するのが基本的な考え方
・何度も使用することのあるイベントは、javascriptで関数として登録すると・再利用がしやすく、メンテナンスも一か所で済む
・イベントが発生するものはaddEventListenerを使用する
今回はグローバル属性についてです。
グローバル属性とは
すべての HTML 要素で共通の属性です。すべての要素で使用できますが、要素によっては効果がないこともあります。
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes
主な属性に、id属性、class属性、style属性などがあります。
前々回、4つのテキストを加え変える変更する際には、id属性を使用しました。
id属性は、前々回説明した通り、固有のIDを割り当てます。
固有のIDを割り当てスタイルシートのセレクタとして使ったり、JavaScriptで操作をすることができます。
カスタムデータ属性について
以下の属性のうち、カスタムデータ属性と呼ばれるものがあります。
accesskey
class
contenteditable
contextmenu
data-*
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate
補足:属性にはそれぞれ特徴がありますので以下にリンクを貼ります。
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes
data-*のカスタムデータ属性の特徴
・要素にカスタムデータを格納可能
・各スクリプトなどで動的に使用可能(主にJavaScriptで値を取得するときに使用される)
・HTML5で新たに導入された特性
HTMLでカスタムデータ属性を設定するルールは以下の通りです。
・「data-」以降に属性名を指定する
・アルファベット、数字、ハイフン、アンダースコアなどが使用可能
・属性値は数字も文字列も使用可能
・慣例的に小文字のみを使用する
属性名をキャメルケースで試された記事があり、実際に試したところchromeでは動作しましたが、通常すべて小文字で記載するため、予期せぬ誤動作を防ぐためにも小文字のみで記載しましょう。
参考
https://lealog.hateblo.jp/entry/2014/06/18/005439
指定されたカスタムデータ属性をJavaScriptで使うとき(datasetプロパティからアクセスする)は、以下のようなルールがあります。
・「dataset.」の後に指定する
・「data-」以降の文字列を指定する
・「data-test-id」と「-」が入っている場合は、2つ目の単語を頭文字を大文字にする(この場合testId)。
※JQuery1.6以降の場合は、data-以降の属性名をそのまま形にしてすることも可能。
JavaScriptと指定方法が異なる。
では実際にカスタムデータ属性を使用した例を確認してみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript講座sampleテキスト10</title>
</head>
<body>
<h1 id="title">カスタムデータ属性(data-*)を使用する</h1>
<button id="button" type="button" data-new-title="カスタムデータ属性使用">テキスト変更</button>
<script>
var button = document.getElementById('button');
//var title = document.getElementById('title');
//var newTitle = 'このタイトルに変更';
button.addEventListener('click',changeTitle);
function changeTitle() {
title.textContent = button.dataset.newTitle;
}
</script>
</body>
</html>実行前
実行後
h1要素のid属性がchangeTitle関数によって書き換わりました。
まとめ
HTMLでカスタムデータ属性を設定するルール
・「data-」以降に属性名を指定する
・アルファベット、数字、ハイフン、アンダースコアなどが使用可能
・属性値は数字も文字列も使用可能
・慣例的に小文字のみを使用する
指定されたカスタムデータ属性をJavaScriptで使うルール
・「dataset.」の後に指定する
・「data-」以降の文字列を指定する
・「data-test-id」と「-」が入っている場合は、2つ目の単語を頭文字を大文字にする(この場合testId)。
**
今日は以上です。
Twitterではブログに書いていないこともつぶやいているので、ぜひフォローしてください。
https://twitter.com/HAMA3san
ストリートアカデミーで毎月講座を開催中。
https://www.street-academy.com/steachers/198346
note専用コミュニティへの招待について
https://note.mu/hamasan918/n/ne4d98f9db9ec
note専用コミュニティ、作成しました。コミュニティでは質問などを受け付けています。毎月500円となります。
この記事が気に入ったらサポートをしてみませんか？