[jQuery]data属性に大文字が使えない

HTML5からdata属性が使えるようになりましたが使っていますか？
使う必要がない人は使わなくてもいいですが、プログラムと掛け合わせて行くと結構使う場面が多いんですよね。
とても便利なんですが、大文字が使えない！？ってちょっとドハマりしてしまいました。

data属性って何？？

そもそもdata属性って何でしょう。
正式名称は、独自データ属性というみたいです。
「data-*」となり、後ろの部分を自由にカスタマイズする事ができます。

使い方としては下記みたいな感じになります。

<ul>
  <li data-pref="tokyo">東京</li>
  <li data-pref="osaka">大阪</li>
</ul>

<script>
$('li').click(function () {
  if ($(this).data('pref') == 'tokyo') {
    alert('東京をクリックしました。');
  } elseif ($(this).data('pref') == 'osaka') {
    alert('大阪をクリックしました。');
  }
});
</script>

liタグに[data-pref]を設定して、クリックされたら取得するという単純なものです。

属性名が長くなるからキャメルケースで書きたい

一つの単語だけであれば問題ありませんが長くなるような属性名を付けたい場合がありますよね。

上記の例を出すと都道府県に番号をつけて取りたい場合は「prefNo」という感じです。
この指定方法をしようとしてもjQueryでは取得できません。

<ul>
  <li data-pref="tokyo" data-prefNo="1">東京</li>
  <li data-pref="osaka" data-prefNo="2">大阪</li>
</ul>

<script>
$('li').click(function () {
  if ($(this).data('prefNo') == '1') {
    alert('東京をクリックしました。');
  } elseif ($(this).data('prefNo') == '2') {
    alert('大阪をクリックしました。');
  }
});
</script>

この書き方だと取得はできません。
じゃあ、どうやって取得するの？となるのですが全て小文字であれば取得できます。

<script>
$('li').click(function () {
  if ($(this).data('prefno') == '1') {
    alert('東京をクリックしました。');
  } elseif ($(this).data('prefno') == '2') {
    alert('大阪をクリックしました。');
  }
});
</script>

解決方法を見付ける

jQueryではキャメルケースで取得したいですよね。
jQueryが特殊なのかどうなのかはわかりませんが、CSSのスタイル設定と同じ方法で解決する事ができました。

<ul>
  <li data-pref="tokyo" data-pref-no="1">東京</li>
  <li data-pref="osaka" data-pref-no="2">大阪</li>
</ul>

<script>
$('li').click(function () {
  if ($(this).data('prefNo') == '1') {
    alert('東京をクリックしました。');
  } elseif ($(this).data('prefNo') == '2') {
    alert('大阪をクリックしました。');
  }
});
</script>

変更した部分はHTMLに書いてある属性を「data-pref-no」にしただけです。
jQueryではハイフン(-)を削除し後の1文字目を大文字にする特性があるのでこれで気持良く取得する事ができるようになりました。

HTML5の仕様

そもそも、data属性の仕様ページを見てみると

HTML ドキュメントの HTML 要素のすべての属性は自動的に小文字に変換されますので、ASCII 大文字に関する制約はこのようなドキュメントには影響を及ぼすことはありません。

出典：HTML5.jp-独自データ属性

という注意書きがありました。

HTML 要素のすべての属性は自動的に小文字に変換されます

これで全て解決ですね。
大文字を使おうが何しようが小文字に変換されるという仕様で思うようにjQueryで取得する事ができませんでした。

ハイフンをつけるだけでjQueryで取得できるようになったので長いdata属性名をつけるときは気をつけましょう。