コーディングメソドロジー

第34回 JavaScriptでコーディングの効率を上げる

ユーザビリティやアクセシビリティを考えたWebサイトを制作するにあたり、一昔前まではあまり使用されなかったJavaScriptも、今では必要不可欠な存在となってきました。コーディングファクトリーでもJavaScriptを使用し、少しでも効率良くコーディングできるように工夫をしています。今回はそのテクニックの一部を紹介したいと思います。

「よくあるパターン」を見つけ出す

最後のli要素にlastを付け加える

コーディングの際によくあるパターンとして、「リストの最後にだけマージンやボーダーが不要」といった事例があります。この場合、最後のliタグにのみclass="last"のようなクラスを付け加え、最後のliタグのマージンやボーダーを無くす、というのがひとつの手段として考えられます。
この、よくあるパターンを少しでも手軽にする為、次のようなJavaScriptを使用します。

少し手を加えてあげるだけで、使いやすいソースに

JSの記述

左にある通り、ほんの数行の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以外にも、その時々に合った有効な記述をして、コーディングのしやすいソースにすると良いと思います。

JSの記述

CSSで同じようなことが実現可能

CSSの記述

上記で紹介したテクニックはJavaScriptを使用したものですが、CSSでも同様の働きをするセレクタが存在しており、JavaScriptを使用しなくても同じようなことがCSSのみで実現できます。
CSSの場合は、CSSで直接「li:first-child{}」「li:last-child{}」という指定の仕方をすると、クラスを割り当てることなく、li要素の最初と最後にそれぞれCSSプロパティを定義することができます。
ただし、IE6では「:first-child」「:last-child」のセレクタに対応していないので、JavaScriptを使用するか、CSSを使用するかは、状況により使い分ける必要があります。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム