JavaScriptで大文字と小文字を区別した並べ替えを実装する方法

本記事では、JavaScriptで大文字と小文字を区別しながら文字列の配列をソートする方法について解説します。単純な sort() では期待通りの順序にならないケースを、カスタム比較関数を使って正確に処理していきます。

課題の定義

まず、次のような文字列リテラルの配列を例として考えてみましょう。

const arr = ['1185 Design','3 D Exhibits','44Doors', '4Concepts','ABC Data','acceleration'];

この配列を受け取り、元の配列自体を書き換える形（in-place）でソートするJavaScript関数を作成します。求められる並べ替えのルールは以下の3点です。

• 特殊文字や数字で始まる文字列は、常に先頭に配置する
• それ以外の文字列はアルファベット順に並べる
• 同じアルファベットで始まる文字列同士で大文字・小文字が異なる場合、小文字で始まる方を優先的に先へ配置する

実装コード

上記の要件を満たすコードは以下のとおりです。

const arr = ['1185 Design','3 D Exhibits','44Doors', '4Concepts','ABC Data','acceleration'];
const caseSensitiveSort = (arr = []) => {
    const sorter = (a, b) => {
        if (a === b){
            return 0
        };
        if (a.charAt(0) === b.charAt(0)){
            return sorter(a.slice(1), b.slice(1))
        }
        if(a.charAt(0).toLowerCase() === b.charAt(0).toLowerCase()){
            if(/^[a-z]/.test(a.charAt(0)) && /^[A-Z]/.test(b.charAt(0))){
                return -1;
            };
            if(/^[a-z]/.test(b.charAt(0)) && /^[A-Z]/.test(a.charAt(0))){
                return 1;
            };
        };
        return a.localeCompare(b);
    };
    arr.sort(sorter);
}
caseSensitiveSort(arr);
console.log(arr);

コードの仕組み

この比較関数 sorter は、再帰的な処理によって文字列同士を丁寧に比較します。ポイントを整理すると次のようになります。

• 完全一致の判定： 2つの文字列が完全に一致すれば 0 を返し、順序を変えません。
• 先頭文字が同じ場合： slice(1) で先頭を取り除いた残りの部分に対して自分自身を再帰呼び出しし、次の文字以降を比較します。
• 大文字・小文字だけが異なる場合： 正規表現 /^[a-z]/ と /^[A-Z]/ を使ってどちらが小文字かを判定し、小文字側を先にするために -1 または 1 を返します。
• それ以外の場合： localeCompare() による標準的な辞書順比較に委ねます。数字や記号で始まる文字列はこの段階で自然に前方へ並びます。

実行結果

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

[
    '1185 Design',
    '3 D Exhibits',
    '44Doors',
    '4Concepts',
    'acceleration',
    'ABC Data'
]

ご覧のとおり、数字で始まる4つの文字列が先頭に集まり、同じ「a」で始まる2つの文字列については、小文字の 'acceleration' が大文字の 'ABC Data' よりも先に配置されています。これにより、要件どおりの大文字・小文字を区別したソートが実現できています。