JavaScript | 配列で返している既存コードをオブジェクトにリファクタリングする実務的な例

JavaScript
スポンサーリンク

では次に、既存の配列返却関数を一括でオブジェクト返却にリファクタリングする具体例コード を作ります。
これは、チームで使えるテンプレートとしてそのまま利用可能です。


1. 元の配列返却関数例(複数ある想定)

// 既存の関数1
function calcStats(values) {
  const sum = values.reduce((a, b) => a + b, 0);
  const avg = sum / values.length;
  const max = Math.max(...values);
  const min = Math.min(...values);
  return [sum, avg, max, min]; // 配列で返却
}

// 既存の関数2
function getUserScores(user) {
  const math = user.math;
  const english = user.english;
  const science = user.science;
  const total = math + english + science;
  return [math, english, science, total]; // 配列で返却
}
JavaScript

2. リファクタリング済みオブジェクト返却テンプレート

// ユーティリティ:配列返却関数をオブジェクト返却に変換
// 既存の関数をオブジェクト形式でラップする

// 関数1:統計
function calcStatsObj(values) {
  const sum = values.reduce((a, b) => a + b, 0);
  const avg = sum / values.length;
  const max = Math.max(...values);
  const min = Math.min(...values);
  return { sum, avg, max, min }; // オブジェクトで返却
}

// 関数2:ユーザースコア
function getUserScoresObj(user) {
  const math = user.math;
  const english = user.english;
  const science = user.science;
  const total = math + english + science;
  return { math, english, science, total }; // オブジェクトで返却
}
JavaScript

3. 呼び出し側例(分割代入で直感的)

// 統計
const stats = calcStatsObj([10, 20, 30]);
const { sum, avg, max, min } = stats;
console.log(`合計: ${sum}, 平均: ${avg}, 最大: ${max}, 最小: ${min}`);

// ユーザースコア
const user = { math: 80, english: 70, science: 90 };
const scores = getUserScoresObj(user);
const { math, english, science, total } = scores;
console.log(`Math: ${math}, English: ${english}, Science: ${science}, Total: ${total}`);
JavaScript

4. 実務向けポイント

  1. 順序に依存しない
    [0][1] を覚える必要なし
  2. 拡張に強い
    → 新しいフィールドを返しても既存コードは壊れない
  3. APIレスポンス対応も容易
    { data: {...}, errors: [] } にラップ可能
  4. チームでの可読性・保守性アップ
    → 変数名をそのまま使えるのでレビューが楽

5. API連携向けラップ例

function getStatsApi(values) {
  const data = calcStatsObj(values);
  return { success: true, data, errors: [] };
}

function getUserScoresApi(user) {
  const data = getUserScoresObj(user);
  return { success: true, data, errors: [] };
}

// 呼び出し
const statsResponse = getStatsApi([10, 20, 30]);
console.log(statsResponse.data.avg); // 20

const userResponse = getUserScoresApi({ math: 80, english: 70, science: 90 });
console.log(userResponse.data.total); // 240
JavaScript

💡 まとめ

  • 既存の配列返却関数は、ラップ関数や直接書き換えでオブジェクト返却にリファクタリング可能
  • 呼び出し側も 分割代入+意味のある変数名 で直感的に使える
  • API設計・チーム開発・保守性の観点で安全

タイトルとURLをコピーしました