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

const numbers = [3, 1, 10, 2];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 3, 10]

const fruits = ["banana", "apple", "cherry"];
fruits.sort((a, b) => a.localeCompare(b));
console.log(fruits); // ["apple", "banana", "cherry"]

// 落とし穴: 引数なしだと大文字が先に来る（UTF-16コード順）
console.log(["Banana", "apple", "Cherry"].sort());
// ["Banana", "Cherry", "apple"]  ← 大文字 B,C が小文字 a より前
// localeCompare なら ["apple", "Banana", "Cherry"] と自然な順になる

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

// 数値プロパティ（年齢の昇順）
people.sort((a, b) => a.age - b.age);

// 文字列プロパティ（名前順）
people.sort((a, b) => a.name.localeCompare(b.name));

// 名前順 → 同じ名前なら年齢の昇順
people.sort((a, b) => a.name.localeCompare(b.name) || a.age - b.age);

const nums = [3, 1, 2];

// 降順: a と b を逆にする
console.log([...nums].sort((a, b) => b - a)); // [3, 2, 1]

// sort() は元の配列を変更してしまう
nums.sort((a, b) => a - b);
console.log(nums); // [1, 2, 3] ← 元が変わっている

// 元を残したいなら toSorted()（ES2023）か、コピーしてからソート
const sorted = nums.toSorted((a, b) => b - a);
// 古い環境では: const sorted = [...nums].sort((a, b) => b - a);

<table id="myTable">
  <thead>
    <tr><th>名前</th><th>年齢</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>

const table = document.getElementById("myTable");
let sortState = { col: -1, asc: true };

// ヘッダーにクリックイベントを設定
table.querySelectorAll("thead th").forEach((th, index) => {
  th.addEventListener("click", () => sortTable(index));
});

function sortTable(colIndex) {
  const tbody = table.tBodies[0];
  const rows = Array.from(tbody.rows);

  // 同じ列の再クリックで方向を反転
  sortState.asc = sortState.col === colIndex ? !sortState.asc : true;
  sortState.col = colIndex;
  const dir = sortState.asc ? 1 : -1;

  rows.sort((rowA, rowB) => {
    const a = rowA.cells[colIndex].textContent.trim();
    const b = rowB.cells[colIndex].textContent.trim();

    // 両方が数値なら数値比較、それ以外は文字列比較
    const numA = Number(a), numB = Number(b);
    const bothNumbers = a !== "" && b !== "" && !isNaN(numA) && !isNaN(numB);
    const result = bothNumbers ? numA - numB : a.localeCompare(b);
    return result * dir;
  });

  rows.forEach((row) => tbody.appendChild(row)); // 並び替えた順で再配置
}