JavaScriptでオブジェクトのキーと値を指定の順序を保証した上で配列にする方法

JavaScriptのオブジェクトでは、キーと値のペアを保持することができますが、その順序が保証されない場合があります。今回は、指定した順序でオブジェクトのキーと値を配列に出力する方法を解説します。

問題の例

例として、以下のオブジェクトがバックエンドからAPIを通じて取得できると仮定します。

const obj = {
  8: "tomato",
  7: "lemon",
  2: "apple",
  3: "orange"
};

JavaScriptによってこのオブジェクトが自動的に並べ替えられ、以下のようになります。

const obj = {
  2: "apple",
  3: "orange",
  7: "lemon",
  8: "tomato",
};

このオブジェクトのキーと値を、元の順序のままの表示順で配列に変換したいとします。

['8', 'tomato'] ['7', 'lemon']['2', 'apple']['3', 'orange']

ただし、Object.entries メソッドを使用してオブジェクトを配列に変換すると、キーの順序が保証されません。

JavaScriptのオブジェクトは、ES2015 (ECMAScript 2015) 以降、キーの挿入順で保持されることが仕様に明記されています。ただし、整数プロパティ（全ての数値のキーは内部的に文字列に変換される）は昇順で並び、それ以外の文字列プロパティは挿入順に並びます。

配列は要素の挿入順を保持しているため、指定した順序でキーと値を取得できます。

まず、オブジェクトのキーを表示したい順序で配列に定義します。
（APIで順序を決める配列を取得するのもいいと思います。）

const order = [8, 7, 2, 3]

次に、定義した配列をイテレートして、指定された順序でキーと値のペアを含む新しい配列を作成します。

const orderedEntries = order.map(key => [key.toString(), obj[key]]);

この方法を使用することで、オブジェクトのキーと値が指定された順序で出力され、キーの順序を制御することができます。