TypeScriptの配列やオブジェクトのソート完全ガイド

この記事ではTypeScriptでの配列ソートについて紹介します。
記事を通して、以下のことを学べるようになります。

Array.prototype.sort()の基本的な使用方法
非破壊的ソートの方法
ソート用の関数を使用する方法
オブジェクトの配列を特定の値でソートする方法

それでは、早速学んでいきましょう！

TypeScriptの学習におすすめしたい書籍5選！

TypeScriptを学ぶ際に初心者から上級者まで幅広くおすすめできる書籍5選を紹介します！TypeScriptを効果的に学習するのに役立つこと間違いなしです。

gizanbeak.com

`Array.prototype.sort()`の基本

Array.prototype.sort() はJavaScriptの配列のメソッドで、配列をその場でソートします。
デフォルトでは要素が文字列としてソートされます。

const fruits = ['banana', 'apple', 'cherry']
fruits.sort()
console.log(fruits)

このコードでは、fruits配列がアルファベット順にソートされるため、['apple', 'banana', 'cherry'] という結果が得られます。

注意点として、数値の配列の場合は意図しない順番となることがあります。

let numbers = [21, 3, 100]
numbers.sort()
console.log(numbers)

この結果は [100, 21, 3] となり、文字列としてのソート順となります。
だから、数値のソートを正しく行うためにはカスタム関数が必要です。

Array.prototype.sort() - JavaScript | MDN

sort() は Array のメソッドで、配列の要素をその場 (in-place) でソートし、ソートされた同じ配列の参照を返します。既定のソート順は昇順で、要素を文字列に変換してから、 UTF-16 コード単位の値の並びとして比較します。

mozilla.org

非破壊的ソート

配列をソートする際、元の配列を変更せずに新しい配列を作成したい場合もあります。

sort() メソッドは元の配列を変更するので、元の配列を保持しつつ新しい配列を作成する方法を紹介します。

const numbers = [3, 1, 2]
const sortedNumbers = [...numbers].sort()
console.log(sortedNumbers)
console.log(numbers)

このコードでは、sortedNumbers は [1, 2, 3] としてソートされ、元の numbers 配列は変更されません。

[...numbers] のようにスプレッド構文を使用することで非破壊的にソートができますね！

ソート用の関数を使用する方法

数値の配列をソートする場合、デフォルトのソート機能では意図した結果が得られないことがあります。
そんな時はソート用の関数を使用します。

const numbers = [10, 2, 15]
numbers.sort((a, b) => a - b)
console.log(numbers)

この方法では [2, 10, 15] のように数値の昇順にソートされます。
この関数がどのように動作しているかというと、 a - b の結果が正の場合、a は b の後に配置されるというルールに基づいています。

ちなみに、降順にソートしたい場合は b - a を使えばOKです！

オブジェクトの配列で特定の値でソートする方法

次に、オブジェクトの配列を特定のキーの値でソートする方法を紹介します。

type User = {
    id: number
    name: string
}

const users: User[] = [
    { id: 3, name: 'Alice' },
    { id: 1, name: 'Bob' },
    { id: 2, name: 'Charlie' }
]

users.sort((a, b) => a.id - b.id)
console.log(users)

このコードでは、id の値に基づいて users 配列がソートされます。
オブジェクトのソート、意外と簡単にできますよね。

【完全ガイド】TypeScriptオブジェクト型の理解と活用法

TypeScriptのオブジェクト型を活用しませんか？基本から応用まで詳しく解説します。プログラミングがさらに楽しくなること間違いなし！

gizanbeak.com

まとめ

今回はTypeScriptでの配列ソートの方法をについて紹介しました！

ソートは基本的な操作ですが、その使い方によっては日常のコーディングでの利便性を高めてくれます。
日常のコーディングで活用してみてくださいね！

TypeScript で配列をループする簡単な3つの方法を紹介

初心者向けにTypeScriptの配列をループする方法を分かりやすく解説！for、for-of、forEachの3つを紹介。

gizanbeak.com

Gizanbeak