【JavaScript】オブジェクトの配列を特定のプロパティで昇順にソートする方法

JavaScriptで開発をしていると、オブジェクトが格納された配列を、特定のプロパティの値を基準に並べ替えたい場面がよくあります。ここでは、次のようなオブジェクトの配列を例に、age プロパティの値に基づいて配列を昇順（小さい順）にソートする方法を解説します。

元データの配列

まず、次のようなオブジェクトの配列があるとします。

const people = [
    {"id":1, "name":"Andrew", "age":30, "gender":"m", "category":"G"},
    {"id":2, "name":"Brandon", "age":25, "gender":"m", "category":"G"},
    {"id":3, "name":"Christine", "age":20, "gender":"m", "category":"G"},
    {"id":4, "name":"Elena", "age":29, "gender":"W", "category":"M"}
];

この配列を受け取り、各オブジェクトの age プロパティの値が小さい順になるように、配列をその場で（in place）並べ替えるJavaScript関数を作成します。

期待される出力は次のとおりです。

const output = [
    {"id":3, "name":"Christine", "age":20, "gender":"m", "category":"G"},
    {"id":2, "name":"Brandon", "age":25, "gender":"m", "category":"G"},
    {"id":4, "name":"Elena", "age":29, "gender":"W", "category":"M"},
    {"id":1, "name":"Andrew", "age":30, "gender":"m", "category":"G"}
];

サンプルコード

以下が完全なコード例です。

const people = [
    {"id":1, "name":"Andrew", "age":30, "gender":"m", "category":"G"},
    {"id":2, "name":"Brandon", "age":25, "gender":"m", "category":"G"},
    {"id":3, "name":"Christine", "age":20, "gender":"m", "category":"G"},
    {"id":4, "name":"Elena", "age":29, "gender":"W", "category":"M"}
];
const sorter = (a, b) => {
    return a.age - b.age;
};
const sortByAge = arr => {
    arr.sort(sorter);
};
sortByAge(people);
console.log(people);

コードの解説

ポイントは Array.prototype.sort() に渡す比較関数（コンパレータ）です。比較関数は2つの要素を受け取り、次のような挙動をします。

• 負の値を返した場合：第1引数（a）が第2引数（b）より先に配置される
• 正の値を返した場合：第2引数（b）が第1引数（a）より先に配置される
• 0を返した場合：順序は変更されない

a.age - b.age のように数値の差を返すことで、結果が負なら a が先、正なら b が先となり、昇順のソートが実現します。降順にしたい場合は b.age - a.age と順序を入れ替えるだけで対応できます。

実行結果

このコードを実行すると、コンソールには次のように出力されます。

[
    { id: 3, name: 'Christine', age: 20, gender: 'm', category: 'G' },
    { id: 2, name: 'Brandon', age: 25, gender: 'm', category: 'G' },
    { id: 4, name: 'Elena', age: 29, gender: 'W', category: 'M' },
    { id: 1, name: 'Andrew', age: 30, gender: 'm', category: 'G' }
]

age の値が小さい順（20 → 25 → 29 → 30）に並べ替えられていることが確認できます。

補足：元の配列を保持したい場合

sort() は元の配列を直接変更する破壊的メソッドです。元の配列をそのまま残しておきたい場合は、ES2023で追加された toSorted() を使うか、スプレッド構文で配列をコピーしてからソートしましょう。

// toSorted() を使う例（元の配列は変更されない）
const sorted = people.toSorted((a, b) => a.age - b.age);

// スプレッド構文でコピーしてからソートする例
const sorted2 = [...people].sort((a, b) => a.age - b.age);

用途に応じて使い分けることで、意図しないデータの書き換えを防ぐことができます。