JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでHTMLリストを並べ替える方法を初心者向けに解説

Webページ上のリスト（<ul>や<ol>）を、ボタンをクリックしたときに自動的にアルファベット順へ並べ替えたいケースはよくあります。JavaScriptを使えば、ページを再読み込みすることなく、DOMを直接操作してリスト項目の順序を入れ替えることができます。

ここでは、「クリックすると並べ替えが実行されるボタン」を持つシンプルなサンプルを紹介します。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<h1>リスト並べ替えの例</h1>
<button>クリックして並べ替え</button>
<ul class="animalList">
<li>Giraffe</li>
<li>Camel</li>
<li>Dog</li>
<li>Lion</li>
<li>Cheetah</li>
<li>Cat</li>
</ul>
<script>
    document.getElementsByTagName("button")[0].addEventListener("click", sortList);
    function sortList() {
        var list, i, sortFlag, LiEle, sorted;
        list = document.querySelector(".animalList");
        sortFlag = true;
        while (sortFlag) {
            sortFlag = false;
            LiEle = list.getElementsByTagName("LI");
            for (i = 0; i < LiEle.length - 1; i++) {
                sorted = false;
                if (LiEle[i].innerHTML.toLowerCase() > LiEle[i + 1].innerHTML.toLowerCase()) {
                    sorted = true;
                    break;
                }
            }
            if (sorted) {
                LiEle[i].parentNode.insertBefore(LiEle[i + 1], LiEle[i]);
                sortFlag = true;
            }
        }
    }
</script>
</body>
</html>

コードの仕組み

このコードは、いわゆる「バブルソート」という手法を使ってリストを並べ替えています。処理の流れは以下のとおりです。

  1. イベント登録： addEventListener("click", sortList) により、ボタンがクリックされたタイミングで sortList() 関数が実行されます。
  2. リストの取得： document.querySelector(".animalList") で対象の <ul> 要素を取得し、getElementsByTagName("LI") ですべての <li> 要素を取り出します。
  3. 大小比較： 隣り合う項目同士を toLowerCase() で小文字に統一したうえで比較することで、大文字・小文字の違いによる誤判定を防いでいます。
  4. 順序の入れ替え： 順序が正しくないペアを見つけたら、insertBefore() を使って後ろの要素を前へ移動させます。
  5. 繰り返し処理： 一度も入れ替えが発生しなくなるまで（＝完全にソートされるまで）while ループが続きます。

実行結果

上記のコードを実行すると、最初は次のように動物の名前がバラバラの順序で表示されます。

JavaScriptでHTMLリストを並べ替える方法を初心者向けに解説

「クリックして並べ替え」ボタンを押すと、リストが即座にアルファベット順に整列します。

JavaScriptでHTMLリストを並べ替える方法を初心者向けに解説

補足：よりシンプルな書き方

モダンなJavaScriptでは、Array.from() と sort() を組み合わせることで、より簡潔に同じ処理を実現できます。

function sortList() {
  const list = document.querySelector(".animalList");
  const items = Array.from(list.querySelectorAll("li"));
  items.sort((a, b) =>
    a.textContent.toLowerCase().localeCompare(b.textContent.toLowerCase())
  );
  items.forEach(item => list.appendChild(item));
}

localeCompare() を使うと、言語に応じた自然な順序で比較できるため、日本語のリストを扱う場合にも便利です。用途に合わせて使い分けてみてください。

  1. JavaScriptでHTMLの子ノードを削除する方法をわかりやすく解説

    Web開発において、DOM操作は欠かせないスキルのひとつです。その中でも「子ノード（子要素）を削除する」処理は、リスト項目の動的な追加・削除など、さまざまな場面で活用されます。 JavaScriptでは removeChild() メソッドを使うことで、親要素から指定した子ノードを取り除くことができます。以下に、実際に動作するコード例を示します。 コード例 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=widt

  2. JavaScriptでアクセント付き文字を含む文字列を並べ替える方法

    JavaScriptの標準的な sort() メソッドは、文字列をUnicodeコードポイントの順序に基づいて比較します。そのため、「é」や「ó」のようなアクセント付き文字を含む文字列を単純にソートすると、期待通りのアルファベット順にならないことがあります。この問題を解決するには、localeCompare() メソッドを使用します。このメソッドは、指定されたロケールの言語規則に従って文字列を比較できるため、アクセント付き文字も正しく並べ替えられます。localeCompare() の基本的な使い方以下は、スペイン語のアクセント付き文字を含む配列を localeCompare() を使ってソー