配列を小さい順・大きい順に並べ替えたい場面はよくあります。JavaScript では sort() メソッドを使いますが、何も考えずに数値の配列へ使うと「思った順番に並ばない」という落とし穴があります。この記事では、sort() の基本から、数値・文字列・オブジェクトの配列を正しく並べ替える方法までを、初心者の方にも分かるように解説します。
目次
sort() とは
sort() は、配列の要素を並べ替えるメソッドです。引数なしで呼び出すと、各要素を文字列として比較し、辞書順（文字コード順）に並べ替えます。まずは文字列の配列で試してみましょう。
const fruits = ["banana", "apple", "cherry"];
fruits.sort();
console.log(fruits); // ["apple", "banana", "cherry"]アルファベット順にきれいに並びました。ここで注意したいのが、sort() は元の配列そのものを並べ替えて変更する（破壊的メソッド）という点です。戻り値も並べ替え後の同じ配列なので、元の順番を残しておきたい場合は後述するコピーが必要です。
数値の並べ替えには比較関数が必要
数値の配列を引数なしの sort() で並べ替えると、直感に反する結果になります。これは要素が文字列に変換されてから比較されるためです。
const nums = [10, 1, 21, 3];
nums.sort();
console.log(nums); // [1, 10, 21, 3] ← 数値の大小では並ばない“10” と “3” を文字列として比べると、先頭の文字 “1” が “3” より小さいため “10” が先に来てしまいます。数値として正しく並べ替えるには、sort() に比較関数を渡します。
const nums = [10, 1, 21, 3];
// 昇順（小さい順）
nums.sort((a, b) => a - b);
console.log(nums); // [1, 3, 10, 21]
// 降順（大きい順）
nums.sort((a, b) => b - a);
console.log(nums); // [21, 10, 3, 1]比較関数は2つの要素 a と b を受け取り、返り値の符号で並び順を決めます。仕組みを表にまとめると次のとおりです。
| 返り値 | 並び順の判断 |
|---|---|
| 負の数（< 0） | a を b より前に置く |
0 | a と b の順序を変えない |
| 正の数（> 0） | a を b より後ろに置く |
昇順の a - b は、a が小さいほど負の数になるので a が前に来ます。降順にしたいときは引き算の向きを逆にして b - a と書く、と覚えておくと迷いません。
オブジェクトの配列を並べ替える
実務でよくあるのが、オブジェクトの配列を特定のプロパティで並べ替えるケースです。比較関数の中で、比べたいプロパティ同士を計算します。
const users = [
{ name: "佐藤", age: 28 },
{ name: "鈴木", age: 19 },
{ name: "高橋", age: 34 },
];
// age（年齢）の小さい順に並べ替える
users.sort((a, b) => a.age - b.age);
console.log(users);
// [{name: "鈴木", age: 19}, {name: "佐藤", age: 28}, {name: "高橋", age: 34}]文字列のプロパティ（名前の五十音順など）で並べ替えたいときは、引き算ではなく文字列比較を使います。日本語を含む文字列なら localeCompare() を使うと、より自然な順序になります。
// name を文字列として昇順に並べ替える
users.sort((a, b) => a.name.localeCompare(b.name));localeCompare() は、前の文字列が後ろより先なら負の数、後なら正の数を返すため、そのまま比較関数の返り値として使えます。
元の配列を壊さずに並べ替える
前述のとおり sort() は元の配列を書き換えてしまいます。元の順番を残したまま並べ替えた結果だけ欲しいときは、スプレッド構文（[...array]）でコピーを作ってから sort() を呼びます。
const nums = [10, 1, 21, 3];
// コピーを並べ替えるので、元の nums は変わらない
const sorted = [...nums].sort((a, b) => a - b);
console.log(sorted); // [1, 3, 10, 21]
console.log(nums); // [10, 1, 21, 3]（元のまま）なお、新しいバージョンの JavaScript には、元の配列を変更せず並べ替え済みの新しい配列を返す toSorted() も追加されています。対応環境であれば、コピーを書かずに nums.toSorted((a, b) => a - b) と書くこともできます。
思った順に並ばないときに確認すること
数値なのに比較関数を渡していない
数値の配列が変な順番になる原因は、ほぼこれです。引数なしの sort() は文字列として比較するため、数値を扱うときは必ず (a, b) => a - b のような比較関数を渡しましょう。「数値の sort() には比較関数がいる」とセットで覚えておくと安全です。
並べ替えたのに結果が反映されない
「sort() したのに変わらない」と感じるときは、返り値を別の変数で受けようとして元の配列を見ているケースがあります。sort() は元の配列自体を並べ替えるので、const result = array.sort(...) としても result と array は同じ中身を指します。挙動を正しく理解したうえで、コピーが必要かどうかを判断してください。
まとめ
sort() は配列の並べ替えに欠かせないメソッドですが、比較関数の理解が正しく使うカギになります。要点を振り返っておきましょう。
- 引数なしの
sort()は文字列として辞書順に並べる - 数値は
(a, b) => a - b（昇順）／b - a（降順）の比較関数が必要 - オブジェクトはプロパティ同士を比較する。文字列は
localeCompare()が便利 sort()は元の配列を変更する。残したいなら[...array]でコピーする
比較関数の返り値の符号さえ押さえておけば、どんな配列でも思いどおりに並べ替えられます。データを表示する前のひと手間として、ぜひ活用してみてください。