部品の再利用
同じ部品を値違いで並べる
props の本当のありがたみは、同じ部品を何度も使うときに出ます。作品カードを1つ作っておけば、あとは渡す値を変えて並べるだけです。
import WorkCard from "./components/WorkCard.jsx";
export default function App() {
return (
<ul className="works">
<WorkCard title="レシピ検索アプリ" category="web" year={2025} />
<WorkCard title="買い物メモツール" category="tool" year={2025} />
</ul>
);
}WorkCard は1つしか書いていないのに、画面には2枚のカードが出ます。見た目を直したくなったら WorkCard.jsx を1か所直すだけで、並んでいる全部のカードが同時に変わります。コピーして貼ったコードだと、直し忘れが必ず出ます。
同じ部品でも中身は独立している
並べた WorkCard は、見た目の設計図を共有しているだけで、別々のものです。1枚目に渡した title が2枚目に影響することはありません。設計図が1つで、そこから作られた実物が3つある、という関係です。第4章で state を持たせたときも、カードごとに別の状態を持てます。
数値と文字列を渡し分ける
year={2025} の波かっこを忘れて year="2025" と書いても、画面の見た目は同じです。ただし中身は文字列なので、あとで「2025 年より新しい作品だけ表示する」といった比較をしたときに、思ったとおりに動きません。渡すときに正しい型で渡しておくのが、あとで自分を助けます。
手で3枚書くのは面倒だと感じてほしい
作品が3件なら手で3行書けます。では 30 件だったらどうでしょうか。作品が1件増えるたびに JSX を1行足す作りは、すぐに限界がきます。しかも作品データはすでに配列で持っているのに、それを見ながら人間が手で書き写している状態です。
const works = [
{ id: 1, title: "レシピ検索アプリ", category: "web", published: true, year: 2025 },
{ id: 2, title: "買い物メモツール", category: "tool", published: true, year: 2025 },
{ id: 3, title: "写真ギャラリー", category: "web", published: false, year: 2026 },
];この面倒さは、第6章の map で丸ごと回収します。配列を JSX の配列に変換して並べれば、作品が何件あっても書くのは1行です。いまはあえて手で並べて、面倒さを体で覚えておいてください。あとで map を見たときの「これが欲しかった」が強くなります。
演習
用意してある WorkCard を使って、作品3件を手で並べます。