1. Reactのリスト表示をもう一度確認

Reactでリストを表示する基本は、配列の中身を一つずつ取り出して画面に並べることです。

配列は、たくさんの情報を順番に並べた入れ物のようなものです。

Reactでは、配列とmapという仕組みを使って、簡単にリスト表示ができます。

2. ソートとは何かをイメージしよう

ソートとは、並び順を整えることです。

例えば、テストの点数を小さい順や大きい順に並べ替えることを想像してください。

プログラムでも同じで、配列の順番をルールに従って並べ直すことをソートと呼びます。

3. sortの基本的な考え方

sortは、配列の順番を並べ替えるための機能です。

数字なら、小さい順や大きい順、文字なら、あいうえお順に並び替えられます。

Reactでは、表示する前に配列をソートすることで、並び替えたリストを表示できます。

4. 数字を小さい順にソートして表示する例


function App() {
  const numbers = [5, 1, 4, 2, 3];

  const sortedNumbers = [...numbers].sort((a, b) => a - b);

  return (
    <ul>
      {sortedNumbers.map(number => (
        <li key={number}>{number}</li>
      ))}
    </ul>
  );
}

（数字が小さい順に並んで表示されます）

この例では、数字の配列を小さい順に並べ替えてからリスト表示しています。

5. 大きい順に並べ替える考え方

並び順を逆にしたい場合は、比べ方を変えます。

大きい数字を先にしたいときは、引き算の順番を入れ替えるだけです。


function App() {
  const scores = [70, 85, 60, 90];

  const sortedScores = [...scores].sort((a, b) => b - a);

  return (
    <ul>
      {sortedScores.map(score => (
        <li key={score}>{score}</li>
      ))}
    </ul>
  );
}

（点数が高い順に表示されます）

6. 文字をソートしてリスト表示する例

文字の配列もソートできます。

名前や商品名を整理するときによく使われます。


function App() {
  const fruits = ["みかん", "りんご", "ばなな"];

  const sortedFruits = [...fruits].sort();

  return (
    <ul>
      {sortedFruits.map(fruit => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

（文字が順番に並んで表示されます）