NU:LOGiC Logo

【JavaScript】配列をソートするならsort()! シンプルな使い方から応用まで

【JavaScript】配列をソートするならsort()! シンプルな使い方から応用まで

JavaScriptのsort()メソッドは、配列をソートする際の強力な道具です。この記事では、基本的な使い方から応用テクニックまで、sort()の活用方法について詳しく解説します。データを整理し、効率的に扱うために必須のスキルです。

3行で要約すると

  • sort()はJavaScriptの配列をソートするためのメソッドです。
  • カスタム関数を使って、独自のソート条件も設定できます。
  • ただし、ソートは元の配列を直接変更するため注意が必要です。

「sort()」の基本的な使い方

「sort()」とは?

sort()はJavaScriptの配列で使えるメソッドで、配列の中身を並び替えるために使用します。そのまま使うと、要素が文字列としてアルファベット順にソートされます。

例:

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

ただ、数字を正しくソートするためや特定のルールでソートするためには「比較関数」というものを使います。

比較関数って何?

比較関数は、配列の中の2つの要素(これをaとbと呼びます)を取って、どちらが先に来るべきかを決める役割があります。

  1. 関数が正の数を返したら、bをaより前にします。
  2. 関数が0を返したら、aとbの位置は変わりません
  3. 関数が負の数を返したら、aをbより前にします。

これを使うと、以下のように数字の配列を小さい順にソートできます。

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

ここで使われているa - bは、aがbより小さければ負の数、等しければ0、大きければ正の数を返すという仕組みです。これを基に、aとbの位置が決まります。

このように、比較関数を使うことで、自分のルールで要素をソートすることができるのです。

「sort()」の使用例4パターン

文字列をソートする

const animals = ["dog", "cat", "elephant", "bee"];
animals.sort();
console.log(animals);  // ["bee", "cat", "dog", "elephant"]

アルファベット順に動物の名前がソートされます。

数字をソートする

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

昇順に数字がソートされます。

オブジェクトのプロパティに基づいてソート

const people = [
  {name: "John", age: 25},
  {name: "Doe", age: 30},
  {name: "Anna", age: 20}
];
people.sort((a, b) => a.age - b.age);
console.log(people);

年齢の昇順に人々がソートされます。

降順でソート

const scores = [40, 100, 1, 5, 25, 10];
scores.sort((a, b) => b - a);
console.log(scores);  // [100, 40, 25, 10, 5, 1]

得点が高い順にソートされます。

「sort()」と「reverse()」

「reverse()」とは?

reverse()は配列の要素の順序を逆にします。sort()と組み合わせることで、降順のソートも簡単に実現できます。

例:

const fruits = ["banana", "apple", "cherry"];
fruits.sort().reverse();
console.log(fruits);  // ["cherry", "banana", "apple"]

「sort()」と「reverse()」の違い

基本的にsort()はソート、reverse()は逆順にするだけの単純な動作です。ですが、二つを組み合わせることで多様なソートを実現できます。

「sort()」を使用する際の注意点

Unicode順でのソート

sort()は、数字もUnicodeの文字セット順でソートされるため、数字の配列をそのままソートすると期待する結果にならないことがあります。

const numbers = [10, 5, 40, 25, 100, 1];
numbers.sort();
console.log(numbers);  // [1, 10, 100, 25, 40, 5]

元の配列が変更される

sort()は元の配列を直接変更します。この挙動を避けたい場合は、配列のコピーを作成してからソートすると良いでしょう。

「sort()」の使い方まとめ

JavaScriptのsort()メソッドは、配列の要素をソートするための強力なツールです。基本的な使い方から応用テクニックまで、この記事で学んだ内容を実践に活かしてみてください。