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

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

生徒

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

先生

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

生徒

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

先生

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

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

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

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


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

fruits.sort();

console.log(fruits);


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

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

2. 数字の配列をsortで並べ替えるときの注意点

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

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


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

numbers.sort();

console.log(numbers);


[1, 10, 100, 5]

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

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

3. 比較関数で数字の並べ替えをカスタマイズする

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

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


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

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

console.log(numbers);


[1, 5, 10, 100]

この比較関数は、「a - b」の計算結果が0より小さいときはが前、0より大きいときはbが前、0のときは順番を変えないという意味です。

4. 比較関数で数字を大きい順に並べる方法

同じようにして、大きい順に並べたいときはとbを入れ替えて計算します。


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

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

console.log(numbers);


[100, 10, 5, 1]

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

5. 文字列の並べ替えも比較関数でカスタマイズできる

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


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

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

console.log(fruits);


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

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

6. アロー関数で比較関数をもっと簡単に書く

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


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

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

7. まとめの代わりに注意点

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]

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

まとめ

ここまでJavaScriptの配列操作において非常に重要かつ頻繁に利用される「sortメソッド」について詳しく解説してきました。配列の並べ替えは、ウェブアプリケーションの開発において避けては通れない技術の一つです。例えば、ECサイトの商品一覧を価格の安い順に並べたり、SNSの投稿を最新順に表示したりする際には、このソート機能が中心的な役割を担っています。

sortメソッドの特性と挙動の理解

JavaScriptのsort()は非常に強力ですが、初心者の方が最も躓きやすいポイントは「デフォルトでは文字列として比較される」という点です。記事内でも触れた通り、数値の配列に対してそのままsort()を適用すると、[1, 10, 100, 2]といった直感に反する並び順になってしまいます。これはJavaScriptが内部的に各要素を文字列として認識し、Unicodeコードポイントの順序に従って比較を行うためです。

これを解決するためには「比較関数」の指定が不可欠です。比較関数に渡される2つの引数（aとb）の戻り値によって、並び順が決定されます。

戻り値が負（a - b < 0）： aをbより前に配置（昇順）
戻り値が正（a - b > 0）： bをaより前に配置（降順）
戻り値が0： 順序を変更しない

実践的なサンプルコード：複雑なデータのソート

実際の開発現場では、単純な数値や文字列だけでなく、オブジェクトが含まれた配列を扱うことがほとんどです。例えば、ユーザー情報を持つオブジェクトの配列を、年齢（age）順に並べ替える場合は以下のように記述します。


const users = [
  { name: "田中", age: 25 },
  { name: "佐藤", age: 18 },
  { name: "鈴木", age: 32 },
  { name: "高橋", age: 21 }
];

// 年齢が低い順（昇順）に並べ替え
users.sort((a, b) => {
  return a.age - b.age;
});

console.log(users);


[
  { "name": "佐藤", "age": 18 },
  { "name": "高橋", "age": 21 },
  { "name": "田中", "age": 25 },
  { "name": "鈴木", "age": 32 }
]

このように、プロパティにアクセスすることで、オブジェクト形式のデータも自由自在に制御することが可能です。また、大規模なデータを扱う際には、元の配列を破壊しない（副作用を避ける）ために、slice()やスプレッド構文（[...array]）を使用してコピーを作成してからソートを行う習慣を身につけておくと、デバッグが容易な堅牢なプログラムになります。

エンジニアとしての応用：多角的なソート条件

さらに高度なテクニックとして、複数の条件を組み合わせることも可能です。「まずはスコアの高い順に並べ、スコアが同じ場合は名前のアルファベット順にする」といったロジックも、比較関数の中で条件分岐を記述することで実現できます。JavaScriptの柔軟性を活かして、ユーザーにとって最も使いやすいデータの表示順を追求してみましょう。

先生と生徒の振り返り会話

生徒

「先生、ありがとうございました！sort()メソッドの仕組みがやっと腑に落ちました。最初、数字が変な順番に並んだときはバグかと思って焦りましたけど、文字列として比較されていたからなんですね。」

先生

「そうなんです。JavaScriptの仕様を知らないと少し驚きますよね。でも比較関数（コールバック関数）の使い方さえマスターしてしまえば、どんなに複雑なデータ形式でも自由自在に並べ替えることができますよ。アロー関数を使った書き方は試してみましたか？」

生徒

「はい！(a, b) => a - b と書くだけで昇順になるので、すごくシンプルで書きやすいです。今まではfunctionって毎回書いていたので、これからは積極的にアロー関数を使っていこうと思います。あ、それから質問なのですが、日本語の五十音順にする時はどうするのがベストですか？」

先生

「鋭い質問ですね！日本語の場合は、記事でも紹介したlocaleCompareを使うのが一番確実です。ひらがなとカタカナが混ざっていても適切に処理してくれますし、ブラウザの言語設定に合わせた自然な並び順を提供してくれます。多言語対応のアプリを作る時にも必須の知識になりますよ。」

生徒

「なるほど、localeCompareですね。覚えておきます！あと、先生が言っていた『元の配列を書き換えてしまう』という注意点も印象的でした。気づかないうちに元のデータを壊しちゃいそうなので、これからはまずコピーを作ってからソートする癖をつけます。」

先生

「その意識は素晴らしいです！『イミュータブル（不変）』な操作を心がけるのは、モダンなフロントエンド開発、特にReactなどのフレームワークを使う際には非常に重要な考え方になります。ぜひこの調子で、配列の他のメソッド、例えばfilterやmapなども組み合わせて使えるよう練習してみてくださいね。」

生徒

「ありがとうございます！次はfilterと組み合わせて、特定の条件に合うものだけを抽出してからソートする処理に挑戦してみます。プログラミングがどんどん楽しくなってきました！」

先生

「その意気です！実際に自分でコードを書いて、コンソールで結果を確認しながら進めるのが上達の近道です。もしエラーが出たり、思い通りの順番にならなかったりしたときは、いつでも相談に乗りますからね。頑張りましょう！」