Posted on Jun 14 • Originally published at scqr.net

Vue コンポーネント階層

Web アプリを効率的に開発するには、機能を小さな部品に分割して考えることが大切です。この部品こそが コンポーネント (Components) です。

コンポーネントとは

コンポーネントは、再利用可能な UI の塊です。例えば、EC サイトであれば、商品カード、カートのアイコン、検索バーなど、それぞれを一つのコンポーネントとして作成できます。

アプリのコンポーネント階層の例

 +--------------------------+ | App.vue | | (ルート コンポーネント) | +------------+-------------+ | +-------------+-------------+ | | +--------+------------+ +--------+------------+ | Header.vue | | MainContent.vue | | (親 コンポーネント) | | (親 コンポーネント) | +---------------------+ +----+----------------+ | +-------------------+-------+ | | +----------+----------+ +-----------+---------+ | ProductCard.vue | | Button.vue | | (子 コンポーネント) | | (子 コンポーネント) | +---------------------+ +---------------------+

ルートコンポーネント (App.vue): アプリ全体の玄関口となる、最も上位のコンポーネントです。
親コンポーネント: 複数の子コンポーネントをまとめる役割を持つコンポーネントです。
子コンポーネント: 親コンポーネントの中に組み込まれる、より小さな単位のコンポーネントです。

コンポーネントは、それぞれが独立した機能とスタイルを持つため、個別に開発・テストができ、チーム開発でも非常に役立ちます。