きれいなコードの書き方

✅ 回答

きれいなコードとは「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 → .event-card（何のボックスかわかる）
• JSの関数名：doStuff() → toggleDarkMode()（何をする関数かわかる）
• HTMLの構造：divの入れ子5段 → セマンティックタグで意味を明確に

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

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

クリーンコードの実例

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

// ✅ クリーンコード
function sumPositiveNumbers(numbers) {
  return numbers
    .filter(n => n > 0)
    .reduce((sum, n) => sum + n, 0);
}

// クリーンコードの原則
// 1. 関数名で「何をするか」がわかる
// 2. 変数名で「何が入っているか」がわかる
// 3. 1つの関数は1つのことだけする
// 4. ネストを浅くする（早期リターン）

// ❌ ネストが深い
function process(user) {
  if (user) {
    if (user.age >= 18) {
      if (user.isActive) {
        return "OK";
      }
    }
  }
  return "NG";
}

// ✅ 早期リターンでフラット
function process(user) {
  if (!user) return "NG";
  if (user.age < 18) return "NG";
  if (!user.isActive) return "NG";
  return "OK";
}