こんにちは！フロントエンドエンジニアというよりReactエンジニアになりつつあるMizutani(@sirycity)です。Reactが滅んだら無職になりそう。

今日はそんなReactをWeb制作で使う時に僕がよくやるループの書き方です。特に難しい内容じゃないけど。どうぞ。

Reactのループについて

すっごい初歩的ですが、Reactのループは.map()を使うことが多いです。JavaScript勉強したてだとforとかから始めた人もいるかもだけど、Reactでは…というより最近のJSではほぼ使わないです。

こんな感じのHTMLを生成したかったら…

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>レモン</li>
</ul>

Reactだとこんな感じになります。(一例)

const foo = () => {
  const FRUITS = ['りんご', 'みかん', 'レモン']

  return (
    <ul>
      {FRUITS.map(f => (
        <li>{f}</li>
      ))}
    </ul>
  )
}

Reactでループする時のkeyについて

Reactでmapみたいなループ系を使う時はkeyってのが必要です。ただ、Web制作では正直なくても困らないです。でも一応付けてみましょう。

<ul>
  {FRUITS.map(f => (
    <li key={f}>{f}</li>
  ))}
</ul>

こんな感じ。

ループする部分を別ファイルにする

↑のりんごとかみかんって書いてある部分、別ファイルにすると良いです。僕はよくやってます。こんな感じにファイル2つ作る。

export const FRUITS = [
  'りんご',
  'みかん',
  'レモン'
]

import { FRUITS } from '../constants/fruits.js'

const foo = () => (
  <ul>
    {FRUITS.map(f => (
      <li>{f}</li>
    ))}
  </ul>
)

ループする内容をもっと増やす

説明するより見た方がいいね！

export const FRUITS = [
  { name: 'りんご', href: './apple' },
  { name: 'みかん', href: './orange' },
  { name: 'レモン', href: './lemon' },
]

import { FRUITS } from '../constants/fruits.js'

const foo = () => (
  <ul>
    {FRUITS.map(({ name, href }) => (
      <li>
        <a href={href}>{name}</a>
      </li>
    ))}
  </ul>
)

こんなかんじ。↑だとnameとhrefだけだったけどぶっちゃけこの要領でやっていけばWebサイトのコードの大半をループにできます。でもやりすぎは禁物なのでいい感じの所で止めておきましょう。

さいごに

今回はすごい初歩的な内容でしたが、僕がReact覚えたてのころを思い出して書きました。

経済学者のクルーグマンも「誰だって最初は初心者だった」って言ってますし、React好きな人が増えると良いですね〜 以上。