きれいなコードの書き方

✅ 回答

きれいなコードとは「3ヶ月後の自分が読んでも理解できるコード」です。見た目の美しさではなく、読みやすさが本質。

Before / After で見る

// ❌ 読みにくいコード
function f(a) {
  let r = 0;
  for (let i = 0; i < a.length; i++) {
    if (a[i] >= 80) {
      r++;
    }
  }
  return r;
}

↓ 同じ処理を読みやすく書き直すと：

// ✅ 読みやすいコード（同じ処理）
function countHighScores(scores) {
  const PASS_LINE = 80;
  return scores.filter(score => score >= PASS_LINE).length;
}

関数名が「何をするか」を説明しているので、中身を読まなくても意味がわかります。

3つのルール

① 変数名・関数名に意味を持たせる

❌ x, tmp, data	何が入っているかわからない
✅ userName, totalPrice, isLoggedIn	名前だけで中身がわかる

② 関数は1つのことだけする

「データを取得して、加工して、表示する」を1つの関数に書かない。取得・加工・表示を別々の関数に分ける。

③ ネストを浅くする（早期リターン）

// ❌ ネストが深い
function processOrder(order) {
  if (order) {
    if (order.items.length > 0) {
      if (order.payment) {
        // ここでやっと本題...
      }
    }
  }
}

// ✅ 早期リターンでネストを浅く
function processOrder(order) {
  if (!order) return;
  if (order.items.length === 0) return;
  if (!order.payment) return;

  // 本題がトップレベルに来る
}

献立表ページでの実践

• CSSのクラス名：.box1 → .menu-card（何のボックスかわかる）
• JSの関数名：doStuff() → toggleDarkMode()（何をする関数かわかる）
• HTMLの構造：divの入れ子5段 → セマンティックタグで意味を明確に

「最初からきれいに書く」必要はない

まず動くコードを書いて、あとから整理する（リファクタリング）のが現実的です。最初から完璧を目指すと手が止まります。「動いた→整理する→コミット」のサイクルを回しましょう。

クリーンコード チェックリスト

チェック項目	OKの目安
変数名・関数名で中身がわかるか	名前を見ただけで役割が想像できる
1つの関数が1つのことだけしているか	関数名を「〜して〜する」と言わずに済む
ネストが深すぎないか	インデントは3段まで。早期リターンで浅く
同じコードをコピペしていないか	2回以上書く処理は関数にまとめる
マジックナンバーがないか	80 ではなく PASS_LINE など名前をつける

迷ったら「3ヶ月後の自分がこのコードを読んで、すぐ理解できるか？」を基準にしましょう。それがクリーンコードの一番シンプルな判定法です。