今日の開発Tips
Tips

開発Tips（2025-10-24）

オブジェクトの配列を特定のプロパティに基づいてソートする方法を解説します。`sort()` メソッドにカスタムの比較関数を提供することで、柔軟なソートが可能です。

JavaScript: Array.prototype.sort() を利用したオブジェクトのソート

オブジェクトの配列を特定のプロパティに基づいてソートする方法を解説します。sort() メソッドにカスタムの比較関数を提供することで、柔軟なソートが可能です。

オブジェクトのプロパティでソートする

Array.prototype.sort() メソッドは、デフォルトでは文字列として要素を比較します。オブジェクトの配列を数値や日付、文字列(大文字小文字区別なし)でソートする場合は、カスタムの比較関数を渡す必要があります。

const users = [
  { name: "Alice", age: 30 },
  { name: "Bob", age: 25 },
  { name: "Charlie", age: 35 },
];

// 年齢で昇順にソート
users.sort((a, b) => a.age - b.age);
console.log(users);
// 出力:
// [
//   { name: 'Bob', age: 25 },
//   { name: 'Alice', age: 30 },
//   { name: 'Charlie', age: 35 }
// ]

// 名前で昇順にソート
users.sort((a, b) => a.name.localeCompare(b.name));
console.log(users);
// 出力:
// [
//   { name: 'Alice', age: 30 },
//   { name: 'Bob', age: 25 },
//   { name: 'Charlie', age: 35 }
// ]

注意点:

  • sort() メソッドは元の配列を直接変更します。元の配列を保持したい場合は、事前にコピーを作成してください ([...array].sort() など)。
  • 比較関数は、a と b を比較して、a が b より小さい場合は負の数、等しい場合は 0、大きい場合は正の数を返す必要があります。
  • 数値でソートする場合は、a.age - b.age のように引き算を利用すると簡潔に記述できます。
  • 文字列でソートする場合は、 localeCompare() メソッドを使用することで、自然な並び順を実現できます(辞書順)。

おすすめポイント:

  • 複雑なソート条件も、比較関数を工夫することで実現可能です。例えば、複数のプロパティでソートしたり、降順でソートしたりできます。
  • lodashなどのライブラリには、より高度なソート機能を提供するユーティリティ関数があります。
Tips一覧へ戻る