読者です 読者をやめる 読者になる 読者になる

おもしろwebサービス開発日記

Ruby や Rails を中心に、web技術について書いています

js で利用する DOM の名前をどうやってつけたらよいのか

cssjavascript

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 コーディング規約の方がよさそうですね。ブラウザがもっと早くなってくれればいいのですが…。