sortによる並び替え | 配列の並び替えと結合 | JavaScript 超完全入門 基本から発展までのすべて

amazon

スマイルSALE

--:--:--

～

検索

ad. 価格範囲を指定して商品を探せます

sortメソッドとは？

sort()メソッドは、JavaScriptで配列の要素を並び替えるためのメソッドです。文字列だけでなく数値やオブジェクトの配列も並び替えることができます。

なお、sort()は元の配列そのものを書き換える（破壊的メソッド）という特徴があります。元の配列を残したい場合は、コピーを作成してから並び替えを行います。

sortメソッドの基本的な使い方

const fruits = ["banana", "apple", "cherry", "date"];

// アルファベット順に並び替え
fruits.sort();

console.log(fruits);
// ["apple", "banana", "cherry", "date"]

この例では、文字列の配列がアルファベット順（Unicode順）に並び替えられます。

1. sort()を呼び出すと配列が並び替えられます。
2. 文字列はUnicode順で比較されます。
3. 元の配列が変更されます。

数値を並び替える

数値を並び替える場合は比較関数を指定する必要があります。比較関数を指定しない場合、数値は文字列として比較されるため、期待どおりの順番にならないことがあります。

比較関数を指定しない例

const numbers = [40, 100, 1, 5];

numbers.sort();

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

文字列として比較されるため、「100」が「40」より前に並んでしまいます。

数値を昇順に並び替える例

const numbers = [40, 100, 1, 5, 25, 10];

// 昇順に並び替え
numbers.sort(function(a, b) {
    return a - b;
});

console.log(numbers);
// [1, 5, 10, 25, 40, 100]

比較関数では、戻り値によって並び順が決まります。

1. 負の値ならaが前になります。
2. 0なら順番は変わりません。
3. 正の値ならbが前になります。

数値を降順に並び替える例

const numbers = [40, 100, 1, 5, 25, 10];

// 降順に並び替え
numbers.sort(function(a, b) {
    return b - a;
});

console.log(numbers);
// [100, 40, 25, 10, 5, 1]

b - aとすることで、大きい順に並び替えられます。

文字列を並び替える

文字列も簡単に並び替えられますが、大文字・小文字が混在している場合や日本語を扱う場合は、localeCompare()を利用すると自然な並びになります。

大文字・小文字を区別せずに並び替える例

const fruits = ["Banana", "apple", "cherry", "Date"];

// 大文字・小文字を区別しない
fruits.sort(function(a, b) {
    return a.toLowerCase().localeCompare(b.toLowerCase());
});

console.log(fruits);
// ["apple", "Banana", "cherry", "Date"]

localeCompare()は文字列比較専用のメソッドで、日本語などの多言語にも対応しています。

オブジェクトの配列を並び替える

オブジェクトの配列では、比較したいプロパティを指定して並び替えます。

オブジェクトの配列を並び替える例

const users = [
    { name: "John", age: 30 },
    { name: "Jane", age: 22 },
    { name: "Jack", age: 25 }
];

// 年齢で並び替え
users.sort(function(a, b) {
    return a.age - b.age;
});

console.log(users);

この例では、ageプロパティを基準として年齢順に並び替えています。

元の配列を変更したくない場合

sort()は元の配列を書き換えます。元の配列を保持したい場合は、スプレッド構文などでコピーを作成してから並び替えます。

const numbers = [3, 1, 2];

const sorted = [...numbers].sort(function(a, b) {
    return a - b;
});

console.log(numbers);
// [3, 1, 2]

console.log(sorted);
// [1, 2, 3]

このようにすると、元の配列は変更されません。

sortメソッドの動作まとめ

初心者がつまずきやすいポイント

• sort()は元の配列を書き換える。
• 数値は比較関数を書かないと文字列として比較される。
• 文字列の比較ではlocaleCompare()を利用すると自然な並びになる。
• オブジェクトは比較したいプロパティを指定して並び替える。
• 元の配列を保持したい場合はコピーしてから並び替える。

まとめ

• sort()は配列を並び替えるためのメソッドである。
• デフォルトでは文字列として比較される。
• 数値を並び替える場合は比較関数を指定する。
• オブジェクトもプロパティを指定すれば並び替えられる。
• sort()は元の配列を書き換えるため、必要に応じてコピーして利用する。
• localeCompare()を利用すると文字列をより自然な順番で比較できる。