Javascriptのsortとは？できることや実例を初心者向けに解説

JavaScriptのsort()メソッドは、配列の要素を効率的に並び替えるための強力なツールです。文字列、数値、オブジェクトなど、さまざまなデータ型に対応し、比較関数を使用すると更に複雑なソートも可能です。

本記事では、sort()メソッドの基本的な使い方から応用まで、初心者にもわかりやすく解説します。例を交えながら、効果的なデータ整理の方法や注意点にも触れます。

sort()メソッドを理解し、活用すれば、より効率的なプログラミングが可能になるでしょう。

JavaScriptのsort()メソッドとは

JavaScriptのArray.sort()メソッドは、配列の要素を一定の基準で並べ替え（整列）します。

例えば、ユーザー名のリストをアルファベット順に並べたり、記事を新しい順に表示したりする際に活用できます。

データを並べ替える処理はよく使われるため、sort()メソッドはJavaScriptプログラミングで重要な役割を果たします。

sortでできること

sort()メソッドは、文字列や数値、オブジェクトなど、さまざまなデータ型の要素を含む配列を効率的に整列できます。

引数無しのsort()では、配列の要素を文字列として扱い、Unicodeコードポイント順にソートします。数値や日付などのデータを扱う際には注意してください。

必要に応じて独自の比較関数を使用する形式sort(比較関数)も使え、並び順をカスタマイズできます。

なお、sortメソッドは元の配列を変更するため、元のデータを保持したい場合は、配列のコピーを作成してからsortしてください。

sortの基本

sortメソッドの基本的な使い方は、配列に対してsort()を呼び出すだけで、要素が昇順に並び替えられます。

const fruits = [‘banana’, ‘apple’, ‘orange’];

fruits.sort();

console.log(fruits); // [‘apple’, ‘banana’, ‘orange’]

上記の例では、フルーツの名前を含む配列がアルファベット順に並び替えられます。

文字列を並び変える

文字列の並び替えは、sortメソッドの基本機能です。

const words = [‘こんにちは’, ‘Hello’, ‘Bonjour’];

words.sort();

console.log(words); // [‘Bonjour’, ‘Hello’, ‘こんにちは’]

上記の例では、日本語は、Unicodeコードポイントの関係で、アルファベットのあとに配置されます。

大文字と小文字を区別せずにソートしたい場合は、比較関数を使用して対応できます。

比較関数の書き方

sort(比較関数)の形式では、比較関数 compareFunction(a, b) には、aとbの大小関係を示す、次の値を返す関数を記載してください。

数値を並び変える

sortメソッドは要素を文字列として扱うため、数値を正しくソートするには比較関数を使用する必要があります。

const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];

numbers.sort((a, b) => a – b);

console.log(numbers); // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

上記の比較関数は、2つの数値の差を返すことで、sortメソッドに正しい順序を指示しています。

降順で並び変える

降順でソートする場合は、比較関数を反転させるか、ソート後に配列を反転させる方法があります。

const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];

numbers.sort((a, b) => b – a);  // 比較関数の符号を反転させる例。

numbers.sort((a, b) => a – b).reverse();  // ソート後に配列を逆順にする例。

console.log(numbers); // [9, 6, 5, 5, 5, 4, 3, 3, 2, 1, 1]

上記の例では、2つのsort()いずれも、ソート結果は同じです。

オブジェクトのキーで並び変える

オブジェクトの配列をソートする場合、特定のプロパティを基準にソートできるので、複雑なデータ構造を扱う際に便利です。

const people = [

  { name: ‘田中’, age: 30 },

  { name: ‘佐藤’, age: 25 },

  { name: ‘鈴木’, age: 35 }

];

people.sort((a, b) => a.age – b.age);

// [

//   { name: ‘佐藤’, age: 25 },

//   { name: ‘田中’, age: 30 },

//   { name: ‘鈴木’, age: 35 }

// ]

上記の例では、人物のオブジェクトを含む配列を年齢順にソートしています。比較関数では、ageプロパティを使用して順序を決定しています。

sortの使用例

sortメソッドは、さまざまな実践的な場面で活用できます。

例えば、日付順でのソートや、複数の基準を使用した複雑なソートなどが可能です。

const events = [

  { name: ‘イベントA’, date: new Date(‘2024-05-15’), price: 1000 },

  { name: ‘イベントB’, date: new Date(‘2024-03-10’), price: 1500 },

  { name: ‘イベントC’, date: new Date(‘2024-07-22’), price: 2000 },

  { name: ‘イベントD’, date: new Date(‘2024-05-15’), price: 1800 },

  { name: ‘イベントE’, date: new Date(‘2024-03-10’), price: 1200 }

];

events.sort((a, b) => {

  const dateComparison = a.date – b.date; // まず日付でソート、Dateオブジェクトは直接比較可能

  if (dateComparison !== 0) {

    return dateComparison;

  }

  return b.price – a.price; // 日付が同じ場合、priceの降順でソート

});

上記の例では、eventsオブジェクトの配列を複数基準（日付順、同じ日付の場合は価格の高い順（降順））でソートしています。

JavaScriptのsortの注意点について

JavaScriptのsort()メソッドは便利ですが、いくつかの注意点があります。

大規模な配列のsortは、処理時間のかかる場合があります。必要に応じてより効率的なソートアルゴリズムの使用や、事前のインデックス作成などの最適化を検討してください。

また、NaN・undefined・nullなどの値を含むsortの挙動は実装によって異なる場合があります。

Internet Explorer 11などの古い環境では、同じ値を持つ要素の順序が保証されないため、用途によって注意が必要です。

まとめ

JavaScriptのsort()は、配列要素の並び替えを簡単におこなえる便利なメソッドです。基本的な使い方から複雑なオブジェクトのソートまで、幅広い用途に対応します。

パフォーマンスや特殊なケースには注意が必要ですが、適切に使用すれば効率的にデータを処理できます。今日から自分のコードでsort()を活用してみましょう。