JavaScriptで配列のソートを行う方法について解説

JavaScriptで配列のソートを行う方法について、解説します。数値のソートという間違えやすいソート方法についても、間違えやすいポイント、コードを交えて解説しますので、プログラミング初心者の方でもソートについてマスターすることができます。

JavaScriptで配列のソートを行う方法

JavaScriptで配列のソートを行うには、sortメソッドというメソッドを使用します。こちらのメソッドを使用するだけで、配列の並び替えを行うことができます。sortメソッドとは、どのようなメソッドか、またどのような時に使えるか、使い方を確認しましょう。

JavaScriptのsortメソッドとは

まずはJavaScriptのsortメソッドの使い方や、注意点について、解説します。この記事を最後まで読んで、ぜひsortメソッドの使い方をマスターしましょう。

sortメソッドは、配列に含まれる値同士を比較して、値の並び替えを行うメソッドです。引数を何も指定しなかった場合は、アルファベット順にソートが行われます。

アルファベットの大文字、小文字が入り混じっている場合、大文字が先にきます。1つ目の注意点は、大文字と小文字が区別されることです。2つ目の注意点は、ソートが行われた際、新しい配列が返却されるわけではなく、配列そのものを変更するということです。

sortメソッドでは、引数に何も設定しないことで、アルファベット順にソートを行うことができます。

JavaScriptのsortメソッドを使ってみよう

実際にsortメソッドを使ってみましょう。まずは、何も引数を設定せずに使った場合のコードをご紹介します。

var array = new Array("りんご", "みかん", "もも");
array.sort();
alert(array); // みかん, もも, りんご

このコードを実行すると、りんご、みかん、ももは、みかん、もも、りんごの順番に並び替えられます。漢字、カタカナが混ざった配列の場合は、以下のようになります。

var array = new Array("りんご", "みかん", "桃", "キウイフルーツ");
array.sort();
alert(array); // みかん, りんご, キウイフルーツ, 桃

こちらのコードの場合は、みかん、りんご、キウイフルーツ、桃の順番に並び替えられます。それぞれ配列の値同士を比較し、アルファベット順に並び替えが実行されていることが分かります。

JavaScriptのsortメソッドで数値をソートする方法

アルファベット順では数値はうまくソートされない？

sortメソッドに引数を設定しない場合は、対象の配列をアルファベット順にソートが行われることを確認しました。それでは、以下のような場合、どのようにソートされるでしょうか。

100, 52, 321をソートした場合、52, 100, 321の数値の昇順になって欲しいところですが、実際には、アルファベット順にソートされると、100, 321, 52となります。

var array = new Array(100, 52, 321);
array.sort();
alert(array); //100, 321, 52

数値の先頭文字である、1, 3, 5によってソートされるため、この順番になります。sortメソッドに引数を設定せずに、100, 52, 321をソートした場合、アルファベット順にソートされるため、ソート後の並び順は52, 100, 321ではなく、100、321、51となります。

数値の昇順にソートするには？

それでは、どのようにしたらJavaScriptのsortメソッドを使って、数値の昇順にソートをすることができるのでしょうか。数値の昇順などの、アルファベット順以外の独自の設定でソートするには、sortメソッドに独自の関数を引数として設定します。

今回の場合は、数値の昇順にソートをしたいので、比較関数を利用します。比較関数については、またのちほど解説しますが、ソート条件を渡し、数値の昇順にソートを行う場合のコードは以下のとおりです。

var array = new Array(100, 52, 321);
function ascSortFunc(a, b){
return a - b;
}
array.sort(ascSortFunc);
alert(array); // 52, 100, 321

こちらのコードを実行すると、52, 100, 321の順番にソートを行うことができます。

sortメソッドで降順によるソートをする方法

続いて、降順にソートを行う方法です。降順にソートを行うには、昇順とは比較を行う引数の順番を逆にします。コードは、もちろん先ほどのように書くことも可能ですが、メソッドを外出しせずに書くこともできます。降順の例では、メソッドを外出ししない方法をご紹介します。

var array = new Array(100, 52, 321);
array.sort(function(a, b){
return b - a;
});
alert(array); // 321, 100, 52

JavaScriptの比較関数について

さきほど、数値を昇順、降順にするのに利用した、比較関数について解説します。比較関数に使用する演算子についても解説しますので、プログラミング初心者の方もご安心ください。

関係演算子とは

関係演算子について、解説します。関係演算子には、>、 >=、 <、 <=の4つがあります。それぞれの使い方について説明します。

まず、「>」は大なり演算子と呼び、左の要素が右の要素より大きい場合、trueを返却します。以下のコードがtrueの例です。

10 > 1 // true

続いて、「>=」は、大なりイコール演算子と呼び、左の要素が右の要素と同じ、またはより大きい場合、trueを返却します。以下のコードがtrueの例です。

4 >= 4 // true

「<」は、小なり演算子と呼び、左の要素が右の要素より小さい場合、tureを返却します。以下のコードがtrueの例です。

1 < 10 // true

最後に、「<=」は、小なりイコール演算子と呼び、左の要素が右の要素と同じ、またはより小さい場合、trueを返却します。以下のコードがtrueの例です。

1 <= 1 // true

4つの演算子について、表にまとめました。ご確認ください。

演算子	trueを返却する条件
>	左の要素が右の要素より大きい場合
>=	左の要素が右の要素と同じか、より大きい場合
<	左の要素が右の要素より小さい場合
<=	左の要素が右の要素と同じか、より小さい場合

等価演算子

続いて、2つの値同士が等しいかどうか判定するのに使用する等価演算子について、解説していきます。JavaScriptの比較には、厳密な比較と型変換の比較があります。

厳密な比較は、同じ型で、内容も一致している場合にのみ真になります。一方、抽象的な比較は、比較する前に同じ型に自動変換します。

それぞれ厳密な比較では、===を、抽象的な比較では、==を使用します。間違えてしまうと、比較結果が異なってしまうため、混同しないように気をつけましょう。

算術演算子

最後に算術演算子でJavaScriptではよく使用する、足し算(+)、引き算(-)、掛け算(*)、割り算(/)の4つをご紹介します。それぞれ4つの使い方について、解説していきます。

「+」は、足し算に使用します。数値の合計を出す時、また文字列同士を連結するときにも使用します。

1 + 1 // 3
1 + "abc" // 1abc

「-」は、引き算に使用します。左の数値から、右の数値の値を引き、結果を返却します。

3 - 2 // 1

「*」は、掛け算に使用します。2つの数値をかけた結果を返却します。

3 * 3 // 9

「/」は、割り算に使用します。左の数値から右の数値割り、結果を返却します。

9 / 3 // 3

4つの算術演算子と、使用方法について、表にまとめました。ご確認ください。

算術演算子	使用方法
+	数値の合計を出す、文字列を連結させる
–	左の数値から、右の数値の値を引く
*	2つの数値をかける
/	左の数値から、右の数値の値を割る

数値の昇順、降順に使用した関数について

数値の昇順ソートに使用した関数の解説

演算子についての確認ができたので、数値の昇順を求めるのに使用した関数について、解説していきます。数値の昇順を求めるには、以下のコードを使用します。

function ascSortFunc(a, b){
return a - b;
}

このコードを先ほどの、100, 52, 321の配列のソートを例に説明します。まずはaとbには、それぞれ100と52が入ります。コードの2行目にそれぞれ値を代入すると、100-52となり、結果は正の値となり、返却値が返されます。

この返却値が正の値だった場合は、引数aが引数bよりも大きいこと表し、戻り値が0だった場合は2つの引数が同じ、戻り値が負の値だった場合は引数bが引数aよりも大きいことを表します。この比較を繰り返し、配列のすべての要素の順番が決定します。これが数値の昇順ソートに使用した関数の仕組みです。

数値の降順ソートに使用した関数の解説

続いて、数値の降順を求めるのに使用した関数について、解説していきます。数値の降順を求めるには、以下のコードを使用しました。

function(a, b){
return b - a;
}

このコードを昇順と同じく、100, 52, 321の配列のソートを例に説明します。まずはaとbには、それぞれ100と52が入ります。コードの2行目にそれぞれ値を代入すると、100-52となり、結果は先ほどとは反対に負の値となり、返却値が返されます。

返却値によるソート順序の決定方法は先ほどと一緒です。先ほどとは逆に負の値となるため、100の方が先の順番となります。この比較を繰り返し、配列のすべての要素の順番が決定します。これが数値の降順ソートに使用した関数の仕組みです。

JavaScriptで配列のソートを行う方法についてのまとめ

• sortメソッドを使用する
• sortメソッドに引数を設定しないと、アルファベット順になる
• sortメソッドに引数を設定すると、独自の設定でソートを行える
• 数値のソートを行うには、独自の設定で行う必要がある

JavaScriptで配列のソートを行う方法について、お分かりいただけたでしょうか？ 通常の引数を設定しないアルファベット順のソートは簡単ですが、数値を含めた、独自の関数を利用した配列は慣れるまで、なかなか難しいです。

読んで理解しても、実際に書いてみると、本当は分かっていなかった部分なども出てくるので、ぜひ何度も実際にコードを書いてみることをおすすめします。