JavaScriptでオブジェクトを値の昇順に並べ替える方法をわかりやすく解説

問題の概要

次のようなオブジェクトがあるとします。

const obj = {
    "sub1": 56,
    "sub2": 67,
    "sub3": 98,
    "sub4": 54,
    "sub5": 87
};

ここで求められているのは、このようなオブジェクトを引数として受け取るJavaScript関数を作成することです。作成する関数は、オブジェクト内の各キーに対応する値（バリュー）の昇順に基づいてオブジェクトを並べ替え、その結果として得られたオブジェクトを返す必要があります。

実装の考え方

JavaScriptでオブジェクトのプロパティを値の順序に従って並べ替えるには、一般的に次の手順を踏みます。

1. Object.keys() でオブジェクトのすべてのキーを配列として取得する
2. 配列の sort() メソッドに比較関数を渡し、「キーが指す値」の大小関係に基づいてキーを昇順に並べ替える
3. 並べ替えたキーの順序に従って、新しいオブジェクトを組み立てて返す

コード例

実際のコードは以下のようになります。

const obj = {
    "sub1": 56,
    "sub2": 67,
    "sub3": 98,
    "sub4": 54,
    "sub5": 87
};

const sortObject = obj => {
    // 対応する値を比較してキーを昇順に並べるための比較関数
    const sorter = (a, b) => {
        return obj[a] - obj[b];
    };
    const keys = Object.keys(obj);
    keys.sort(sorter);
    const res = {};
    keys.forEach(key => {
        res[key] = obj[key];
    });
    return res;
};

console.log(sortObject(obj));

コードのポイント

• 比較関数 sorter：2つのキー a と b を受け取り、それぞれに対応する値の差 obj[a] - obj[b] を返します。差が負なら a が先、正なら b が先に来るため、結果的に値の小さい順（昇順）に並びます。
• Object.keys(obj)：オブジェクトのすべてのキーを文字列の配列として取得します。
• keys.sort(sorter)：キーを「そのキーが持つ値」の大小関係に基づいて並べ替えます。
• 新しいオブジェクト res：並べ替えた順序で再構築して返します。元のオブジェクトを変更せずに済むのもこの方法の利点です。

実行結果

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

{ sub4: 54, sub1: 56, sub2: 67, sub5: 87, sub3: 98 }

ご覧のとおり、値が小さいものから順に 54 → 56 → 67 → 87 → 98 と、きちんと昇順に並べ替えられていることが確認できます。

補足：Object.fromEntries() を使ったモダンな書き方

ES2019以降の環境では、Object.entries() と Object.fromEntries() を組み合わせることで、より簡潔に記述できます。

const sortObject = obj =>
    Object.fromEntries(
        Object.entries(obj).sort(([, a], [, b]) => a - b)
    );

console.log(sortObject(obj));
// { sub4: 54, sub1: 56, sub2: 67, sub5: 87, sub3: 98 }

Object.entries() は [キー, 値] のペアからなる配列を返すため、そのままソートし、Object.fromEntries() でオブジェクトに戻すだけで同じ結果が得られます。新しくコードを書く場合は、こちらの方法がシンプルでおすすめです。