読みやすいコードの書き方 — インデントと命名の作法

コードは書く時間より、読み返す時間のほうが長くなります。しかも読み返すのは、内容を忘れた頃の自分です。ここで紹介するのは、覚える必要すらない、手を動かすだけの習慣です。

1. インデントを揃える

インデントとは行頭の空白のことです。入れ子が深くなるほど右にずらします。これだけで、どのタグがどこまで続いているかが目で追えるようになります。

<!-- 読みにくい -->
<div class="card">
<h2>タイトル</h2>
<p>本文</p>
</div>

<!-- 読みやすい -->
<div class="card">
  <h2>タイトル</h2>
  <p>本文</p>
</div>

半角スペース2つぶんずらすのが一般的です。手で揃えるのが面倒なら、エディタの自動整形に任せてしまって構いません。むしろそのほうが確実です。

2. class名は「役割」で付ける

見た目で名前を付けると、デザインを変えたときに名前が嘘になります。

• 避けたい … red、big-text、margin20、box2
• おすすめ … alert、page-title、card、price

たとえば class="red" と付けた注意書きを、あとで青にしたくなったとします。CSSを変えれば色は変わりますが、HTMLには red と書いてあるままです。役割で名付けておけば、この矛盾は起きません。

3. 単語のつなぎ方を統一する

複数の単語をつなぐときの書き方は何通りもありますが、Web制作ではハイフンでつなぐ書き方が主流です。

• page-title … ハイフンつなぎ。HTML・CSSではこれが基本
• pageTitle … 先頭以外の単語を大文字に。JavaScriptの変数名はこちらが主流
• page_title … アンダースコアつなぎ。混在させないなら可

大事なのはどれを選ぶかではなく、1つのサイトの中で混ぜないことです。迷ったら、HTMLとCSSはハイフン、JavaScriptの変数は大文字つなぎ、と覚えておけば困りません。

コメントは「なぜ」を書く

コードを見れば「何をしているか」は分かります。分からないのは「なぜそうしたか」です。コメントを書くなら、そちらを書いてください。

/* 悪い例：見れば分かることを書いている */
/* 背景を白にする */
.card { background: #fff; }

/* 良い例：理由を書いている */
/* 印刷時に背景が消えると読めなくなるため、白を明示している */
.card { background: #fff; }

• HTMLのコメント … <!-- ここに書く -->
• CSSのコメント … /* ここに書く */
• JavaScriptのコメント … // ここに書く

まとめ

インデントを揃える、役割で名付ける、書き方を統一する。この3つだけで、コードの読みやすさは大きく変わります。どれも才能もセンスも要りません。今日から始められます。