【JavaScript】ソート機能を実装する方法

JavaScriptを使ってデータをソートする方法は、基本的な配列のソートから、HTMLテーブルのソートまで様々です。今回は、ソート機能を実装する具体的な方法をいくつか紹介します。

配列のソート

JavaScriptの配列は、sort()メソッドを使って簡単にソートできます。

数字のソート

let numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

文字列のソート

let fruits = ["banana", "apple", "cherry", "date"];
fruits.sort();
console.log(fruits); // ["apple", "banana", "cherry", "date"]

オブジェクト配列のソート

オブジェクトの配列をソートする場合、ソート基準となるプロパティを指定する必要があります。

数値プロパティでソート

let people = [
  { name: "John", age: 25 },
  { name: "Jane", age: 30 },
  { name: "Tom", age: 20 }
];

people.sort((a, b) => a.age - b.age);
console.log(people);
// [{ name: "Tom", age: 20 }, { name: "John", age: 25 }, { name: "Jane", age: 30 }]

文字列プロパティでソート

let people = [
  { name: "John", age: 25 },
  { name: "Jane", age: 30 },
  { name: "Tom", age: 20 }
];

people.sort((a, b) => a.name.localeCompare(b.name));
console.log(people);
// [{ name: "Jane", age: 30 }, { name: "John", age: 25 }, { name: "Tom", age: 20 }]

HTMLテーブルのソート

HTMLテーブルをソートする場合、DOM操作を使います。以下は、テーブルの列をクリックしてソートする例です。

HTML

<table id="myTable">
  <thead>
    <tr>
      <th onclick="sortTable(0)">Name</th>
      <th onclick="sortTable(1)">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

JavaScript

function sortTable(columnIndex) {
  const table = document.getElementById("myTable");
  const rows = Array.from(table.rows).slice(1); // ヘッダー行を除く
  const sortedRows = rows.sort((rowA, rowB) => {
    const cellA = rowA.cells[columnIndex].innerText;
    const cellB = rowB.cells[columnIndex].innerText;
    
    if (!isNaN(cellA) && !isNaN(cellB)) {
      return cellA - cellB; // 数値の場合
    } else {
      return cellA.localeCompare(cellB); // 文字列の場合
    }
  });
  
  // テーブルにソートされた行を再挿入
  sortedRows.forEach(row => table.tBodies[0].appendChild(row));
}

これで、テーブルのヘッダーをクリックすると、その列に基づいてテーブルがソートされます。

まとめ

JavaScriptを使って配列やHTML要素をソートすることは、多くの場面で役立ちます。ソートの基準や方法に応じて、適切なソート関数を使用することで、簡単にデータを整理し、見やすく表示することができます。これらのテクニックを活用して、効率的にデータを管理しましょう。