コーディングで心掛けていること

2024年8月30日2024年9月17日

コーディングを効率的に進めたい…
もっとスピードを上げて時給を上げたい
でも、何を意識すればいいのかわからない…

そんなお悩みを解決する、シンプルだけど重要なポイントがあります。

この記事では、私が日々のコーディングで心掛けている習慣を紹介します。

至ってシンプルで当たり前のことばかりですが、非常に大切で自分自身ももっと早く知りたかったと思うポイントですので初心者の方はもちろん、経験者の方も、ぜひ参考にしてみてください。

1.シンプルさを追求する

複雑なコードは、保守が困難で、バグの原因となることが多いので、常にシンプルさを追求し、不要な機能やコードの繰り返しを避けるよう心掛けています。

例を上げると下記のようなコードは避けるべきです。

.button-primary {
    background-color: #007bff;
    color: #ffffff;
    border: 1px solid #007bff;
}

.button-secondary {
    background-color: #6c757d;
    color: #ffffff;
    border: 1px solid #6c757d;
}

このCSSには以下の問題があります。

カラーコードが複数回繰り返されている
似たようなスタイルが重複している
色の変更や調整が必要な場合、多くの箇所を修正する必要がある

これを改善すると以下のようになります。

:root {
    --color-primary: #007bff;
    --color-secondary: #6c757d;
    --color-white: #ffffff;
    --border-width: 1px;
}

.button {
    color: var(--color-white);
    border-width: var(--border-width);
    border-style: solid;
}

.button-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.button-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

一見複雑になったように見えますが、以下の利点があります。

CSS変数（カスタムプロパティ）を使用して色を定義し、再利用性を高めている
共通のスタイルをまとめることで、コードの重複を削減
color-mix()関数を使用して、基本色から派生色を動的に生成
色の変更が必要な場合、ルート変数の値を変更するだけで済む

このように、シンプルで再利用可能なCSSを心がけることで、保守性が向上し、一貫性のあるデザインを維持しやすくなります。また、新しい要素やバリエーションを追加する際も、既存の変数やミックスインを活用することで、効率的に開発を進めることができます。

2.コメントを適切に残す

自分が書いたコードは、数ヶ月後や他の開発者にとって読みにくいものとなる可能性があります。
そのため、コードの目的や処理の詳細をコメントで残すことで、後から見返した際の理解を助けるよう心掛けています。

その際に下記のようなコメントは冗長でみにくくなるのでやめましょう。

/* ヘッダーのスタイル */
.header {
    /* 背景色を設定 */
    background-color: #f8f9fa;
    /* パディングを設定 */
    padding: 20px;
    /* ボーダーを設定 */
    border-bottom: 1px solid #e9ecef;
}

/* ナビゲーションのスタイル */
.nav {
    /* フレックスボックスを使用 */
    display: flex;
    /* 中央揃え */
    justify-content: center;
    /* リストスタイルを削除 */
    list-style: none;
}

/* ナビゲーションリンクのスタイル */
.nav-link {
    /* パディングを設定 */
    padding: 10px 15px;
    /* テキストの装飾を削除 */
    text-decoration: none;
    /* 文字色を設定 */
    color: #007bff;
}

この例では、いちいち「フレックスボックスを使用」などとしていて、コードを読む側は

いや！見ればわかるわ！！

ってなってしまします。

下記のようにわかりにくい部分にだけコメントを適切に記述しましょう。

/* z-indexの管理 */
.modal { z-index: 100; }
.overlay { z-index: 90; }
.dropdown { z-index: 80; }


/**
 * メディアクエリのブレイクポイント
 * sm: スマートフォン
 * md: タブレット
 * lg: デスクトップ
 */

必要最小限のコメントを適切に配置することで、自分自身も管理がしやすくなり、別の人が触るときも管理しやすくなります。

3.詳細度を一定にする

詳細度とは、CSSセレクタがどの程度具体的であるかを示す値です。

これは、複数のスタイルが競合した際にどのスタイルが適用されるかを決定する重要な要素です。

詳細度を一定に保つことで、以下のような利点があります：

スタイルの予測可能性が向上し、意図しないスタイルの上書きを防ぐ
CSSの管理が容易になり、新しいスタイルの追加や既存のスタイルの修正が簡単になる
パフォーマンスの向上（ブラウザがスタイルを適用する際の計算量が減少）

下記のようなコードは避けるべきです：

/* 避けるべき例 */
#header div.navigation ul li a.active {
    color: red !important;
}

body .content article p {
    font-size: 16px;
}

div > p + p {
    margin-top: 1em;
}

.sidebar .widget h3:nth-child(odd) {
    background-color: #f0f0f0;
}

これらのセレクタは以下の問題があります：

過度に具体的で、再利用が困難
HTMLの構造に強く依存しているため、HTMLの変更に弱い
!importantの使用により、後続のスタイル変更が困難になる
複雑なセレクタチェーンにより、パフォーマンスに悪影響を与える可能性がある

代わりに、以下のようなアプローチを取ることをお勧めします：

/* 推奨される例 */
.nav-link.active {
    color: var(--color-active);
}

.content-text {
    font-size: 1rem;
}

.paragraph + .paragraph {
    margin-top: 1em;
}

.widget-title:nth-child(odd) {
    background-color: var(--color-background-alt);
}

この改善されたコードでは：