【JavaScript】sortメソッドの使い方！

今回はsortメソッドの使い方を説明します！sortメソッドとは、配列の中身を並び替えるための機能で、JavaScriptでは sort（）でデータを「小さい順（昇順）」や「大きい順（降順）」に簡単に並べ替えることができます。※まずは下の表を使って動きを確認してみてください(ヘッダーをクリック)

数字	英語	ローマ字	ひらがな	カナ	漢字	日付	金額
3	Apple	Sakura	さくら	サクラ	桜	2025/04/03	1,200
2	Banana	Taro	たろう	タロウ	太郎	2025/04/02	2,500
5	Orange	Hanako	はなこ	ハナコ	花子	2025/04/05	3,000
1	Grape	Ichiro	いちろう	イチロウ	一郎	2025/04/01	980
4	Melon	Jiro	じろう	ジロウ	次郎	2025/04/04	1,500
7	Peach	Momoko	ももこ	モモコ	桃子	2025/04/07	4,800
6	Lemon	Ren	れん	レン	蓮	2025/04/06	3,200
10	Mango	Haruki	はるき	ハルキ	陽輝	2025/04/10	5,000
9	Pear	Kenta	けんた	ケンタ	健太	2025/04/09	2,750
8	Berry	Yui	ゆい	ユイ	結衣	2025/04/08	1,980

sortメソッドの使い方！
まとめ

sortメソッドの使い方！

JavaScriptのsort()メソッドは、配列の中身を並び替えるためのメソッドでデフォルトでは、要素を文字列として扱い、「辞書順（Unicode順）」で並び替えます。

配列.sort();

引数なしで使うと、文字列として昇順（A→Z）で並び替えられます。

const animals = ['dog', 'cat', 'elephant', 'bear'];
animals.sort();
console.log(animals);
// 結果: ['bear', 'cat', 'dog', 'elephant']

上記のコードを降順に並び替えるには、値を比較する必要があります。

const animals = ['dog', 'cat', 'elephant', 'bear'];
animals.sort(function(a, b) {
  return b.localeCompare(a); // 降順に変更
});
console.log(animals);
// 結果: ['elephant', 'dog', 'cat', 'bear']

※localeCompare は、文字列を辞書順で比較するメソッドです

目的	昇順コード	降順コード
文字列の並び替え	`arr.sort()`	`arr.sort((a, b) => b.localeCompare(a))` または arr.sort(function(a, b) { return b.localeCompare(a); })
数字の昇順	`arr.sort((a, b) => a - b)` または arr.sort(function(a, b) { return a – b; })	`arr.sort((a, b) => b - a)` または arr.sort(function(a, b) { return b – a; })
オブジェクトのプロパティ順	`arr.sort((a, b) => a.key - b.key)` または arr.sort(function(a, b) { return a.key – b.key; })	`arr.sort((a, b) => b.key - a.key)` または arr.sort(function(a, b) { return b.key – a.key; })

ここからは、サンプルコードをみていきましょう！

数字のソート

/* a-b(昇順)	b-a(降順) */
const numbers = [3, 2, 5, 1, 4, 7, 6, 10, 9, 8];

// 昇順（小さい順）
const asc = numbers.sort((a, b) => a - b); 
console.log("昇順:", asc); // [1, 2, 3, ..., 10]

// 降順（大きい順）
const desc = numbers.sort((a, b) => b - a);
console.log("降順:", desc); // [10, 9, 8, ..., 1]

文字列のソート（英語、ローマ字、ひらがな、カタカナ、漢字）

/* a-b(昇順)	b-a(降順) */
const names = ["Sakura", "Taro", "Hanako", "Ichiro", "Jiro", "Momoko", "Ren", "Haruki", "Kenta", "Yui"];

// 昇順（A→Z）
const asc = names.sort((a, b) => a.localeCompare(b));
console.log("昇順:", asc);

// 降順（Z→A）
const desc = names.sort((a, b) => b.localeCompare(a));
console.log("降順:", desc);

/* a-b(昇順)	b-a(降順) */
const hiragana = ["さくら", "たろう", "はなこ", "いちろう", "じろう", "ももこ", "れん", "はるき", "けんた", "ゆい"];

// 昇順（あ→ん）
const asc = hiragana.sort((a, b) => a.localeCompare(b, 'ja'));
console.log("昇順:", asc);

// 降順（ん→あ）
const desc = hiragana.sort((a, b) => b.localeCompare(a, 'ja'));
console.log("降順:", desc);

※'ja' を指定すると日本語でも自然な並び順になる

日付のソート

/* a-b(昇順)	b-a(降順) */
const dates = ["2025/04/03", "2025/04/02", "2025/04/05", "2025/04/01", "2025/04/04",
               "2025/04/07", "2025/04/06", "2025/04/10", "2025/04/09", "2025/04/08"];

// 昇順（古い → 新しい）
const asc = dates.sort((a, b) => new Date(a) - new Date(b));
console.log("昇順:", asc);

// 降順（新しい → 古い）
const desc = dates.sort((a, b) => new Date(b) - new Date(a));
console.log("降順:", desc);

※new Date() で日付として比較しないと、文字列比較になってしまう

金額のソート

const prices = ["1,200", "2,500", "3,000", "980", "1,500", "4,800", "3,200", "5,000", "2,750", "1,980"];

// 昇順（安い順）
const asc = prices.sort((a, b) =>
  Number(a.replace(/,/g, '')) - Number(b.replace(/,/g, ''))
);
console.log("昇順:", asc);

// 降順（高い順）
const desc = prices.sort((a, b) =>
  Number(b.replace(/,/g, '')) - Number(a.replace(/,/g, ''))
);
console.log("降順:", desc);

※"1,200" のようにカンマがあると Number() で正しく変換されないため、 replace(/,/g, '') でカンマを除去