- Coding Methodology
- 第34回 JavaScriptでコーディングの効率を上げる
第34回 JavaScriptでコーディングの効率を上げる
ユーザビリティやアクセシビリティを考えたWebサイトを制作するにあたり、一昔前まではあまり使用されなかったJavaScriptも、今では必要不可欠な存在となってきました。コーディングファクトリーでもJavaScriptを使用し、少しでも効率良くコーディングできるように工夫をしています。今回はそのテクニックの一部を紹介したいと思います。
「よくあるパターン」を見つけ出す
コーディングの際によくあるパターンとして、「リストの最後にだけマージンやボーダーが不要」といった事例があります。この場合、最後のliタグにのみclass="last"のようなクラスを付け加え、最後のliタグのマージンやボーダーを無くす、というのがひとつの手段として考えられます。
この、よくあるパターンを少しでも手軽にする為、次のようなJavaScriptを使用します。
少し手を加えてあげるだけで、使いやすいソースに
左にある通り、ほんの数行のJavaScriptの記述をライブラリとして全ページに読み込ませておくだけで、リストタグの最後のli要素に対して、動的にclass="last"が書き足されます。そのため、毎回リストタグを使うたびに最後のli要素にだけクラスを付与しなくても、class="last"に対するCSSを用意しておくだけでいいので、少し手間を省くことができます。
「システムでソースを出力するので、クラスは付けないでほしい」という場合でも、JavaScriptはソースを出力し終えた後にクラスを付与するので、問題無く使用できます。
また、リストタグ以外にもこのような書き方を利用することができます。例えば、コンテンツの区切りを分ける為のdiv要素にclass="section"というものを使用している場合、$('.section:first-child:not(:last-child)').addClass('firstSec');という記述をすることで、ページ内のクラス名で「section」と付いている要素の中から、一番初めのものに「firstSec」というクラスを付与し、$('.section:last-child').addClass('lastSec');という記述で、「section」というクラスがついている中で一番最後にある要素に「lastSec」というクラス名を付与します。「firstSec」「lastSec」を付与しておくことにより、最初と最後の区間のみ他の区間との余白の間隔が違った場合などに、CSSでの調整がしやすくなります。
例に挙げたsectionやli以外にも、その時々に合った有効な記述をして、コーディングのしやすいソースにすると良いと思います。
CSSで同じようなことが実現可能
上記で紹介したテクニックはJavaScriptを使用したものですが、CSSでも同様の働きをするセレクタが存在しており、JavaScriptを使用しなくても同じようなことがCSSのみで実現できます。
CSSの場合は、CSSで直接「li:first-child{}」「li:last-child{}」という指定の仕方をすると、クラスを割り当てることなく、li要素の最初と最後にそれぞれCSSプロパティを定義することができます。
ただし、IE6では「:first-child」「:last-child」のセレクタに対応していないので、JavaScriptを使用するか、CSSを使用するかは、状況により使い分ける必要があります。
