【JavaScript入門】sort()による配列・文字列・オブジェクトのソート方法

今回は、JavaScriptで数値や文字列などを昇順・降順で並び替えることができる「sort()」メソッドについて学習していきましょう！

「JavaScriptで並び替えをする方法が知りたい」
「sort()メソッドの使い方がわからない」
「オブジェクトの並び替えはどうやるの？」

このような内容も含めて、本記事では以下のような構成で解説していきます！

【基礎】「sort()」とは？
【基礎】「sort()」の使い方
【実践】配列・オブジェクトの並び替え
【実践】破壊的メソッドについて
【まとめ】sort()の使い方まとめ

この記事で、sort()をしっかり学習してスキルアップを目指していきましょう！

＞＞＞今すぐ「sort()の使い方」を知りたい方はこちら

この記事の目次

1 sort()とは？
2 文字列の「sort()」について
- 2.1 文字列をソートする方法
3 比較関数について
4 配列の「sort()」について
- 4.1 sort()で数値をソート（並び替え）する方法
- 4.2 sort()で降順によるソート（並び替え）をする方法
5 オブジェクトの「sort()」について
- 5.1 オブジェクトのキーを使ったソート（並び替え）の方法
6 「sort()」の破壊的メソッドについて
7 sort()の使い方まとめ
8 まとめ

sort()とは？

sort()は、JavaScriptで並び替えを実現するメソッドになります。

文字列順や数字の大小などによる昇順・降順で対象の値を並び替えることができるようになるので、データの操作などでよく使われます。

また、配列に格納されたバラバラの値やオブジェクトのキー（プロパティ）を対象にして並び替えることも可能なので、活用範囲はとても広いと言えます。

ただし、sort()は元の配列データを変更してしまう破壊的メソッドでもある点には注意が必要です。

本記事ではこのような注意点も含めて基本から応用まで解説していきますので、ぜひ参考にしてみてください！

文字列の「sort()」について

この章では、文字列が格納された配列のソート方法について見ていきましょう！

「sort()」メソッドのもっとも基本的な使い方について学んでいきます。

文字列をソートする方法

文字列をソートするには、ソートしたい文字列が格納されている配列を対象に「sort()」メソッドを呼び出します。

次のプログラムで確認してみましょう。

var str = ['sa', 'mu', 'ra', 'i'];
str.sort();

console.log(str);

var str = ['sa', 'mu', 'ra', 'i'];

str.sort();

console.log(str);

実行結果

["i", "mu", "ra", "sa"]

1	["i", "mu", "ra", "sa"]

この例では、文字列が格納された配列に対して「sort()」を実行しています。

実行結果を見るとアルファベット順に並び替えられているのがわかりますね。

比較関数について

単純な文字列の並び替えであればsort()をそのまま実行すればいいのですが、数値やオブジェクト構造などの場合だと上手くできません。

このような場合には「比較関数」と言って、2つの値を比較しながら1つずつ順番を入れ替えていく手法を取ります。

次のサンプル例を見てください！

function compareFunc(a, b) {
    return a < b;
}

function compareFunc(a, b) {

return a < b;

}

この例では「a」「b」という2つの引数を取り、returnで「a ＜ b」を比較した結果を返していますね。

これにより、「a」が「b」よりも小さいかどうかを確認することで、順番を入れ替えるというわけです。

比較条件としては「＜」以外にも、「＞, ==, -」などを使って比較することで昇順・降順などを変更することができます。

あとは、この関数をsort()の引数に当てはめれば完成です。

それでは、比較関数を使って次の章から実際に並び替えをしてみましょう！

配列の「sort()」について

この章では、配列に格納された数値データに対してのソート方法について見ていきましょう！

主に、昇順・降順の並び替え方法について学んでいきます。

sort()で数値をソート（並び替え）する方法

ここでは、数値をソートする方法を解説します。

数値をソートするには、引数に比較関数(compareFunction)を指定します。

引数に比較関数を指定しない場合には文字列として比較されるので注意が必要です。

次のプログラムで確認してみましょう。

function compareFunc(a, b) {
  return a - b;
}

var num = [5, 3, 10, 6, 55];
num.sort(compareFunc);

console.log(num);

function compareFunc(a, b) {

return a - b;

}

var num = [5, 3, 10, 6, 55];

num.sort(compareFunc);

console.log(num);

実行結果：

[3, 5, 6, 10, 55]

1	[3, 5, 6, 10, 55]

このようにして数値をソートすることができました。

sort()で降順によるソート（並び替え）をする方法

ここでは、降順でソートする方法を解説します。

降順でソートするには、引数の比較関数を降順になるように指定します。

次のプログラムで確認してみましょう。

function compareFunc(a, b) {
  return b - a;
}

var num = [5, 3, 10, 6, 55];
num.sort(compareFunc);

console.log(num);

function compareFunc(a, b) {

return b - a;

}

var num = [5, 3, 10, 6, 55];

num.sort(compareFunc);

console.log(num);

実行結果：

[55, 10, 6, 5, 3]

1	[55, 10, 6, 5, 3]

このようにして降順にソートすることができました。

オブジェクトの「sort()」について

この章では、配列に格納されたオブジェクトのソート方法について見ていきましょう！

主に、オブジェクトのプロパティを活用した並び替え手法について学んでいきます。

オブジェクトのキーを使ったソート（並び替え）の方法

配列に格納されたオブジェクトの構造は「連想配列」とも呼ばれたりしますが、このオブジェクトをソートするにはどうすれば良いでしょうか？

実は基本的なソート方法はこれまでとほとんど同じです。

しかし、注目すべきはオブジェクトの構造にあり、一般的に「プロパティ: 値」という形式になっています。

このプロパティを利用して「sort()」メソッドで並び替えを行うのがポイントなのです。

次のような構造の配列があるとします！

var lists = [
  {name: 'メロン', price: 500},
  {name: 'バナナ', price: 100},
  {name: 'スイカ', price: 280},
  {name: 'イチゴ', price: 300}
];

var lists = [

{name: 'メロン', price: 500},

{name: 'バナナ', price: 100},

{name: 'スイカ', price: 280},

{name: 'イチゴ', price: 300}

];

これは複数のオブジェクトが格納された配列ですが、例えば「name」プロパティを使って名前を昇順で並び替えてみましょう！

lists.sort(function(a, b) {
  if (a.name > b.name) {
    return 1;
  } else {
    return -1;
  }
})

console.log(lists);

lists.sort(function(a, b) {

if (a.name > b.name) {

return 1;

} else {

return -1;

}

})

console.log(lists);

実行結果

[{name: "イチゴ", price: 300}
 {name: "スイカ", price: 280}
 {name: "バナナ", price: 100}
 {name: "メロン", price: 500}]

[{name: "イチゴ", price: 300}

{name: "スイカ", price: 280}

{name: "バナナ", price: 100}

{name: "メロン", price: 500}]

sort()メソッドの処理に注目してください！

「a.name > b.name」のようにプロパティを比較することで、並び替えを実現しているわけです。

実行結果を見ると果物の名称が昇順で並び替えられているのが分かりますね。

「sort()」の破壊的メソッドについて

sortメソッドは元の配列を変更してしまう破壊的メソッドなので、使うときには注意してください。

元の配列を残しておきたい場合には、sliceで配列のコピーを作成します。

次のプログラムで確認してみましょう。

var str1 = ['sa', 'mu', 'ra', 'i'];
var str2 = str1.slice();
str2.sort();

console.log(str1);
console.log(str2);

var str1 = ['sa', 'mu', 'ra', 'i'];

var str2 = str1.slice();

str2.sort();

console.log(str1);

console.log(str2);

実行結果：

["sa", "mu", "ra", "i"]
["i", "mu", "ra", "sa"]

1 2	["sa", "mu", "ra", "i"] ["i", "mu", "ra", "sa"]

このようにして、元の配列を残してソートすることができました。

sort()の使い方まとめ

最後に、sort()の基本的な使い方についてまとめておきます。

まず、単純な文字列を並び替える場合は、対象の文字列にそのままsort()を実行すればOKです。

var str = ['sa', 'mu', 'ra', 'i'];

str.sort();

console.log(str);

var str = ['sa', 'mu', 'ra', 'i'];

str.sort();

console.log(str);

実行結果

["i", "mu", "ra", "sa"]

1	["i", "mu", "ra", "sa"]

この例では、文字列が格納された配列の要素に対してsort()が実行されて並び替えられているのが分かりますね。

また、文字列ではなく数値を並び替える場合は比較関数を使ってsort()を実行します。

function compareFunc(a, b) {
  return a - b;
}

var num = [5, 3, 10, 6, 55];
num.sort(compareFunc);

function compareFunc(a, b) {

return a - b;

}

var num = [5, 3, 10, 6, 55];

num.sort(compareFunc);

実行結果

[3, 5, 6, 10, 55]

1	[3, 5, 6, 10, 55]

比較関数は2つの値を比較して値の大小を1つずつ決めていくことで並び替えていきます。

ちなみに、降順で並び替える場合は「b – a」に条件を変えるだけで実行可能です。

また、オブジェクト構造が格納されている配列で、特定のキー（プロパティ）を対象にして並び替えたい時はそのプロパティ名を指定した比較関数を作ります。

lists.sort(function(a, b) {

    return a.name > b.name;

})

lists.sort(function(a, b) {

return a.name > b.name;

})

この例では、「name」プロパティに格納されている値を対象にして並び替えをしています。

まとめ

今回はsortメソッドでソートする方法を解説しました。

sortメソッドは降順にもソートできるので、ぜひ活用してくださいね。

もし、ソートをする方法を忘れてしまったらこの記事を確認してください！

Pocket

【JavaScript入門】sort()による配列・文字列・オブジェクトのソート方法

sort()とは？

文字列の「sort()」について

文字列をソートする方法

比較関数について

配列の「sort()」について

sort()で数値をソート（並び替え）する方法

sort()で降順によるソート（並び替え）をする方法

オブジェクトの「sort()」について

オブジェクトのキーを使ったソート（並び替え）の方法

「sort()」の破壊的メソッドについて

sort()の使い方まとめ

まとめ

最短でエンジニアを目指すなら侍エンジニア塾

書いた人

中沢丈

おすすめコンテンツ

sort()とは？

文字列の「sort()」について

文字列をソートする方法

比較関数について

配列の「sort()」について

sort()で数値をソート（並び替え）する方法

sort()で降順によるソート（並び替え）をする方法

オブジェクトの「sort()」について

オブジェクトのキーを使ったソート（並び替え）の方法

「sort()」の破壊的メソッドについて

sort()の使い方まとめ

まとめ

最短でエンジニアを目指すなら侍エンジニア塾

書いた人

中沢 丈

おすすめコンテンツ

この記事のあとによく読まれています！

中沢丈