【JS】Web制作でReact使う時によくやるループの書き方
こんにちは!フロントエンドエンジニアというより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つ作る。
fruits.js
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好きな人が増えると良いですね〜 以上。
PREV
2021-09-28
PC2台並べて使ってるエンジニアのイヤホンはA2DPマルチポイント対応を選ぼう
NEXT
2021-10-14
【CSS】ヘッダーとフッターを固定するレイアウトの比較
LINK
リンク
Twitter
GitHub
TAGS
タグ
LATESTS
最新の記事
POPULAR
人気の記事
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介