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

はじめに
●JavaScriptソートの基本
- ○配列のソート
- ○サンプルコード1：昇順でソート
○サンプルコード2：降順でソート
●注意点と対処法
まとめ

はじめに

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]

このコードでは、比較関数(a, b) => a - bを使用しています。この関数は、配列の要素を順番に比較し、小さい値から大きい値へと並び替えます。

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

次に、数値の配列を降順でソートする方法を紹介します。配列の要素を大きい値から小さい値へと並び替えます。

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

この例では、比較関数(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配列内のオブジェクトをageプロパティの値に基づいて昇順でソートしています。

比較関数(a, b) => a.age - b.ageを使用することで、年齢の若い順に並び替えが行われます。

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

比較関数を指定せずに数値の配列をソートした場合の結果を示します。

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

このコードでは、比較関数を指定せずにsort()メソッドを使用しています。

結果として、期待通りのソートが行われません。要素が文字列として扱われ、Unicodeポイントの順序に従ってソートされるためです。

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

文字列の配列をソートする方法を紹介します。

アルファベット順にソートする例を示します。

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

文字列の配列をソートする場合、比較関数を指定しなくても、アルファベット順に正しくソートされます。

これは、文字列要素が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]

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

比較関数(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']

このコードでは、localeCompare()メソッドを使用してカスタム比較関数を作成しています。

この関数により、大文字と小文字を区別せずに文字列をソートすることができます。

○サンプルコード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プロパティでソートしています。

これにより、ソート前後で同じ年齢を持つ要素の順序が維持されます。

○サンプルコード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]

このコードでは、バブルソートアルゴリズムを実装したbubbleSort関数を作成しています。

この関数に比較関数を渡すことで、カスタマイズされたソート処理を実行できます。

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

配列を逆順にソートする簡単な方法を紹介します。

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

このサンプルコードでは、JavaScriptのreverse()メソッドを使用して、配列の要素を簡単に逆順に並び替えています。

●注意点と対処法

JavaScriptでソートを行う際には、いくつかの注意点があります。

この注意点を理解し、適切に対処することで、より効果的で安全なソート処理を実現できます。

○配列の破壊的操作に注意

JavaScriptのsort()メソッドは、元の配列を直接変更します。

この動作は「破壊的操作」と呼ばれ、予期せぬ副作用を引き起こす可能性があります。

元の配列を保持したい場合は、次のようにコピーを作成してからソートを行います。

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]