js で DOM をゴニョゴニョしたい時、きっと皆さんは id や class で DOM に名前を付けて、その名前を利用して js の処理を書いていると思います。
例えば<input type="button" class="update" value="更新" />のようなボタンがあったとして、 js 側で更新処理を書くときには下記のように書きます。
$('.update').on('click', function () {
// update 処理
})
でもこれだと問題になるケースがあります。よくあるのが、マークアッパーとフロントエンジニアが分業していて、マークアッパーがデザインのために class 名を変えてしまい js が動かなくなるパターン。分業せずに一人で全部やってたとしても、時間が経つにつれ使っている class 名が js だけで使っているのか、css でも使っているのかよくわからなくなってきて混乱してきます。
ではどのようにしたらよいでしょうか。
まず、github の CSSコーディング規約 では、「jsでしか使わないclass」にはプレフィックスとしてjs-をつけるように定めています。なかなかよいですね。
また、こちらのエントリ では js で使う DOM には class を使わずにdata-behaviorという属性を使うやり方を紹介しています。例えば更新ボタンは<input type="button" data-behavior="update" value="更新" />のようにして、js は下記のようにします。
$('[data-behavior=update]').on('click', function () {
// update 処理
})
このようにすると js 用の名前と css 用の名前を完全に分離できるので、個人的には github のコーディング規約よりもこちらの方が好みです。ただ、data-behavior を紹介しているエントリのコメント欄を見ると、どうも class で指定した時と比べて挙動がかなり遅くなるようです。簡単な HTML や js なら問題ないはずですが、複雑なものを作るなら github コーディング規約の方がよさそうですね。ブラウザがもっと早くなってくれればいいのですが…。
