Web アプリを効率的に開発するには、機能を小さな部品に分割して考えることが大切です。この部品こそが コンポーネント (Components) です。
コンポーネント とは
コンポーネントは、再利用可能な UI の塊です。例えば、EC サイトであれば、商品カード、カートのアイコン、検索バーなど、それぞれを一つのコンポーネントとして作成できます。
アプリのコンポーネント階層の例
+--------------------------+
| App.vue |
| (ルート コンポーネント) |
+------------+-------------+
|
+-------------+-------------+
| |
+--------+------------+ +--------+------------+
| Header.vue | | MainContent.vue |
| (親 コンポーネント) | | (親 コンポーネント) |
+---------------------+ +----+----------------+
|
+-------------------+-------+
| |
+----------+----------+ +-----------+---------+
| ProductCard.vue | | Button.vue |
| (子 コンポーネント) | | (子 コンポーネント) |
+---------------------+ +---------------------+
- ルート コンポーネント (App.vue): アプリ全体の玄関口となる、最も上位のコンポーネントです。
- 親 コンポーネント: 複数の子コンポーネントをまとめる役割を持つコンポーネントです。
- 子 コンポーネント: 親コンポーネントの中に組み込まれる、より小さな単位のコンポーネントです。
コンポーネントは、それぞれが独立した機能とスタイルを持つため、個別に開発・テストができ、チーム開発でも非常に役立ちます。