TypeScriptでsort()を完璧に使いこなす10選の方法

はじめに
●TypeScriptとsort()関数とは
- ○sort()関数の基本
●sort()関数の使い方
●sort()関数の応用例
●注意点と対処法
●カスタマイズ方法
- ○特定の文字列を優先してソート
- ○配列内の数字を奇数、偶数の順にソート
まとめ

はじめに

近年、JavaScriptからTypeScriptへの移行が急速に進んでいます。

その背景には、静的型付けの恩恵、エディターの支援の強化、そして安定した開発環境の実現が挙げられます。

TypeScriptの魅力は多いのですが、その中でも日常の開発において頻繁に使用される関数として、sort()関数があります。

この記事では、TypeScriptにおけるsort()関数の使い方を10のサンプルコードを交えて細かく解説していきます。

特に初心者の方でも、この関数の基本から応用、注意点やカスタマイズ方法までをしっかりと把握して、実際の開発に活かしていただける内容となっています。

●TypeScriptとsort()関数とは

TypeScriptはMicrosoftが開発するJavaScriptのスーパーセットで、静的型付けやクラスベースのオブジェクト指向プログラミングをサポートしています。

この言語の特徴は、JavaScriptとの高い互換性を持ちつつ、型の概念を導入することで、バグの少ない品質の高いコードを実現することです。

そのTypeScriptで使用されるsort()関数は、配列の要素を所定の順序に並べ替えるためのメソッドです。

JavaScriptで提供されているものと基本的な動作は同じですが、TypeScriptでは型の安全性を考慮した利用が期待されます。

○sort()関数の基本

sort()関数は、配列内の要素を文字列として比較し、それに基づいて配列を並べ替えます。

デフォルトの比較関数が提供されているため、特に関数を指定しない場合はこの動作に従います。

ただし、この動作は数値の配列に対しては直感的ではないため、カスタムの比較関数を使用することが推奨されます。

// このコードでは数値の配列を使ってsort()関数のデフォルトの動作を示しています。この例では、数値の比較が文字列として行われてしまいます。
const numbers = [10, 5, 40, 25, 100];
numbers.sort();
console.log(numbers); // [10, 100, 25, 40, 5]

このサンプルコードを実行すると、numbersの配列は[10, 100, 25, 40, 5]という順序で出力されます。

数値としての昇順ではなく、文字列としての昇順でのソートが行われたことがわかります。

●sort()関数の使い方

JavaScriptの配列のメソッドには多くの便利な関数が含まれています。

その中でも、配列の要素をソートするためのsort()関数は非常に便利です。

しかし、この関数をTypeScriptで使用する際にはいくつかの特徴や注意点があります。

今回はその詳細な使い方や注意点を初心者向けに丁寧に解説していきます。

○サンプルコード1：数値を昇順にソート

このコードでは、整数の配列を昇順にソートする方法を表しています。

この例では、基本的な使い方を見てみましょう。

let numbers: number[] = [34, 1, 56, 17, 8, 99];
numbers.sort((a, b) => a - b);
console.log(numbers);

上記のコードを実行すると、配列の要素が昇順に整列されます。

つまり、[1, 8, 17, 34, 56, 99]となります。

○サンプルコード2：文字列をアルファベット順にソート

次に、文字列の配列をアルファベット順にソートするコードを表しています。

この例では、文字列の要素をソートしてみましょう。

let words: string[] = ["apple", "grape", "banana", "cherry"];
words.sort();
console.log(words);

このコードを実行すると、[“apple”, “banana”, “cherry”, “grape”]というアルファベット順に整列された配列が得られます。

○サンプルコード3：オブジェクトのプロパティを基にソート

こちらのコードでは、オブジェクトの配列を特定のプロパティの値を基にしてソートする方法を取り上げています。

この例では、ageプロパティを基に昇順にソートします。

type Person = {
  name: string;
  age: number;
};

let people: Person[] = [
  { name: "Taro", age: 25 },
  { name: "Hanako", age: 20 },
  { name: "Jiro", age: 28 }
];

people.sort((a, b) => a.age - b.age);
console.log(people);

このコードを実行すると、ageプロパティの値を基に昇順に整列された配列が得られます。

具体的には、[{ name: “Hanako”, age: 20 }, { name: “Taro”, age: 25 }, { name: “Jiro”, age: 28 }]という結果になります。

●sort()関数の応用例

TypeScriptを使用してデータを操作する際、sort()関数の基本的な使用方法だけでなく、さまざまなケースやニーズに応じて柔軟に応用できるようになることが求められます。

ここでは、sort()関数の高度な使用方法やカスタマイズ方法を、具体的なサンプルコードとともに解説していきます。

○サンプルコード4：カスタム比較関数を使用してソート

このコードでは、カスタムの比較関数を使って配列をソートする方法を表しています。

この例では、数値の配列を絶対値の大小に基づいてソートしています。

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

上記のコードを実行すると、配列は絶対値の小さい順に[-1, 2, -3, 4, -5]とソートされます。

○サンプルコード5：降順でのソート

このコードでは、数値の配列を降順にソートする方法を表しています。

この例では、sort()関数の比較関数の戻り値を逆転させることで、降順のソートを実現しています。

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

上記のコードを実行すると、配列は[5, 4, 3, 2, 1]のように大きい数から小さい数の順にソートされます。

○サンプルコード6：文字列の長さを基にソート

このコードでは、文字列の長さを基準にしてソートする方法を表しています。

この例では、文字列の配列をその長さの短い順から長い順にソートしています。

const words = ["apple", "banana", "kiwi", "grape"];
words.sort((a, b) => a.length - b.length);
console.log(words);

上記のコードを実行すると、配列は["kiwi", "apple", "grape", "banana"]のように文字列の長さの短いものから長いものの順にソートされます。

○サンプルコード7：日付をソート

このコードでは、Dateオブジェクトの配列をソートする方法を表しています。

この例では、異なる日付を持つDateオブジェクトの配列を昇順にソートしています。

const dates = [new Date(2022, 1, 1), new Date(2021, 6, 10), new Date(2021, 5, 5)];
dates.sort((a, b) => a.getTime() - b.getTime());
console.log(dates);

上記のコードを実行すると、配列は[2021年5月5日, 2021年6月10日, 2022年1月1日]の順にソートされます。

○サンプルコード8：nullやundefinedを考慮したソート

TypeScriptのsort()関数を使う際、配列内にnullやundefinedが含まれている場合、ソートの結果が期待通りでないことがあります。

nullやundefinedはJavaScriptおよびTypeScriptで特別な値として扱われるため、これらの値を含む配列のソートには注意が必要です。

ここでは、nullやundefinedを含む配列を正確にソートする方法を詳細に解説します。

このコードでは、nullやundefinedを考慮して数値の配列をソートする方法を表しています。

この例では、nullとundefinedを配列の末尾に移動させつつ、その他の数値は昇順にソートしています。

const numbersWithNullUndefined: (number | null | undefined)[] = [3, 1, undefined, 2, null];

numbersWithNullUndefined.sort((a, b) => {
    // aとbがともに数値の場合、通常の比較を行う
    if (typeof a === 'number' && typeof b === 'number') {
        return a - b;
    }
    // aがnullまたはundefinedの場合、bよりも後ろに来るようにする
    if (a === null || typeof a === 'undefined') {
        return 1;
    }
    // bがnullまたはundefinedの場合、aよりも前に来るようにする
    if (b === null || typeof b === 'undefined') {
        return -1;
    }
    // それ以外のケースは等しいとみなす
    return 0;
});

console.log(numbersWithNullUndefined);

上記のコードを実行すると、出力結果は次のようになります。

配列は[1, 2, 3, null, undefined]となり、数値が昇順に並び、その後にnullとundefinedが続きます。

このソートの方法は、nullやundefinedを末尾に移動させるのが目的であり、nullとundefinedの相対的な位置は問わない場合に有効です。

しかし、nullとundefinedの相対的な位置も重要な場合は、上記のソート関数をさらに調整する必要があります。

また、TypeScriptを使用する場合、型の制約を利用してnullやundefinedを含む可能性のある配列を明示的に表すことで、コンパイル時に潜在的な問題点を早期に発見することができます。

○サンプルコード9：2つ以上のキーでの複雑なソート

TypeScriptでのデータのソート作業は、特にオブジェクトが含まれる配列の場合、多くの状況で必要とされます。

しかし、1つのキーだけでソートするだけでは、複雑なデータ構造のソートには対応できません。

そこで、2つ以上のキーを基にした複雑なソートの方法を学びます。

このコードでは、学生の名前と点数を持つオブジェクトの配列をソートする例を表しています。

この例では、まず点数でソートし、点数が同じ場合には名前でソートしています。

type Student = {
    name: string;
    score: number;
};

const students: Student[] = [
    { name: '田中', score: 85 },
    { name: '鈴木', score: 90 },
    { name: '佐藤', score: 85 },
    { name: '加藤', score: 70 }
];

students.sort((a, b) => {
    // 点数で比較
    if (a.score !== b.score) {
        return b.score - a.score; // 降順
    }

    // 名前で比較（アルファベット順）
    return a.name.localeCompare(b.name);
});

console.log(students);

このコードの実行により、まず点数が高い順に学生をソートし、点数が同じ場合は名前のアルファベット順にソートします。

結果として、[{ name: '鈴木', score: 90 }, { name: '佐藤', score: 85 }, { name: '田中', score: 85 }, { name: '加藤', score: 70 }] というソート済みの配列が得られます。

このように、2つ以上のキーを使用して複雑なソートを実現することは、実務では非常に頻繁に行われます。

特に、ユーザーからの入力や外部APIから取得したデータを適切に表示する際には、このような複数キーのソート処理が不可欠です。

注意点としては、localeCompareは文字列同士の比較を行う際に使用されます。

この関数は、文字列の自然な順序に基づいてソートするため、単純な文字列の比較 (<, >) よりもユーザーから見て自然なソート順序を実現できます。

応用例として、3つ以上のキーを基にソートする場合も考えられます。

その場合には、比較関数内でさらに多くの条件分岐を追加することで実現可能です。

たとえば、学生のクラスや学年など、さらなる条件を加えたソートを行う場面も多々ありますので、このテクニックは覚えておくと良いでしょう。

○サンプルコード10：非同期データとともにソート

非同期データの取得が一般的になってきた現代、TypeScriptを使って非同期データをソートする方法についても知っておくと非常に便利です。

今回は、非同期で取得したデータをTypeScriptのsort()関数を使用してソートする方法について、サンプルコードを交えて詳しく解説します。

このコードでは、非同期関数から取得したデータを使って、データをソートするコードを表しています。

この例では、非同期で取得したユーザーデータを年齢の昇順にソートしています。

interface User {
    id: number;
    name: string;
    age: number;
}

// 非同期にユーザーデータを取得する関数
async function fetchUsers(): Promise<User[]> {
    // 仮の非同期データ取得としてsetTimeoutを使用
    return new Promise(resolve => {
        setTimeout(() => {
            resolve([
                { id: 1, name: 'Taro', age: 32 },
                { id: 2, name: 'Hanako', age: 25 },
                { id: 3, name: 'Jiro', age: 29 },
            ]);
        }, 1000);
    });
}

// 取得したユーザーデータを年齢の昇順にソートする関数
async function sortUsersByAge() {
    const users = await fetchUsers();
    users.sort((a, b) => a.age - b.age);
    return users;
}

// ソート関数の実行と結果表示
sortUsersByAge().then(sortedUsers => {
    console.log(sortedUsers);
});

上記のサンプルでは、まずUserというinterfaceを定義しています。

次に非同期関数fetchUsersを使用してユーザーデータを取得しています。

取得したデータはsortUsersByAge関数で年齢の昇順にソートされ、結果がコンソールに表示されます。

このコードを実行すると、次のようなユーザーデータが年齢の昇順にソートされて出力されます。

Hanako, 25歳
Jiro, 29歳
Taro, 32歳

注意点として、非同期データを扱う場合、データが正しく取得される前にソート処理が行われないように、awaitを使用して非同期処理が完了するのを待つ必要があります。

また、非同期で取得したデータの中に、更に非同期で取得するデータが存在する場合、Promise.allを使用して全ての非同期処理が完了するのを待つことができます。

この技術を駆使することで、非常に複雑な非同期データのソートも可能です。

async function fetchUserDetails(user: User): Promise<User> {
    // 仮の非同期データ取得としてsetTimeoutを使用
    return new Promise(resolve => {
        setTimeout(() => {
            user.details = { hobby: 'Reading' }; // 仮の詳細データ
            resolve(user);
        }, 500);
    });
}

async function sortUsersWithDetailsByAge() {
    const users = await fetchUsers();
    const usersWithDetails = await Promise.all(users.map(fetchUserDetails));
    usersWithDetails.sort((a, b) => a.age - b.age);
    return usersWithDetails;
}

// ソート関数の実行と結果表示
sortUsersWithDetailsByAge().then(sortedUsers => {
    console.log(sortedUsers);
});

このコードの実行結果は、ユーザーデータが年齢の昇順にソートされ、各ユーザーに紐づく詳細データも非同期で取得された後に出力されます。

●注意点と対処法

sort()関数は非常に便利ですが、正しく使わないと予期せぬ動作をする場合があります。

TypeScriptでのsort()関数の利用においても、知っておくべき注意点とそれに対する対処法をいくつか解説します。

○sort()関数は元の配列を変更する

このコードでは、配列のソートを行っていますが、元の配列自体が変更されることを表しています。

元の配列を保持したい場合は、配列をコピーしてからソートする必要があります。

let numbers = [4, 2, 5];
numbers.sort();
console.log(numbers);  // [2, 4, 5]と出力され、元の配列が変更される

元の配列を変更せずにソートしたい場合は、次のように配列をコピーしてからソートします。

let numbers = [4, 2, 5];
let sorted = [...numbers].sort();
console.log(numbers);  // [4, 2, 5]と出力され、元の配列は変更されない
console.log(sorted);   // [2, 4, 5]と出力される

○デフォルトのソートは文字列としてソートされる

このコードでは、10よりも2が大きいと判断され、数値としては意図しないソート結果が得られるケースを表しています。

let numbers = [10, 2, 30];
numbers.sort();
console.log(numbers);  // [10, 2, 30]と出力される

数値として正しくソートするには、比較関数を使用します。

numbers.sort((a, b) => a - b);
console.log(numbers);  // [2, 10, 30]と出力される

○オブジェクトのソートにはカスタム比較関数が必要

このコードでは、オブジェクトの配列を特定のプロパティでソートする方法を表しています。

オブジェクトのソートには、カスタム比較関数を提供することで期待する順序でソートできます。

interface Person {
    name: string;
    age: number;
}

let people: Person[] = [
    { name: 'Taro', age: 25 },
    { name: 'Hanako', age: 20 },
    { name: 'Jiro', age: 22 }
];

// 年齢でソート
people.sort((a, b) => a.age - b.age);
console.log(people);  
// [{ name: 'Hanako', age: 20 }, { name: 'Jiro', age: 22 }, { name: 'Taro', age: 25 }]と出力される

●カスタマイズ方法

TypeScriptのsort()関数は、デフォルトの動作だけでなく、カスタム関数を通して自分の要求に合わせてソートの振る舞いをカスタマイズすることができます。

ここでは、TypeScriptでのsort()関数のカスタマイズ方法について、いくつかのサンプルコードとともに解説します。

○特定の文字列を優先してソート

このコードでは、「特定の文字列」をリストの前方に持ってくる方法を表しています。

この例では、「apple」という文字列を配列の最初に配置するソートを行っています。

const fruits = ['banana', 'apple', 'cherry', 'apple', 'grape'];

fruits.sort((a, b) => {
    if (a === 'apple' && b !== 'apple') return -1;
    if (b === 'apple' && a !== 'apple') return 1;
    return a.localeCompare(b);
});

console.log(fruits);
// fruitsの配列は['apple', 'apple', 'banana', 'cherry', 'grape']となります。

このソート関数では、「apple」という文字列が他の文字列より前に位置するように設計されています。

具体的には、比較対象の片方が「apple」で、もう片方が「apple」でない場合、前後関係を調整しています。

その後、通常の文字列の比較（localeCompareメソッドを使用）を行っています。

○配列内の数字を奇数、偶数の順にソート

このコードでは、配列内の数字を奇数と偶数に分けてソートする方法を表しています。

この例では、奇数を偶数よりも先に配置し、それぞれのグループ内で昇順にソートしています。

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

numbers.sort((a, b) => {
    if (a % 2 !== 0 && b % 2 === 0) return -1;
    if (a % 2 === 0 && b % 2 !== 0) return 1;
    return a - b;
});

console.log(numbers);
// numbersの配列は[1, 3, 5, 2, 4]となります。

比較関数内では、まずaとbの奇数、偶数の性質を確認し、それに基づいて順序を調整しています。

その後、数値の昇順でソートを行っています。