JavaScriptのArray.sort()メソッドで配列を自在に並び替えよう【初心者必見】

2024-05-02

当サイトでは一部リンクに広告が含まれています

配列に含まれるデータを特定の順番で並び替えたいとき、どうしていますか？
JavaScriptには配列の要素を並び替える専用のメソッドが用意されているのをご存知でしょうか。

それが今回ご紹介する「Array.sort()」メソッドです。

sortメソッドを使いこなせば、数値や文字列はもちろん、オブジェクトの配列まで思い通りに並び替えることができます。

しかし、初心者にとってsortメソッドの使い方は少しわかりにくい部分があるのも事実。
比較関数の書き方につまずいてしまう人も多いのではないでしょうか。

そこで本記事では、sortメソッドについて以下の内容を初心者向けにわかりやすく解説します。

Array.sort()メソッドの基本的な使い方
比較関数の書き方と具体例
数値、文字列、オブジェクトの配列の並び替え方
昇順・降順の並び替えパターン
破壊的メソッドであることの注意点

初心者でもsortメソッドを使いこなせるようになるよう、丁寧に解説していきますので、ぜひ最後までお付き合いください！

この記事を書いた人

未経験からWebエンジニアとして転職成功（年収 30% アップ）
現役のフルスタックエンジニアとして活躍中
開発チームリーダーとして複数プロジェクトをリード
副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ

Array.sort()メソッドとは

まずはArray.sort()メソッドの概要について押さえておきましょう。

sort()メソッドは、配列の要素を並び替える（ソートする）ためのメソッドです。
配列に対して呼び出すことで、その配列自体が並び替えられます。

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

配列.sort(比較関数)

比較関数を省略した場合、配列の要素を文字列に変換してからUnicode順で並び替えします。
つまり、デフォルトでは文字列としての辞書順ソートが行われます。

文字列の配列を並び替える

具体的に見ていきましょう。
次の例は、文字列の配列に対してsort()メソッドを呼び出しています。

const fruits = ['banana', 'apple', 'orange', 'grape'];

fruits.sort();

console.log(fruits);
// ["apple", "banana", "grape", "orange"]

配列の要素がアルファベット順に並び替えられているのがわかります。
これが比較関数を指定しない場合のsort()メソッドの基本動作です。

数値の配列はそのままでは正しく並び替えられない

一方、数値の配列に対してsort()メソッドを呼び出すとどうなるでしょうか。

const numbers = [3, 1, 10, 2, 5];

numbers.sort();

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

期待していた数値の大小順ではなく、奇妙な並び順になってしまいました。

これは、sort()メソッドが数値も文字列に変換してから並び替えるためです。
数値の「1」と「10」を文字列として比較すると、「10」の方が先になるのです。

数値の配列を数値の大小で正しく並び替えるには、比較関数を指定する必要があります。

比較関数の書き方

ここからは、sort()メソッドで使う比較関数の書き方について解説します。

比較関数とは

比較関数とは、sort()メソッドが並び替えのために、二つの要素を比較するために呼び出す関数のことです。

比較関数は二つの引数を取り、その返り値によって並び替えの順序が決まります。
引数として渡される二つの値を仮にaとbとすると、次のようになります。

比較関数がマイナスの値を返す → aをbより小さいインデックスに並べる（aが先）
比較関数が0を返す → aとbの順序を変えない
比較関数がプラスの値を返す → bをaより小さいインデックスに並べる（bが先）

この仕組みを使って、配列の要素を目的に応じて並び替えるのです。

数値の昇順ソートの比較関数

それでは、具体的な比較関数の例を見ていきましょう。
まずは、数値の配列を昇順（小さい順）に並び替える比較関数です。

const numbers = [3, 1, 10, 2, 5];

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

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

アロー関数を使って、引数a, bの差を返すだけのシンプルな比較関数です。

これにより、配列numbersの要素が昇順（小さい順）に並び替えられました。
aがbより小さい場合は負の値が返されるので、aが先に来るようになるわけですね。

数値の降順ソートの比較関数

次に、降順（大きい順）で並び替えるにはどうすればよいでしょうか。

const numbers = [3, 1, 10, 2, 5];

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

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

比較関数の返り値を逆にするだけで、降順（大きい順）で並び替えることができました。
bがaより大きい場合は正の値が返されるので、bが先に来るようになります。

文字列の辞書順ソートの比較関数

文字列を辞書順（アルファベット順）で並び替える場合はどうでしょうか。

const fruits = ['banana', 'apple', 'orange', 'grape'];

fruits.sort((a, b) => {
    if (a < b) return -1;
    if (a > b) return 1;
    return 0;
});

console.log(fruits);
// ["apple", "banana", "grape", "orange"]

aがbより小さければ負の値（-1）を、aがbより大きければ正の値（1）を返すようにしています。
辞書順というルールに従って、文字列をアルファベット順に並び替えることができました。

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

次に、オブジェクトの配列をsort()メソッドで並び替える方法を見ていきましょう。

以下のような、商品名と価格を持つオブジェクトの配列があるとします。

const products = [
  { name: 'Book', price: 1000 },
  { name: 'Pen', price: 500 },
  { name: 'Notebook', price: 800 },
  { name: 'Eraser', price: 200 },
];

オブジェクトの特定のプロパティで並び替える

このproductsの配列を、priceの値で昇順に並び替えてみましょう。

products.sort((a, b) => a.price - b.price);
console.log(products);
// [
//   { name: 'Eraser', price: 200 },
//   { name: 'Pen', price: 500 },
//   { name: 'Notebook', price: 800 },
//   { name: 'Book', price: 1000 }
// ]

比較関数の中で、オブジェクトのpriceプロパティにアクセスして比較しています。
これにより、products配列の要素が価格の安い順に並び替えられました。

nameのアルファベット順で並び替えたい場合は、次のようにします。

products.sort((a, b) => {
    if (a.name < b.name) return -1;
    if (a.name > b.name) return 1;
    return 0;
});
console.log(products);
// [
//   { name: 'Book', price: 1000 },
//   { name: 'Eraser', price: 200 },
//   { name: 'Notebook', price: 800 },
//   { name: 'Pen', price: 500 }
// ]

比較関数の中でオブジェクトのnameプロパティを使って辞書順に比較するようにしました。
これで、商品名のアルファベット順にproducts配列が並び替えられます。

sort()メソッドは破壊的メソッド

sort()メソッドには注意点があります。
それは、元の配列を直接変更してしまう破壊的メソッドであるという点です。

const numbers = [3, 1, 10, 2, 5];
const sortedNumbers = numbers.sort((a, b) => a - b);
console.log(numbers);
// [1, 2, 3, 5, 10]
console.log(sortedNumbers);
// [1, 2, 3, 5, 10]

この例では、numbers配列に対してsort()メソッドを呼び出した結果を新しい変数sortedNumbersに代入しています。
しかし、元のnumbers配列も並び替えられてしまっているのがわかります。

配列のコピーを作ってからsort()メソッドを呼び出すなど、元の配列を保持したい場合は注意が必要です。

sort()メソッドのまとめ

sort()メソッドについてポイントをおさらいしておきましょう。

Array.sort()メソッドは配列の要素を並び替える（ソートする）
デフォルトでは文字列として辞書順（アルファベット順）で並び替える
数値やオブジェクトを正しく並び替えるには比較関数が必要
比較関数の返り値でaとbの順序が決まる（負ならa、0なら同じ、正ならb）
オブジェクトの配列は特定のプロパティで比較する
sort()メソッドは元の配列を直接変更してしまうので注意が必要

まとめ

JavaScriptのArray.sort()メソッドについて、初心者向けに詳しく解説してきました。

数値や文字列の配列を並び替えるだけでなく、オブジェクトの配列も自在に並び替えられるのがおわかりいただけたと思います。
比較関数の書き方を理解すれば、応用の幅が大きく広がります。

配列操作においては頻出のsortメソッド、ぜひマスターしてJavaScriptコーディングに役立ててください！

JavaScript を挫折せず学習するならプログラミングスクールがおすすめ！

この記事を読んでくれた方は、JavaScript を学習中、もしくは使い始めている人かと思います。
ただ、JavaScript は「知らないと困る知識・コツ」が多く、私も最初は苦労しました…。

そのため確実に就職・転職を目指すのならばプログラミングスクールでの学習を検討してみませんか？

JavaScript はフロントエンドのすべてに通じますので、体系的に学んでおくと給与アップにもつながりますよ。

おすすめのプログラミングスクールについては、別の記事でまとめていますので是非ご覧ください。

現役のエンジニア兼プログラミングスクール講師として、自信を持っておすすめできるスクールだけを紹介しています！

Muscle Coding

【2024年5月】JavaScriptのおすすめプログラミングスクール7選！現役エンジニアが解説 | Muscle Coding JavaScriptを学べるプログラミングスクールの中でも特におすすめのスクールを現役エンジニアが詳しく解説します。料金、給付金、受講期間、サポート、チーム開発、など、各…