【Javascript】配列をソート(並び替え)する方法

今回の記事は、

  • Javascriptを使って配列内の要素をソートしたい
  • 配列内の要素を昇順/降順でソートしたい

という方に向けた記事になっています。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


Javascriptを使って配列をソートする方法

Javascriptで配列をソートするには、その名の通り、sort()メソッドを使用します。

sort()メソッドは基本的には引数に比較関数を取り、その比較関数で定義した方法を元に配列内の要素をソートしてくれます。

基本的な使い方

配列.sort(比較関数)

比較関数の使い方

この比較関数は以下のように2種類の引数を取り、関数内に定義したルールを元に配列をソートしていってくれます。

比較関数の使い方

function compare(prev, next)  {
  return prev - next
}

また、ES6より導入されたアロー関数を用いると、より簡潔に記載できます。

アロー関数を用いた方法

(prev, next) => prev - next

本記事では後者のアロー関数を使用させて頂きます。

sort()メソッドを使って数値を昇順/降順にソートする方法

それでは早速、sort()メソッドを使って数値を昇順/降順にソートする方法を見ていきましょう。

数値を昇順にソートする方法

実装コード

const numberArray = [3, 13, 4, 1, 8, 20, 9]

numberArray.sort((prev, next) => prev - next)

console.log(numberArray)

出力結果

[1, 3, 4, 8, 9, 13, 20]

数値を降順にソートする方法

先ほどの例は数値を昇順にソートするコードになりますが、降順にソートする場合には prevnextを入れ替えてあげれば大丈夫です。

実装コード

const numberArray = [3, 13, 4, 1, 8, 20, 9]

numberArray.sort((prev, next) => next - prev)

console.log(numberArray)

出力結果

[20, 13, 9, 8, 4, 3, 1]

sort()メソッドを使って文字列を昇順/降順にソートする方法

続いてはsort()メソッドを使って文字列を昇順/降順にソートする方法を見ていきましょう。

文字列をソートする場合は-ではなく、不等号を使って実装します。

実装コード

const languageArray = ["ruby", "php", "javascript", "vue.js", "html"]

// 昇順の場合
const languageArraySortedByAsc = languageArray.sort((prev, next) => prev < next ? -1 : 1)

console.log(languageArraySortedByAsc)

// 降順の場合
const languageArraySortedByDesc = languageArray.sort((prev, next) => next < prev ? -1 : 1)

console.log(languageArraySortedByDesc)

出力結果

// 昇順の場合
["html", "javascript", "php", "ruby", "vue.js"]

// 降順の場合
["vue.js", "ruby", "php", "javascript", "html"]

なお、文字列をソートする場合に限っては、引数を省略することも可能であり、その場合には昇順でソートされます。

実装コード

const languageArray = ["ruby", "php", "javascript", "vue.js", "html"]

const languageArraySortedByAsc = languageArray.sort()

console.log(languageArraySortedByAsc)

出力結果

["html", "javascript", "php", "ruby", "vue.js"]

単純に昇順でソートする場合にはこちらの方がはるかに楽に実装できますので、こちらもぜひ覚えておいてくださいね。

sort()メソッドを使って文字列の長さを基にを昇順/降順にソートする方法

続いては、sort()メソッドを使って文字列の長さを基にを昇順/降順にソートする方法を見ていきましょう。

こちらは数値のソートと少し似ていて、length()メソッドを使用して文字列の長さを取得し、その情報を基にソートしていきます。

実装コード

const languageArray = ["ruby", "php", "javascript", "vue.js", "html"]

// 昇順の場合
const languageArraySortedByAsc = languageArray.sort((prev, next) => prev.length - next.length)

console.log(languageArraySortedByAsc)

// 降順の場合
const languageArraySortedByDesc = languageArray.sort((prev, next) => next.length - prev.length)

console.log(languageArraySortedByDesc)

出力結果

// 昇順の場合
["php", "ruby", "html", "vue.js", "javascript"]

// 降順の場合
["javascript", "vue.js", "ruby", "html", "php"]

sort()メソッドを使用する際の注意点

さて、ここまでsort()メソッドを使って様々な要素をソートしてきましたが、その使用に際しては一つだけ注意点があります

それは、「sort()メソッドは破壊的メソッドである」ということです。

つまり、sort()メソッドを使用すると、元々の配列をもソート後のものに変更してしまうということです。

そのため、元々の配列を変更したくない場合には、slice()メソッドfrom()メソッド、或いはスプレッド構文[...array])を使って配列を複製し、それを新たな変数に代入した上でsort()メソッドを使用するようにしましょう。

その点だけご注意いただき、あとはどんどん積極的にsort()メソッドを使ってみてください。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまで、Javascriptを使って配列をソート(並び替え)する方法について解説してきましたがいかがでしたか?

アロー関数が登場してからは比較関数の書き方もかなりシンプルになり、ソート機能の実装ハードルもかなり下がってきています。

このソート機能は実際の開発でも様々な場面で活用できますので、ぜひこの機会にマスターしておいてくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。