React(JavaScript)で手軽にN回分のループをさせる

Reactでデバッグ時とかUIのみ実装している時などにN回分ループさせたいみたいなケースがたまにあります。

そんなときに手軽に書ける方法を紹介します。

N回分ループ

パターン1

Array(100)だけだと中身がemptyの配列ができてmapが使えないので、Spread Syntaxを使います。

 <ul>
  {[...Array(100)].map((_, i) => (
    <li key={i}>{i}</li>
  ))}
</ul>

パターン2

emptyをfillで埋めちゃいます。fillに引数を渡さないといけないのがちょっと気持ち悪いでしょうか。

<ul>
  {Array(100).fill(1)..map((_, i) => (
    <li key={i}>{i}</li>
  ))}
</ul>

パターン3

Array.fromを使うとmapを除けます。

<ul>
  {Array.from({ length: 100 }, (_, i) => (
    <li key={i}>{i}</li>
  ))}
</ul>

まとめ

React(JavaScript)で手軽にN回分のループをさせる方法を3つ紹介しました。

小ネタですが役に立てれば幸いです。