JavaScript【 array 】5 ～ 配列のソート

配列では、通常、値を代入した順番でインデックス番号が付くため、for文などで値を取得すると、代入した順番に値が並びます。
しかし、数値や名前など、データを一定の順番で表示させたい場面は多々あります。
そこで今回は、並び順を変える配列のソートについて紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. sortメソッド

　
sortメソッドは、配列の要素の並び替えのために、Arrayオブジェクトで用意されているメソッドです。
（Arrayオブジェクトについては、Arrayオブジェクトとはをご参照下さい。）

sortメソッドは、次のように使用します。

    let 変数名 = [ 値3, 値1, 値4, 値2 ];

    変数名.sort();

配列変数の後ろに「.sort();」と記述すると、配列の要素の並び替えが行われます。

このサンプルの要素は、ソート後、「値1、値2、値3、値4」に並び替えられ、この順番でインデックス番号が付きます。
　
　
sortメソッドを使用して、次の配列要素を並び替えます。
表示ボタンをクリックしてみて下さい。

ソースコードは次の通りです。

<script type="text/javascript">
function dispAry() {

    let num =  [5, 12, 2, 15, 3, 1];
    let fruits =  ["りんご", "みかん", "ぶどう", "メロン", "もも"];

    num.sort();
    fruits.sort();

    document.getElementById("dat").innerHTML ="";
    document.getElementById("dat").innerHTML +="<br>数値配列　 ： ";

    for (let i = 0; i < num.length; i++) {
        document.getElementById("dat").innerHTML += num[i] + "　";
    }

    document.getElementById("dat").innerHTML +="<br>文字列配列 ： ";

    for (let i = 0; i < fruits.length; i++) {
        document.getElementById("dat").innerHTML += fruits[i] + "　";
    }

    document.getElementById("dat").innerHTML += "<br>　";
}
</script>

<div style="background-color : #CCC; padding : 20px 20px 0px;">
    <div style="background-color : #EEE; padding : 20px;">
        数値配列　 = [5,　12,　2,　15,　3,　1];
        文字列配列 = ["りんご", "みかん", "ぶどう", "メロン", "もも"];
    </div>
　
    <form>
        <div style="display:inline-flex;">
            sortメソッドでソートします
          　<input type="button" value="表示" onClick="dispAry()">
        </div>
　
        <div id="dat" style="background-color : #EEE; padding : 0px 20px;"></div>　
    </form>
</div>

「.sort()」は、単純に文字をUnicodeに変換した値でソートします。
ですので、2桁以上の数値や、ひらがなとカタカナが混在した配列、大文字と小文字を含むアルファベットなどをソートする際に、意図通りのソート結果を得られない場合があります。

▲目次へ戻る

2. 数値のソート

　
sortメソッドは、並べ替えの規則を定義した関数を用意して、引数に指定することができます。

sortメソッドの引数に関数を指定する場合は、次のように記述します。

let ary = [ 値1, 値2, 値3, ... ];

ary.sort( ユーザ定義関数 );

function ユーザ定義関数 ( 引数1, 引数2 ) {

　　// 並べ替えの規則を定義
}

引数で指定する関数には、2つの引数を指定します。
　
　
ユーザ定義関数を指定したsortメソッドを使って、数値の並べ替えを行います。
表示ボタンをクリックしてみて下さい。

ソースコードは次の通りです。

<script type="text/javascript">
function dispAry() {

    let num =  [5, 12, 2, 15, 3, 1];
    num.sort(numSort);

    document.getElementById("dat").innerHTML ="";
    document.getElementById("dat").innerHTML +="<br>数値配列　 ： ";

    for (let i = 0; i < num.length; i++) {
        document.getElementById("dat").innerHTML += num[i] + "　";
    }

    document.getElementById("dat").innerHTML += "<br>　";
}

function numSort(val1, val2) {

    return val1 - val2;
}
</script>

<div style="background-color : #CCC; padding : 20px 20px 0px;">
    <div style="background-color : #EEE; padding : 20px;">
        数値配列　 = [5,　12,　2,　15,　3,　1];
    </div>
　
    <form>
        <div style="display:inline-flex;">
            上の数値配列をソートします
          　<input type="button" value="表示" onClick="dispAry()">
        </div>
　
        <div id="dat" style="background-color : #EEE; padding : 0px 20px;"></div>　
    </form>
</div>

sortメソッドの引数に指定している関数（numSort）の定義は、以下の通りです。

function numSort(val1, val2) {

    return val1 - val2;
}

マイナス演算子（-）を使うと、対象の値は数値として認識されます。

「return val1 – val2;」として、減算結果を戻り値とすると、引数1 > 引数2 の場合はプラスの値を返し、引数1 < 引数2 の場合にはマイナスの値を返すことになります。
2つずつ数値を比較していって、最終的に数値の小さい方から順に並びます。

因みに、配列に未定義値が含まれている場合は、比較用の関数に値が渡されることなく無条件で配列の最後に配置されるので、ここでは、引数として未定義値があるかどうかを考慮する必要はありません。

▲目次へ戻る

3. アルファベット（大文字と小文字）のソート

　
アルファベットの大文字と小文字が混在する配列を並び替えたい場合、比較用の関数を次のように定義するとアルファベット順にソートできます。

ary.sort(alphaSort);

function alphaSort(val1, val2){
    val1 = val1.toString().toLowerCase();
    val2 = val2.toString().toLowerCase();
    if(val1 < val2){
        return -1;
    }else if(val1 > val2){
        return 1;
    }
    return 0;
}

「文字列.toString().toLowerCase()」は、JavaScriptで用意されているメソッドの組み合わせで、文字列のアルファベットを全て小文字に変換します。

値を小文字にそろえた上で、2つずつ値を比較してソートしています。

▲目次へ戻る

4. ひらがなとカタカナのソート

　
ひらがなとカタカナが混在する配列を並び替えたい場合、比較用の関数を次のように定義すると五十音順でソートできます。

ary.sort(katakanahiraganaSort);

function katakanahiraganaSort(val1, val2){
    val1 = katakanaToHiragana(val1.toString());
    val2 = katakanaToHiragana(val2.toString());
    if(val1 < val2){
        return -1;
    }else if(val1 > val2){
        return 1;
    }
    return 0;
}

function katakanaToHiragana(src) {
    return src.replace(/[\u30a1-\u30f6]/g, function(match) {
        let chr = match.charCodeAt(0) - 0x60;
        return String.fromCharCode(chr);
    });
}

少し複雑ですが、比較する関数の中で、カタカナをひらがなに変換する関数を呼び出しています。

値を全てひらがなに変換した後で、2つずつ値を比較してソートしています。

▲目次へ戻る