JavaScript上級

上級 JavaScriptで学ぶリファクタリング｜練習問題編

 

導入

リファクタリングは、既存のコードを改善するプロセスであり、コードの可読性や保守性を向上させるために重要です。特に上級エンジニアにとって、リファクタリングは日常業務の一部であり、効率的な開発を実現するための鍵となります。この記事では、実際の業務で遭遇しやすい具体的なシチュエーションを通じて、リファクタリングの手法を学びます。

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

重要な概念の整理

リファクタリングは、機能を変更せずにコードを改善することを目的としています。主な目的は、コードの可読性を高め、バグを減少させ、将来的な変更を容易にすることです。リファクタリングの手法には、メソッドの抽出、変数名の変更、重複コードの削除などがあります。これらの手法を適切に用いることで、コードの品質を向上させることができます。

コード例（JavaScript）


function calculateOrderTotal(order) {
    let total = 0;
    order.items.forEach(item => {
        total += item.price * item.quantity;
    });
    if (order.discount) {
        total -= order.discount;
    }
    return total;
}

コードの行ごとの解説

  1. 関数名は `calculateOrderTotal` で、注文の合計金額を計算します。
  2. 引数 `order` は注文の詳細を含むオブジェクトです。
  3. 初期値 `total` を 0 に設定し、注文のアイテムをループ処理します。
  4. 各アイテムの価格と数量を掛け算し、合計に加算します。
  5. 割引がある場合は、合計から割引額を引きます。
  6. 最終的な合計金額を返します。

練習問題編

以下の練習問題に取り組み、リファクタリングのスキルを磨きましょう。

  1. 問題1: 上記の `calculateOrderTotal` 関数をリファクタリングして、アイテムの合計計算を別のメソッドに抽出してください。

    
function calculateItemTotal(item) {
    return item.price * item.quantity;
}

function calculateOrderTotal(order) {
    let total = 0;
    order.items.forEach(item => {
        total += calculateItemTotal(item);
    });
    if (order.discount) {
        total -= order.discount;
    }
    return total;
}
  2. 問題2: 割引が適用される場合の処理をリファクタリングして、より明確にしてください。

    
function calculateOrderTotal(order) {
    let total = order.items.reduce((sum, item) => sum + calculateItemTotal(item), 0);
    return total - (order.discount || 0);
}
  3. 問題3: このリファクタリングによって、どのような利点があるか説明してください。

    リファクタリングにより、コードの可読性が向上し、個々の機能が明確に分離されました。また、アイテムの合計計算が独立した関数として定義されたため、再利用性が高まり、今後の変更も容易になります。

まとめ

  • リファクタリングはコードの可読性と保守性を向上させる手法です。
  • 関数の抽出や処理の明確化を行うことで、より効率的なコードを書くことができます。
  • 実務におけるリファクタリングの重要性を理解し、日常的に実践することが求められます。
RELATED POST