問題
9
JavaScript
リストの並び替え
この問題では、昇順・降順の並び替えロジックを使ってリストアイテムを操作するスキルを学びます。少し難しく感じるかもしれませんが、諦めずにGoogle検索を活用して答えを見つけてみましょう！
JavaScriptの問題に挑戦しよう！
問題
「リストの並び替え」
複数のリストアイテムを昇順または降順に並び替える機能を持つアプリを作成してください。
あらかじめエディタに書くコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>リストの並び替え</title>
</head>
<body>
<h1>リストの並び替え</h1>
<ul id="itemList">
<li>忍者 3</li>
<li>忍者 1</li>
<li>忍者 4</li>
<li>忍者 2</li>
</ul>
<button onclick="sortList('asc')">昇順に並び替え</button>
<button onclick="sortList('desc')">降順に並び替え</button>
</body>
</html>
¥HTML¥
期待する画面
解答と解説（リストの並び替え）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
Array.from(list.getElementsByTagName('li')):
getElementsByTagNameメソッドで取得したリストアイテムをArray.from()で配列に変換しています。これにより、配列メソッドを使用してリストアイテムを操作できるようになります。
items.sort((a, b) => { ... }):
sortメソッドを使用して、配列を昇順または降順に並び替えます。localeCompare()メソッドは、2つの文字列を辞書順で比較します。order変数に基づいて、昇順か降順を選択しています。
list.appendChild(item):
並び替えたリストアイテムを再びリストに追加します。appendChild()メソッドを使うことで、リストが再構築されます。
