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

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

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

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

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

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

console.log(fruits);

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

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

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

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

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

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