JavaScriptで配列を昇順・降順に並び替える方法【数値・文字列・オブジェクト対応】

JavaScriptで配列を並び替えるときは、sort()メソッドを使います。
ただし、そのまま使うと数値が文字列として並び替えられてしまうという落とし穴があります。
この記事では、昇順・降順の正しい並び替え方法から、文字列やオブジェクト配列の並び替えまで、初心者でも分かるように解説します。

1. 配列の基本的な並び替え方法
2. 数値を昇順に並び替える方法
- 2.1. 比較関数とは？
  - 2.1.1. 比較関数の仕組み
  - 2.1.2. 例：昇順の場合
3. 数値を降順に並び替える方法
4. 文字列を昇順・降順に並び替える方法
- 4.1. 日本語の例
5. オブジェクト配列を特定のキーで並び替える方法
6. 元配列を変えたくない場合の対処法
7. まとめ
8. FAQ

配列の基本的な並び替え方法

JavaScriptではsort()メソッドを使って配列を並び替えます。

const numbers = [3, 1, 4, 1, 5, 9];
numbers.sort();
console.log(numbers); // [1, 1, 3, 4, 5, 9] ではなく [1, 1, 3, 4, 5, 9] になることもある

一見正しく並び替えられているようですが、例えば [1, 2, 10] をソートすると次のようになります。

const numberList = [1, 2, 10];
numberList.sort();
console.log(numberList); // [1, 10, 2] ← 数値なのにおかしい

これは、sort()がデフォルトで文字列として比較しているためです。

数値を昇順に並び替える方法

数値を正しく昇順に並べたい場合は、比較関数を使います。

const numberList = [3, 1, 4, 1, 5, 9];
numberList.sort((firstNumber, secondNumber) => firstNumber - secondNumber);
console.log(numberList); // [1, 1, 3, 4, 5, 9]

firstNumber - secondNumberが負 → firstNumberが先
firstNumber - secondNumberが正 → secondNumberが先
0 → 順序そのまま

比較関数とは？

JavaScriptのsort()メソッドに渡す「2つの値を比べて、どちらを先にするかを決めるための関数」のことです。

sort()は、配列の中の要素を2つずつ取り出して比較し、順序を決めていきます。
このとき、順序の決め方を自分で指定できるのが「比較関数」です。

比較関数の仕組み

比較関数は、次の3つの結果によって並び替えを決めます。

負の値を返したとき → 1番目の値を先にする
正の値を返したとき → 2番目の値を先にする
0を返したとき → 順序を変えない

例：昇順の場合

const numberList = [3, 1, 4]; 
numberList.sort((firstNumber, secondNumber) => { return firstNumber - secondNumber; });

firstNumber – secondNumber が負 → firstNumber の方が小さい → 順番そのまま
firstNumber – secondNumber が正 → firstNumber の方が大きい → 順番入れ替え

数値を降順に並び替える方法

const numberList = [3, 1, 4, 1, 5, 9];
numberList.sort((firstNumber, secondNumber) => secondNumber - firstNumber);
console.log(numberList); // [9, 5, 4, 3, 1, 1]

文字列を昇順・降順に並び替える方法

文字列はデフォルトのsort()でabc順の昇順になります。

const fruitList = ["banana", "apple", "cherry"];
fruitList.sort(); // 昇順（辞書順）
console.log(fruitList); // ["apple", "banana", "cherry"]

fruitList.sort((firstFruit, secondFruit) => secondFruit.localeCompare(firstFruit)); // 降順
console.log(fruitList); // ["cherry", "banana", "apple"]

日本語の例

日本語や大文字小文字を考慮する場合はlocaleCompare()を使うと正確です。

const wordList = ["さくら", "あおい", "かえで"];
wordList.sort((firstWord, secondWord) => firstWord.localeCompare(secondWord, 'ja'));
console.log(wordList); // ["あおい", "かえで", "さくら"]

オブジェクト配列を特定のキーで並び替える方法

オブジェクト配列は、比較関数の中で並び替えに使用するキーを指定します。

const userList = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 20 },
  { name: "Charlie", age: 30 }
];
userList.sort((firstUser, secondUser) => firstUser.age - secondUser.age); // 年齢昇順
console.log(userList);

元配列を変えたくない場合の対処法

sort()は破壊的メソッドなので、元配列が変わります。
元配列を残したい場合はslice()やスプレッド構文で、コピーしてから並び替えします。

const numberList = [3, 1, 4];
const sortedNumberList = [...numberList].sort((a, b) => a - b);

console.log(numberList);       // 元の配列: [3, 1, 4]
console.log(sortedNumberList); // 昇順: [1, 3, 4]

破壊的メソッドとは？

「破壊的メソッド」とは、元の配列やオブジェクトを直接変更してしまうメソッドのことです。
つまり、処理を実行すると新しい配列を返すのではなく、もともとの配列の中身が書き換わるメソッドです。

`sort()` の場合

const numberList = [3, 1, 4];
numberList.sort((a, b) => a - b);

console.log(numberList); // [1, 3, 4] ← 元の配列が書き換わっている

sort()は新しい配列を作らず、numberListそのものを並び替えます。
これが「破壊的メソッド」です。

非破壊的メソッドとの違い

一方、「非破壊的メソッド」は元の配列を変更せず、新しい配列を返すメソッドです。
例：map() は非破壊的メソッド

const numberList = [3, 1, 4];
const doubledList = numberList.map(num => num * 2);

console.log(numberList); // [3, 1, 4] ← 元の配列はそのまま
console.log(doubledList); // [6, 2, 8] ← 新しい配列ができる

破壊的メソッドの注意点

元のデータを残したいときに破壊的メソッドを使うと、思わぬ不具合の原因になります。
対策としては、コピーを作ってから処理するのが安全です。

const numberList = [3, 1, 4];
const sortedList = [...numberList].sort((a, b) => a - b);

console.log(numberList); // [3, 1, 4] （元の配列はそのまま）
console.log(sortedList); // [1, 3, 4] （並び替え後）

つまり、
破壊的メソッド → 元の配列を直接いじる
非破壊的メソッド → 新しい配列を返す
という違いです。

まとめ

sort()は配列を並び替えるメソッドだが、比較関数を使わないと数値は正しく並ばない
比較関数 (a, b) => a - b で昇順、 (a, b) => b - a で降順
文字列は localeCompare() で正確に並び替えられる
sort()は破壊的メソッドなので、元の配列が変更される
元の配列を残すなら、コピーしてから並び替えする

以上、配列をソートするメソッド、sort()メソッドについて解説しました。ぜひ、使ってみてください！

FAQ

`sort()`メソッドで数値配列を直接ソートすると、なぜ意図しない結果になるのでしょうか？

`sort()`メソッドはデフォルトで文字列として比較を行うためです。そのため、数値「10」は「1」よりも「小さい」と判断され、正しく数値順にソートされません。

数値配列を昇順にソートするには、どのような比較関数を`sort()`メソッドに渡せばよいですか？

`(a, b) => a - b` という比較関数を渡します。この関数では、aとbの差を返し、負の値であればaをbより前に、正の値であればbをaより前に配置します。

数値配列を降順にソートするにはどうすればよいですか？

`(a, b) => b - a` という比較関数を渡します。これは昇順の比較関数の逆で、bとaの差を返すことで降順ソートを実現します。

オブジェクト配列を特定のプロパティでソートするにはどうすればよいですか？

オブジェクト配列の特定のプロパティに基づいてソートするには、比較関数内でそのプロパティにアクセスし、数値の場合と同様に差を計算して返します。例えば、`objects.sort((a, b) => a.property - b.property)` は`property`プロパティの数値で昇順にソートします。

比較関数の引数`firstNumber`と`secondNumber`は何を表していますか？

`sort()`メソッドは配列の要素を2つずつ取り出し、比較関数に渡します。`firstNumber`と`secondNumber`はそれぞれ、その2つの要素を表す変数です。比較関数はこれらの値を比較し、ソートの順序を決定します。