Web制作の効率的なコーディング手法

2023年12月29日2024年11月24日

管理しやすいコードを書くための5つの基本テクニック

Web制作でコードを書くのは基本中の基本ですが、意外とつまづきポイントが多いものです。
実際に苦戦している人の声をSNSでも多く見かけます。

デイトラ受講【117日目】#実案件チャレンジ

・category.html
・tag.html
・WP front-page.php（途中）

静的コーディングでも難しい😭ってなってたのに、WordPress入ったらもう時止まったりする。

cssとjsの読み込みから躓いてたので、これだけでもう祭り気分。#デイトラ #Web制作 pic.twitter.com/hVBYJ3xWrM
— MIO | Webコーダー (@totoro_mi8) August 26, 2024

コーディング難しいねぇええ😢
慣れなんだろうけど、事前に作ってもらってるコードのメモがないととてもできない…。
一人でできるようになるんだろうか。不安。#SHE捗 #コーディング
— みどり🌱｜SHElikesで勉強中📚 (@midori_chaaaaan) November 8, 2024

私も2年以上Web制作に携わってきましたが、これらの課題は多くの開発者が直面する共通の悩みです。

特に初めの頃は、基本的な部分でも悩むことが多く、同じような課題で困っている方も多いのではないでしょうか？

しかし、基本的なテクニックを理解すれば、効率的で管理しやすいコーディングは必ず実現できます。
ここでは、実務経験から得た「管理しやすいコーディングのコツ」を5つご紹介します。

HTMLとCSSを明確に区別する
クラス名をつけてCSSを徹底する
!importantは使わない
打ち消しを極力しない
わかりやすいクラス名をつける

以下の5つのポイントを、具体的なコード例を交えながら詳しく解説していきますので、ぜひ参考にしてみてください。

HTMLとCSSを明確に区別する

Web制作を行う際にHTMLとCSSの違いを正しく理解し、その役割を明確に区別することは、最も基本的な考え方で大切です。

役割を明確にすると以下のようになります。

HTML：ウェブページの骨組みを作るための言語で、ページの構造や内容を定義します
CSS：ウェブページの装飾やデザインを担う言語で、ページの外観やスタイルを指定します。

間違った例

例えば、HTMLタグの中に直接スタイル属性を記述することで、フォントの大きさや色を定義する以下の方法は明確化されていない例です。

<h1 style="color: blue; font-size: 24px; margin-bottom: 20px;">企業情報</h1>
<p style="color: #333; font-family: Arial; font-size: 16px;">会社概要です。</p>

HTMLの中にスタイルが直接書かれているため、同じスタイルを複数箇所で重複して書く必要があります。また、デザイン変更時に全てのHTMLファイルを修正しなければならず、非常に非効率です。

以下のように太字にするためだけにhタグをつかったりする下記のような例も、明確に分けられていない状態なので、気をつけましょう。

<h2>今日の特別メニュー</h2>

タグは見出しを意味するために存在しますが、この例では単にテキストを太字にするために使われています。
これは見出しが「今日の特別メニュー」であれば問題はありませんが、太字にするためだけに使用されていることが問題です。

管理しやすい正しい例

<!-- index.html -->
<h1 class="page-title">企業情報</h1>
<p class="content-text">会社概要です。</p>

/* style.css */
.page-title {
    color: blue;
    font-size: 24px;
    margin-bottom: 20px;
}

.content-text {
    color: #333;
    font-family: Arial;
    font-size: 16px;
}

このように書き換えることで、HTMLとCSSが完全に分離され、同じスタイルを使い回すことができます。デザイン変更時もCSSファイルだけを修正すれば済むため、管理が容易になります。

チェックポイント

HTMLファイルにstyle属性が書かれていないか
見た目の指定のためだけにタグを使っていないか
CSSファイルにスタイルがまとまっているか
クラス名で適切にスタイリングできているか

クラス名をつけてCSSを徹底する

CSSはタグやIDに対してではなく、クラス名に対して使用するというルールを設けることで、管理がしやすくなります。

特に複数人で開発を行う現場では、CSSの詳細度を揃えることが重要です。

実際の開発でよく見かける以下のようなコードを見てみましょう。

間違った例

/* 避けるべき例 */
#content p {
    font-size: 16px;
}

div.article span {
    color: #333;
}

.text {
    line-height: 1.8;
}

このように書くと、セレクタの詳細度がバラバラになってしまいます。

IDセレクタ、タグセレクタ、クラスセレクタが混在しているため、スタイルの上書きが必要になった時に、どの程度の強さで指定すれば良いのか判断が難しくなります。

管理しやすい正しい例

/* 望ましい例 */
.content-text {
    font-size: 16px;
}

.article-text {
    color: #333;
}

.content-description {
    line-height: 1.8;
}

このように、全てクラスセレクタで指定することで、詳細度が統一され、予測しやすいスタイリングが可能になります。

また、HTMLの構造に依存しないため、HTMLの修正があってもCSSへの影響を最小限に抑えることができます。

実際の開発現場での応用

開発の現場では、新しい機能の追加や既存機能の修正が日常的に発生します。

クラスベースでスタイリングを行うことで、そういった変更にも柔軟に対応できます。
例えば、「記事の文章スタイルを変更したい」という要件が来た場合。

/* 変更前 */
#article p {
    /* 多くのスタイル指定 */
}

/* 変更後 */
.article-text {
    /* 新しいスタイル */
}

クラス名による指定であれば、HTMLの構造を変更することなく、必要な要素にクラスを追加するだけで対応できます。

また、JavaScriptでの要素の操作も、クラスをベースにすることでより確実になります。タグやIDによる指定は、HTMLの構造変更の影響を受けやすいためです。

このようにクラスベースでCSSを設計することで、コードの見通しが良くなり、チームでの開発効率も上がります。

!importantは使わない

CSSにおける!importantは、特定のスタイル宣言を強制的に適用するためのものです。

しかし、これを安易に使用すると、コードの管理が非常に難しくなってしまいます。

間違った例

.text {
    color: red !important;
    font-size: 16px !important;
    margin-bottom: 20px !important;
}

.button {
    background: blue !important;
    color: white !important;
}

このように!importantを使用すると、後からスタイルを変更したい場合に、必ず!importantを使用しなければならなくなります。これは詳細度の管理を複雑にし、コードの破綻を招く原因となります。

管理しやすい正しい例

.text {
    color: red;
    font-size: 16px;
    margin-bottom: 20px;
}

.text-large {
    font-size: 20px;
}

.button {
    background: blue;
    color: white;
}

.button-primary {
    background: green;
}

このように、適切なクラス名を設定し、必要に応じて新しいクラスを追加することで、!importantを使わずともスタイルの管理が可能です。

実際の開発現場では、プラグインのCSSを上書きする必要がある場合など、やむを得ず!importantを使用することもあります。その場合は、必ずコメントでなぜ!importantを使用したのかを明記しましょう。

.plugin-override {
    /* プラグインのデフォルトスタイルを上書きするための指定 */
    background-color: white !important;
}

!importantを使わないコーディングを心がけることで、将来の修正や機能追加がスムーズになり、長期的なメンテナンス性が向上します。

打ち消しを極力しない

CSSで頻繁に見かけるのが、あるセレクタで適用したスタイルを別のセレクタで打ち消す方法です。

一見便利に思えるこの手法ですが、コードの管理を難しくする要因となります。

間違った例

/* 全てのリストアイテムにマージンを適用 */
.list-item {
    margin-top: 2.4rem;
}

/* 最初のリストアイテムのマージンを打ち消し */
.list-item:first-child {
    margin-top: 0;
}

/* 全ての見出しに下線を適用 */
.heading {
    border-bottom: 1px solid #ccc;
}

/* 特定の見出しだけ下線を消す */
.heading-plain {
    border-bottom: none;
}

このように書くと、一度設定したスタイルを別の箇所で打ち消す必要が生じ、コードの見通しが悪くなります。また、スタイルの適用順序にも注意が必要になります。

管理しやすい正しい例

/* 2番目以降のリストアイテムにのみマージンを適用 */
.list-item:not(:first-child) {
    margin-top: 2.4rem;
}

/* 下線付きの見出し用のクラスを用意 */
.heading {
    /* 基本的なスタイル */
    font-size: 1.8rem;
    font-weight: bold;
}

.heading-underline {
    border-bottom: 1px solid #ccc;
}

このように、最初から必要な要素にだけスタイルを適用する方法を考えることで、打ち消しが不要になります。また、機能ごとにクラスを分けることで、必要な場合のみスタイルを適用できます。

実際の開発現場では、既存のコードを修正する際に打ち消しを使いたくなる場面も多いですが、可能な限り元のスタイル定義を見直すことをお勧めします。

特にチーム開発では、他のメンバーが書いたCSSを理解しやすくするためにも、シンプルで予測しやすいスタイリングを心がけましょう。

わかりやすいクラス名をつける

わかりやすいクラス名をつけることは、CSSの効率的な使用とメンテナンス性の向上に直結します。

他の開発者が見ても理解しやすく、かつ再利用しやすいクラス名を設定することで、長期的な開発効率が大きく改善します。

間違った例

.red {
    color: #ff0000;
}

.box1 {
    margin: 20px;
    padding: 15px;
    background: #f5f5f5;
}

.text-1 {
    font-size: 16px;
    line-height: 1.8;
}

.mt30 {
    margin-top: 30px;
}

このようなクラス名では、見た目や数値に依存しすぎており、デザイン変更時に名前自体を変更する必要が出てきます。また、そのクラスが何のための要素なのかが分かりにくくなっています。

管理しやすい正しい例

.alert-text {
    color: #ff0000;
}

.info-card {
    margin: 20px;
    padding: 15px;
    background: #f5f5f5;
}

.article-body {
    font-size: 16px;
    line-height: 1.8;
}

.section-content {
    margin-top: 30px;
}

このように、要素の役割や機能を表すクラス名をつけることで、コードの意図が明確になり、後からの修正も容易になります。デザインが変更になっても、クラス名自体を変更する必要がありません。

また、チーム開発では命名規則を統一することも重要です。

例えば、BEM（Block Element Modifier）のような命名規則を採用することで、HTML構造とクラス名の関係が分かりやすくなります。

<div class="card">
    <h2 class="card__title">見出し</h2>
    <p class="card__text">テキスト</p>
    <button class="card__button card__button--primary">ボタン</button>
</div>

クラス名は、コードを書く時点では少し冗長に感じるかもしれません。しかし、数ヶ月後に修正が必要になった時、わかりやすいクラス名があることで作業効率が大きく変わってきます。

BEMについては以下の記事が詳しく解説されていて、おすすめです！