JavaScript中級

中級 JavaScriptで学ぶリファクタリング｜アンチパターン編

 

導入

リファクタリングは、コードの可読性や保守性を向上させるための重要なプロセスです。しかし、実際の業務では、リファクタリングの際にありがちなアンチパターンに陥ることがあります。本記事では、特に中級JavaScriptエンジニアが直面しやすいリファクタリングのアンチパターンを取り上げ、具体的なケーススタディを通じてその問題点と改善策を探ります。

教科書レベルの解説（リファクタリング）

重要な概念の整理

リファクタリングとは、外部の動作を変更せずにコードの内部構造を改善することを指します。これにより、コードの理解が容易になり、バグの修正や新機能の追加がしやすくなります。リファクタリングを行う際には、テストを行いながら進めることが推奨されます。

コード例（JavaScript）


// 複雑な条件分岐を含む関数
function calculateDiscount(price, customerType) {
    let discount = 0;
    if (customerType === 'regular') {
        if (price > 100) {
            discount = price * 0.1;
        }
    } else if (customerType === 'premium') {
        if (price > 200) {
            discount = price * 0.2;
        }
    }
    return discount;
}

コードの行ごとの解説

  1. この関数は、顧客の種類に基づいて異なるディスカウントを計算するためのものです。
  2. 条件分岐が多く、可読性が低くなっています。
  3. 顧客タイプによるディスカウント計算が一か所に集約されておらず、保守性が悪化しています。

アンチパターン編

上記のコードには、複雑な条件分岐が含まれており、読みにくさと保守性の低下を招く典型的なアンチパターンが見受けられます。このような場合、条件を整理し、明示的な関数を作成することで改善できます。以下は改善後のコード例です。


// リファクタリング後の関数
function calculateRegularDiscount(price) {
    return price > 100 ? price * 0.1 : 0;
}

function calculatePremiumDiscount(price) {
    return price > 200 ? price * 0.2 : 0;
}

function calculateDiscount(price, customerType) {
    switch (customerType) {
        case 'regular':
            return calculateRegularDiscount(price);
        case 'premium':
            return calculatePremiumDiscount(price);
        default:
            return 0;
    }
}

リファクタリング後のコードでは、顧客タイプごとのディスカウント計算をそれぞれの関数に分け、条件分岐を明確にしました。これにより、可読性と保守性が向上し、将来的な変更にも柔軟に対応できるようになります。

まとめ

  • 複雑な条件分岐は、可読性と保守性を低下させるため、リファクタリングの際には注意が必要です。
  • 条件を整理し、明確な関数に分けることで、コードの品質を向上させることができます。
  • リファクタリングは、コードの改善だけでなく、チーム全体の理解を助ける重要なプロセスです。
RELATED POST