JavaScriptでsortを使って配列のobjectを並べ替える方法を現役エンジニアが解説【初心者向け】

JavaScriptでsortを使って配列のobjectを並べ替える方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

 

sortメソッドとは

複数の値が入っている配列の中身の順番を並び替えるメソッドです。

たとえば、商品のデータが入っている配列を、金額の安い順に並べたりする際に使用します。
 

sortメソッドの使い方

配列になっている変数に「.sort()」とすれば並び変わります。

引数に何も指定しなければ、文字の辞書順（あいうえお順みたいなこと）になります。また、第1引数に並ぶ順を指定する関数を渡すことで、順番を指定できます。

MDNのリファレンスはこちら
 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

JavaScriptでsortを使って配列のobjectを並べ替える方法

それでは具体的なソースコードで並べ替えをおこなって見ましょう。

let array = [4, 10, 5, 1];
//引数なしの辞書順
console.log(array.sort());
//[1, 10, 4, 5]と表示
//比較の関数を引数に渡さなければ、辞書順となる

//昇順
array.sort( (a,b) =>  a-b  );
console.log(array);
//[1, 4, 5, 10]と表示

//  降順
array.sort( (a,b) =>  b-a   );
console.log(array);
// [10, 5, 4, 1]と表示

 

解説

「let array = [4, 10, 5, 1]」にて、まずは数字が4つ入った配列を用意しています。「array.sort()」のように引数なしで実行した場合は辞書順となります。

結果が、[1, 10, 4, 5]となり4の前に10がくるのは、辞書的に文字として見ると10の1文字目が1で4の前だからです。

「array.sort( (a,b) => a-b )」では、昇順（小さい順）になるよう関数を渡しています。

この関数の結果がマイナスならば、引数1（ここではa）が前に並べ替えられます。そのため2つの数字を単純に引き算すれば、大きい数と比較されると結果がマイナスなので昇順になります。

「array.sort( (a,b) => b-a )」では、降順（大きい順）になるよう関数を渡しています。昇順のときは「a-b」だったのを「b-a」と反対にすることで結果がマイナスになる順が逆になります。
 

sortメソッドを使う時の注意点

引数を指定しない場合は、文字の辞書順であることに注意しましょう。数字の並び替えが先程の例のように意図せぬものになるかもしれません。

数字を扱うときは1つ目から2つ目を引く関数を渡すことで昇順（小さい順）になり、逆なら降順（大きい順）になることを動作を見ながら確認してみてください。
 

筆者プロフィール

横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。