TypeScript リファクタリング問題 1
// 計算を行う関数 function calc(a: number, b: number, c: string): number { if (c === 'add') { return a + b; } else if (c === 'subtract') { return a - b; } else if (c === 'multiply') { return a * b; } else if (c === 'divide') { return a / b; } else { return 0; } } // データを処理する関数 function processData(data: {name: string, age: number}[]): any { let result: any = {}; for (let i = 0; i < data.length; i++) { let d = data[i]; if (!result[d.name]) { result[d.name] = []; } result[d.name].push(d.age); } return result; } // ユーザー情報を出力する関数 function userInfo(users: {name: string, age: number}[]): void { for (let i = 0; i < users.length; i++) { console.log('User: ' + users[i].name + ', Age: ' + users[i].age); } } // メイン関数 function main() { const data = [ {name: 'Alice', age: 25}, {name: 'Bob', age: 30}, {name: 'Alice', age: 28}, ]; const result = processData(data); console.log(result); userInfo(data); const calcResult = calc(10, 5, 'add'); console.log('Calc Result: ' + calcResult); } main();
リファクタリングのポイント
calc
関数の条件分岐をリファクタリングして、コードの読みやすさを向上させる。
processData
関数の変数名をより意味のあるものに変更し、コメントを追加する。
userInfo
関数を短くし、重複コードを削減する。
- 各関数にコメントを追加して、何をするのかを明確にする。
リファクタリング後のスクリプト
// 演算タイプの列挙型を定義 enum Operation { Add = 'add', Subtract = 'subtract', Multiply = 'multiply', Divide = 'divide' } // 計算を行う関数 function calculate(a: number, b: number, operation: Operation): number { switch (operation) { case Operation.Add: return a + b; case Operation.Subtract: return a - b; case Operation.Multiply: return a * b; case Operation.Divide: return a / b; default: throw new Error('Invalid operation'); } } // データを処理する関数 function processUserData(users: {name: string, age: number}[]): Record<string, number[]> { const userAges: Record<string, number[]> = {}; for (const user of users) { if (!userAges[user.name]) { userAges[user.name] = []; } userAges[user.name].push(user.age); } return userAges; } // ユーザー情報を出力する関数 function printUserInfo(users: {name: string, age: number}[]): void { users.forEach(user => console.log(`User: ${user.name}, Age: ${user.age}`)); } // メイン関数 function main() { const users = [ {name: 'Alice', age: 25}, {name: 'Bob', age: 30}, {name: 'Alice', age: 28}, ]; const processedData = processUserData(users); console.log(processedData); printUserInfo(users); const calculationResult = calculate(10, 5, Operation.Add); console.log(`Calc Result: ${calculationResult}`); } main();
このリファクタリング後のスクリプトでは、コードの可読性とメンテナンス性が向上しています。条件分岐を列挙型とswitch文に置き換え、冗長なループを簡潔な配列メソッドに変更し、変数名をより意味のあるものに変更しました。また、適切なコメントを追加して、関数の目的を明確にしています。
TypeScript リファクタリング問題 2
// 配列を処理する関数 function processArray(arr: number[]): number[] { let newArray = arr; for (let i = 0; i < arr.length; i++) { if (arr[i] % 2 === 0) { newArray[i] = arr[i] * 2; } else { newArray[i] = arr[i] * 3; } } return newArray; } // 深いコピーを行う関数 function deepCopyArray(arr: any[]): any[] { return JSON.parse(JSON.stringify(arr)); } // ユーザー情報を変換する関数 function convertUserInfo(users: {name: string, age: number}[]): string[] { let result = []; for (let i = 0; i < users.length; i++) { result.push(users[i].name + ' is ' + users[i].age + ' years old.'); } return result; } // メイン関数 function main() { const array = [1, 2, 3, 4, 5]; const newArray = processArray(array); console.log('New Array:', newArray); console.log('Original Array:', array); const users = [ {name: 'Alice', age: 25}, {name: 'Bob', age: 30}, ]; const userInfo = convertUserInfo(users); console.log('User Info:', userInfo); const copiedArray = deepCopyArray(array); console.log('Copied Array:', copiedArray); } main();
リファクタリングのポイント
processArray
関数の配列の参照コピーを深いコピーに変更し、適切なreturn文を使用する。
convertUserInfo
関数の変数名をより意味のあるものに変更し、コメントを追加する。
deepCopyArray
関数を最適化し、直接的な配列コピーを行う。
- 各関数にコメントを追加して、何をするのかを明確にする。
リファクタリング後のスクリプト
// 配列を処理する関数 function processArray(arr: number[]): number[] { const newArray = arr.map(num => (num % 2 === 0 ? num * 2 : num * 3)); return newArray; } // 深いコピーを行う関数 function deepCopyArray(arr: any[]): any[] { return arr.map(item => (Array.isArray(item) ? deepCopyArray(item) : item)); } // ユーザー情報を変換する関数 function formatUserInfo(users: {name: string, age: number}[]): string[] { return users.map(user => `${user.name} is ${user.age} years old.`); } // メイン関数 function main() { const array = [1, 2, 3, 4, 5]; const newArray = processArray(array); console.log('New Array:', newArray); console.log('Original Array:', array); const users = [ {name: 'Alice', age: 25}, {name: 'Bob', age: 30}, ]; const userInfo = formatUserInfo(users); console.log('User Info:', userInfo); const copiedArray = deepCopyArray(array); console.log('Copied Array:', copiedArray); } main();
このリファクタリング後のスクリプトでは、配列の参照コピーの問題を解決し、各関数をより読みやすく、メンテナンスしやすくしています。また、適切な変数名とコメントを追加することで、コードの理解が容易になっています。