【JavaScript】数値と文字列が混在する配列を自然順ソートで並べ替える方法

JavaScriptでは、数値と文字列が混在する配列を扱う場面があります。本記事では、数値を昇順で先頭に配置し、その後ろに文字列をアルファベット順で並べる「自然順ソート」の実装方法を解説します。

例として、次のような配列があるとします。

const arr = [1, 'fdf', 'afv', 6, 47, 7, 'svd', 'bdf', 9];

この配列をソートすると、期待される結果は以下のとおりです。

[1, 6, 7, 9, 47, 'afv', 'bdf', 'fdf', 'svd']

実装コード

ポイントは、Array.prototype.sort() メソッドに独自の比較関数（比較コールバック）を渡すことです。要素同士の型を判定し、戻り値によって並び順を制御します。

const arr = [1, 'fdf', 'afv', 6, 47, 7, 'svd', 'bdf', 9];

const sorter = (a, b) => {
    if (typeof a === 'number' && typeof b === 'number') {
        // 両方が数値：小さい方を前に配置
        return a - b;
    } else if (typeof a === 'number' && typeof b !== 'number') {
        // aが数値、bが文字列：aを前に配置
        return -1;
    } else if (typeof a !== 'number' && typeof b === 'number') {
        // aが文字列、bが数値：bを前に配置
        return 1;
    } else {
        // 両方が文字列：アルファベット順で比較
        return a > b ? 1 : -1;
    }
};

arr.sort(sorter);
console.log(arr);

実行結果

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

[
    1, 6, 7,
    9, 47, 'afv',
    'bdf', 'fdf', 'svd'
]

コードの解説

このコードの中核となっているのは sorter 関数です。sort() の比較関数は2つの引数（いずれも配列の要素）を受け取り、戻り値の正負によって並び順が決まります。

考慮すべきケースは次の4パターンです。

• a と b の両方が数値の場合 → a - b を返し、小さい数値が先に来るようにします。
• a が数値で b が文字列の場合 → -1 を返し、要件どおり数値（a）を文字列（b）より前に配置します。
• a が文字列で b が数値の場合 → 1 を返し、b（数値）を a より前に配置します。
• a と b の両方が文字列の場合 → アルファベット順で先に来る文字列を前に配置します。

補足：より堅牢な文字列比較

単純な > 演算子による文字列比較は大文字・小文字や記号の扱いで意図しない結果になることがあります。実務では localeCompare() を使うと、より自然な辞書順比較が可能です。

// 文字列同士の比較をlocaleCompareに置き換えた例
return a.localeCompare(b);

このように、比較関数内で型ごとの分岐を明確に記述することで、数値と文字列が混在する配列でも意図した通りの自然順ソートを実現できます。