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

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

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

JavaScriptで配列のデータを特定のルールで並べ替えたいときに欠かせないのがsortメソッドです。例えば、名簿を名前順に並べたり、商品の価格を安い順に並べたりするときに非常によく使われます。

プログラミング未経験の方でもイメージしやすいように、まずは「果物の名前」をバラバラに用意して、それを五十音順（正しくはUnicode順）に整列させるサンプルを見てみましょう。

// 並べ替えたい元の配列を作成
let fruits = ["りんご", "バナナ", "みかん"];

// sortメソッドを実行して並べ替える
fruits.sort();

// 結果をコンソールに表示
console.log(fruits);

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

上記のコードを実行すると、配列の中身が自動的に並べ替えられます。ここで不思議に思うかもしれませんが、JavaScriptの標準的なsortは、文字を「Unicode（ユニコード）」というコンピュータ上の背番号のようなルールに従って比較します。

そのため、今回の例では「バ（は）→み→り」という順番で出力されました。このように、sort()と書くだけで、配列の中身を特定の規則に沿って整列させることができるのです。

基本的には「文字を基準に並べ替える機能」だと覚えておくと、この後の学習がスムーズになりますよ。

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

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

JavaScriptのsortメソッドを使って数字を並べ替えようとすると、多くの初心者が「あれ？順番がおかしいぞ」という壁にぶつかります。実は、何も設定せずにsort()を使うと、数字であっても「文字列（テキスト）」として扱われてしまうというルールがあるからです。

例えば、私たちが直感的に数字を並べ替えると「1, 5, 10, 100」となりますが、プログラムの世界では「1で始まるグループ」「5で始まるグループ」といった辞書のような順序で判定されます。その結果、どうなるか実際に確認してみましょう。

// バラバラの数字が入った配列
let numbers = [10, 5, 100, 1];

// そのままsortメソッドを実行
numbers.sort();

// 結果を確認
console.log(numbers);

[1, 10, 100, 5]

実行結果を見ると、1の次に10や100が来て、最後に5が来ていますね。これは「1」という文字で始まるデータが優先され、その後に「5」という文字が並んでいる状態です。まるで辞書で「a」の単語が全部終わってから「b」が始まるのと同じ仕組みです。

このように、数値の大小で正しく並べたい場合には、JavaScriptに「これは文字じゃなくて数字の大きさで比べてね」と教えてあげる必要があります。そのために使用するのが、次で解説する「比較関数」というテクニックです。

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

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

前項で見た通り、sort()をそのまま使うと数字が文字列として扱われてしまいます。そこで、JavaScriptに「数値の大きさで比較してね」と正しいルールを教えるために使うのが「比較関数（コールバック関数）」です。

比較関数とは、配列の中にある2つの値（ここでは a と b と呼びます）を取り出して、どちらを先に並べるかを判定する専用の命令です。まずは、数字を小さい順（昇順）に並べ替える基本の書き方を見てみましょう。

// バラバラの数字が入った配列
let numbers = [10, 5, 100, 1];

// 比較関数を使って「数値の引き算」で並べ替える
numbers.sort(function(a, b) {
  // aからbを引いた結果を返す
  return a - b;
});

// 結果を確認
console.log(numbers);

[1, 5, 10, 100]

この return a - b; という計算式には、以下のようなシンプルなルールがあります。

• 計算結果がマイナスなら、a を b より前にする
• 計算結果がプラスなら、b を a より前にする
• 計算結果が0なら、順番を変えない

たとえば「10」と「5」を比べる時、10 - 5 = 5（プラス）なので、5が前に移動します。このように、コンピュータに「引き算の答え」を教えるだけで、直感に合った正しい数字の並べ替えができるようになります。プログラミング未経験の方は、まずは「数字の昇順なら a - b」という形をセットで覚えてしまうのが近道ですよ。

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

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

小さい順（昇順）の並べ方がわかれば、大きい順（降順）に並べ替えるのも簡単です。結論から言うと、比較関数の中の引き算を「a - b」から「b - a」に入れ替えるだけです。

なぜこれだけで逆順になるのでしょうか。前の章で学んだ「計算結果がプラスなら、後の値を前に持ってくる」というルールを思い出してください。b - a と書くことで、より大きい値が前に来るようにコンピュータが判断してくれるようになります。実際に、テストの点数や商品の価格が高い順に並べるシーンをイメージしてコードを書いてみましょう。

// テストの点数が入った配列
let scores = [45, 92, 18, 100, 76];

// 比較関数で「b - a」を指定して、大きい順に並べ替える
scores.sort(function(a, b) {
  // b（後の値）から a（前の値）を引く
  return b - a;
});

// 結果をコンソールに表示
console.log(scores);

[100, 92, 76, 45, 18]

実行結果を見ると、一番大きい「100」が先頭に来て、数字が小さくなる順番に並んでいますね。例えば 45 と 92 を比べる際、92 - 45 = 47（プラス）となるため、92 が前に移動します。このように、たった1箇所の入れ替えだけで、ランキング形式のような「降順」の並べ替えが自由自在にできるようになります。

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

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

数字の並べ替えができるようになったら、次は「文字列」のカスタマイズに挑戦してみましょう。実は、日本語のひらがなやカタカナ、漢字が混ざった配列をsort()だけで並べ替えると、私たちが期待する五十音順にならないケースがあります。

そこで役立つのが、文字列同士を言語のルールに基づいて比較してくれるlocaleCompareという便利な機能です。これを使うことで、ひらがなやカタカナが混ざっていても、辞書に近い自然な順番で並べ替えることができます。

// ひらがなとカタカナが混ざった配列
let fruits = ["みかん", "バナナ", "りんご"];

// localeCompareを使って文字列を比較
fruits.sort(function(a, b) {
  // 日本語のルールに従ってaとbを比べる
  return a.localeCompare(b, "ja");
});

// 結果を確認
console.log(fruits);

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

このコードのポイントは、比較関数の中で a.localeCompare(b, "ja") と書いている点です。これは「変数aと変数bを、日本語（ja）の並び順で比較してね」という指示を出しています。

localeCompareは、比較した結果によって内部的に「マイナス・プラス・0」のいずれかの数値を返してくれます。つまり、数字の時に自分たちで書いた a - b の計算を、文字列のために自動でやってくれているようなイメージです。

この方法を覚えておけば、ユーザー名の一覧をあいうえお順に並べたり、商品名をアルファベット順に整理したりといった作業が、非常に正確かつ簡単に行えるようになります。

6. アロー関数で比較関数をもっと簡潔に記述する方法

6. アロー関数で比較関数をもっと簡潔に記述する方法

ここまで「比較関数」を使って並べ替えのルールを指定する方法を解説してきましたが、モダンなJavaScript（ES6以降）では、より短く、スッキリと書ける「アロー関数」という書き方が主流です。

プログラミング初心者の方にとって、function(a, b) { ... } という記述は少し複雑に見えるかもしれません。しかし、アロー関数を使えば、処理の内容がひと目でわかるようになります。具体的に、数字を小さい順に並べ替えるコードを書き換えて比較してみましょう。

// 従来の書き方（functionを使用）
let numbers1 = [10, 5, 100, 1];
numbers1.sort(function(a, b) {
  return a - b;
});

// アロー関数を使った書き方（もっとも一般的）
let numbers2 = [10, 5, 100, 1];
numbers2.sort((a, b) => a - b);

console.log(numbers2);

[1, 5, 10, 100]

「=>」という記号が矢印（アロー）に見えることから、アロー関数と呼ばれています。この書き方の大きなメリットは、functionという単語や、処理を囲む波括弧{ }、そして値を返すためのreturnという命令を省略できる点にあります（※処理が1行の場合）。

実務の現場や最新の解説サイトでは、このアロー関数による記述がほとんどです。最初は見慣れないかもしれませんが、「(a, b) を受け取って、a - b の結果を返す」という流れが直感的に表現されているため、慣れてしまうとコードの読みやすさが格段に向上します。ぜひ積極的に使ってみてください。

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

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の柔軟性を活かして、ユーザーにとって最も使いやすいデータの表示順を追求してみましょう。