React JSXでforEachループを使ってループ処理を行う

2024-04-02

React JSX 内でループを行う方法

map 関数は、配列の要素をそれぞれ処理して新しい配列を生成する関数です。React JSX では、map 関数を使って、配列の要素をループ処理し、それぞれに対応する JSX 要素を生成することができます。

const items = ["item1", "item2", "item3"];

const list = items.map((item) => (
  <li key={item}>{item}</li>
));

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

上記のコードでは、items 配列の要素を map 関数を使ってループ処理し、それぞれの要素に対して li 要素を生成しています。key 属性には、各要素の識別子を指定しています。

const items = ["item1", "item2", "item3"];

const list = [];

items.forEach((item) => {
  list.push(<li key={item}>{item}</li>);
});

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

const items = ["item1", "item2", "item3"];

const list = [];

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

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

ループ処理を行う際の注意点

ループ処理を行う際には、各要素に key 属性を指定する必要があります。key 属性は、各要素の識別子を指定します。
配列の要素が変更される可能性がある場合は、useEffect フックを使って、ループ処理を更新する必要があります。

React JSX でループ処理を行うには、map 関数、forEach ループ、for ループなどの方法があります。それぞれの特徴を理解して、状況に合わせて使い分けることが重要です。

map 関数を使ったサンプルコード

const items = ["item1", "item2", "item3"];

const list = items.map((item) => (
  <li key={item}>{item}</li>
));

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

forEach ループを使ったサンプルコード

const items = ["item1", "item2", "item3"];

const list = [];

items.forEach((item) => {
  list.push(<li key={item}>{item}</li>);
});

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

for ループを使ったサンプルコード

const items = ["item1", "item2", "item3"];

const list = [];

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

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

オブジェクトのループ処理

上記のサンプルコードは、配列の要素をループ処理していますが、オブジェクトの要素をループ処理することもできます。

const person = {
  name: "John Doe",
  age: 30,
  email: "[email protected]",
};

const list = [];

for (const key in person) {
  list.push(<li key={key}>{key}: {person[key]}</li>);
}

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

これらのサンプルコードを参考に、React JSX でループ処理を行ってみてください。

React JSX でループ処理を行うその他の方法

Fragment は、複数の JSX 要素をまとめて一つの要素として扱うためのコンポーネントです。ループ処理で生成した複数の JSX 要素をまとめて一つの要素として扱いたい場合に便利です。

const items = ["item1", "item2", "item3"];

const list = (
  <>
    {items.map((item) => (
      <li key={item}>{item}</li>
    ))}
  </>
);

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

上記のコードでは、Fragment を使って、map 関数で生成した li 要素をまとめて一つの要素として扱っています。

コンポーネントを使う

ループ処理で生成する要素が複雑な場合や、再利用したい場合は、コンポーネントを作成して使うことができます。

const Item = ({ item }) => {
  return <li key={item}>{item}</li>;
};

const items = ["item1", "item2", "item3"];

const list = (
  <ul>
    {items.map((item) => (
      <Item key={item} item={item} />
    ))}
  </ul>
);

return (
  {list}
);