JavaScriptで配列要素を並べ替える方法｜sortメソッドの基本から比較関数まで徹底解説

JavaScriptには、配列を並べ替えるための強力な組み込みメソッドが用意されています。その中でも最もよく使われるのが sort() メソッドです。ただし、デフォルトの動作では要素が「文字列」として辞書順（アルファベット順）にソートされるという点に注意が必要です。

まずは文字列の配列を並べ替えてみましょう。

例：文字列配列のソート

let arr1 = ["Zebra", "Bear", "Tiger"];
arr1.sort();
console.log(arr1);

出力結果

[ 'Bear', 'Tiger', 'Zebra' ]

文字列の場合は期待通りにアルファベット順に並びました。次に、数値の配列を同じように並べ替えてみます。

例：数値配列をそのままソートした場合

let arr1 = [1, 8, 31, 21];
arr1.sort();
console.log(arr1);

出力結果

[ 1, 21, 31, 8 ]

結果は [ 1, 8, 21, 31 ] にはならず、意図しない順序になってしまいました。これは、sort() メソッドがデフォルトでは各要素を文字列に変換してから辞書順で比較するためです。

比較関数を使って正しく数値をソートする

思い通りの順序で並べ替えたい場合は、sort() に比較関数（compare function）を渡します。比較関数は2つの引数を受け取り、どちらが大きいか小さいかを判定し、その結果に基づいてソートを行います。

数値の配列を昇順に並べ替えるには、次のように記述します。

例：比較関数による数値ソート

let arr1 = [1, 8, 31, 21];
arr1.sort((a, b) => a - b);
console.log(arr1);

出力結果

[ 1, 8, 21, 31 ]

今度は期待通りの昇順になりました。降順にしたい場合は (a, b) => b - a とするだけでOKです。

オブジェクト配列のソートにも応用できる

この比較関数の仕組みは、より複雑なケース、たとえばオブジェクトの配列を特定のキーで並べ替える場合にも活用できます。以下は、人物オブジェクトを名前順にソートする例です。

例：オブジェクト配列を名前順にソート

let people = [{
    name: "Zoe",
    age: 35
}, {
    name: "Richard",
    age: 21
}, {
    name: "Agnes",
    age: 25
}];

people.sort((a, b) => {
    let nameA = a.name.toUpperCase(); // 大文字小文字を無視して比較
    let nameB = b.name.toUpperCase();
    if (nameA < nameB) {
        return -1;
    }
    if (nameA > nameB) {
        return 1;
    }
    return 0; // 名前が等しい場合
});
console.log(people);

出力結果

[ { name: 'Agnes', age: 25 },
{ name: 'Richard', age: 21 },
{ name: 'Zoe', age: 35 } ]

このように、比較関数の中身を工夫することで、年齢や複数のキーを組み合わせた並べ替えなど、さらに複雑な条件のソートにも柔軟に対応できます。return -1 で「aをbの前に配置」、return 1 で「bをaの前に配置」、return 0 で「順序を変更しない」というルールを覚えておくと理解しやすいでしょう。

元の配列を変更せずにソートする方法

sort() メソッドは元の配列を直接書き換える（in-place）点にも注意してください。元の配列の順序を保持したまま、新しいソート済み配列を作成したい場合は、まず slice() でコピーを作ってからソートするとよいでしょう。

const sortedArr = arr.slice(0).sort();

なお、ES2023以降では元の配列を変更しない toSorted() メソッドも利用できるため、環境が許す場合はこちらを使うのもおすすめです。