配列の要素を並び替える

配列に含まれる要素について、逆順に並べ替えたり指定した条件に従って並べ替えることができます。ここでは JavaScript で配列の要素を並び替える方法について解説します。

(Last modified: 2024-09-04)

要素を逆順に並び替える(reverseメソッド)

Array オブジェクトの reverse メソッドを使うと、配列の要素を逆順に並び替えます。書式は次の通りです。

配列名.reverse()

対象となる配列そのものの要素が逆順に並び替えられます。戻り値としても並び替えが終わった配列が返されます。

次のサンプルをみてください。

let fruit = ['Apple', 'Grapes', 'Melon', 'Orange'];
let newfruit = fruit;

fruit.reverse();

console.log(fruit);
>> ["Orange", "Melon", "Grapes", "Apple"]

console.log(newfruit);
>> ["Orange", "Melon", "Grapes", "Apple"]

reverse メソッドを実行すると、対象の配列の要素の順番が逆順になります。逆順にした新しい配列を返すのではなく対象の配列そのものを変更していますので、同じ配列を参照していた別の変数にも影響があります。

要素を文字列の並び順で並び替える(sortメソッド)

Array オブジェクトの sort メソッドを使うと、配列の要素を文字列の並び順または指定した並び順で並び替えます。書式は次の通りです。

配列名.sort()
配列名.sort( コールバック関数(一つ目の要素, 二つ目の要素) )

引数を指定しなかった場合は配列の各要素を文字列に変換したあと文字列の並び順(昇順)で並び替えます。 sort メソッドの場合も対象となる配列の要素そのものが並び替えられます。引数にコールバック関数を指定した場合は、どのように並び替えるのかをコールバック関数の中で定義します。コールバック関数を用いた方法はあとで解説します。

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

let fruit = ['Orange', 'Apple', 'Grapes'];
let newfruit = fruit;

fruit.sort();

console.log(fruit.sort());
>> ["Apple", "Grapes", "Orange"]

console.log(newfruit);
>> ["Apple", "Grapes", "Orange"]

配列に含まれる各要素を文字列に変換したあとで、文字列の並び順で並び替えます。並び替えた新しい配列を返すのではなく対象の配列そのものを変更していますので、同じ配列を参照していた別の変数にも影響があります。

要素が文字列の場合はいいのですが、要素に数値が格納されていた場合は注意が必要です。次のサンプルをみてください。

let no = [5, 27, 12, 41];

console.log(no.sort());
>> [12, 27, 41, 5]

要素に格納されている値が数値だったとしても数値の大きさで並び替えが行われるのではなく、数値を文字列にしたあとで文字列として並び替えを行います。そのためまず最初の文字で並び替えが行われるため先ほどのような結果となります。数値の大きさを比較して並び替えを行うには、この後で解説するコールバック関数を用いる方法を使ってください。

要素を比較するための関数を使って並び替える(sortメソッド)

先ほどと同じ sort メソッドを使いますが、引数に指定したコールバック関数の中で要素と要素とどのように比較するのかを自分で定義します。

配列名.sort( コールバック関数(一つ目の要素, 二つ目の要素) )

コールバック関数では 2 つの要素の値を引数に取ります。そして次のルールに従って並び替えを行います。

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

let word = ['AA', 'CC', 'BB'];

word.sort(function(first, second){
  if (first > second){
    return -1;
  }else if (first < second){
    return 1;
  }else{
    return 0;
  }
});

console.log(word);
>> ["CC", "BB", "AA"]

このサンプルでは、二つの要素(例えば 'AA' と 'CC' )を引数にしてコールバック関数が呼び出されます。二つの値を比較し 'AA' > 'CC' なら -1 を返し、 'AA' < 'CC' なら 1 を返します。同じならば 0 を返します。実際には 'AA' < 'CC' なので 1 が返されるため二つ目の要素( 'CC' )を一つ目の要素( 'AA' )より小さいインデックスにします。

その結果、 sort メソッドを実行すると配列は降順に並び替えが行われます。

今度は数値が格納されている要素の並び替えを数値の大小で並び替えをしてみます。次のサンプルを見てください。

let no = [5, 27, 12, 41];

no.sort(function(first, second){
  if (first > second){
    return 1;
  }else if (first < second){
    return -1;
  }else{
    return 0;
  }
});

console.log(no);
>> [5, 12, 27, 41]

このサンプルでは、数値の値を文字列に変換してから比較するのではなく数値のまま比較しているので、数値の大きさに従って並び替えが行われています。

また数値の並び替えを行う場合は先ほどのように if 文を使わなくても次のように記述することで同じ結果となります。

let no = [5, 27, 12, 41];

no.sort(function(first, second){
  return first - second;
});

console.log(no);
>> [5, 12, 27, 41]

引数 first の値が second より大きければ 0 より大きい値が返され、小さければ 0 より小さい値が返されます。

なおコールバック関数はアロー関数式を使って次のように記述することもできます。(アロー関数式については「アロー関数式を使って関数を定義する」を参照されてください)。

let no = [5, 27, 12, 41];

no.sort((first, second) => first - second);

console.log(no);
>> [5, 12, 27, 41]

-- --

JavaScript で配列の要素を並び替える方法について解説しました。

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。