JavaScript上級

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

 

導入

リファクタリングは、コードの可読性や保守性を向上させるための重要なプロセスです。しかし、実際の開発現場では、リファクタリングを行う際に多くのアンチパターンに直面することがあります。特に、JavaScriptのようなダイナミックな言語では、柔軟性が高い分、意図しない副作用が生じやすくなります。この記事では、実務でよく見られるアンチパターンを通じて、リファクタリングの具体的な改善方法を探ります。

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

重要な概念の整理

リファクタリングとは、既存のコードを改善することを指します。これには、機能を変更せずにコードの構造を整理し、可読性を高めることが含まれます。リファクタリングを行うことで、将来的なバグの発生を抑え、開発速度を向上させることが可能です。しかし、リファクタリングのプロセスには多くの注意点があり、特にアンチパターンを避けることが重要です。

コード例（JavaScript）


function calculateDiscount(price, discount) {
    if (discount > 0 && discount < 100) {
        return price - (price * (discount / 100));
    } else {
        return price;
    }
}

const finalPrice = calculateDiscount(100, 20);
console.log(finalPrice);

コードの行ごとの解説

  1. 関数 `calculateDiscount` は、価格と割引率を引数として受け取ります。
  2. 割引率が0より大きく100未満であるかを確認し、適切な割引を適用します。
  3. 条件を満たさない場合は、元の価格を返します。
  4. 最後に、関数を呼び出して最終価格を計算し、コンソールに表示します。

アンチパターン編

上記のコードには、いくつかのアンチパターンが潜んでいます。一つ目は、関数が単一の責任を持たず、バリデーションと計算を同時に行っている点です。これにより、将来的にバリデーションロジックを変更する際に、計算ロジックにも影響を与える可能性があります。

改善策としては、バリデーションを別の関数に切り出すことが考えられます。これにより、関数の責任が明確になり、テストやメンテナンスが容易になります。


function validateDiscount(discount) {
    return discount > 0 && discount < 100;
}

function calculateDiscount(price, discount) {
    if (validateDiscount(discount)) {
        return price - (price * (discount / 100));
    }
    return price;
}

ここで、`validateDiscount` 関数を新たに作成し、割引率のバリデーションを担当させました。このように責任を分割することで、コードの可読性と再利用性が向上します。

まとめ

  • リファクタリングはコードの可読性と保守性を向上させるために必要です。
  • アンチパターンを理解し、実務での適用を避けることで、より良いコードを書くことができます。
  • バリデーションと計算を分割することで、関数の責任を明確にし、将来的な変更に強いコードを作成できます。
RELATED POST