JavaScriptで順序番号を持つ値から正しくソートされた配列を作成する方法

画像のパスと表示順序を示す番号がカンマで連結された文字列の配列を扱う場面は、Web開発ではよくあります。例えば、次のようなデータを想定してみましょう。

const images = [
    'photo1.jpg,0',
    'photo2.jpg,2',
    'photo3.jpg,1'
];

各要素は「ファイルパス, 順序番号」の形式になっています。この場合、順序番号に従って並べ替えると、正しい順序は photo1 → photo3 → photo2 となります。

そこで必要な処理は、この文字列の配列を順序番号に基づいてソートし、最終的にはパスだけを抜き出した配列に変換することです。つまり、以下のような結果を目指します。

const orderedImages = [
    'photo1.jpg',
    'photo3.jpg',
    'photo2.jpg'
]

それでは、この画像配列を正しい順序に並べ替えるコードを実際に書いてみましょう。

コード例

const images = [
    'photo1.jpg,0',
    'photo2.jpg,2',
    'photo3.jpg,1'
];

// カンマで分割し、順序番号同士を比較してソートする比較関数
const sorter = (a, b) => {
    return parseInt(a.split(",")[1]) - parseInt(b.split(",")[1]);
};

// 元の配列を壊さずにソートし、パス部分だけを抽出して返す関数
const sortArray = arr => {
    return arr
        .slice()
        .sort(sorter)
        .map(el => {
            return el.split(",")[0];
        });
};

console.log(sortArray(images));

実行結果

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

[ 'photo1.jpg', 'photo3.jpg', 'photo2.jpg' ]

コードのポイント

sorter 関数： 各文字列を split(",") で分割し、2番目の要素（順序番号）を parseInt() で数値化して差分を返します。これにより、Array.prototype.sort() が数値として正しく比較できるようになります。文字列のまま比較すると意図しない順序になるため、必ず数値への変換が必要です。

slice() の使用： slice() を呼び出すことで元の配列のコピーを作成しています。sort() は元の配列を直接変更（破壊的操作）するため、元データを保持したい場合にこのテクニックが有効です。

map() による抽出： ソート後の配列に対して map() を使い、各要素からパス部分（カンマより前の部分）だけを取り出しています。これにより、順序番号を含まないクリーンな配列が完成します。

この手法は、画像カルーセルやギャラリーなど、表示順序をデータ側で制御したい場面で幅広く応用できます。