MENU
  1. ホーム
  2. html・css
  3. 効率的なコードとクラス命名ルール完全版

効率的なコードとクラス命名ルール完全版

html・css

Web制作を学んでいると必ず直面するのが「効率のいいコードの書き方」と「クラス名の付け方」です。動くサイトを作るだけなら多少コードが乱雑でも問題ありませんが、そのままでは修正や拡張に大きな時間がかかります。特にチームでの開発では、他の人が理解しやすいコードであることが非常に重要です。私自身、最初はbox1やred-textのようなクラス名をつけ、数日後には自分でも意味が分からなくなることがありました。しかし、インデントや命名規則を意識するだけで、コードはぐっと整理され、後々の作業効率が大幅に上がります。この記事では、効率的なコードの基本原則から、具体的なクラス命名ルール、さらに実務で役立つツールまで体系的に解説していきます。

目次

効率的なコードを書くための考え方

コードは未来の自分とチームへのメッセージ

効率的なコードとは、短く書かれたコードではなく「誰が読んでも理解できるコード」です。数日後の自分であっても「なぜこう書いたのか」が分からなければ、修正や拡張に時間がかかります。現場ではチームで開発することが多く、他人が読みやすいコードを書くことが生産性に直結します。

「動けばいい」から「読みやすさ」へ

初心者のうちは「表示されればOK」という発想になりがちですが、実務では「読みやすさ」が重要視されます。同じ処理でも、行間やスペースの使い方、クラス名の意味付けによって理解度が大きく変わります。

コード整理の具体的テクニック

インデント・スペース・改行ルール

インデントを揃えることは基本ですが、プロジェクトでルールを統一しておかないと崩れやすいです。自動整形ツール（Prettierなど）を導入すると、チーム全体でコードスタイルを統一できます。

<!-- NG -->
<div><ul><li>Item</li><li>Item</li></ul></div>

<!-- OK -->
<div>
  <ul>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

コメントの適切な使い方

コメントは全ての行に書く必要はありません。むしろ冗長になると逆効果です。CSSではセクションごとにコメントを入れる程度で十分です。

/* NG */
.red { color: red; } /* 赤文字 */
.bold { font-weight: bold; } /* 太字 */

/* OK */
 /* ========== Header ========== */
.header { background: #fff; }

繰り返しを減らすリファクタリング

共通部分をまとめ、修正を一箇所に集約できるようにします。

/* NG */
.btn-blue { background: blue; color: #fff; }
.btn-red { background: red; color: #fff; }

/* OK */
.btn { color: #fff; padding: 10px 20px; }
.btn--blue { background: blue; }
.btn--red { background: red; }

クラス名を付ける基本ルール

見た目ではなく「意味・役割」で命名する

クラス名を考えるときに最も大切なのは、「見た目」ではなく「意味」や「役割」を意識することです。
例えば、以下のようなケースを考えてみましょう。

<!-- NG例：見た目に依存 -->
<div class="red-box">エラーメッセージです</div>

<!-- 改善例：役割に基づく -->
<div class="alert-box">エラーメッセージです</div>
  • .red-box という名前は「赤い箱」を意味しています。デザイン変更で色が赤から黄色になったとき、クラス名と実際の見た目がずれてしまいます。
  • 一方 .alert-box という名前なら「警告を表示する箱」という役割を示すため、色を変更しても意味は崩れません。

👉 このように、見た目依存の命名は短期的には分かりやすくても、長期的には保守性を下げる原因になります。

実務を始めた頃、とにかく早く作らないとと焦って、とりあえずのクラス名をつけて、デザインしていたのですが、あとあとコードが増えていくうちに痛い目をみていました。
その場しのぎの適当なクラス名は、そのときはいいのですが、あとからどんどんコードを付け足していくときや、ちょっとした修正をしたいときにすごく面倒でした。
なので、少し面倒でも最初からしっかりと、意味・役割をもたせたクラス名を書いていくことがとても大切で、一番効率の良いコードの書き方だと思うので、常にこころがけています。

命名規則の統一

クラス名の付け方にはいくつかパターンがあります。これを「命名規則（ネーミングルール）」と呼びます。
コードの世界では、ルールをバラバラにするととても読みにくくなるので、プロジェクトやチームで必ず統一します。

ここでは代表的な3つの書き方を紹介します。

ケバブケース（kebab-case）

  • 書き方: 単語を「ハイフン（-）」でつなぐ
  • 例:
    • .main-title
    • .card-header
  • 名前の由来: ハイフンが「ケバブ串」に似ているから。

✅ メリット

  • 単語の区切りがはっきりしていて読みやすい。
  • CSSの世界で最も一般的に使われる書き方。
  • GoogleやBootstrapなど、多くのプロジェクトでも採用されている。

❌ デメリット

  • クラス名が長い場合、ハイフンが多くなりすぎて読みにくくなることもある。

👉 初心者〜上級者までCSSではケバブケース一択に近いです。

キャメルケース（camelCase）

  • 書き方: 2語目以降の先頭を大文字にする
  • 例:
    • .mainTitle
    • .cardHeader
  • 名前の由来: 大文字が「ラクダのこぶ」に見えるから。

✅ メリット

  • JavaScriptやプログラミング言語全般で広く使われている。
  • 単語の区切りにスペースや記号を使わないため、タイピングしやすい。

❌ デメリット

  • CSSで使うと少数派なので、他人が見たときに「このプロジェクトだけ特別なルールなの？」と混乱することがある。

👉 JavaScriptでは一般的だけど、CSSのクラス名では推奨されない。

スネークケース（snake_case）

  • 書き方: 単語を「アンダースコア（_）」でつなぐ
  • 例:
    • .main_title
    • .card_header
  • 名前の由来: アンダースコアが「蛇（スネーク）」が横に這っている姿に似ているから。

✅ メリット

  • 古いシステムや一部のプログラミング言語（Pythonなど）でよく見かける。
  • 小文字だけで統一できるので分かりやすい。

❌ デメリット

  • CSSでは一般的ではなく、読みやすさもケバブケースに劣る。
  • モバイルでの読み書きや検索がしにくい。

👉 昔のプロジェクトで残っていることはあるが、現代のCSSでは非推奨。

💡 まとめ

  • ケバブケース → CSSでの王道。読みやすくておすすめ。
  • キャメルケース → JavaScriptではよく使うが、CSSでは避ける。
  • スネークケース → CSSではほぼ使われない。

最初は「どれを選ぶか」悩むと思いますが、CSSではケバブケースで統一すれば間違いありません。
もしチーム開発に参加する場合は、プロジェクトのルールを必ず確認して、それに従うのがベストです。

BEMとSMACSSによるCSS設計

BEM（Block Element Modifier）

簡単に言うと: 部品（Block）、その中の要素（Element）、見た目や状態の違い（Modifier）をわかりやすく整理するルール。

例：カードの部品を作るとき

<div class="card card--highlight">
  <h2 class="card__title">タイトル</h2>
  <p class="card__text">本文です。</p>
</div>

.card { border: 1px solid #ddd; padding: 1rem; }
.card__title { font-size: 1.2rem; }
.card__text { font-size: 1rem; }
.card--highlight { background-color: #fef3c7; }
  • 特徴: 名前がちょっと長くなるけど「どの部分かわかりやすい」
  • 向いている場面: 大規模開発や、複数人で同じサイトを作るとき

SMACSS（Scalable and Modular Architecture for CSS）

簡単に言うと: CSSを役割ごとに5つに分けて整理する考え方。

分類の例：

  • Base（基本スタイル） → タグそのもののデフォルト調整
  • Layout（ページの枠組み） → .l-header
  • Module（部品ごとのスタイル） → .m-card
  • State（状態を表すスタイル） → .is-hidden
  • Theme（テーマ切り替え用）
/* Layout */
.l-header { ... }

/* Module */
.m-card { ... }

/* State */
.is-hidden { display: none; }
  • 特徴: 名前は短めで柔軟。
  • 向いている場面: 中小規模のサイトや、デザイン変更が多い案件。

実務での使い分け

  • 大規模開発 → BEMをベースにして、しっかり整理する
  • 中小規模 → SMACSSやシンプルなルールで十分
  • 実際の現場では → BEMを基盤にしつつ、SMACSSの要素も一部取り入れる“ハイブリッド型” が多い

まとめ

慣れてきたら BEMやSMACSSを少しずつ取り入れていくと実務で役立ちます。

ケバブケース → クラス名の「書き方」のルール
BEM / SMACSS → コード全体を「どう整理するか」の設計ルール
初心者の第一歩はケバブケースに慣れること

実務で役立つ効率化ツール

効率的なコードを書くためには「ルール」を理解することが大切ですが、それだけでは十分ではありません。
実際の現場では、ツールを活用して作業を自動化・効率化することが不可欠です。
ここでは初心者でも導入しやすく、実務でもよく使われている代表的なツールを紹介します。

ツール名説明公式リンク
Prettierコードのインデント・スペース・改行などを自動で整形してくれるツール。コードスタイルの統一に役立ちます。Prettier公式サイト (prettier.io)
ESLintJavaScriptのコード中のミスやスタイル違反を発見・指摘する静的解析ツール。ルールを自分で設定できます。ESLint公式サイト (eslint.org)
VSCode スニペットよく使うコードパターンをスニペットとして登録しておき、入力の手間を大幅に省く機能。VSCode スニペット公式ドキュメント (Visual Studio Code)
StorybookUIコンポーネントを「見た目や状態ごと」に分けて表示・テスト・共有できるツール。デザインとコードの乖離を減らすのに有効です。Storybook公式サイト (storybook.js.org)

💡 まとめ：ツールを使うと自然に効率化できる

効率化は「気合いで頑張る」ものではなく、ツールの力を借りて自然に習慣化するのがベストです。

  • Prettier → 自動でコードをきれいに
  • ESLint → ミスを自動で検出
  • VSCodeスニペット → コードを素早く展開
  • Figma / Storybook → デザインとコードをつなぐ

こうしたツールを活用すれば、初心者でもプロに近い開発環境を手に入れられます。

まとめ

効率的なコードを書くためには、まず**「読みやすさ」**を意識することが第一歩です。
インデントや改行を整え、不要な繰り返しを避けるだけで、コードの理解度はぐっと上がります。

さらに、クラス名は見た目ではなく役割を表すことが大切です。
CSSの命名規則はケバブケースで統一すれば安心。慣れてきたらBEMやSMACSSの設計ルールを取り入れることで、規模の大きなサイトでも破綻しにくくなります。

また、効率化のためにはツールの活用も欠かせません。PrettierやESLintで自動整形・チェックを行い、VSCodeのスニペットで作業を時短することで、「毎回きれいに書こう」と頑張らなくても自然と効率的なコードが身につきます。

html・css

この記事を書いた人

hiyokko_designerのアバター hiyokko_designer

はじめまして。webデザイナー1年目のひよっこデザイナーです。
当ブログは、駆け出しWebデザイナーが、日々学んだことや気づきを記録しています。同じ初心者デザイナーの方と一緒に成長していければと思っています。

関連記事

コメント

コメントする

目次