【JavaScript入門】sortメソッドで配列・文字列・オブジェクトをソートする

配列を扱う際に、要素を並び替えたいケースがあると思います。
その際に使用できるのが、sortメソッドです。

今回は、JavaScriptの sortメソッドを使用する方法について、解説していきたいと思います。

JavaScriptのsort()とは？

sortメソッドは、配列の既存メソッドです。
対象の配列内にある要素の並び替えを行いたい場合に使用します。

特定のデータをまとめて取り扱う際によく使用される配列ですが、必ずしも要素が値の内容に沿った順番に並べられているとは限りません。
バラバラに並んだ値を、特定の条件に従って並び替えたい時に活用できるのが、sortメソッドの特徴です。

sortメソッドの使い方

sortメソッドの具体的な使用方法について、見ていきましょう。

基本構文

sortメソッドを使用する際は、以下の構文で記述します。

【基本構文】

配列名.sort(比較関数)

比較関数とは、ソートを行う際にどの順序で並べ替えるかを決めるための関数です。
関数は省略可能で、その場合は要素の値を文字列に変換し、Unicodeコードポイント順にソートします。

まずは、簡単な例で sortメソッドの動作を見てみましょう。

【サンプルコード】

const sampleArray = ["orange", "apple", "banana"];

sampleArray.sort();

console.log(sampleArray);

【実行結果】

[ 'apple', 'banana', 'orange' ]

アルファベット順に従い、配列内の要素が並べ替えられましたね。
これが、sortメソッドの基本的な動作となります。

配列の要素をソートする

格納された値のデータ型や、並べ替えたい条件によっては、比較関数を使用しないと正しく並べ替えられない場合もあります。
それぞれのケースについて見ていきましょう。

数値をソートする

まずは、数値型の要素を並べ替えるケースについて解説していきます。

要素に格納された値が数値型である場合は、必ず比較関数を使用して条件を指定するようにしましょう。
上述したように、引数を省略した場合は Unicodeコードポイントに沿って並べ替えが行われるため、期待する結果とは異なる順番にソートされてしまう場合があります。

以下のサンプルコードを見てみましょう。

【サンプルコード】

const sampleArray = [1, 7, 11, 2, 20];

sampleArray.sort();

console.log(sampleArray);

【実行結果】

[ 1, 11, 2, 20, 7 ]

引数の省略により、文字列とみなした上でのソートが行われているため、数値の大小がバラバラになってしまっているのが分かりますね。
これを解消するために使用するのが、比較関数です。

比較関数内は、値の比較に使用する２つの引数を取り、並べたい順番に合わせて戻り値の内容を指定します。
例えば、昇順にソートしたい場合は次のように記述します。

【サンプルコード】

sampleArray.sort((a, b) =>{
    return a - b;
});

【実行結果】

[ 1, 2, 7, 11, 20 ]

sortメソッドでは、関数の戻り値が０より大きい場合は a を b の後ろに、０より小さい場合は a を b の前に、０の場合は元の状態を維持する形で要素を並べ替えます。
数値型の場合は、値同士の引き算による算出が可能であるため、上記のコードで要素を並べ替えることができます。

要素を降順でソートする

先ほど紹介したコードは、数値型の要素を昇順に並べ替える場合の記述方法でした。
では、要素を降順に並べ替えたい場合はどうしたらいいのでしょうか？

方法は至って簡単で、先ほど 「a – b」 と記述した箇所を、「b – a」 に変更するだけで実行できます。
以下のサンプルコードで確認してみましょう。

【サンプルコード】

const sampleArray = [1, 7, 11, 2, 20];

sampleArray.sort((a, b) =>{
    return b - a;
});

console.log(sampleArray);

【実行結果】

[ 20, 11, 7, 2, 1 ]

無事に、値を降順に並び替えることができましたね。
このように、要素のソート順を昇順にするか、もしくは降順にするかで、戻り値に指定する内容を使い分けるようにしましょう。

文字列をソートする

続いて、文字列型の要素をソートする方法について見ていきましょう。

ソート順を昇順にする場合は、引数を省略して記述する方法が最も簡潔で見やすいコードとなります。
比較基準がコードポイントの順番となるため、大文字と小文字は区別した状態で並び替えられます。

【サンプルコード】

const sampleArray = ["orange", "apple", "banana", "Grape"];

// 大文字の方が小文字よりも先に来る
sampleArray.sort();

console.log(sampleArray);

【実行結果】

[ 'Grape', 'apple', 'banana', 'orange' ]

引数を省略した際のソート順は昇順のみとなるため、要素を降順に並べ替えたい場合は、数値型の時と同様に比較関数を使用します。

文字列型の場合は、-演算子による減算ではなく、比較演算子を使用して行った比較の結果に基づいて処理を行います。
その際に注意するべきなのが、真偽値そのものを戻り値として使用するのではなく、その結果を元に条件分けなどをして返す値を決める必要があることです。

まずは、以下の例を見てみましょう。

【サンプルコード】

const sampleArray = ["orange", "apple", "banana", "Grape"];

sampleArray.sort((a, b) =>{
    return a < b;
});

console.log(sampleArray);

【実行結果】

[ 'orange', 'apple', 'banana', 'Grape' ]

結果を見ると、並び替えが正常に行われないまま処理が完了してしまっていますね。
これは、値の比較結果に基づいて本来行いたい処理と、戻り値の組み合わせが噛み合っていないことにより発生している現象です。

上述したように、要素の並び替えは戻り値の数値を元に実行されるため、真偽値も数値型に変換された上で処理が行われます。
真偽値はそれぞれ、trueが1、falseが0に変換されますが、マイナス値の挙動を行いたい場面でこれらの数値が返されることにより、意図しない挙動となってしまうのです。

また、ブラウザによって引数に渡される要素の順番が異なる場合があるため、挙動がブラウザごとに変化する原因にもなってしまいます。
これらを回避するために、真偽値をそのまま使用するのではなく、条件分けをして戻り値に渡す値を指定する必要があります。

【サンプルコード】

const sampleArray = ["orange", "apple", "banana", "Grape"];

sampleArray.sort((a, b) =>{

    return a < b ? 1 : -1;
});

console.log(sampleArray);

【実行結果】

[ 'orange', 'banana', 'apple', 'Grape' ]

上記では、三項演算子を使用して条件ごとに戻り値を指定しています。
この他にも、if文を使用して記述することも可能です。

この方法もまた、条件ごとに返す値を変えることにより、昇順と降順を使い分けることができます。

オブジェクトをソートする

最後に、オブジェクト型の要素をソートする方法について見ていきましょう。
比較方法はこれまで解説した方法と同様ですが、オブジェクト型の場合は、値の比較時に並び替えの基準とするプロパティのキー (プロパティ名) を指定する必要があります。

以下のサンプルコードを見てみましょう。

【サンプルコード】

const sampleArray = [
  { name: "やまだ たろう", age: 15 },
  { name: "たなか じろう", age: 18 },
  { name: "さとう はなこ", age: 16 },
];

sampleArray.sort((a, b) => {
  return a.name > b.name ? 1 : -1;
});

console.log(sampleArray);

【実行結果】

[
  {
    name: "さとう はなこ",
    age: 16,
  }, {
    name: "たなか じろう",
    age: 18,
  }, {
    name: "やまだ たろう",
    age: 15,
  }
]

上記は、要素を名前順に並び替えた場合の結果です。
このように、「変数名.プロパティ名」 と記述することで、どのプロパティを比較基準にするかを指定することができます。

【サンプルコード】

// 指定するプロパティによってソートの基準を変更できる
sampleArray.sort((a, b) =>{

    return a.age > b.age ? 1 : -1;
});

console.log(sampleArray);

【実行結果】

[
  {
    name: "やまだ たろう",
    age: 15,
  }, {
    name: "さとう はなこ",
    age: 16,
  }, {
    name: "たなか じろう",
    age: 18,
  }
]

【注意点】sortメソッドによる配列の破壊的変更

配列の要素を任意の条件で並び替えすることができる sortメソッドですが、注意点が一つあります。
sortメソッドは破壊的メソッドに分類されるもので、使用すると元の配列の内容が変更されてしまいます。

【サンプルコード】

const sampleArray = [1, 5, 2];
const result = sampleArray.sort();

// 元の配列も変更される
console.log(sampleArray);
console.log(result);

【実行結果】

[ 1, 2, 5 ]
[ 1, 2, 5 ]

元の配列を変更せずにソートを行いたい場合は、toSortedメソッドを使用しましょう。

【サンプルコード】

const sampleArray = [1, 5, 2];
const result = sampleArray.toSorted();

console.log(sampleArray);
console.log(result);

【実行結果】

[ 1, 5, 2 ]
[ 1, 2, 5 ]

ただし、toSortedメソッドは比較的新しいメソッドのため、環境によっては使用できない場合もあります。
その際は、sliceメソッドでコピーをしてからソートを行う方法で代用しましょう。

【サンプルコード】

// 他の部分は省略
const result = sampleArray.slice().sort();

// 実行結果は省略

まとめ

今回は、JavaScriptの sortメソッドを使用する方法について解説しました。
データ型や並べたいソート順に合わせて正しく活用できるよう、記述方法をしっかり確認していきましょう。

JavaScriptの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。