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

今回の記事は、

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

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


フリーランス案件を探すならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社Hajimari
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約28,000件 約3,300件 約4,200件
平均単価 68.2万円 72.2万円
最高月収 145万円 200万円 176万円
支払いサイト 15日(月末締め翌月15日支払い) 20日
手数料(中間マージン) 非公開 非公開
※実質20%
非公開
特徴高単価な案件が多い
福利厚生サービスが受けられる
・首都圏の案件が中心
給与保証制度で安定した収入を得られる
・税務処理のサポートあり
・マージン率は実質20%
週2/週3の案件が多い
在宅/リモート案件が多い
・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例 ・株式会社Gunosy
・株式会社バンダイナムコホールディングス
・株式会社ユーザベース
・Sansan株式会社
・株式会社一休
・株式会社FiNC Technologies など
・クックパッド株式会社
・株式会社カオナビ
・株式会社Kaizen Platform など
説明記事
公式サイト


転職を考えているならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社リブセンス
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約13,000件 約800件
※非公開求人が多い

※ドラフト制のため、対象外
年齢層 20代:◎
30代:〇
40代:〇
20代:〇
30代:〇
40代:△
20代:〇
30代:〇
40代:〇
特徴エンジニア・デザイナーを専門としている
・カウンセリングに時間をかける
年収アップ率60%の実績
IT/Web/ゲーム業界専門の転職エージェント
・業界経験者がキャリアコンサルタントを務める
・丁寧なカウンセリングで入社後の離職率1%以下を実現
ドラフト制による採用を叶える特殊なサービス
スキル・経験重視で評価してもらえる
・他エンジニアの入札結果を見ることで
自分の市場価値が分かる
紹介企業例 ・サイボウズ株式会社
・株式会社サイバーエージェント
・Chatwork株式会社 など
・DMM.com
・Money Forward
・SmartHR など
・メルカリ
・ZOZOテクノロジーズ
・freee など
説明記事
公式サイト



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を使って配列をソート(並び替え)する方法について解説してきましたがいかがでしたか?

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

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

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

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