コンポーネント とは？

UIを「部品」として切り出したもの。例えばボタン・ヘッダ・ユーザーカードをそれぞれコンポーネントとして作れば、複数のページで同じコンポーネントを使い回せる。変更も1箇所直せば全ページに反映される。

このサイトはAstroで作られていて、ヘッダー・フッター・会話バルーンなどがコンポーネントとして分かれているよ。「Header.astro」「Balloon.astro」のような.astroファイルがそれぞれコンポーネント。

「再利用するか」「独立して管理したいか」が目安。あちこちで使うボタンはコンポーネント化する価値がある。1箇所にしか出ない10行のコードはわざわざコンポーネントにしなくていい。過度な分割はかえって複雑になる。

「Prop Drilling」は代表的な失敗パターンだね。親→子→孫→ひ孫とデータをバケツリレーで渡していくと、途中のコンポーネントが不要なpropsを受け取るだけの「パイプ役」になってしまう。ReactならContext APIやZustand、VueならPinia/Provideで解決できるよ。あと「God Component（神コンポーネント）」も要注意。1つのコンポーネントに何でも詰め込んで500行超えになると、テストも修正も困難になる。「1コンポーネント1責務」を意識するのが大事だよ。