【JavaScript】1つ目の配列の要素順に従って2つ目の配列をソートする方法

はじめに

以下のような2つの配列があるとします。

const arr1 = ['d','a','b','c'];
const arr2 = [{a:1},{c:3},{d:4},{b:2}];

今回の課題は、この2つの配列を受け取るJavaScript関数を作成し、1つ目の配列（arr1）の要素の順序に従って、2つ目の配列（arr2）を並べ替えることです。

つまり、2つ目の配列に含まれる各オブジェクトのキーを、1つ目の配列の要素順に合わせてソートする必要があります。

したがって、期待される出力は次のようになります。

const output = [{d:4},{a:1},{b:2},{c:3}];

実装コード

それでは、実際のコードを見ていきましょう。

const arr1 = ['d','a','b','c'];
const arr2 = [{a:1},{c:3},{d:4},{b:2}];
const sortArray = (arr1, arr2) => {
    arr2.sort((a, b) => {
      const aKey = Object.keys(a)[0];
      const bKey = Object.keys(b)[0];
      return arr1.indexOf(aKey) - arr1.indexOf(bKey);
    });
};
sortArray(arr1, arr2);
console.log(arr2);

コードの解説

この関数の仕組みは以下のとおりです。

• Object.keys(a)[0] で、各オブジェクトの最初のキー（例： {a:1} なら 'a'）を取得します。
• arr1.indexOf() を使い、そのキーが1つ目の配列の何番目に位置するかを調べます。
• 両者のインデックスの差を sort() の比較関数として返すことで、arr1 の要素順どおりに arr2 が並べ替えられます。

注意点： JavaScriptの sort() メソッドは元の配列を直接変更（破壊的メソッド）します。元の配列を保持したい場合は、あらかじめスプレッド構文などでコピーしておくと安全です。

出力結果

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

[ { d: 4 }, { a: 1 }, { b: 2 }, { c: 3 } ]

このように、わずか数行のコードで、基準となる配列の順序に合わせた柔軟なソート処理を実現できます。APIレスポンスの並べ替えや表示順の制御など、実務でも応用範囲の広いテクニックです。