コードをリファクタリングしてよりクリーンで洗練されたデザインを実現するための基本ガイド

ペースの速いソフトウェア開発の世界では、クリーンで保守しやすいコードを書くことが不可欠です。ボブおじさんの「クリーン コード」にインスピレーションを得て、コードベースを強化するための 5 つの重要なリファクタリング原則を詳しく掘り下げます。各原則には、これらの改善を実装する方法を示す TypeScript コード例が付属しています。一緒にコードを改良しましょう!

1️⃣ 大きな機能にはノーと言う

説明: ボブおじさんは、関数は簡潔に、理想的には 20 行以内にするようアドバイスしています。大規模な関数は、理解、テスト、保守が困難な場合があります。関数をより小さく、より管理しやすい部分に分割することで、可読性が向上し、複雑さが軽減されます。

リファクタリング前:

import fs from 'fs';

function processData(data: string[]): void {
    // Step 1: Validate data
    if (!Array.isArray(data)) {
        throw new Error("Input must be an array");
    }

    // Step 2: Clean data
    const cleanedData = data.map(item => item.trim()).filter(item => item !== '');

    // Step 3: Process data
    const result: string[] = [];
    for (const item of cleanedData) {
        if (item.length > 5) {
            result.push(item.toUpperCase());
        } else {
            result.push(item.toLowerCase());
        }
    }

    // Step 4: Save results
    fs.writeFileSync('results.txt', result.join('\n'));
}

リファクタリング後:

import fs from 'fs';

function validateData(data: any): void {
    if (!Array.isArray(data)) {
        throw new Error("Input must be an array");
    }
}

function cleanData(data: string[]): string[] {
    return data.map(item => item.trim()).filter(item => item !== '');
}

function processItem(item: string): string {
    return item.length > 5 ? item.toUpperCase() : item.toLowerCase();
}

function saveResults(results: string[], filename: string = 'results.txt'): void {
    fs.writeFileSync(filename, results.join('\n'));
}

function processData(data: string[]): void {
    validateData(data);
    const cleanedData = cleanData(data);
    const results = cleanedData.map(processItem);
    saveResults(results);
}

2️⃣ 単一の責任を受け入れる

説明: 各クラスまたはメソッドは 1 つの責任を持つ必要があります。これは、各クラスまたはメソッドが 1 つのことを実行し、それを適切に実行する必要があることを意味します。この原則に従うと、コードがよりモジュール化され、テストが容易になり、変更がより柔軟になります。

リファクタリング前:

class User {
    constructor(public username: string, public email: string) {}

    sendEmail(message: string): void {
        // Code to send an email
        console.log(`Sending email to ${this.email}: ${message}`);
    }

    saveToDatabase(): void {
        // Code to save user to the database
        console.log(`Saving ${this.username} to the database`);
    }
}

リファクタリング後:

class User {
    constructor(public username: string, public email: string) {}
}

class EmailService {
    sendEmail(email: string, message: string): void {
        // Code to send an email
        console.log(`Sending email to ${email}: ${message}`);
    }
}

class UserRepository {
    save(user: User): void {
        // Code to save user to the database
        console.log(`Saving ${user.username} to the database`);
    }
}

3️⃣ パラメータの受け渡しを簡素化する

説明: 関数が受け入れるパラメータの数を制限すると、理解しやすくなり、使用しやすくなります。多くのパラメータを持つ複雑な関数は混乱を招き、エラーが発生しやすくなります。オブジェクトまたはデータ構造を使用すると、関連するパラメーターをグループ化できます。

リファクタリング前:

function createUser(username: string, email: string, password: string, age: number, address: string): void {
    // Code to create a user
    console.log(`Creating user: ${username}, ${email}, ${password}, ${age}, ${address}`);
}

リファクタリング後:

interface User {
    username: string;
    email: string;
    password: string;
    age: number;
    address: string;
}

function createUser(user: User): void {
    // Code to create a user
    console.log(`Creating user: ${user.username}, ${user.email}, ${user.password}, ${user.age}, ${user.address}`);
}

4️⃣ マジックナンバーを避ける

説明: マジック ナンバーは、説明なしでコード内で直接使用されるリテラル数値です。コードの理解と保守が困難になる可能性があります。マジックナンバーを名前付き定数に置き換えると、可読性が向上し、将来の変更が容易になります。

リファクタリング前:

function calculateDiscountedPrice(price: number): number {
    // Apply a discount of 15%
    return price * 0.85;
}

function calculateShippingCost(weight: number): number {
    // Shipping cost per kilogram
    return weight * 5;
}

リファクタリング後:

const DISCOUNT_RATE = 0.15;
const SHIPPING_COST_PER_KG = 5;

function calculateDiscountedPrice(price: number): number {
    // Apply a discount
    return price * (1 - DISCOUNT_RATE);
}

function calculateShippingCost(weight: number): number {
    // Shipping cost per kilogram
    return weight * SHIPPING_COST_PER_KG;
}

5️⃣ 変数に意味を付けて名前を付ける

説明: 意味のある変数名を使用すると、コードが自己文書化され、理解しやすくなります。 1 文字の名前や難解な名前は避けてください。代わりに、変数の目的と使用法を明確に伝える名前を選択してください。

リファクタリング前:

function calculate(u: number, v: number): number {
    const r = u + v;
    const p = r * 2;
    return p;
}

リファクタリング後:

function calculateTotalCost(baseCost: number, additionalFees: number): number {
    const totalCost = baseCost + additionalFees;
    return totalCost;
}

結論

これらのリファクタリング原則を TypeScript コードに適用すると、コードの明瞭さ、保守性、全体的な品質が大幅に向上します。クリーンなコードの実践は、効果的な開発とコラボレーションに不可欠です。

どのリファクタリング戦略があなたにとって最も効果的でしたか?あなたの経験や直面した課題を以下で共有してください。 ?

以上がコードをリファクタリングしてよりクリーンで洗練されたデザインを実現するための基本ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。