配列の要素を並び替える方法
JavaScriptの配列の並び替えについて、初心者向けに噛み砕いて、例題を交えて詳しく解説します。
JavaScriptでは配列の順番を変えたいときに、主に reverse と sort というメソッドを使います。
1. 配列を逆順にする：reverse()
どういうときに使う？
- 配列の最初と最後をひっくり返したいとき
- 順番を反転させたいとき
例：
let fruits = ['りんご', 'バナナ', 'みかん'];
console.log('元の配列:', fruits);
fruits.reverse();
console.log('逆順にした配列:', fruits);
出力:
元の配列: ["りんご", "バナナ", "みかん"]
逆順にした配列: ["みかん", "バナナ", "りんご"]
✅ ポイント：
- 元の配列そのものが変わります。
- 新しい配列は作られません。
2. 配列を並び替える：sort()
文字列の場合
let fruits = ['バナナ', 'りんご', 'みかん'];
fruits.sort();
console.log(fruits);
出力:
["みかん", "バナナ", "りんご"]
✅ ポイント：
- デフォルトでは文字列のアルファベット順・あいうえお順で並びます。
数字の場合の注意
let numbers = [10, 2, 33, 4];
numbers.sort();
console.log(numbers);
出力:
[10, 2, 33, 4]
❌ これは意図した順番ではありません。
理由：sort() は文字列として並べ替えるため、10 は "10" として "1" が先頭になり、2 よりも後になってしまいます。
数字を正しく並び替える
let numbers = [10, 2, 33, 4];
// 比較関数を使う
numbers.sort((a, b) => a - b);
console.log(numbers);
出力:
[2, 4, 10, 33]
✅ ポイント：
(a, b) => a - bは昇順に並べるためのルール(a, b) => b - aにすると降順になります
3. 例題で理解しよう
例題1：逆順にする
let animals = ['ネコ', 'イヌ', 'ウサギ'];
// animals を逆順に並べ替えなさい
答え:
animals.reverse();
console.log(animals); // ["ウサギ", "イヌ", "ネコ"]
例題2：数値を昇順に並べ替える
let scores = [50, 80, 70, 100, 60];
// scores を昇順に並べ替えなさい
答え:
scores.sort((a, b) => a - b);
console.log(scores); // [50, 60, 70, 80, 100]
例題3：文字列をアルファベット順に並べ替える
let names = ['Taro', 'Hanako', 'Jiro'];
// names をアルファベット順に並べ替えなさい
答え:
names.sort();
console.log(names); // ["Hanako", "Jiro", "Taro"]
まとめ
reverse()→ 配列を逆順にするsort()→ 配列を並び替える- 文字列はそのままアルファベット・あいうえお順
- 数値は比較関数
(a, b) => a - bを使う
- 並び替えは元の配列を書き換えるので注意
💡 ヒント：
- 「元の配列は残して並び替えたい」という場合は、
slice()でコピーしてからsort()やreverse()を使うと安全です。