こんにちは！フロントエンドエンジニアというより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好きな人が増えると良いですね〜 以上。