JavaScriptでサブ配列の最初の要素を基準に配列を並べ替える方法

JavaScriptでは、ネストされた配列（配列の中に配列が入った構造）を、各サブ配列の最初の要素を基準にして並べ替えることができます。この操作には、標準メソッドである sort() を使用します。

サンプルデータの準備

例として、学生の点数と名前を持つ次のような2次元配列を考えてみましょう。

var studentDetails =
[
    [89, "John"],
    [78, "John"],
    [94, "John"],
    [47, "John"],
    [33, "John"]
];

この配列を、各サブ配列の最初の要素（点数：89、78、94など）を基準にして並べ替えます。sort() メソッドに比較関数を渡すことで、独自の並び順を定義できます。

コード例

以下は、点数の降順（大きい順）に並べ替えるコードです。

var studentDetails =
    [
        [89, "John"],
        [78, "John"],
        [94, "John"],
        [47, "John"],
        [33, "John"]
    ];
studentDetails.sort((first, second) => second[0] - first[0])
console.log(studentDetails);

比較関数の仕組み

比較関数 (first, second) => second[0] - first[0] では、各サブ配列のインデックス0番目の値同士を引き算しています。結果が正の場合は first が後ろへ、負の場合は first が前へ移動するため、この書き方では降順になります。昇順にしたい場合は first[0] - second[0] と逆にしてください。

プログラムの実行方法

Node.js環境で上記のプログラムを実行するには、次のコマンドを使用します。

node fileName.js.

ここでは、ファイル名を demo293.js として保存したものとします。

実行結果

コンソールには次のような出力が表示されます。

PS C:\Users\Amit\javascript-code> node demo293.js
[
    [ 94, 'John' ],
    [ 89, 'John' ],
    [ 78, 'John' ],
    [ 47, 'John' ],
    [ 33, 'John' ]
]

ご覧のとおり、配列が点数の高い順（94 → 89 → 78 → 47 → 33）に正しく並べ替えられました。

まとめ

ネストされた配列を特定の要素で並べ替えるポイントは以下の通りです。

• sort() メソッドにアロー関数形式の比較関数を渡す。
• 比較対象となるサブ配列のインデックス（ここでは [0]）を指定する。
• 引かれる側と引く側を入れ替えることで、昇順・降順を簡単に切り替えられる。

なお、sort() は元の配列自体を変更する（破壊的メソッドである）ため、元の配列を保持したい場合は slice() やスプレッド構文でコピーを作成してから並べ替えることをおすすめします。