目次
概要
タイムラインを「新しい順」に並べ替えたり、ランキングを下位から表示したりする場合、配列の並び順を反転させる処理が必要になります。
JavaScriptの reverse メソッドを使えば、たった一行で配列の要素を逆順に並べ替えることができます。ただし、このメソッドは「元の配列そのものを書き換える（破壊的変更）」という重要な特性を持っているため、扱いには注意が必要です。
仕様（入出力）
reverse メソッド
| メソッド | 意味 | 戻り値 |
配列.reverse() | 配列内の要素の順番を その場で（in-place） 反転させる。 | 反転された配列そのもの （元の配列への参照が返されます） |
- 入力: なし
- 出力: 順序が逆になった配列（元の配列と同じオブジェクト）
- 副作用: 元の配列の中身が変更されます。
基本の使い方
配列を逆順にする
メソッドを実行すると、変数の指す配列の中身自体が書き換わります。
const numbers = [1, 2, 3, 4, 5];
// 実行
numbers.reverse();
console.log(numbers);
// 出力: [5, 4, 3, 2, 1]
// ※ numbers自体が変化している点に注意
コード全文（HTML / JavaScript）
面接の順番リストを管理するシステムです。
デフォルトの「到着順（昇順）」と、入れ替え後の「逆順（降順）」をボタン一つで切り替える機能を実装します。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interview Order Manager</title>
<style>
.list-container {
font-family: "Yu Gothic", sans-serif;
max-width: 400px;
padding: 20px;
border: 2px solid #333;
border-radius: 8px;
background-color: #fff;
}
h3 { margin-top: 0; text-align: center; }
.member-list {
list-style: decimal; /* 数字付きリスト */
padding-left: 1.5em;
margin-bottom: 20px;
border-top: 1px solid #ccc;
padding-top: 10px;
}
.member-item {
padding: 5px 0;
font-size: 1.1rem;
border-bottom: 1px dashed #eee;
}
.btn-reverse {
width: 100%;
padding: 10px;
background-color: #e67e22;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
font-size: 1rem;
}
.btn-reverse:hover { background-color: #d35400; }
</style>
</head>
<body>
<div class="list-container">
<h3>面接順番リスト</h3>
<ol id="interview-list" class="member-list">
</ol>
<button id="btn-toggle-order" class="btn-reverse">順番を入れ替える (reverse)</button>
</div>
<script src="order_manager.js"></script>
</body>
</html>
JavaScript
/**
* 面接順序管理スクリプト
* reverseメソッドによる並び替えの実装
*/
// 1. 面接者リスト（配列）
// ユーザー指定の名称を使用
const interviewees = [
'森',
'小森',
'中森',
'大森',
'林',
'小林',
'中林',
'大林'
];
// DOM要素
const listElement = document.getElementById('interview-list');
const toggleButton = document.getElementById('btn-toggle-order');
/**
* リストを画面に描画する関数
*/
const renderList = () => {
// リストをクリア
listElement.innerHTML = '';
interviewees.forEach((name) => {
const li = document.createElement('li');
li.className = 'member-item';
li.textContent = `${name} 様`;
listElement.appendChild(li);
});
};
/**
* 順序を反転させる関数
*/
const reverseOrder = () => {
// ★ reverseメソッドの使用
// interviewees配列の中身自体が逆順に書き換わる
interviewees.reverse();
// 再描画
renderList();
};
// 初期表示
renderList();
// イベントリスナー
toggleButton.addEventListener('click', reverseOrder);
カスタムポイント
- ソートとの組み合わせ:「あいうえお順」にしてから逆にしたい場合は、
sort()してからreverse()を行います。array.sort().reverse(); - アニメーション:リストの順序が変わる際、DOM要素を一度削除して作り直すのではなく、FLIPアニメーションなどのライブラリを組み合わせると、要素がスムーズに移動する視覚効果を実装できます。
注意点
- 破壊的メソッドである（最重要）
reverseは元の配列（ここではinterviewees）を直接変更します。「元の順序を残しておきたい」という場合には使えません。元の配列を保持したい場合は、後述するtoReversedやスプレッド構文を使用してください。 - 戻り値も変更後の配列戻り値は「新しい配列」ではなく、「変更された元の配列への参照」です。
const b = a.reverse();とした場合、aとbは同じ配列を指すことになり、bを変更するとaも変わります。
応用
元の配列を変えずに逆順にする (toReversed / スプレッド構文)
元のデータを保持したまま、表示用だけ逆順にしたい場合は以下の方法を使います。
1. toReversed() メソッド (ES2023推奨)
最新のJavaScriptでは、非破壊的な反転メソッドが用意されています。
const original = ['木', '小木', '大木'];
const reversed = original.toReversed();
console.log(original); // ['木', '小木', '大木'] (変わらない！)
console.log(reversed); // ['大木', '小木', '木'] (新しい配列)
2. スプレッド構文 (従来の方法)
配列をコピーしてから reverse します。
const original = ['木', '小木', '大木'];
const reversed = [...original].reverse();
まとめ
reverse メソッドは配列を反転させる最も基本的な手段ですが、「元のデータを書き換える」という点において副作用への配慮が必要です。
- データの状態そのものを反転させたい場合 →
reverse() - 元のデータを残しつつ、逆順の結果だけ欲しい場合 →
toReversed()または[...array].reverse()
この違いを理解し、用途に合わせて使い分けることがバグを防ぐポイントです。
