【Javascript】配列のオブジェクトをソートする方法を解説

Javascriptでプログラムを書いていると、オブジェクトのソート(並べ替え)が必要な場面って多々ありますよね。

今回は配列のオブジェクトをソートする方法を、初心者の方にもわかりやすいように、丁寧に紹介していきます。
サンプルコードも豊富に掲載し、数値だけでなく文字列の並べ替え方法も紹介していますので、是非参考にしてくださいね。

1 ソートとは
2 Sort()メソッドを利用したJavascriptでの配列ソート方法
3 連想配列のソート
4 まとめ

ソートとは

「ソート」という言葉を聞いたことはありますか？英語で「Sort」という単語は日本語では「分類する」という意味ですが、プログラミングの世界では、主に「配列内の要素を並べ替える」という意味で使われます。

ソートはプログラミングの中では基本的な操作のうちの1つといってもいいですね。Javascriptでは配列内の要素(オブジェクト)を並べ替える方法がありますので、その方法について学んでいきましょう。

Sort()メソッドを利用したJavascriptでの配列ソート方法

Javascriptで配列のオブジェクトをソートするにはあらかじめ用意されているSort()メソッドを利用します。ここからは使用例も交えて紹介していきます。

Sort()メソッドの構文

Sort()メソッドを使うには、ソートしたい配列の変数に.sort()とつけるだけです。とてもシンプルですね。また、条件を付加したい場合には「比較関数」というものを付け加えます。
順番に解説していきますので、まずは以下の構文をご覧ください。比較関数についてはこの時点では知らなくても大丈夫です。

配列.sort();
配列.sort(比較関数(関数の内容));

1 2	配列.sort(); 配列.sort(比較関数(関数の内容));

それでは次項からは実例を紹介していきます。

数値をソートする

まずは、数値をソートしてみます。以下の配列を使ってみていきましょう。

var numbers = [ 5, 1, 10, 25, 11, 6 ];

1	var numbers = [ 5, 1, 10, 25, 11, 6 ];

整数がバラバラに格納されていますね。まずはこの配列を比較関数なしでソートしてみます。

var numbers = [ 5, 1, 10, 25, 11, 6 ];

console.log(numbers.sort());

var numbers = [ 5, 1, 10, 25, 11, 6 ];

console.log(numbers.sort());

いかがですか？[1, 10, 11, 25, 5, 6, 25]の順に表示されるはずです。番号順ではないですね。実はSort()メソッドは要素を文字列として評価するのがデフォルトなんです。

文字列にすると”5”よりも”25”のほうが小さな値なんですね。では、数字として小さい順に並べ替えるにはどうすればいいのでしょうか。ここで出てくるのが比較関数です。以下のように記述してみましょう。

var numbers = [ 5, 1, 10, 25, 11, 6 ];

console.log(numbers.sort(function(a,b){
   if (a < b ) return -1;
   if (b < a ) return 1;

   return 0;
}));

var numbers = [ 5, 1, 10, 25, 11, 6 ];

console.log(numbers.sort(function(a,b){

if (a < b ) return -1;

if (b < a ) return 1;

return 0;

}));

今度は[1, 5, 6, 10, 11, 25]と数字の値が小さい順にソートされましたね。比較演算子の向きを逆にすると、値が大きい順にソートすることができます。

var numbers = [ 5, 1, 10, 25, 11, 6 ];

console.log(numbers.sort(function(a,b){
   if (a > b ) return -1;
   if (b > a ) return 1;

   return 0;
}));

var numbers = [ 5, 1, 10, 25, 11, 6 ];

console.log(numbers.sort(function(a,b){

if (a > b ) return -1;

if (b > a ) return 1;

return 0;

}));

[25, 11, 10, 6, 5, 1]の順で表示されましたね。では、比較関数の中でどんな処理が行われているのかみてみましょう。まず、比較関数には返り値によって、以下のようなルールがあります。引数を今回同様aとbにした場合で考えます。

・aとbを引数として取り、返り値が0未満の場合はaが先にくるようにする
・aとbを引数として取り、返り値が0より大きい場合はbが先にくるようにする
・aとbを引数として取った際に双方が同じ値で合った場合は返り値も同じ値になる

今回のサンプルコードでは a <b (aがbより小さい場合)に-1(0未満の値）返るので、aが先にくるようになる、つまり最初に来る値が小さな値になるようにソートされる、ということです。

sort()メソッドに比較関数を渡すことで、すべてのオブジェクト同士で、すべての評価結果が満たされるまで(ソートが完了するまで)この処理が繰り返されているんですね。

内部の動作を覚えておくことに損はありませんが、普段プログラミングしている中ではここまで常に意識する必要はありません。上記のサンプルコードをコピーして使っていただければ大丈夫です。

文字列をソートする

次に文字列をソートしてみましょう。以下の配列を考えます。

var strings = ['キャベツ', 'ピーマン', '大根', 'なすび', 'キウイ'];

1	var strings = ['キャベツ', 'ピーマン', '大根', 'なすび', 'キウイ'];

sort()メソッドはデフォルトで要素を文字列として処理してくれるので、この場合は比較関数を使う必要がありません。

結果を見てみましょう。

var strings = ['キャベツ', 'ピーマン', '大根', 'なすび', 'キウイ'];
console.log(strings.sort());

1 2	var strings = ['キャベツ', 'ピーマン', '大根', 'なすび', 'キウイ']; console.log(strings.sort());

実行すると、[“なすび“, “キウイ“, “キャベツ“, “ピーマン“, “大根”]の順に表示されましたね。辞書順に並べ替えられているのがわかります。反対に並べ替えたい場合には、reverse()メソッドを使います。使い方はsort()と同じです。

var strings = ['キャベツ', 'ピーマン', '大根', 'なすび', 'キウイ'];
console.log(reverse.sort());

1 2	var strings = ['キャベツ', 'ピーマン', '大根', 'なすび', 'キウイ']; console.log(reverse.sort());

[“大根“, “ピーマン“, “キャベツ“, “キウイ“, “なすび“]の順に表示されましたね。

連想配列のソート

それではここからは少しレベルアップして、連想配列のソート方法を紹介します。連想配列についてまだ学んだことがない方はまず連想配列について学んでから読んでみるといいかもしれません。今回は以下のような連想配列で考えます。

var obj = [
   {sbj: ‘数学’, score: 80};
   {sbj: ‘英語’, score: 20};
   {sbj: ‘社会’, score: 55};
   {sbj: ‘国語’, score: 90};
];

var obj = [

{sbj: ‘数学’, score: 80};

{sbj: ‘英語’, score: 20};

{sbj: ‘社会’, score: 55};

{sbj: ‘国語’, score: 90};

];

この連想配列は、とある生徒のテスト結果を想定しています。これを、点数の高い順に並べ替えてみましょう。

var obj = [
   {sbj: ‘数学’, score: 80};
   {sbj: ‘英語’, score: 20};
   {sbj: ‘社会’, score: 55};
   {sbj: ‘国語’, score: 90};
];

var obj = [

{sbj: ‘数学’, score: 80};

{sbj: ‘英語’, score: 20};

{sbj: ‘社会’, score: 55};

{sbj: ‘国語’, score: 90};

];

console.log(obj.sort(function(a,b){
   if (a.score > b.score ) return -1;
   if (b.score > a.score ) return 1;

   return 0;
}));

console.log(obj.sort(function(a,b){

if (a.score > b.score ) return -1;

if (b.score > a.score ) return 1;

return 0;

}));

[国語、数学、社会、英語]の順に表示されましたね。このように比較関数の中で”.要素名”と記載することで好きな要素をキーに並べ替えることができます。

まとめ

いかがでしたか？配列内のオブジェクトをソートする方法を学びました。冒頭にも書いたとおり、ソートを含むデータの操作はプログラミングをする上でとても重要な基礎ですので、繰り返し練習して覚えていきましょう。本記事で紹介した比較関数はそのまま流用することもできますので、活用してみてくださいね。

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。