HTML5からはタグの中にdata-*属性といったような「独自データ属性」というものを定義できるらしい。data-*に遭遇したときには「自分で定義してる属性だー」って思えばいい

JavaScriptからはHTMLElement.datasetプロパティでアクセスできる

JavaScriptなどに渡したい値を設定しておくのかな？よくわかってないです！！！

JavaScriptからdata-*属性の値を取得

値の取得は要素.dataset.属性名でできる

例外としてはdata-phone-numberみたいに-で繋がっている場合にはphoneNumberとキャメルケースに変換した値でアクセスできる。要素.dataset.phoneNumberみたいな

<div class="prefecture" data-place="tokyo">
  東京都品川区
</div>

const prefectureElem = document.querySelector(".prefecture");
const place = prefectureElem.dataset.place;
console.log(place);

数値で値を設定していても、stringで返ってくるため、数値で扱いたい場合にはキャストしないといけない

TIL