プロ直伝のコーディングテクニック

柔軟性のあるコーディング

　Webサイトの制作業務を請け負っていると、制作の途中でデザインが変わることは少なくありません。コーディングもいきなり仕様が変わったり、新しい機能やカラムが追加になるといったことがしばしば発生します。

　要素を追加するため、ソースコードに無理な変更や複製を行うと、ソースコードはどんどん劣化していきます。最悪の場合は、今後の拡張性を考えると作り直しをした方が作業時間を短縮できるのではないかと思われるものまであります。しかし、納期や予算に余裕があれば作り直しをすることもできますが、大抵の制作現場ではその時間もなく、なかなか理想のコードが作れないことが現状です。

　このようなソースコードの劣化や作り直しを防ぐためにも、柔軟性を持ったコーディングをするテクニックが必要です。今回は、ソースコードを劣化させないコーディングのコツを紹介していきましょう。

秘伝の3つのコツ

　第1のコツは「同じ要素は1つだけにする」です。具体的には、同じ画像やフォルダを重複して存在させないようにする、コードの場合は、同じ設定を何度も指定しないようにする、不要な入れ子は行わないといったことがあげられます。同じ要素を減らせば、ファイルサイズも減り、サーバ容量の節約となります。同時にWebページの表示時間の高速化やサーバ負荷を軽減させるメリットもあります。

　第2のコツは「絶対指定をしない」です。カラムサイズ、フォントサイズの絶対指定は避けましょう。これにより、コンテンツ幅が変わった時や、カラムの数の変動・移動などがあった場合に、ソースコードを劣化させずに修正できるようになります。実践するのは、かなり難しいことかもしれませんが、最初の段階から「高さや幅が変わること」を考慮して制作すると良いかもしれません。

　第3のコツは「適切な文書構造とネーミングを行う」です。Webサイトを制作後、長く運用を行う場合は、コーディング担当者も変わる場合があります。図1に示すように誰が見ても分かりやすいネーミングやコメント付けを心がけましょう。

　またネーミングに関しては、英語のスペルミスや意味の間違えなどを無いようにし、名付けた人以外でも分かるようなソースを目指しましょう。また正しい文書構造で構築することは、アクセシビリティの向上や検索エンジン最適化対策にもつながります。

　上記のようなコーディングは正しく文書構造を構築し、CSSで視覚表現を一括コントロールするため、Webコンテンツ全体の修正や更新時の作業負担を軽減します。またソースをコンパクトにしてHTMLコードの再利用性を高めておくことは必然です。次のページでは、CSSのコンポーネントについてご紹介します。