カスタムdata属性を取得するときに、気を付けること

投稿者: | 2019年5月2日

JavaScriptでカスタムdata属性にセットされている値を取得するときは、次のように行います。

[HTML]

<p class="speach" data-speaker="suzuki">こんにちは</p>

[JavaScript]

let e = document.querySelector(".speach");
console.log(e.dataset.speaker);

[結果]

suzuki

このようにカスタムデータ属性の名前が「data-〇〇〇」であれば、JavaScriptからは「dataset.〇〇〇」で基本的に取得できます。

しかし、「data- sub-speaker」のようにカスタムデータ属性の名前に「-」(ハイフン)が入ると、この法則は崩れ、「dataset.sub-speaker」では取得できなくなります。
このようなときは次のように記述することになります。

let e = document.querySelector(".speach");
console.log(e.dataset.subSpeaker);

「-」は無くなり、「-」のあとの単語の一文字目は大文字になります。つまり「aaa-bbbb」のようなケバブケースの名前は、「aaaBbbb」のようなキャメルケースの名前に変換しなければなりません。
(ちなみに「ケバブケース」って料理のケバブから来てたんですね。串刺しになっているところが似てるとか)

今回、自分はこの名前が変化することを知らずにちょっとはまってしまいました。自分としては同じ名前で記述したかったので、次のようにスネークケースで対応しました。

[HTML]

<p class="speach" data-sub_speaker="suzuki">こんにちは</p>

[JavaScript]

let e = document.querySelector(".speach");
console.log(e.dataset.sub_speaker);

なおjQueryでは、どちらでも良いようです。次の二つは同じ結果になります。

console.log($(".speach").data('sub-speaker'));
console.log($(".speach").data('subSpeaker'));