では、配列の並び替えを実際のアプリ風サンプルで体験できるように、ランキング表示を作ってみましょう。
サンプル：ゲームのスコアランキング
目的
- プレイヤーのスコアを昇順・降順で並べ替えて表示
- 「降順ボタン」「昇順ボタン」で順番を切り替えられる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スコアランキング</title>
<style>
body { font-family: sans-serif; margin: 20px; }
button { margin-right: 10px; }
ul { list-style: none; padding: 0; }
li { padding: 4px 0; }
</style>
</head>
<body>
<h2>スコアランキング</h2>
<button id="ascBtn">昇順</button>
<button id="descBtn">降順</button>
<ul id="ranking"></ul>
<script>
// プレイヤーの名前とスコア
const players = [
{ name: 'Taro', score: 50 },
{ name: 'Hanako', score: 80 },
{ name: 'Jiro', score: 70 },
{ name: 'Yuki', score: 90 },
{ name: 'Ken', score: 60 }
];
const rankingEl = document.getElementById('ranking');
// ランキングを表示する関数
function showRanking(list) {
rankingEl.innerHTML = '';
list.forEach(player => {
const li = document.createElement('li');
li.textContent = `${player.name} : ${player.score}点`;
rankingEl.appendChild(li);
});
}
// 初期表示は昇順
showRanking([...players].sort((a,b) => a.score - b.score));
// 昇順ボタン
document.getElementById('ascBtn').addEventListener('click', () => {
showRanking([...players].sort((a,b) => a.score - b.score));
});
// 降順ボタン
document.getElementById('descBtn').addEventListener('click', () => {
showRanking([...players].sort((a,b) => b.score - a.score));
});
</script>
</body>
</html>
ポイント
- 配列のコピー
[...players]
- 元の配列
playersはそのままにして、コピーを並び替えています
- 数値の並び替え
(a,b) => a.score - b.score // 昇順
(b,a) => a.score - b.score // 降順
- スコアで比較して順番を決めています
- ボタンで切り替え
- 「昇順」「降順」をクリックするだけで簡単に並び替え可能
💡 応用アイデア
- 名前順に並び替えたい場合は
(a,b) => a.name.localeCompare(b.name)を使う - 同じスコアの場合はアルファベット順に並べるなどのルールも追加できる