JSON データのソート

API から取得した JSON データを並び替える方法を解説します。配列の sort() メソッドを使いこなすことで、様々な条件でデータをソートできるようになります。

sort() の基本

sort() メソッドは配列を直接変更（破壊的操作）します。元の配列を保持したい場合は、先にコピーを作成してください。

const numbers = [3, 1, 4, 1, 5, 9, 2, 6];

// 元配列を変更してしまう
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 1, 2, 3, 4, 5, 6, 9]

// コピーしてからソート
const original = [3, 1, 4, 1, 5];
const sorted = [...original].sort((a, b) => a - b);

数値でソート

比較関数を渡して、数値の大小を比較します。

const users = [
  { name: "田中", age: 25 },
  { name: "山田", age: 30 },
  { name: "佐藤", age: 22 }
];

// 年齢で昇順（小さい順）
const byAgeAsc = [...users].sort((a, b) => a.age - b.age);

// 年齢で降順（大きい順）
const byAgeDesc = [...users].sort((a, b) => b.age - a.age);

昇順（a - b）

a が小さい場合に負の値を返し、a を前に配置

降順（b - a）

a が大きい場合に負の値を返し、a を前に配置

文字列でソート

文字列の比較には localeCompare() を使用します。これにより、日本語も正しくソートできます。

const users = [
  { name: "山田" },
  { name: "田中" },
  { name: "佐藤" }
];

// 名前で昇順
const byNameAsc = [...users].sort((a, b) => 
  a.name.localeCompare(b.name, "ja")
);

// 名前で降順
const byNameDesc = [...users].sort((a, b) => 
  b.name.localeCompare(a.name, "ja")
);

日付でソート

日付文字列は Date オブジェクトに変換するか、ISO 形式であればそのまま比較できます。

const posts = [
  { title: "記事A", date: "2024-03-15" },
  { title: "記事B", date: "2024-01-20" },
  { title: "記事C", date: "2024-02-10" }
];

// 日付で昇順（古い順）
const oldest = [...posts].sort((a, b) => 
  new Date(a.date) - new Date(b.date)
);

// 日付で降順（新しい順）
const newest = [...posts].sort((a, b) => 
  new Date(b.date) - new Date(a.date)
);

ISO 形式（YYYY-MM-DD）の場合は文字列比較でも正しくソートできます。

const newest = [...posts].sort((a, b) => b.date.localeCompare(a.date));

複数条件でソート

第一条件が同じ場合に第二条件で並び替える方法です。

const users = [
  { name: "田中", age: 25, score: 80 },
  { name: "山田", age: 25, score: 90 },
  { name: "佐藤", age: 30, score: 85 }
];

// 年齢で昇順、同じ年齢ならスコアで降順
const sorted = [...users].sort((a, b) => {
  if (a.age !== b.age) {
    return a.age - b.age;
  }
  return b.score - a.score;
});

汎用的なソート関数

ソート条件を引数で受け取る汎用関数を作ると便利です。

function sortBy(array, key, order = "asc") {
  const multiplier = order === "desc" ? -1 : 1;
  
  return [...array].sort((a, b) => {
    if (a[key] < b[key]) return -1 * multiplier;
    if (a[key] > b[key]) return 1 * multiplier;
    return 0;
  });
}

// 使用例
sortBy(users, "age", "asc");
sortBy(users, "name", "desc");

null や undefined の扱い

ソート対象に null や undefined が含まれる場合は、特別な処理が必要です。

const items = [
  { name: "A", value: 10 },
  { name: "B", value: null },
  { name: "C", value: 5 },
  { name: "D", value: undefined }
];

// null/undefined を最後に配置
const sorted = [...items].sort((a, b) => {
  if (a.value == null) return 1;
  if (b.value == null) return -1;
  return a.value - b.value;
});

適切なソート処理を実装することで、ユーザーにとって見やすいデータ表示を実現できます。