女性向けエンジニアスクール
3秒でわかる
見た目と振る舞いをひとまとめにした UI の部品。同じ形を何度も書き写さずに済み、余白や色を直すときも手を入れる場所が 1 か所にまとまります。
30秒図解
もう少し詳しく
どういうものか
コンポーネントは、画面を構成する部品を、見た目(マークアップ)とスタイル、振る舞い(イベント処理)まで含めてひとまとまりにしたものです。React や Vue では関数として書き、受け取った値をもとに画面の一部を返します。ボタン、入力欄、カード、ヘッダーなど、名前を付けて呼べる単位はすべて候補になります。
外から渡す値を props(プロパティ)、その部品が内部で持つ状態を state と呼び、この二つの入力が決まれば表示が決まる、という形で組み立てます。
なぜ必要か
同じ見た目の要素をページごとに書き写すと、余白をひとつ変えるだけで全ページを直すことになり、必ずどこかが直し漏れます。部品にしておけば定義は 1 か所です。加えて、部品ごとに単体で表示を確かめられるため、画面全体を動かさずに見た目の確認やテストができます。
具体例
// 部品を定義する 受け取るのは props
function UserCard({ name, role, onSelect }) {
return (
<button className="card" onClick={() => onSelect(name)}>
<strong>{name}</strong>
<span>{role}</span>
</button>
);
}
// 使う側 同じ形を並べる
function UserList({ users }) {
return (
<div>
{users.map((u) => (
<UserCard key={u.id} name={u.name} role={u.role} onSelect={handleSelect} />
))}
</div>
);
}つまずきやすいところ
props を書き換えようとするのがよくある誤りです。props は呼び出し側から渡された読み取り専用の値なので、変えたいなら状態を持つ側で更新して渡し直します。
リストで key を付け忘れる、あるいは配列の添字を key にするのも定番です。並び替えや削除が起きたときに、React が別の要素を同じものとみなし、入力欄の中身が別の行に残るといった不可解な挙動になります。
分け方も悩みどころです。最初から細かく割るより、一度大きく書いてから、同じ塊が二度目に登場した時点で切り出すほうが失敗しにくくなります。
似た用語との違い
| 用語 | 内容 |
|---|---|
| props | 親から渡される読み取り専用の値 |
| state | その部品が自分で持ち、変えると再描画が起きる値 |
覚え方
「名前を付けて呼びたくなったら、それは部品」と考えると切り出す単位が決まります。
