JavaScriptで簡単ソート！初心者でもわかる5つの方法

はじめに
●JavaScriptでのソート方法の基本
●初心者にもわかる5つのソート方法
●JavaScriptのソートにおける注意点
●ソート方法の応用例
- ○応用例1：フィルタリングとソートを組み合わせる
- ○応用例2：ページネーションとソートを組み合わせる
まとめ

はじめに

この記事を読めば、JavaScriptで配列を簡単にソートする方法が身につきます。

初心者でも理解できるように、5つの方法とサンプルコードを徹底解説していきます。

●JavaScriptでのソート方法の基本

JavaScriptでは、配列をソートする方法がいくつか用意されています。

その中でも、初心者にも理解しやすい5つの方法を紹介します。

●初心者にもわかる5つのソート方法

○方法1：Array.prototype.sort()を使ったソート

JavaScriptで配列をソートする最も基本的な方法は、Array.prototype.sort()関数を使う方法です。

この例では、文字列の配列をソートしています。

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

○方法2：数値の配列をソートする

数値の配列をソートする場合、比較関数を使って数値の昇順や降順にソートできます。

このコードでは、Array.prototype.sort()関数に比較関数を渡して、数値の配列を昇順にソートしています。

const numbers = [10, 5, 8, 1, 7];
numbers.sort((a, b) => a - b);
console.log(numbers);
// [1, 5, 7, 8, 10]

○方法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 }]

○方法4：カスタム比較関数を使ったソート

独自の条件でソートしたい場合は、カスタム比較関数を使ってソートできます。

このコードでは、文字列の長さで昇順にソートしています。

const words = ['apple', 'banana', 'cherry', 'date'];
words.sort((a, b) => a.length - b.length);
console.log(words);
// ["date", "apple", "cherry", "banana"]

○方法5：安定ソートの実装

JavaScriptのArray.prototype.sort()関数は、安定ソートではない場合があります。

安定ソートが必要な場合は、次のように実装できます。

function stableSort(arr, compare) {
  const arrayWithIndex = arr.map((value, index) => [value, index]);
  arrayWithIndex.sort((a, b) => {
    const result = compare(a[0], b[0]);
    return result !== 0 ? result : a[1] - b[1];
  });
  return arrayWithIndex.map(([value]) => value);
}

const data = ['apple', 'banana', 'cherry', 'date'];
const sortedData = stableSort(data, (a, b) => a.length - b.length);
console.log(sortedData);
// ["date", "apple", "cherry", "banana"]

●JavaScriptのソートにおける注意点

ソートの安定性は、使用しているJavaScriptエンジンによって異なります。
安定性が必要な場合は、安定ソートを実装して使用してください。
ソート処理には計算時間がかかる場合があるため、大量のデータを扱う際は注意が必要です。
適切なアルゴリズムを選択し、最適化を検討してください。
ソート時に比較関数を適切に設定しないと、意図しない結果になることがあります。
例えば、数値の配列を文字列としてソートしてしまう場合などです。

●ソート方法の応用例

○応用例1：フィルタリングとソートを組み合わせる

フィルタリングとソートを組み合わせることで、特定の条件に合致するデータを見つけやすくなります。

このコードでは、年齢が30歳以上の人物をフィルタリングし、その後名前で昇順にソートしています。

const people = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 35 }
];

const filteredAndSortedPeople = people
  .filter(person => person.age >= 30)
  .sort((a, b) => a.name.localeCompare(b.name));

console.log(filteredAndSortedPeople);
// [{ name: 'Alice', age: 30 }, { name: 'Charlie', age: 35 }]

○応用例2：ページネーションとソートを組み合わせる

ページネーションとソートを組み合わせることで、大量のデータを見やすく表示できます。

このコードでは、データを名前で昇順にソートし、5件ずつ表示するページネーションを実装しています。

const people = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 35 },
  // その他のデータ...
];

const itemsPerPage = 5;
const sortedPeople = people.sort((a, b) => a.name.localeCompare(b.name));

function displayPage(page) {
  const startIndex = (page - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const currentPageData = sortedPeople.slice(startIndex, endIndex);

  console.log(`Page ${page}:`, currentPageData);
}

displayPage(1);