初心者必見！JavaScriptでソートをマスターする方法10選

はじめに
●JavaScriptソートの基本
●注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScriptでソートをマスターすることができるようになります。

初心者でも分かりやすいように、JavaScriptのソート機能の使い方、対処法、注意点、カスタマイズ方法を10個のサンプルコードを交えて徹底解説します。

●JavaScriptソートの基本

JavaScriptでは、配列のソートを行うためにArray.prototype.sort()関数を使用します。

この関数は、配列の要素を引数として渡された比較関数に基づいてソートします。

比較関数が指定されない場合は、要素を文字列に変換し、それらの文字列のUnicodeポイントの順序に従ってソートします。

○配列のソート

JavaScriptで配列をソートする方法をいくつかのサンプルコードで見ていきましょう。

●サンプルコード1：昇順でソート

const numbers = [3, 1, 4, 2];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 3, 4]

このサンプルコードでは、数値の配列numbersを昇順でソートしています。

比較関数(a, b) => a - bを使って、小さい値から大きい値へと並び替えています。

●サンプルコード2：降順でソート

const numbers = [3, 1, 4, 2];
numbers.sort((a, b) => b - a);
console.log(numbers); // [4, 3, 2, 1]

このサンプルコードでは、数値の配列numbersを降順でソートしています。

比較関数(a, b) => b - aを使って、大きい値から小さい値へと並び替えています。

●サンプルコード3：オブジェクト配列のソート

const people = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 35 }
];
people.sort((a, b) => a.age - b.age);
console.log(people);
// [{ name: 'Bob', age: 25 }, { name: 'Alice', age: 30 }, { name: 'Charlie', age: 35 }]

このサンプルコードでは、オブジェクトの配列peopleをソートしています。

比較関数(a, b) => a.age - b.ageを使って、ageプロパティの値に基づいて昇順で並び替えています。

●サンプルコード4：数値のソート

const numbers = [10, 2, 30, 4];
numbers.sort();
console.log(numbers); // [10, 2, 30, 4]

このサンプルコードでは、比較関数を指定しないで配列numbersをソートしています。

しかし、比較関数が指定されない場合、要素は文字列に変換され、Unicodeポイントの順序に従ってソートされるため、期待通りにソートされません。

●サンプルコード5：文字列のソート

const fruits = ['apple', 'banana', 'kiwi', 'mango'];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'kiwi', 'mango']

このサンプルコードでは、文字列の配列fruitsをソートしています。

比較関数を指定しない場合、文字列要素はそのままUnicodeポイントの順序に従ってソートされます。

●サンプルコード6：日付のソート

const dates = [
  new Date(2023, 3, 10),
  new Date(2022, 11, 12),
  new Date(2021, 5, 18),
  new Date(2023, 1, 22)
];
dates.sort((a, b) => a - b);
console.log(dates);
// [2021-06-18, 2022-12-12, 2023-02-22, 2023-04-10]

このサンプルコードでは、日付の配列datesをソートしています。

比較関数(a, b) => a - bを使って、日付の昇順で並び替えています。

●サンプルコード7：カスタム比較関数を用いたソート

const words = ['apple', 'Apples', 'Banana', 'banana'];
words.sort((a, b) => a.localeCompare(b, 'en', { sensitivity: 'base' }));
console.log(words); // ['apple', 'Apples', 'banana', 'Banana']

このサンプルコードでは、カスタム比較関数a.localeCompare(b, 'en', { sensitivity: 'base' })を使って、文字列の大文字と小文字を区別せずにソートしています。

●サンプルコード8：安定ソート

const people = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 30 }
];
people.sort((a, b) => a.age - b.age || a.name.localeCompare(b.name));
console.log(people);
// [{ name: 'Bob', age: 25 }, { name: 'Alice', age: 30 }, { name: 'Charlie', age: 30 }]

このサンプルコードでは、安定ソートを実現しています。

ageプロパティが同じ場合、nameプロパティで比較します。結果として、ソート前後で同じageを持つ要素の順序が維持されます。

●サンプルコード9：ソートアルゴリズムをカスタマイズ

function bubbleSort(arr, compareFunc) {
  let swapped;
  do {
    swapped = false;
    for (let i = 0; i < arr.length - 1; i++) {
      if (compareFunc(arr[i], arr[i + 1]) > 0) {
        [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]];
        swapped = true;
      }
    }
  } while (swapped);
  return arr;
}

const numbers = [3, 1, 4, 2];
bubbleSort(numbers, (a, b) => a - b);
console.log(numbers); // [1, 2, 3, 4]

このサンプルコードでは、バブルソートアルゴリズムをカスタマイズして、配列numbersを昇順でソートしています。

カスタムソートアルゴリズムbubbleSortには、比較関数(a, b) => a - bを渡して使用します。

●サンプルコード10：配列を逆順にソート

const numbers = [1, 2, 3, 4];
numbers.reverse();
console.log(numbers); // [4, 3, 2, 1]

このサンプルコードでは、配列numbersを逆順にソートしています。

JavaScriptのreverseメソッドを使用して、配列の要素を簡単に逆順に並べ替えることができます。

●注意点と対処法

配列の破壊的操作に注意

JavaScriptのsortメソッドは、元の配列を破壊的に変更します。

これを避けるには、sliceメソッドで配列のコピーを作成してからソートすることができます。

const originalArray = [3, 1, 4, 2];
const sortedArray = originalArray.slice().sort((a, b) => a - b);
console.log(originalArray); // [3, 1, 4, 2]
console.log(sortedArray); // [1, 2, 3, 4]