JavaScriptの配列の並べ替え（sortメソッド）の基本とカスタマイズ

先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで配列の中身を並べ替えたいんですけど、どうやったらいいですか？」

先生

「配列を並べ替えるなら、sortメソッドを使います。これを使うと、文字や数字を簡単に順番に並べることができますよ。」

生徒

「でも、自分の好きな順番に並べることもできますか？」

先生

「もちろんです！基本の使い方から、カスタマイズの方法まで一緒に見ていきましょう！」

1. sortメソッドとは？基本的な使い方

sortメソッドは、JavaScriptの配列を並べ替えるための命令です。文字や数字の並び順を変えられます。

例えば、文字の配列をアルファベット順に並べ替えたいときは、次のように書きます。


let fruits = ["バナナ", "りんご", "みかん"];

fruits.sort();

console.log(fruits);


["みかん", "バナナ", "りんご"]

文字列はUnicodeという規則で順番が決まるため、この例では「みかん」が先に来ています。

数字の配列にsortを使うと、文字として順番を比較するので、期待と違う結果になることがあります。

例えば、数字の配列を並べ替えたときの例を見てみましょう。


let numbers = [10, 5, 100, 1];

numbers.sort();

console.log(numbers);


[1, 10, 100, 5]

このように、「10」が「5」よりも先に来ています。これは文字として順番を比べているためです。

なので、数字を正しく並べ替えるには「比較関数」というものを使います。

sortメソッドは、並べ替えのルールを自分で決めるために「比較関数」という関数を使えます。この関数は２つの値を比べて、どちらが先か教えます。

数字を小さい順に並べたい場合は、次のように書きます。


let numbers = [10, 5, 100, 1];

numbers.sort(function(a, b) {
  return a - b;
});

console.log(numbers);


[1, 5, 10, 100]


let numbers = [10, 5, 100, 1];

numbers.sort(function(a, b) {
  return b - a;
});

console.log(numbers);


[100, 10, 5, 1]

これで数字を大きい順に並べることができました。

文字列も比較関数で好きな順番に並べ替えられます。日本語やアルファベットの順番を正しく比較するために localeCompare という便利な関数を使います。


let fruits = ["バナナ", "りんご", "みかん"];

fruits.sort(function(a, b) {
  return a.localeCompare(b);
});

console.log(fruits);


["バナナ", "みかん", "りんご"]

localeCompare は、言葉の並べ替えに適した比較をしてくれます。

JavaScriptでは、関数を短く書ける「アロー関数」という書き方があります。先ほどの数字の小さい順の比較関数は、こう書けます。


numbers.sort((a, b) => a - b);

簡単に書けて見やすいので慣れたらぜひ使ってみてください。

sortは元の配列を書き換えます。元のデータを残したい場合は、slice()メソッドで配列をコピーしてから使うのがおすすめです。


let numbers = [10, 5, 100, 1];
let sortedNumbers = numbers.slice().sort((a, b) => a - b);

console.log(numbers);
console.log(sortedNumbers);


[10, 5, 100, 1]
[1, 5, 10, 100]

元の配列は変わらず、新しい配列を並べ替えられます。