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

JavaScript
スポンサーリンク

では、配列で返す関数をオブジェクトで返す形にリファクタリングする手順を、実務で使えるテンプレート付きでまとめます。チーム開発でもそのまま使える形です。


1. 配列→オブジェクトへのリファクタリング手順(ステップごと)


ステップ0:元の配列返却関数を確認

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]; // 配列で返している
}
JavaScript

ステップ1:返す値に意味を付ける

  • 配列のインデックスに頼らず、名前で値を取り出せるように設計する。
  • 配列 [sum, avg, max, min] → オブジェクト { sum, avg, max, min } に変換。

ステップ2:関数をオブジェクト返却に書き換える

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 }; // オブジェクトで返す
}
JavaScript

ステップ3:呼び出し側もオブジェクトの分割代入に変更

const { sum, avg, max, min } = calcStatsObj([10, 20, 30]);
console.log(sum, avg, max, min); // 60 20 30 10
JavaScript

ステップ4:拡張する場合も呼び出し側をほぼ修正不要

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);
  const median = values.sort((a, b) => a - b)[Math.floor(values.length / 2)];
  return { sum, avg, max, min, median }; // median を追加しても呼び出し側は柔軟
}

const { sum, avg, max, min, median } = calcStatsObj([10, 20, 30]);
console.log(sum, avg, max, min, median);
JavaScript

2. 実務テンプレート(チーム向け)

配列で返している関数をオブジェクト返却にリファクタリングする場合の基本形

// 1. 関数定義
function functionName(params) {
  // 必要な計算・処理
  const value1 = ...;
  const value2 = ...;
  // ...

  // 2. 配列ではなくオブジェクトで返す
  return { value1, value2, ... };
}

// 3. 呼び出し側(分割代入)
const { value1, value2 } = functionName(args);

// 4. 利点:順序依存なし・拡張しやすい・可読性が高い
JavaScript

ポイント(実務でのベストプラクティス)

  1. 順序に依存しない → チーム開発で安全。
  2. 意味を明確にする → 分割代入で変数名がそのままラベルになる。
  3. 拡張性が高い → 新しい戻り値を追加しても呼び出し側に影響が少ない。
  4. API連携にも最適data オブジェクトの形にそのまま組み込める。

応用例:APIレスポンス向けテンプレート

function getApiStats(values) {
  const { sum, avg, max, min } = calcStatsObj(values);
  return {
    success: true,
    data: { sum, avg, max, min },
    errors: []
  };
}

// 呼び出し
const response = getApiStats([10, 20, 30]);
if (response.success) {
  const { sum, avg, max, min } = response.data;
}
JavaScript
  • 実務でよくある形success / data / errors
  • 配列ではなくオブジェクトで返すことで、拡張・保守・チーム開発で安全

💡 まとめると、現場では

  1. 小さく単純な内部関数 → 配列でもOK
  2. チーム開発・API・拡張性のある処理 → オブジェクトで返す

が鉄板パターンです。

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