このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

【JavaScript入門】ソート

ソート

　JavaScript で配列をソート（並べ替え）するときは、.sort() メソッドを用いるのが一般的です。このメソッドは配列自体を破壊的に変更し、ソート後の配列を返します。何も引数を与えない場合は、要素を文字列として「辞書順」で並べるので、数値を扱うときには気をつける必要があります。必要に応じて比較関数（comparison function）を指定することで、自由な並べ替えを行えます。

１．.sort([f])

  • 引数なしの場合は要素を文字列として昇順に並べる（辞書順）
  • 引数に比較関数 f を与えると、その関数の戻り値を元に並べ替えが行われる。

２．比較関数

　比較関数 f(a, b) には、2 つの引数（配列の要素） a と b が渡されます。関数の戻り値によって要素の順序が決まります。

戻り値説明
0 より小さい値第 1 引数(a) が先に来る。
0順序を変更しない (等価とみなす)。
0 より大きい値第 2 引数(b) が先に来る。

３．サンプルHTMLファイル

　以下の例を「mySortExample.html」というファイル名で保存し、ブラウザを開いて実行し、開発者ツールのコンソール出力を確認してください。

【mySortExample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>mySortExample.html</title>
</head>
<body>
  <h1>ソート (sort) のサンプル</h1>
  <p>ブラウザの開発者ツール(コンソール)を開き、出力をご確認ください。</p>

  <script>
    // 1) 引数なしの .sort() の例
    console.log('--- デフォルトのソート (辞書順) ---');
    const arr1 = [7, 8, 9, 10, 11, 12];
    arr1.sort(); // 破壊的メソッドなので配列自体が変更される
    console.log(arr1); 
    // → [10, 11, 12, 7, 8, 9]

    // 2) 比較関数ありの .sort() の例（数値の昇順）
    console.log('--- 比較関数あり (数値の昇順) ---');
    const arr2 = [10, 11, 12, 7, 8, 9];
    arr2.sort((a, b) => a - b); 
    console.log(arr2); 
    // → [7, 8, 9, 10, 11, 12]

    // 3) 比較関数ありの .sort() の例（数値の降順）
    console.log('--- 比較関数あり (数値の降順) ---');
    const arr3 = [10, 11, 12, 7, 8, 9];
    arr3.sort((a, b) => b - a); 
    console.log(arr3);
    // → [12, 11, 10, 9, 8, 7]

    // 4) 文字列のソート例
    console.log('--- 文字列配列のソート ---');
    const arr4 = ["りんご", "みかん", "バナナ"];
    arr4.sort();
    console.log(arr4);
    // 文字コード順 (五十音順っぽく並ぶが注意が必要な場合もある)
  </script>
</body>
</html>

デバックコンソールの出力

--- デフォルトのソート (辞書順) ---
(6) [10, 11, 12, 7, 8, 9]
--- 比較関数あり (数値の昇順) ---
(6) [7, 8, 9, 10, 11, 12]
--- 比較関数あり (数値の降順) ---
(6) [12, 11, 10, 9, 8, 7]
--- 文字列配列のソート ---
(3) ['みかん', 'りんご', 'バナナ']

解説

  1. .sort() のデフォルト動作は、要素を文字列に変換して「辞書順」で並べ替える。数値のときも「文字列として」比較するため、10 が 2 より前に来るといった結果になる。
  2. 数値を正しく昇順・降順に並べ替えたい場合は、比較関数 (a, b) => a - b (昇順) などを指定する。
  3. ソート結果を配列として返すが、同時に 元の配列を破壊的に変更 する点に注意。非破壊的に行いたい場合はソート前にコピーを作成する必要がある。

まとめ

  • .sort() は配列を破壊的に並べ替えるメソッド。
  • 引数がないときは文字列として比較する辞書順になる。
  • 比較関数を指定することで、自由にソートの条件を決められる。
  • 数値の昇順は (a, b) => a - b、降順は (a, b) => b - a のように書く。

　こうして sort() メソッドを適切に使えば、文字列や数値を想定した順序に並び替えられます。必要に応じてコピーや比較関数を工夫しながら利用しましょう。