つくる - カード部品
第3章でやってきたこと
この章では部品の作り方を4つの角度から見てきました。ここで全部を1つの画面につなぎます。
- 関数コンポーネント。JSX を返す関数が画面の部品になる
- props。部品の外から値を渡し、中身を差し替える
- 分割代入。
({ name, title })の形で受け取りを短く書く - children。中身を差し込める枠部品を作る
- ファイル分割。1部品1ファイルにして components へ置く
部品が部品を使う
今回作る ProfileCard と WorkCard は、どちらも中で Card を使います。App から見ると <ProfileCard /> の1行ですが、実際には Card がその下にいます。
App
+- ProfileCard
| +- Card
+- WorkCard
+- Cardこの形にしておくと、枠の見た目を変えたいときは Card.jsx だけ、プロフィールの中身を変えたいときは ProfileCard.jsx だけを触ればよくなります。直す場所が1か所に決まるのが、部品に分ける一番の見返りです。
中でも外でも props は同じ
ProfileCard は受け取った props を、そのまま自分の中の JSX に配ります。WorkCard は受け取った title を、さらに Card の title として渡します。
import Card from "./Card.jsx";
export default function WorkCard({ title, category, year }) {
return (
<Card title={title}>
<p className="work-meta">{category} / {year}</p>
</Card>
);
}title={title} は「受け取った title を、そのまま Card の title として渡す」という意味です。同じ語が2回出てくるので最初は読みにくいですが、左が渡す先の名前、右が自分が持っている値、と分けて読むと迷いません。
つまずきどころ
components フォルダの中どうしで import するときは、./components/Card.jsx ではなく ./Card.jsx です。同じフォルダにいるので、フォルダ名をもう一度書くと見つかりません。import のパスは、いつも「そのファイルから見てどこにあるか」で書きます。
演習
ProfileCard と WorkCard を props で動くように仕上げ、プロフィール1枚と作品3枚を並べます。