1. なぜmap以外の方法を知る必要があるのか

Reactでリスト表示というと、多くの人がmapを思い浮かべます。

ただし、条件が多い表示や、表示内容がバラバラな場合は、 mapだけでは読みにくくなることがあります。

そんなときに、別の書き方を知っていると、プログラムが理解しやすくなります。

2. for文を使ってリストを作る方法

for文は、回数を決めて繰り返す仕組みです。

紙に同じ文字を何行も書くような感覚で、画面の部品を並べることができます。


import React from "react";

function App() {
  const items = ["ねこ", "いぬ", "うさぎ"];
  const list = [];

  for (let i = 0; i < items.length; i++) {
    list.push(<li key={i}>{items[i]}</li>);
  }

  return <ul>{list}</ul>;
}

export default App;

（動物の名前が縦に並んで表示されます）

3. 条件分岐と組み合わせたfor文の例

表示したいものと、表示したくないものを分けたい場合、 for文はとても便利です。


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

  for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
      list.push(<li key={i}>{numbers[i]}</li>);
    }
  }

  return <ul>{list}</ul>;
}

（偶数だけがリストとして表示されます）

4. あらかじめ部品を分けて表示する方法

複雑なリストでは、表示の部品を先に作っておくと、全体が見やすくなります。

これは、お弁当のおかずを小皿に分けて並べるような考え方です。


function Item({ name }) {
  return <li>{name}</li>;
}

function App() {
  return (
    <ul>
      <Item name="パン" />
      <Item name="ごはん" />
      <Item name="めん" />
    </ul>
  );
}

（食べ物の名前がリスト表示されます）