【JavaScript】sort – 配列の要素を並び替え

JavaScriptで配列の要素を並び替えたい場合、sort()メソッドを使用します。今回は、sort()の基本的な使い方から使用時の注意点までをまとめていきたいと思います。

目次非表示

sort()メソッドとは？
1. 基本構文
基本的な使い方
1. 文字列のソート（デフォルトの動作）
サンプルコード
使用時の注意点
1. 元の配列が変更される（破壊的処理）
2. sort()のデフォルト動作では、数値が文字列として扱われる
さいごに

sort()メソッドとは？

sort()メソッドは、配列の要素を並び替えるためのメソッドです。デフォルトでは、文字列として昇順で並び替えます。

基本構文

JavaScript

array.sort([compareFunction]);

パラメータ	説明
`compareFunction`	（省略可能）並び替えのルールを指定する関数

基本的な使い方

文字列のソート（デフォルトの動作）

JavaScript

const drinks = ['white mocha', 'espresso', 'cappuccino', 'americano'];
drinks.sort();

console.log(drinks); // americano, cappuccino, espresso, white mocha

sort()は、配列の要素を 文字列として昇順にソートして、console.logに表示します。

サンプルコード

数値を昇順にソート

JavaScript

const numbers = [40, 1, 5, 200];
numbers.sort((a, b) => a - b);

console.log(numbers); // [1, 5, 40, 200]

sort()のデフォルト動作では数値が文字列として扱われるため、意図しない順序になります。

JavaScript

console.log([40, 1, 5, 200].sort()); // [1, 200, 40, 5]（意図しない結果）

compareFunction を a - b にすることで、

a - bが負の値なら、aをbより前に配置
a - bが正の値なら、bをaより前に配置

数値を降順にソート

JavaScript

const numbers = [40, 1, 5, 200];
numbers.sort((a, b) => b - a);

console.log(numbers); // [200, 40, 5, 1]

オブジェクトの配列を数値順にソート

JavaScript

const users = [
  { name: 'Alex', age: 25 },
  { name: 'Jordan', age: 30 },
  { name: 'Taylor', age: 20 }
];

users.sort((a, b) => a.age - b.age);

console.log(users);
[// [object Object] 
{
  "name": "Taylor",
  "age": 20
},// [object Object] 
{
  "name": "Alex",
  "age": 25
},// [object Object] 
{
  "name": "Jordan",
  "age": 30
}]

a.age - b.ageを比較し、年齢が小さい順に並び替えて、console.logに20 → 25 → 30の順で表示される。

オブジェクトの配列を名前順（アルファベット順）にソート

JavaScript

const users = [
  { name: 'Alex', age: 25 },
  { name: 'Jordan', age: 30 },
  { name: 'Taylor', age: 20 }
];

users.sort((a, b) => a.name.localeCompare(b.name));

console.log(users);
[// [object Object] 
{
  "name": "Alex",
  "age": 25
},// [object Object] 
{
  "name": "Jordan",
  "age": 30
},// [object Object] 
{
  "name": "Taylor",
  "age": 20
}]

localeCompare()を使うと文字列の比較が適切に行われるので、console.logにAlex → Jordan → Taylor の順で表示される。

使用時の注意点

元の配列が変更される（破壊的処理）

sort()は元の配列を変更するため、ソート前の順番を保持したい場合はコピーを作成してから実行する。

JavaScript

const numbers = [10, 5, 8, 1];
const sortedNumbers = [...numbers].sort((a, b) => a - b);

console.log(numbers); // [10, 5, 8, 1]（元の配列は変更されない）
console.log(sortedNumbers); // [1, 5, 8, 10]（ソートされた新しい配列）