【超入門】TypeScript 配列のソートをマスターしよう！

TypeScript 配列のソート

デフォルトのソート

sort() メソッドは、配列の要素を比較して昇順に並べ替えます。

const numbers = [5, 2, 4, 1, 3];
numbers.sort();
console.log(numbers); // [1, 2, 3, 4, 5]

比較関数を用いたソート

デフォルトのソートは文字列や数値を比較できますが、オブジェクトなど複雑なデータ型をソートするには、比較関数を指定する必要があります。

比較関数は、2つの要素を受け取り、どちらが大きいかを返す関数です。

const users = [
  { name: "Alice", age: 20 },
  { name: "Bob", age: 30 },
  { name: "Carol", age: 10 },
];

users.sort((a, b) => a.age - b.age);
console.log(users); // [{name: "Carol", age: 10}, {name: "Alice", age: 20}, {name: "Bob", age: 30}]

その他のソート方法

Array.prototype には、sort() 以外にも様々なソート方法を提供しています。

• reverse(): 配列の要素を逆順に並べ替えます。
• filter(): 条件に合致する要素のみを残した新しい配列を作成します。
• map(): 各要素に処理を施した新しい配列を作成します。

これらのメソッドを組み合わせて、より複雑なソート処理を行うこともできます。

TypeScript 配列のソート サンプルコード

const numbers = [5, 2, 4, 1, 3];
numbers.sort();
console.log(numbers); // [1, 2, 3, 4, 5]

比較関数を用いたソート

const users = [
  { name: "Alice", age: 20 },
  { name: "Bob", age: 30 },
  { name: "Carol", age: 10 },
];

users.sort((a, b) => a.age - b.age);
console.log(users); // [{name: "Carol", age: 10}, {name: "Alice", age: 20}, {name: "Bob", age: 30}]

降順ソート

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

文字列のソート

const strings = ["abc", "def", "ghi"];
strings.sort();
console.log(strings); // ["abc", "def", "ghi"]

オブジェクトのソート

const objects = [
  { name: "Alice", age: 20 },
  { name: "Bob", age: 30 },
  { name: "Carol", age: 10 },
];

objects.sort((a, b) => a.name.localeCompare(b.name));
console.log(objects); // [{name: "Alice", age: 20}, {name: "Bob", age: 30}, {name: "Carol", age: 10}]

配列のフィルタリングとソート

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

const evenNumbers = numbers.filter(number => number % 2 === 0);
evenNumbers.sort((a, b) => a - b);
console.log(evenNumbers); // [2, 4]

配列のマッピングとソート

const users = [
  { name: "Alice", age: 20 },
  { name: "Bob", age: 30 },
  { name: "Carol", age: 10 },
];

const userNames = users.map(user => user.name);
userNames.sort();
console.log(userNames); // ["Alice", "Bob", "Carol"]

デフォルトのソート、比較関数、降順ソート、文字列ソート、オブジェクトソート、フィルタリングとソート、マッピングとソートなど、それぞれの状況に応じて適切な方法を選択してください。

TypeScript 配列をソートするその他の方法

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

const sortedNumbers = numbers.reduce((acc, curr) => {
  if (curr < acc[acc.length - 1]) {
    acc.push(curr);
  } else {
    acc.unshift(curr);
  }
  return acc;
}, []);

console.log(sortedNumbers); // [1, 2, 3, 4, 5]

Array.prototype.forEach を利用して、配列をソートすることができます。

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

const sortedNumbers = [];

numbers.forEach(number => {
  let inserted = false;
  for (let i = 0; i < sortedNumbers.length; i++) {
    if (number < sortedNumbers[i]) {
      sortedNumbers.splice(i, 0, number);
      inserted = true;
      break;
    }
  }
  if (!inserted) {
    sortedNumbers.push(number);
  }
});

console.log(sortedNumbers); // [1, 2, 3, 4, 5]

ライブラリの利用

lodash などのライブラリを利用して、配列をソートすることができます。

import _ from "lodash";

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

const sortedNumbers = _.sortBy(numbers);

console.log(sortedNumbers); // [1, 2, 3, 4, 5]

上記以外にも、様々な方法で TypeScript 配列をソートすることができます。

それぞれの方法のメリットとデメリットを理解した上で、状況に応じて適切な方法を選択してください。