react.js | 全国個人事業主支援協会

COLUMN コラム

react.js

2025年12月01日
react.js
- 未分類
- React

JSXは「タグをそのまま値として記述する」という非常にシンプルな機能です。
これは「スクリプトないでHTMLを記述するテンプレート」のような感覚で使えます。
最近のHTMLでは、条件分岐や繰り返し等の構文のような機能も盛り込まれていますが、JSXではこのような構文の機能はありません。
ですが、「条件で表示を変えたり、繰り返したりすることはできないのか？」というとそういうわけではありません。

JSXでは｛｝を使ってJavaScriptの式や関数などを埋め込めます。
まずは条件チェックして表示を行うということを記載します。

{ 真偽値 && JSXの記述 }

真偽値の変数や式などを用意し、その後に&&をつけてJSXの記述します。
trueなら&&の後のJSXが表示され、falseなら表示されません。

次は繰り返し表示についてです。
いくつか方法がありますが、今回は「配列」を使ったものでやります。
これはあらかじめ表示する＜li＞を並べるのに有効です。

let data = [
＜li＞Red＜/li＞,
＜li＞Green＜/li＞,
＜li＞Blue＜/li＞
]
return (
＜div＞
＜ul＞
{data}
＜/ul＞
＜/div＞
)