Sorting in Javascript｜ソート機能の実例紹介

（最終更新月：2023年11月）

✔このような方へ向けて書かれた記事となります

「JavaScriptでのソート機能って何ができるのだろう？」

「JavaScriptでのソートの方法が知りたい」

「JavaScriptでソートする際の実際のソースコードを見てみたい」

✔当記事を通じてお伝えすること

JavaScriptにおけるソートの基本
JavaScriptでのソートの方法やその応用
JavaScriptでソートを用いた具体的なソースコードの例

当記事では、JavaScriptでのソート機能の基本から、そのオプションを用いた複雑なソート方法まで、具体的なソースコードを交えて詳しく解説しています。

ぜひ最後までご覧いただき、JavaScriptでのソートをマスターしてください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/07/26 14:34:16時点 Amazon調べ-詳細)

JavaScriptのsort()メソッド

こちらでは、JavaScriptのsort()メソッドの詳細とその使用方法について深掘りしていきましょう。

sort()メソッドを適切に使用することで、配列の要素を効果的に並べ替えることができます。

数値と文字列の基本的なソーティング
初めてのsort(): 基本構文と引数
sort()メソッドの実行結果: 返値

数値と文字列の基本的なソーティング

ソーティングは、データを特定の順序に並べ替えるプロセスです。

数値の場合、昇順や降順に並べ替えることが一般的です。

一方、文字列はアルファベット順や文字コード順にソートされることが多いです。

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

初めてのsort(): 基本構文と引数

sort()メソッドは、配列の要素を場所に応じて文字列としてソートします。

カスタムの比較関数を引数として提供することで、ソートの挙動を変更できるのです。

const words = ["apple", "Banana", "cherry"];
words.sort();  // ["Banana", "apple", "cherry"]

sort()メソッドの実行結果: 返値

sort()メソッドは、ソート後の配列を返します。

しかし、元の配列も変更される点に注意が必要です。

const fruits = ["mango", "apple", "banana"];
const sortedFruits = fruits.sort();
console.log(sortedFruits);  // ["apple", "banana", "mango"]
console.log(fruits);  // ["apple", "banana", "mango"]

実践！sort()メソッドの使い方

こちらでは、sort()メソッドの具体的な使用例とその詳細な挙動について解説します。

sort()メソッドを効果的に使用することで、データの整理や分析がより簡単です。

作成とソート：配列の取り扱い
文字列と非ASCII文字のソーティング
活用！mapを用いたソーティング
注意！sort()は同じ配列の参照を返す
ソーティングの安定性について
留意点：不適切な比較関数によるソーティング

作成とソート：配列の取り扱い

配列の作成からソートまでの基本的な手順を学びます。

const animals = ["tiger", "lion", "elephant", "giraffe"];
animals.sort();
console.log(animals);  // ["elephant", "giraffe", "lion", "tiger"]

文字列と非ASCII文字のソーティング

非ASCII文字、例えば日本語やアクセント記号付きの文字もソートできますが、特定のルールに基づいて行われます。

const names = ["Émile", "Emile", "emile"];
names.sort();
console.log(names);  // ["Emile", "Émile", "emile"]

活用！mapを用いたソーティング

map()メソッドと組み合わせることで、複雑なソーティングも簡単におこなえます。

const values = ["1.1", "10.2", "2.2"];
const sortedValues = values.map(Number).sort((a, b) => a - b);
console.log(sortedValues);  // [1.1, 2.2, 10.2]

注意！sort()は同じ配列の参照を返す

sort()メソッドは元の配列を変更するので、新しい配列を作成したい場合は注意が必要です。

const original = ["c", "a", "b"];
const sorted = [...original].sort();
console.log(original);  // ["c", "a", "b"]
console.log(sorted);    // ["a", "b", "c"]

ソーティングの安定性について

安定ソートとは、等しい値の要素の相対的な順序がソート後も保持されるソートのことを指します。

JavaScriptのsort()は、V8エンジンのバージョン7.0以降で安定ソートが保証されています。

留意点：不適切な比較関数によるソーティング

比較関数が不適切な場合、意図しないソート結果となる可能性があります。

常に比較関数の戻り値が正確であることを確認しましょう。

カスタムソーティングとオブジェクトのソーティング

こちらでは、基本的なソーティングを超えて、より高度なソーティング技術について見ていきましょう。

カスタムソーティングやオブジェクトのソーティングをマスターすることで、データの操作がより柔軟になります。

数値の並べ替え: カスタム数値ソーティング
文字列の逆順ソーティング
オブジェクトのプロパティ順ソーティング

数値の並べ替え: カスタム数値ソーティング

数値のソーティングは、単純な昇順や降順だけでなく、カスタムの条件に基づいてソートすることも可能です。

const numbers = [10, 5, 100, 25, 50];
numbers.sort((a, b) => a - b);
console.log(numbers);  // [5, 10, 25, 50, 100]

この方法を使用すると、数値の配列を正確にソートできます。

文字列の逆順ソーティング

文字列のソーティングも、逆順にすることが可能です。

これは、特定のシナリオで非常に便利です。

const fruits = ["apple", "banana", "cherry"];
fruits.sort().reverse();
console.log(fruits);  // ["cherry", "banana", "apple"]

オブジェクトのプロパティ順ソーティング

オブジェクトの配列を、特定のプロパティの値に基づいてソートできます。

const people = [
  { name: "John", age: 25 },
  { name: "Jane", age: 20 },
  { name: "Doe", age: 30 }
];
people.sort((a, b) => a.age - b.age);
console.log(people);  // [{ name: "Jane", age: 20 }, { name: "John", age: 25 }, { name: "Doe", age: 30 }]