JavaScriptで2つの配列を合計した新しい配列の値を255に制限する方法

それぞれ3つの要素を持つ2つの配列があると仮定しましょう。各要素は、赤・緑・青（RGB）のカラー値を表す整数です。

ここでの課題は、対応する要素同士を加算して新しいRGBカラーの配列を作成することです。さらに、合計値が255を超える場合は、その値を255に制限する必要があります。

そこで、2つの配列を引数として受け取り、入力に基づいた新しい配列を返す関数 addColors() を定義してみましょう。

コード例

const color1 = [45, 125, 216];
const color2 = [89, 180, 78];
const addColors = (color1, color2) => {
    const newColor = color1.map((val, index) => {
        return val + color2[index] <= 255 ? val + color2[index] : 255;
    })
    return newColor;
};
console.log(addColors(color1, color2));

実行結果

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

[ 134, 255, 255 ]

仕組みの解説

このコードでは、map() を使って最初の配列を走査し、2つ目の配列の対応する値を加算しています。三項演算子により、合計値が255以下であればその値をそのまま返し、255を超えていれば255を返すようになっています。

このように addColors() 関数を利用すれば、RGBカラー値の上限を守りながら、2つの色を簡単かつ安全に合成することができます。