JavaScriptで配列をソートする方法：sort()とreverse()の使い方徹底解説

JavaScriptでは、sort()メソッドを使って配列を並べ替えることができます。sort()メソッドは配列の要素を昇順にソートします。ソートは「その場（in place）」で行われるため、元の配列自体が変更され、新しい配列は作成されません。

たとえば、名前のリストをユーザーにアルファベット順で表示したい場合など、配列を特定の順序で並べ替えたい場面はよくあります。目的に応じて、sort()関数でアルファベット順にソートしたり、reverse()関数で逆順にしたり、比較関数を組み合わせて独自のカスタムソートを実現したりできます。

この記事では、JavaScriptでsort()とreverse()を使って配列をソートする方法を詳しく解説します。

JavaScriptのsort()メソッドとは

JavaScriptのsort()メソッドは、配列内の値を読み取り、それらを昇順または降順で並べ替えます。数値や文字列を含む配列をソートできます。

基本的な構文は次のとおりです。

const values = [1, 2, 8, 9, 3];
values.sort();

このコードは「values」配列をソートします。ソートは元の配列に対して直接行われるため、元の配列が変更されます。sort()は新しい配列を作成しない点に注意してください。

また、sort()の結果を新しい変数に代入しても、元の配列は依然として変更されてしまいます。元の配列を保持したい場合は、スプレッド構文やslice()などで配列のコピーを作成してからソートするとよいでしょう。

JavaScriptでの配列ソートの基本例

JavaScriptで配列をソートするには、組み込みのsort()メソッドを使用します。最もシンプルな形式では、配列を昇順のアルファベット順にソートします。以下は実行例です。

var students = ['Alex', 'Cathy', 'Lincoln', 'Jeff'];
var sorted_students = students.sort();

console.log(sorted_students);

このコードの出力は次のとおりです。

["Alex", "Cathy", "Jeff", "Lincoln"]

配列が昇順にソートされました。「students」という変数に対してsort()メソッドを呼び出し、その結果をコンソールに出力しています。

数値配列をソートする

sort()メソッドを使うと、数値のリストを昇順に並べ替えることもできます。たとえば、生徒の成績のリストを昇順にソートしてみましょう。

var grades = [67, 75, 62, 78];
grades.sort();

console.log(grades);

出力：

[62, 67, 75, 78]

配列が昇順にソートされました。プログラムがsort()を実行すると、配列内の要素が値に基づいて並べ替えられます。sort()は元の配列を直接変更するため、結果を新しい変数に代入する必要はありません。

数値を正しくソートするには比較関数が必要

ここで重要な注意点があります。デフォルトのsort()は要素をいったん文字列に変換してから比較するため、桁数が異なる数値では期待どおりの結果にならないことがあります。たとえば [9, 80, 100] をそのままソートすると [100, 80, 9] となってしまいます。数値を正しく昇順ソートするには、比較関数を渡します。

var numbers = [9, 80, 100];
numbers.sort(function(a, b) {
	return a - b;
});

console.log(numbers); // [9, 80, 100]

比較関数が負の値を返した場合はaがbの前に、正の値を返した場合はbがaの前に配置されます。降順にしたい場合は b - a を返すようにすればOKです。

オブジェクトの配列をソートする

sort()メソッドは、オブジェクトの配列をソートするためにも使えます。たとえば、生徒の名前と年齢を格納したJSONオブジェクトの配列があるとしましょう。

以下は、生徒の年齢に基づいて配列をソートする例です。

var students = [
	{ name: "Alex", age: 16 },
	{ name: "Cathy", age: 14 },
	{ name: "Lincoln", age: 14 },
	{ name: "Jeff", age: 15 }
];

var sorted_students = students.sort(function(a, b) {
	return a.age - b.age;
});

console.log(sorted_students);

出力：

[
  { "name": "Cathy", "age": 14},
  { "name": "Lincoln", "age": 14},
  { "name": "Jeff", "age": 15},
  { "name": "Alex", "age": 16}
]

コードの最初の行で、4人の生徒を含む「students」変数を宣言しています。次に、各オブジェクトの「age」プロパティを比較することで、生徒を年齢順にソートする関数を作成しています。最後に、ソート済みの生徒リストをコンソールに出力しています。

配列を降順（逆順）にソートする

JavaScriptには、配列を逆順に並べ替えるための組み込みメソッドreverse()もあります。

reverse()メソッドは配列を反転させ、最初の要素が最後になり、最後の要素が最初になります。つまり、このメソッド単体ではアルファベットの降順にソートするわけではない点に注意してください。

まずsort()メソッドでリストをソートしてからreverse()を使えば、配列を降順で表示できます。以下は使用例です。

var students = ['Alex', 'Cathy', 'Lincoln', 'Jeff'];
var reversed_students = students.reverse();

console.log(reversed_students);

出力：

["Jeff", "Lincoln", "Cathy", "Alex"]

まずsort()でリストを昇順にソートし、次にreverse()でリストを反転させることで、名前がアルファベット降順で表示されます。

reverse()もsort()と同様に、元の配列の順序を変更します。元の配列を変更せずに結果を取得したい場合は、あらかじめ配列のコピーを作成しておきましょう。

まとめ

JavaScriptのsort()メソッドは、配列の内容を昇順または降順に並べ替えます。sort()は元の配列を直接変更するため、新しい配列は作成されません。また、sort()の後にreverse()を使うと、リストを降順にソートできます。

この記事では、sort()を使った配列ソートの基本から、数値配列のソート、オブジェクト配列のソート、そしてreverse()を使った配列の反転までを解説しました。これらのメソッドを活用すれば、さまざまなデータを思いどおりの順序で扱えるようになります。