JavaScriptで配列の数値を0〜100のスケールに正規化する方法

例えば、複数の数値を含む配列があるとします。ここでの課題は、その配列を受け取り、すべての値を0〜100の範囲に相対的にマッピングする関数を作成することです。

具体的には、配列内の最大値は100に、最小値は0に置き換えられ、それ以外の値は最大値と最小値の差（レンジ）に対する比率に基づいて、0〜100の間の対応する数値へと変換されます。

この手法はデータの正規化（min-maxスケーリング）と呼ばれ、グラフ描画やデータ比較など、異なるスケールの値を揃えたい場面でよく活用されます。

実装コード

const numbers = [45.71, 49.53, 18.5, 8.38, 38.43, 28.44];
const mapNumbers = (arr) => {
    const max = Math.max(...arr);
    const min = Math.min(...arr);
    const diff = max - min;
    return arr.reduce((acc, val) => acc.concat((100/diff)*(val-min)), []);
};
console.log(mapNumbers(numbers));

コードの解説

• Math.max(...arr) / Math.min(...arr)：スプレッド構文を使って、配列全体の中から最大値と最小値を取得します。
• diff：最大値と最小値の差、つまりデータの範囲（レンジ）です。
• (100 / diff) * (val - min)：各値から最小値を引いて0を基準に揃えたうえで、範囲に対する割合を100倍することで、0〜100のスケールへ変換しています。
• reduce()：初期値として空配列を渡し、計算結果を順に新しい配列へ追加していきます。

出力結果

コンソールには以下のように出力されます。

[
    90.71688942891859,
    100,
    24.59295261239368,
    0,
    73.02551640340218,
    48.74848116646417
]

ご覧のとおり、元の配列で最も大きかった 49.53 は 100 に、最も小さかった 8.38 は 0 に変換され、残りの値もそれぞれの比率に応じて適切な数値へマッピングされています。