クリーンなコードを理解する: 書式設定 ⚡️

ソフトウェア開発では、コードは機械だけでなく人間にも使用されます。

適切なコード形式は、読みやすさと保守性にとって非常に重要です。

Clean Code の第 5 章では、プロフェッショナル コードの書式設定の重要性に焦点を当てて、これらの原則について説明します。

---

?書式設定が重要な理由

適切な書式設定は見た目の美しさだけではありません。それは明瞭さについてです。適切にフォーマットされたコード:

• 可読性の向上: 他の開発者 (または将来の自分) は、コードの動作をすぐに理解できます。

• 保守性の向上: きれいにフォーマットされたコードは、更新、リファクタリング、デバッグが容易になります。

• 一貫性の促進: 一貫性のあるコードは予測可能であり、コードを読む人の認知的負荷を軽減します。

---

?コードのフォーマットに関する重要な原則

? 1. 垂直的オープン性: 関連するコードをグループ化する

垂直方向のオープン性とは、空白行を使用してコードの個別のブロックを分離し、異なるセクションを区別しやすくすることを指します。

例:

function processOrder(order) {
    // Validate the order
    if (!validateOrder(order)) {
        throw new Error("Invalid order");
    }

    // Process payment
    const paymentResult = processPayment(order);

    // Update inventory
    updateInventory(order);

    // Notify customer
    notifyCustomer(order);
}

この例では、processOrder 関数の各ステップが空白行で区切られており、プロセスのさまざまなフェーズが明確に示されています。

---

? 2. 水平的オープン性: コードを整理して明確にする

水平方向のオープン性には、特に類似または関連するステートメントを扱う場合に、コードを水平方向に配置して読みやすくすることが含まれます。

例:

const productName  = "Laptop";
const productPrice = 999.99;
const productStock = 50;

このように変数宣言を並べると、各変数が何を表しているのかが一目で分かりやすくなります。

---

? 3. インデント: コードを階層的に構造化する

インデントはコードの階層構造を反映する鍵となります。これは、読者が、ループ、条件文、関数など、一緒に属するコードのブロックをすばやく識別するのに役立ちます。

例:

function calculateDiscount(price) {
    if (price > 100) {
        return price * 0.1;
    } else {
        return 0;
    }
}

ここでは、return ステートメントが条件ロジックの一部であることを示すために、if-else 構造がインデントされています。

---

? 4. 行の長さ: 扱いやすい長さに保つ

長いコード行は読みにくく、理解するのが難しい場合があります。一般的なルールは、行を 80 ～ 100 文字以内に収めることです。行が長すぎる場合は、分割することを検討してください。

例:

// Instead of this:
const orderSummary = `Order for ${customer.name}, Total: $${order.total}, Items: ${order.items.length}`;

// Do this:
const orderSummary = `Order for ${customer.name}, 
    Total: $${order.total}, 
    Items: ${order.items.length}`;

特に文字列に複数の変数が含まれている場合、文字列を複数行に分けると読みやすくなります。

---

? 5. 一貫したブレーシング: 乱雑さを減らす

ブレースのスタイルも一貫性が重要な領域です。一般的なスタイルは次の 2 つです:

• K&R スタイル: ステートメントと同じ行に左中括弧を置きます。
• オールマン スタイル: 新しい行に開始中括弧を追加します。

K&R スタイルの例:

function add(a, b) {
    return a + b;
}

オールマン スタイルの例:

function add(a, b) 
{
    return a + b;
}

スタイルを選択し、コードベース全体でそのスタイルに固執します。特定のスタイルよりも一貫性が重要です。

---

? 6. 密集したコードを避ける: 呼吸のための余地を残す

狭いスペースに多くの操作が詰め込まれている高密度コードは、読みにくい場合があります。コードを広げて、より親しみやすいものにします。

例:

// Dense code
if (user.isLoggedIn) { user.showDashboard(); }

// Better
if (user.isLoggedIn) {
    user.showDashboard();
}

2 番目のバージョンは、関数呼び出しが条件とは別の行にあるため、より読みやすくなっています。

---

---

結論✅

書式設定は、コードの読みやすさと保守性にとって重要です。

クリーン コードの原則に従って、JavaScript コードをよりプロフェッショナルで理解しやすく、操作しやすくすることができます。

コーディングを楽しんでください!

以上がクリーンなコードを理解する: 書式設定 ⚡️の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。