先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで配列の中身を逆順にしたいんですけど、どうやったらいいですか？」

先生

「配列を逆順にするには、JavaScriptのreverseメソッドを使います。このメソッドはとても簡単で便利ですよ。」

生徒

「どんな感じで使うんですか？」

先生

「では、具体的な使い方を見てみましょう！」

1. reverseメソッドとは？配列を逆さにする魔法の道具

reverseメソッドは、配列の順番を反対にひっくり返すメソッドです。例えば、「りんご」「バナナ」「みかん」という順番の配列を、「みかん」「バナナ」「りんご」の順番に変えたいときに使います。

使い方はとても簡単で、配列の後ろに.reverse()と書くだけです。


let fruits = ["りんご", "バナナ", "みかん"];

fruits.reverse();

console.log(fruits);


["みかん", "バナナ", "りんご"]

これで配列の順番が逆になりました。

2. reverseメソッドは元の配列を書き換える

ここで大事なポイントは、reverseメソッドは元の配列そのものの順番を変えてしまうことです。新しく別の配列を作るわけではありません。

つまり、もし元の配列を残したい場合は、先にコピーしてから逆順にする必要があります。


let fruits = ["りんご", "バナナ", "みかん"];
let reversedFruits = fruits.slice().reverse();

console.log(fruits);         // 元の配列はそのまま
console.log(reversedFruits); // 逆順にした新しい配列


["りんご", "バナナ", "みかん"]
["みかん", "バナナ", "りんご"]

slice()は配列をコピーするメソッドです。これを使ってからreverseをすると元の配列を守れます。

3. reverseメソッドの注意点：配列の中身の種類は関係なし

reverseは配列の中身が文字列でも数字でも、順番をひっくり返すだけなので、中身の種類は気にしなくて大丈夫です。


let numbers = [1, 2, 3, 4, 5];

numbers.reverse();

console.log(numbers);


[5, 4, 3, 2, 1]

このように数字の配列も簡単に逆順になります。

4. 実際の利用例：逆順で表示したいときに便利

例えば、チャットのメッセージ一覧を新しい順に表示したいとき、もともと古い順に並んでいる配列を逆順にして使えます。


let messages = ["こんにちは", "お元気ですか？", "さようなら"];

let newestFirst = messages.slice().reverse();

console.log(newestFirst);


["さようなら", "お元気ですか？", "こんにちは"]

このように表示したい順番に簡単に変えられます。

5. 配列の逆順操作と他のメソッドの組み合わせ

reverseはsortやfilterなど他の配列操作メソッドとも組み合わせて使うことが多いです。

例えば、数字の配列を小さい順に並べ替えてから逆順にすると、大きい順に並べることができます。


let numbers = [10, 3, 7, 1];

let descending = numbers.slice().sort((a, b) => a - b).reverse();

console.log(descending);


[10, 7, 3, 1]

こうして複数のメソッドをつなげて使うことで、柔軟に配列の操作ができます。

6. まとめの代わりに最後のポイント

reverseメソッドはとてもシンプルで、配列の順番をひっくり返すのに便利です。ただし、元の配列を変えたくないときはコピーしてから使うのが安全です。

また、他の配列メソッドと組み合わせて使うことで、より効果的にデータを扱えます。

JavaScriptの配列を逆順にする方法（reverseメソッド活用）