つくる - ギャラリーReact版
章のまとめとして作るもの
この章で覚えたものを全部使って、作品ギャラリーを仕上げます。JavaScript 入門で作ったギャラリーは、DOM を組み立てて appendChild で足し、絞り込みのたびに中身を消して作り直していました。React 版では、持つのは元データと選ばれているカテゴリの2つだけで、画面はそこから毎回計算されます。
作るものは次の4つです。
- 作品配列を
mapで並べ、keyを付ける - 2026年の作品に NEW バッジを出す（
&&） - 公開中と非公開のラベルを出し分ける（三項演算子）
- カテゴリボタンで絞り込み、0件のときは空状態を出す（
filterと state）
部品の分け方
1枚ぶんの見た目は WorkCard に切り出します。バッジとラベルはカード1枚の中の話なので、カードが自分で決めれば済みます。
JavaScript (JSX)
function WorkCard({ work }) {
return (
<div className="work-card">
<h2>{work.title}</h2>
{work.year >= 2026 && <span className="badge-new">NEW</span>}
</div>
);
}一覧のほうは、どの作品を出すかだけを決めます。key を付けるのは map を書いた側、つまり App の役目です。WorkCard の中の div に key を書いても意味がありません。React が見るのは、配列として並べた要素に付いた key だけだからです。
JavaScript (JSX)
{shown.map((work) => (
<WorkCard work={work} key={work.id} />
))}0件になるカテゴリを用意しておく
絞り込みの空状態は、実際に0件になるカテゴリが無いと確かめられません。今回はボタンに「ゲーム」を入れてあります。作品データにゲームは1件も無いので、押すと必ず0件になります。ここで「該当する作品がありません」が出れば、空状態が効いている証拠です。
手が止まったら
いきなり全部を書こうとせず、map で3件出す、バッジを足す、ラベルを足す、絞り込みを足す、空状態を足す、の順に1つずつ動かして確かめてください。React の画面は state から計算されるので、途中の状態でも壊れずに動きます。
演習
絞り込み付きの作品ギャラリーを完成させます。