【こんぽーねんと】
コンポーネント とは？
最終更新:
💡 UIを「部品化」して再利用する設計の単位
UIや機能の一部を部品としてまとめたもの。組み合わせたり再利用したりしてアプリを構成する。UIではボタンやカードだけでなく、ページ全体を表す場合もあり、一度しか使わない部品もある。
📌 このページのポイント
- UIをボタン・ヘッダー・カードなどの部品にまとめる
- 同じ部品を複数の場所で使い、表示内容を渡して変えられる
- 一度しか使わなくても、コードを整理する単位にできる
- 分割の大きさやデータの渡し方は、役割に合わせて考える
ひよこ コンポーネントって何？
ペンギン先生 UIでは、ボタンやヘッダー、カードなどを部品としてまとめたものだよ。組み合わせてページを作り、同じ部品に異なる内容を渡して使うこともできる。必ず複数回使う部品だけを指すわけではないんだ
ひよこ このサイトにもあるの？
ペンギン先生 あるよ。Astroで作られていて、Header.astroがヘッダー、Balloon.astroが会話の吹き出しを担当している。共通の部品を直せば、それを使う場所の表示を揃えやすい。公開中の静的ページへ反映するには、ビルドして公開する必要もあるよ
ひよこ 何行になったら分割するの？
ペンギン先生 行数だけの決まりはないよ。再利用したいか、役割を分けて管理したいかが目安になる。一度しか使わない部品でも整理に役立つ場合があるし、必要以上に分ければ関係を追いにくくなることもあるんだ
ひよこ 親から子へデータを渡すと、設計の失敗なの？
ペンギン先生 そうとは限らないよ。Reactではpropsで渡すことが基本。深い階層への受け渡しがつらくても、まず部品の組み合わせやchildrenで整理できるか考える。離れた部品で同じ情報が必要ならContextも選択肢だけれど、常に必要なわけではないんだ
まとめ：ざっくりこれだけ覚えればOK！
「コンポーネント」って出てきたら「UIや機能をまとめた、組み合わせて使う部品」と思えればだいたいOK！
📖 おまけ：英語の意味
「Component」 ＝ 部品・構成要素
💬 UIのボタンやページ、ソフトウェアの機能など、全体を構成する部品を表す言葉だよ。具体的な作り方はフレームワークなどによって異なるんだ