JavaScript中級

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

 

導入

リファクタリングは、コードの可読性や保守性を向上させるための重要な技術です。特に中級エンジニアにとって、既存のコードベースを改善する能力は、業務において大きな価値を持ちます。この記事では、具体的なシチュエーションを通じてリファクタリングの実践を学び、練習問題を通じて理解を深めます。

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

重要な概念の整理

リファクタリングは、機能を変更せずにコードを改善するプロセスです。目的は、コードの可読性を向上させ、将来的なバグを減少させることです。リファクタリングの基本的な手法には、関数の抽出、変数名の変更、重複コードの削除などがあります。特に、リファクタリングを行う際には、テストが重要です。既存のテストがあることで、リファクタリング後の動作確認が容易になります。

コード例（JavaScript）


// 例: ユーザーの情報を取得し、表示する関数
function getUserInfo(userId) {
    const user = database.find(user => user.id === userId);
    if (user) {
        console.log(`ユーザー名: ${user.name}`);
        console.log(`メール: ${user.email}`);
    } else {
        console.log('ユーザーが見つかりません');
    }
}

コードの行ごとの解説

  1. ユーザーIDを引数に取り、データベースからユーザー情報を検索します。
  2. ユーザーが見つかった場合、その名前とメールアドレスを表示します。
  3. ユーザーが見つからなかった場合、エラーメッセージを表示します。

練習問題編

以下にリファクタリングに関する練習問題を用意しました。各問題に対する模範解答と解説も記載しています。

  1. 問題1: 上記の関数をリファクタリングして、ユーザー情報をオブジェクトとして返すようにしてください。

    
function getUserInfo(userId) {
    const user = database.find(user => user.id === userId);
    return user ? { name: user.name, email: user.email } : null;
}

  2. 問題2: ユーザーが見つからなかった場合、エラーメッセージを返す関数を作成してください。

    
function getUserErrorMessage(userId) {
    const user = database.find(user => user.id === userId);
    return user ? null : 'ユーザーが見つかりません';
}

  3. 問題3: ユーザー情報の表示を別の関数に分割し、リファクタリングしてください。

    
function displayUserInfo(user) {
    console.log(`ユーザー名: ${user.name}`);
    console.log(`メール: ${user.email}`);
}

function getUserInfo(userId) {
    const user = database.find(user => user.id === userId);
    if (user) {
        displayUserInfo(user);
    } else {
        console.log('ユーザーが見つかりません');
    }
}

まとめ

  • リファクタリングはコードの可読性と保守性を向上させるための手法です。
  • 具体的なシチュエーションを通じて、リファクタリングの実践を学ぶことが重要です。
  • 練習問題を通じて、リファクタリングの理解を深めることができます。
RELATED POST