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

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

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

ソートとは

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

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

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

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

Sort()メソッドの構文

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

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

数値をソートする

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

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

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

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

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

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

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

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

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

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

文字列をソートする

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

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

結果を見てみましょう。

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

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

連想配列のソート

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

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

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

まとめ

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