【JavaScript】オブジェクト内のサブオブジェクトをpositionプロパティで並べ替える方法

課題：オブジェクトの中のオブジェクトをソートしたい

まず、次のような「値としてオブジェクトを持つオブジェクト（Object of Objects）」を想定します。

const obj = {
    "CAB": {
        name: 'CBSSP',
        position: 2
    },
    "NSG": {
        name: 'NNSSP',
        position: 3
    },
    "EQU": {
        name: 'SSP',
        position: 1
    }
};

ここで求められているのは、このようなオブジェクトを受け取り、各サブオブジェクトが持つ 'position' プロパティの値を基準にして、サブオブジェクトを昇順または降順に並べ替えるJavaScript関数を作成することです。

実装コード例

この要件を満たすコードは以下のようになります。

const obj = {
    "CAB": {
        name: 'CBSSP',
        position: 2
    },
    "NSG": {
        name: 'NNSSP',
        position: 3
    },
    "EQU": {
        name: 'SSP',
        position: 1
    }
};

const sortByPosition = obj => {
    const order = [], res = {};
    // 各キーを、positionの値に応じたインデックスに配置する
    Object.keys(obj).forEach(key => {
        return order[obj[key]['position'] - 1] = key;
    });
    // 並べ替えた順序で新しいオブジェクトを組み立てる
    order.forEach(key => {
        res[key] = obj[key];
    });
    return res;
}

console.log(sortByPosition(obj));

コードの仕組み

この関数は、次の3段階で動作します。

1. キーの抽出： Object.keys(obj) で最上位のすべてのキー（"CAB"、"NSG"、"EQU"）を取得します。
2. 順序配列の作成： 各キーについて obj[key]['position'] - 1 を計算し、そのインデックス位置にキーを格納した配列 order を作ります。これにより、positionの昇順にキーが並びます。
3. オブジェクトの再構築： order 配列からキーを先頭から順に取り出し、対応する値を新しいオブジェクト res に代入していきます。

モダンなJavaScriptでは、整数風ではない通常の文字列キーについては挿入された順序が保持されるため、この方法でプロパティの並び順を制御できます。

実行結果

このコードを実行すると、コンソールには次のように出力されます。positionの値（1 → 2 → 3）の順にサブオブジェクトが並べ替えられていることがわかります。

{
    EQU: { name: 'SSP', position: 1 },
    CAB: { name: 'CBSSP', position: 2 },
    NSG: { name: 'NNSSP', position: 3 }
}

注意点

この実装を使う際には、以下の点に留意してください。

• positionが連続していない場合： position の値が1から始まる連続した整数でないと、order 配列に空き要素（empty slot）が生まれます。forEach() は空き要素をスキップするため、該当する項目は結果から欠落します。
• positionが重複している場合： 同じpositionを持つキーが複数あると、後から処理されたものが前のものを上書きします。
• 降順でソートしたい場合： order.reverse() を order.forEach() の前に呼び出すだけで、簡単に降順へ切り替えられます。

このように、オブジェクトのキー順序と配列を組み合わせることで、ネストされたオブジェクトでも柔軟に並べ替えが可能です。