コードをリファクタリングしてよりクリーンで洗練されたデザインを実現するための基本ガイド-jsチュートリアル-php.cn

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

DDD

リリース： 2024-09-13 08:16:04

オリジナル

323 人が閲覧しました

Essential Guide to Refactoring Code for a Cleaner and Polished Design

ペースの速いソフトウェア開発の世界では、クリーンで保守しやすいコードを書くことが不可欠です。ボブおじさんの「クリーンコード」にインスピレーションを得て、コードベースを強化するための 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;
}

ログイン後にコピー