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

JavaScript初心者にもわかるソート方法5選JS
この記事は約6分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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のソートにおける注意点

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

●ソート方法の応用例

○応用例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);

まとめ

この記事では、JavaScriptで配列をソートする方法とその応用例について解説しました。

ソートを行う際には、安定性や計算時間を考慮して適切なアルゴリズムを選択することが重要です。

また、応用例としてフィルタリングやページネーションと組み合わせることで、データの取り扱いが容易になります。

これらの知識を活かし、より効率的なデータ処理を実現してください。