コンポーネント

📖 もうちょい詳しく

何が新しいの？

コンポーネントは、画面をつくるときの「部品」のことです。
ボタン・入力欄・見出し・カードといった見た目のかたまりを、ひとつの部品として切り出してまとめたものを指します。Webやアプリの画面が複雑になるにつれ、同じような見た目を何度もコピーして書くのが大変になりました。そこで「いちど作った部品を使い回す」という考え方が広まり、いまの画面づくりの土台になっています。

どうやって動いてるの？

ひとつのコンポーネントには、見た目とふるまいがセットでまとめられています。
たとえば「ボタン」という部品なら、その形や色、押されたときの反応までをひとまとめにしておきます。画面はこうした部品を組み合わせて作り、部品の中に別の部品を入れる「入れ子」もできます。表示する文字や色などの値は、外から渡して切り替えられることが多く、同じ部品を場面ごとに少しずつ変えて使えます。

何ができるの？

同じ見た目を一度だけ作れば、いろいろな画面で何度も使い回せます。
直したいときも、元の部品をひとつ直せば、それを使っている場所すべてに反映されます。たくさんの人で開発するときも「この部分はこの部品」と分けられるので、作業を分担しやすくなります。

🌱 身近なたとえ

レゴブロックで例えると、コンポーネントは「一つひとつのブロック」です。
ブロックは形が決まっていて、組み合わせれば家でも車でも作れます。同じ形のブロックを何個でも使い回せますし、色違いを混ぜることもできます。
画面づくりも同じで、ボタンや入力欄というブロックを並べて、いろいろな画面を組み立てていきます。

✅ まず覚えるポイント

• コンポーネントは、画面をつくる「部品」のこと
• 見た目とふるまいをひとまとめにしている
• 一度つくれば、いろいろな画面で使い回せる
• 外から値を渡して、表示を切り替えられることが多い
• 直すときは部品をひとつ直せば、使っている場所すべてに反映される

🧭 よくある勘違い

コンポーネントはReactだけのもの？

そうではありません。Reactはコンポーネントを中心にした代表的な道具ですが、ほかの画面づくりの道具にも同じ考え方があります。
「部品にまとめて使い回す」という発想自体は広く共通していて、特定のひとつの技術に限った言葉ではありません。

部品にすると、かえって手間が増えない？

最初は少し手間に感じる場合があります。ただ、同じ見た目を何度も使う画面ほど、あとから効いてきます。
コピーした文章を直すときは全部を探して直す必要がありますが、部品なら一か所直すだけで済みます。長く育てる画面ほど、まとめておく利点が大きくなります。

🧩 関連して覚えると楽な言葉

• React: コンポーネントを組み合わせて画面をつくる、代表的な道具
• UI: 利用者が触れる画面そのもの。コンポーネントはUIを組み立てる部品
• SPA: 部品を入れ替えてなめらかに動かす、Webアプリの作り方
• モジュール: プログラムを役割ごとに分けたかたまり。考え方が似ている

🏁 ひとことでまとめ

コンポーネントは、ボタンや入力欄といった画面の部品を、使い回せる単位にまとめたものです。
レゴブロックを組み合わせるように、部品を並べて画面を作っていく——いまの画面づくりを支える基本の考え方です。