【JavaScript】配列の先頭要素との差分（＋／－）を文字列配列として構築する方法

問題

正の整数のみを含む配列を受け取り、その各要素を「文字列型の整数」へ変換した新しい配列を返すJavaScript関数を作成する必要があります。

この新しい配列には、配列の先頭の要素に対して、いくつ加算（または減算）すると対応する要素の値になるかを示す文字列を格納します。

たとえば、次のような入力が与えられた場合：

[4, 3, 6, 2]

期待される出力は以下のとおりです：

['+0', '-1', '+2', '-2']

解決のアプローチ

この問題は、各要素から先頭要素を引いた差分を計算し、その結果が0以上であれば「+」記号を付けて文字列化すれば解決できます。

ポイントは、負の数の場合です。JavaScriptでは数値を文字列に変換すると自動的に「-」記号が付くため、負の値については特別な処理を行う必要がありません。

コード例

以下が実際のコードです：

const arr = [4, 3, 6, 2];

const buildRelative = (arr = []) => {
    const res = [];
    let num = '';
    for (let i of arr) {
        if (i - arr[0] >= 0) {
            num += '+' + (i - arr[0]);
        } else {
            num += i - arr[0];
        }
        res.push(num);
        num = '';
    }
    return res;
};

console.log(buildRelative(arr));

出力結果

[ '+0', '-1', '+2', '-2' ]

コードの解説

• buildRelative関数：デフォルト引数として空の配列を受け取るアロー関数です。引数が省略された場合でもエラーにならない安全な設計になっています。
• for...ofループ：元の配列の各要素を先頭から順番に処理します。
• 差分の判定：現在の要素 i から先頭要素 arr[0] を引き、その結果が0以上であれば「+」記号を連結します。負の値の場合は、暗黙的な文字列変換によって自動的にマイナス記号が付きます。
• res.push(num)：整形した文字列を結果用の配列へ格納します。

より簡潔に書くなら：mapを使った別解

同じ処理は、Array.prototype.map() とテンプレートリテラルを組み合わせることで、より宣言的かつ短く記述できます。

const buildRelative = (arr = []) =>
    arr.map(i => i - arr[0] >= 0 ? `+${i - arr[0]}` : `${i - arr[0]}`);

console.log(buildRelative([4, 3, 6, 2]));
// [ '+0', '-1', '+2', '-2' ]

こちらの書き方は中間変数が不要になり、意図も読み取りやすいため、実務では推奨されるスタイルです。

まとめ

配列の先頭要素を基準とした相対的な差分を求める処理は、「各要素から基準値を引く」「正の値には+記号を付ける」というシンプルな手順で実現できます。for文による手続き的な実装と、mapを使った関数型的な実装の両方を理解しておくと、状況に応じて使い分けられるでしょう。