JavaScript配列を逆順にする（reverse）の基本と実践
reverseは配列の並びをその場で反転します。最初の要素が最後に、最後の要素が最初になります。元の配列が直接書き換えられる点が重要です。
構文と考え方
// その場で反転（破壊的）
arr.reverse();
// 反転した新しい配列が欲しい場合（非破壊）
const reversed = [...arr].reverse();
// モダンな非破壊版（ES2023+）
const reversed2 = arr.toReversed();
- 破壊的変更: reverseは配列を“その場で”反転し、同じ配列への参照を返します。
- 非破壊で使う: スプレッドでコピーしてからreverseするか、対応環境ならtoReversedを使うと元配列を変えずに済みます。
すぐ使えるテンプレート集
基本の逆順
const fruits = ["apple", "banana", "orange"];
fruits.reverse();
console.log(fruits); // ["orange", "banana", "apple"]
- ポイント: 元のfruitsが逆順に「書き換わる」ことに注意。
元を残したい（非破壊）
const fruits = ["apple", "banana", "orange"];
const reversed = [...fruits].reverse();
console.log(fruits); // ["apple", "banana", "orange"]
console.log(reversed); // ["orange", "banana", "apple"]
- ポイント: スプレッドでコピーしてからreverseすれば、元配列は変わりません。
モダンな非破壊メソッド（toReversed）
const fruits = ["apple", "banana", "orange"];
const reversed2 = fruits.toReversed();
console.log(reversed2); // ["orange", "banana", "apple"]
- ポイント: toReversedは新しい配列を返し、元配列は変更されません（対応環境で使用）。
直近追加のデータを新着順へ
const logs = [1001, 1002, 1003, 1004];
const latestFirst = [...logs].reverse();
console.log(latestFirst); // [1004, 1003, 1002, 1001]
- ポイント: 表示用にだけ逆順にしたいときは非破壊が安全。
よくある落とし穴と対策
- 元配列が変わるのを忘れる: reverseは同じ配列インスタンスを反転します。複数の変数が同じ配列を参照していると、全部の見え方が変わります。
- 非破壊にしたい: 表示や一時処理だけなら、
[...arr].reverse()かtoReversed()を使って元配列を守る。 - 戻り値の誤解: reverseは「反転後の同じ配列への参照」を返し、新しいコピーは作りません。
補足：reverseとsortの関係
reverseは現在の並びを反転するだけで、並び順の“意味”は変えません。数値の昇順・降順を作りたいなら、まずsortで並べ、その結果をreverseする流れも使えます（例：昇順にsortしてからreverseで降順）。
練習問題（手を動かして覚える）
1. 配列を逆順に並べ替え
const arr = [1, 2, 3, 4];
arr.reverse();
console.log(arr); // [4, 3, 2, 1]
2. 元を保ちながら逆順に表示
const arr = ["A", "B", "C"];
const rev = [...arr].reverse();
console.log(arr); // ["A","B","C"]
console.log(rev); // ["C","B","A"]
3. 参照共有の影響を確認
const a = ["x", "y", "z"];
const b = a; // 同じ配列を参照
a.reverse();
console.log(b); // ["z","y","x"] 参照共有なのでbも反転済み
直感的な指針
- 元をその場で反転したいならreverse。元を壊したくないなら
[...arr].reverse()かtoReversed()。配列共有時の副作用に気をつける。