【JavaScript】sortメソッドを使用したソート機能の実装

HITOSUKEのシステム開発Unitでシステム開発を担当しているTです。
今回は、JavaScriptでソート機能の実装を行います。
一覧表示をする際に、データが増えるにつれて表示される順序の並び替えを行いたいユーザーは多くいると思います。
今回はJavaScriptのsortメソッドを使用してソート機能を実装していきましょう。

実装

今回の記事では下記の機能・実装を解説していきます。

初期表示時はアルファベットが昇順（asc）に並んで表示されています。
画面上部のdescボタンをクリックすることで、アルファベットを降順（desc）に並び替えることができます。
ボタンをクリックすることで表示されている文字列（asc || desc）が変更される仕様になっています。
また、今回の実装では解説を簡素にするために文字列の比較を想定して実装しています。

ソースコードの説明

実際に使用されているソースコードをポイントごとにまとめて解説していきます。

sample.js

flag = 'desc';
strArray = ['b', 'c', 'a', 'd'];
function sortList() {
  if(flag === 'asc') {
    flag = 'desc';
    strArray.sort(function(a, b) {
      let upA = a.toUpperCase();
      let upB = b.toUpperCase();
      if (upA < upB) {
        return -1;
      }
      if (upA > upB) {
        return 1;
      }
      return 0;
    })
  } else if(flag === 'desc') {
    flag = 'asc';
    strArray.sort(function(a, b) {
      let upA = a.toUpperCase();
      let upB = b.toUpperCase();
      if (upA > upB) {
        return -1;
      }
      if (upA < upB) {
        return 1;
      }
      return 0;
    })
  }
  let sortButton = document.getElementById('sortButton');
  sortButton.textContent = flag;
  document.querySelector('ul').innerHTML = '';
  for(let i = 0; i < strArray.length; i++) {
    let element = document.getElementById('parent');
    let new_element = document.createElement('li');
    new_element.textContent = strArray[i];
    element.appendChild(new_element);
  }
}

sample.html

<button id="sortButton" onclick="sortList()">desc</button>
<ul id="parent">
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
</ul>

今回のソート機能はJavaScriptのsortメソッド（6行目）を用いて実装をしています。
sortメソッドは引数に比較するための関数を渡します。
今回は複雑な条件がないので、無名関数を渡していますが別に関数を用意して引数に渡しても問題ありません。

はじめにjsファイルの先頭でグローバル変数を二つ用意しています。
flagでは、現在の並び順が昇順なのか降順なのかを保持するための変数になっています。
strArrayは配列で、静的に値を保持する場合は今回の実装を流用できますが、ほとんどの実装の場合、ソートしたいデータは動的に格納すると思います。
こちらはサーバー側で取得した値を格納してください。

次に関数sortList()について解説します。
最初のif文では、昇順に並びかえるか降順に並び替えるかの判断をしています。
もし昇順に並び替える場合は、次にボタンをクリックするときには降順に並び替えるため、flag変数の値を変更します。

sortメソッドが使われている箇所では、無名関数の引数a, bでそれぞれ配列内の値を比較していきます。

let upA = a.toUpperCase();
let upB = b.toUpperCase();

sortメソッド内の上記の記述では、文字列をすべて大文字に変更しています。
もしこの実装をしなかったら、大文字から始まる文字列が先に並び替えられてから小文字から始まる文字列が後ろに並びます。
例：Apple -> Box -> Chicken -> animal -> bat -> …
上記のような並び替えを防ぐために、一度すべてを大文字に変えていますが、スコープ内での比較だけで使用されるため変数が上書かれることはありません。
（アルファベットの大文字・小文字の並び順について興味のある方はブラウザで「asciiコード」と検索してください。）

次のif文ので文字列の比較を行っています。
先頭の文字から順に比較を行って数値を返します。
比較する文字列が完全に一致していたら、0を返すようになっています。

後は、ソートが完了した配列を表示するための処理を行います。
ボタンの文字列を変更する処理も行いましょう。

以上でソート機能の実装は終わりになります。

さいごに

今回はJavaScriptでソート機能の実装方法について解説していきました。
多くの場面でソート機能は使用されると思います。
今回解説したのは一つの配列の昇順・降順ですが、様々な型や条件を追加して、今回のソート機能を活用することもできます。
ぜひ、そのような機能を実装する際にも参考にしていただければ幸いです。

もし、HITOSUKEのシステム開発Unitの知りたいことや興味・関心がありましたらぜひコメントください！

※HITOSUKEでは一緒に事業を盛り立ててくれる仲間を募集しています！

少しでも気になってくれた方は、こちらをご覧ください。

HITOSUKE採用サイト | フランチャイズのプロフェッショナル集団