JavaScript | 複数の既存配列返却関数を設定リストで一括ラップしてオブジェクト返却に変換するサンプルコード

JavaScript JavaScript
スポンサーリンク

では 複数の既存配列返却関数を設定リストで一括ラップしてオブジェクト返却に変換するサンプルコード を作ります。
チーム開発でもそのまま使えるテンプレートです。


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];
}

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];
}

function getPosition(element) {
  return [element.offsetLeft, element.offsetTop]; // x, y
}
JavaScript

2. ラップ関数テンプレート(再掲)

function wrapArrayToObject(fn, keys) {
  return function (...args) {
    const arr = fn(...args);
    if (!Array.isArray(arr)) {
      throw new Error("元関数が配列を返していません");
    }
    const obj = {};
    keys.forEach((key, index) => {
      obj[key] = arr[index];
    });
    return obj;
  };
}
JavaScript

3. 一括ラップ用の設定リスト

const functionsToWrap = [
  { fn: calcStats, keys: ["sum", "avg", "max", "min"], name: "calcStatsObj" },
  { fn: getUserScores, keys: ["math", "english", "science", "total"], name: "getUserScoresObj" },
  { fn: getPosition, keys: ["x", "y"], name: "getPositionObj" }
];
JavaScript

4. 一括ラップコード

const wrappedFunctions = {};

functionsToWrap.forEach(({ fn, keys, name }) => {
  wrappedFunctions[name] = wrapArrayToObject(fn, keys);
});

// 使用例
const stats = wrappedFunctions.calcStatsObj([10, 20, 30]);
console.log(stats); // { sum: 60, avg: 20, max: 30, min: 10 }

const user = { math: 80, english: 70, science: 90 };
const scores = wrappedFunctions.getUserScoresObj(user);
console.log(scores); // { math: 80, english: 70, science: 90, total: 240 }

const element = { offsetLeft: 50, offsetTop: 100 };
const pos = wrappedFunctions.getPositionObj(element);
console.log(pos); // { x: 50, y: 100 }
JavaScript

5. メリット(実務視点)

  1. 既存コードを壊さず安全にオブジェクト返却化
    • 元関数はそのまま残せる。
  2. チーム開発でも安全・保守性が高い
    • 呼び出し側は意味のある変数名で直感的にアクセス可能。
  3. 拡張が容易
    • 新しい関数を追加する場合は、設定リストに { fn, keys, name } を追加するだけ。
  4. APIレスポンスやUI描画にもそのまま活用可能

💡 応用アイデア

  • wrappedFunctions をそのまま APIレスポンス生成用のヘルパー にすることも可能。
  • 配列返却関数が大量にある場合でも、このテンプレートで一括リファクタリングが可能。
  • TypeScript で型を付けると、さらに安全性と補完が強化できる。
タイトルとURLをコピーしました