Web アプリケーションやホームページを作成するとき、jQuery を利用することが多くなった。HTML と CSS でも豊かな表現力を持つが、Web アプリケーションを作成する場合や、動きをつけるためには jQuery が欠かせない。もちろん jQuery を利用せず、素の JavaScript を使ってもよいが、jQuery の持つ便利なセレクターや、プラグイン、エフェクトを利用する方が、コストを削減できるし多くの環境に対応しやすい。
デザインは可能な限り柔軟性を持たせたいが、jQuery のコードも汎用性を持たせたい。HTML/CSS のコーディングも、jQuery のコーディングも DOM の構造に依存しているため、うまく連携しないとデザインも機能も変更が難しくなってしまう。現在、HTML/CSS と Web アプリケーション/jQuery のコーディングは別々に行っているが、分業するときに気をつけていることをまとめてみた。
CSS は ID セレクターを使用しない
jQuery で style を指定しない
クラス名の付け方に気をつける
jQuery は DOM の構造に依存しすぎない
HTML5を使う
CSS は ID セレクターを使用しない
CSS には多くのセレクターがあり、jQuery もほぼ同じセレクターを利用できる。<div/> のようにタグの種類に対して指定する「タイプセレクター」や、class 名に対して指定を行うクラスセレクター、id に対して行う「ID セレクター」を使うことが多いだろう。CSS では、それぞれ以下のように指定する。
/* タイプセレクター
* body 要素に対して指定する。
* 例) <body/> に対して有効。
*/
body {
width: 100%;
}
/* クラスセレクター
* container というクラス名を持つ要素に対して指定する。
* 例) <div class="container"/> に対して有効。
*/
.container {
font-size: 12px;
}
/* ID セレクター
* wrapper という ID を持つ要素に対して指定する。
* 例) <div id="wrapper"/> に対して有効。
*/
#wrapper {
color:red;
}
3つの中で「ID セレクター」は、可能な限り CSS では使用しないように気をつけている。ID は HTML の中でユニークになっていなければならないため、静的な HTML/CSS では問題が発生しなくても jQuery を利用するときに問題が発生しやすい。jQuery で動的に要素を追加する場合、(ID をつけるのであれば)それぞれ異なる ID をつける必要があり、CSS が適用されなくなってしまう。ID は、jQuery で単一の要素を特定するために利用するようにしている。
jQuery で style を指定しない
jQuery は高機能で柔軟性も高いため、HTML/CSS で実現することを jQuery のみで実現できてしまう。極端に言えば、HTML/css をほとんど書かずに、jQuery だけでページを構成することもできる。しかしコーディングを分業しているので、CSS で行っていることは、可能な限り jQuery で行わないようにしている。その1つが、jQuery で style を指定することだ。たとえば、マウスオーバー時に別の箇所の背景色を変更する場合、
$('div').mouseover(function () {
$('#wrapper').css('background', '#ccc');
});
というコードを書くことができる。しかし HTML/CSS のコーディングを行っている人には、なぜマウスオーバーで背景色が変わるようになったのか、イメージを置き換えたい場合はどうしたらよいのかわからない。デザインの変更を行うために、jQuery のコーディングを行っている人を頼る必要が出てくる。分業を進めていけるように、jQuery で CSS の変更は行わないようにして、クラス名の追加と削除で実施するようにしている。
$('div').mouseover(function () {
$('#wrapper').addClass('divmouseover');
});
これで、マウスオーバー時のデザインを変更する場合は、CSS のクラスセレクターで行えるので、分業を妨げることがない。
クラス名の付け方に気をつける
クラス名の付け方は、正しく表示されることや正しく動くことには影響が少ないが、メンテナンスするときに影響が出てくる。気をつけているのは、CSS で共通で利用するクラスセレクターを定義しておくことや、意味の違うところには同じクラス名を使わないようにすることなどだ。jQuery でクラスセレクターを利用しやすくなる、一部のみデザインを変更したい場合などに対応しやすくなるなど利点は大きいが、CSS が肥大化してしまうとメンテナンスが難しくなるので、ケースバイケースで対応するようにしている。
jQuery は DOM の構造に依存しすぎない
jQuery で要素を探すときによく使うのが、children([expr])や find([expr])、siblings([expr])などだ。children と find は子要素を探して戻す。children は直下の子要素しか探さないのに対し、find はすべての子要素から探すという違いがある。siblings は兄弟要素を探して戻す。
children と find を例にすると、速度を考慮すると children が望ましく、デザイン変更などを考慮するのであれば find が望ましい。
HTML/CSS の変更が考えられる場合は、find を使うようにしている。たとえば、
<div id="wrapper"> <a href="...">リンク</a> <a href="...">リンク</a> <a href="...">リンク</a> </div>
となっているものが、
<div id="wrapper"> <ul> <li><a href="...">リンク</a></li> <li><a href="...">リンク</a></li> <li><a href="...">リンク</a></li> </ul> </div>
と変更される可能性は十分に考えられる。children で<a/>要素を探すコードを書いていると変更後は動かなくなるが、find であれば動作する。もちろんケースバイケースだが、速度を重視しすぎてデザインの変更が行いにくくならないように気をつけている。
HTML5を使う
作成するサイトの対応ブラウザーに依存するが、可能であれば HTML5を利用する。特に、独自データ属性(data-* 属性を使った独自非表示データの組み込み)は jQuery と Web アプリケーションの連携に便利だ。jQeury で HTML を描画する機会が多くなると、どうしても分業が難しくなってくるが、独自データ属性を利用すれば jQuery で HTML を描画する機会を減らすことができる。
