JavaScriptのsort()とは？配列の並び替えを基礎から徹底解説
JavaScriptのsort()は、配列の要素を並び替えるためのメソッドです。
一見シンプルですが、「文字列として並び替えられる」「元の配列が変更される」など、初心者がつまずきやすいポイントも多く存在します。
この記事では、sort()の基本から実務で使える応用までを、基礎から丁寧に解説します。
Contents
sort()とは？
基本構文
const array = [要素1, 要素2, 要素3];
array.sort();sort()は、配列の要素を並び替えます。
デフォルトでは「文字列として比較」して昇順に並び替えられます。
sort()の基本動作（文字列として並び替え）
const fruits = ["banana", "apple", "orange"];
fruits.sort();
console.log(fruits); // ["apple", "banana", "orange"]アルファベット順に並び替えられます。
数値のsort()に注意（よくある落とし穴）
const numbers = [10, 2, 5, 1];
numbers.sort();
console.log(numbers); // [1, 10, 2, 5]この結果は一見おかしく見えますが、sort()は数値ではなく文字列として比較しているためです。
数値を正しく並び替える方法
昇順（小さい順）
const numbers = [10, 2, 5, 1];
numbers.sort(function(a, b) {
return a - b;
});
console.log(numbers); // [1, 2, 5, 10]降順（大きい順）
const numbers = [10, 2, 5, 1];
numbers.sort(function(a, b) {
return b - a;
});
console.log(numbers); // [10, 5, 2, 1]比較関数（コールバック関数）の仕組み
sort()では、比較関数を使って並び順を制御できます。
function(a, b) {
return a - b;
}この戻り値によって並び順が決まります。
- 0より小さい → aを前にする
- 0 → 順序を変えない
- 0より大きい → bを前にする
この仕組みは、JavaScriptの関数理解が重要です。
基礎から確認する場合は「JavaScriptの関数とは？基本から仕組みを理解する」をあわせて読むと理解が深まります。
アロー関数で書く（モダンな書き方）
const numbers = [10, 2, 5, 1];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 5, 10]より簡潔に書くことができます。
アロー関数については「JavaScriptのアロー関数とは？基本から使い方まで徹底解説」で詳しく解説しています。
オブジェクト配列のsort()
実務では、オブジェクトの配列を並び替えるケースが多くあります。
const users = [
{ name: "Tanaka", age: 30 },
{ name: "Sato", age: 25 },
{ name: "Suzuki", age: 35 }
];
users.sort((a, b) => a.age - b.age);
console.log(users);年齢順に並び替えられます。
文字列を基準に並び替える（localeCompare）
const names = ["さとう", "あべ", "すずき"];
names.sort((a, b) => a.localeCompare(b, "ja"));
console.log(names); // ["あべ", "さとう", "すずき"]日本語の並び順に対応する場合はlocaleCompare()が便利です。
sort()は元の配列を変更する
const numbers = [3, 1, 2];
numbers.sort();
console.log(numbers); // [1, 2, 3]sort()は破壊的メソッドです。
元の配列が書き換えられる点に注意が必要です。
元の配列を変更せずにsort()する方法
const numbers = [3, 1, 2];
const sorted = [...numbers].sort((a, b) => a - b);
console.log(numbers); // [3, 1, 2]
console.log(sorted); // [1, 2, 3]スプレッド構文でコピーしてから並び替えます。
配列操作の基礎は「JavaScriptの配列操作まとめ（map・filter・reduce）」で整理できます。
sort()とreverse()の組み合わせ
const numbers = [1, 2, 3, 4];
numbers.sort((a, b) => a - b).reverse();
console.log(numbers); // [4, 3, 2, 1]降順にしたい場合はreverse()と組み合わせる方法もあります。
reverse()については「JavaScriptのreverse()とは？配列を逆順にする方法」で詳しく解説しています。
よくあるミスまとめ
数値が正しく並ばない
[10, 2, 5].sort();→ 比較関数が必要
元の配列が書き換わる
const arr = [3, 2, 1];
arr.sort();→ コピーしてから使う
returnを書き忘れる
numbers.sort(function(a, b) {
a - b; // ← returnがない
});→ undefinedになり並び替えされない
sort()はどんな場面で使う？
- 商品一覧を価格順に並び替え
- 日付順のソート
- ユーザー一覧の並び替え
- 検索結果の整形
Web制作では頻出のメソッドのひとつです。
まとめ
sort()は配列を並び替えるメソッド- デフォルトは文字列として比較される
- 数値は比較関数が必須
- 元の配列が変更される（破壊的メソッド）
- オブジェクト配列にも対応可能