Vue.js入門ガイド：コンポーネント編
はじめに
Vue.jsの大きな魅力のひとつがコンポーネントです。
コンポーネントとは「UIの部品」を切り出して再利用できる仕組みで、アプリを小さな部品の組み合わせとして作れるようになります。
コンポーネントは複雑な仕組みではありますが、様々な使い方ができます。
この記事では、初心者がまず理解すべきコンポーネントの基本を紹介します。
1. コンポーネントの基本
機能
- コンポーネントは「再利用可能な部品」
- 例：ヘッダー、フッター、カード、ボタンなどを部品化できる
- 大きなアプリを小さな部品に分けて管理できるので、保守性が高まる
コード例
Vue.component('hello-component', {
template: '<p>こんにちは！</p>'
});
<div id="app">
<hello-component></hello-component>
</div>
解説
- Vue.component('hello-component', {...}) → コンポーネントを登録
- template → コンポーネントのHTML部分
- → 実際に使うときはタグとして書ける
2. 親子コンポーネントとProps
機能
- 親コンポーネントから子コンポーネントへデータを渡せる
- この仕組みを Props と呼ぶ
コード例
Vue.component('user-card', {
props: ['name', 'age'],
template: '<p>{{ name }}さんは{{ age }}歳です</p>'
});
<div id="app">
<user-card name="Taro" age="20"></user-card>
</div>
解説
- props: ['name', 'age'] → 親から渡されるデータを定義
- → 属性としてデータを渡す
- 子コンポーネント内で {{ name }} や {{ age }} として使える
→ Propsを使うと、同じコンポーネントを違うデータで再利用できる
3. 子から親へイベントを渡す（$emit）
機能
- 子コンポーネントから親コンポーネントへ「イベント」を通知できる
- この仕組みを $emit と呼ぶ
コード例
Vue.component('counter-button', {
template: '<button @click="$emit(\'increment\')">+1</button>'
});
<div id="app">
<counter-button @increment="count++"></counter-button>
<p>カウント: {{ count }}</p>
</div>
解説
- 子コンポーネントで this.$emit('イベント名') を呼ぶ
- 親コンポーネントで @イベント名="処理" を書くと受け取れる
- この例では、ボタンをクリックすると親の count が増える
→ Propsと$emitを組み合わせることで、親子間のデータのやり取りができる
4. コンポーネントのライフサイクル
機能
- コンポーネントには「生成」「表示」「破棄」などのタイミングで呼ばれる関数がある
- これを ライフサイクルフック と呼ぶ
コード例
Vue.component('example-component', {
template: '<p>ライフサイクルの例</p>',
created() {
console.log("コンポーネントが作られました");
},
mounted() {
console.log("DOMに追加されました");
},
destroyed() {
console.log("コンポーネントが削除されました");
}
});
解説
- created → コンポーネントが作られた直後に呼ばれる
- mounted → DOMに追加されたときに呼ばれる
- destroyed → コンポーネントが削除されたときに呼ばれる
→ API通信や初期化処理は mounted に書くことが多い
5. スロット（slot）
機能
コンポーネントの中に「差し込み部分」を作り、親から自由に内容を渡せる仕組みです。
コード例
Vue.component('card-box', {
template: `
<div class="card">
<slot></slot>
</div>
`
});
<card-box>
<p>ここに好きな内容を入れられます</p>
</card-box>
解説
- → 親コンポーネントから渡された内容がここに差し込まれる
- コンポーネントを「枠」として使い、中身を柔軟に変えられる
- UI部品を汎用的に作るときに便利
6. コンポーネントのスタイル
機能
コンポーネントごとにスタイルを閉じ込めて管理できる仕組みです。
コード例
<template>
<p class="message">こんにちは</p>
</template>
<style scoped>
.message {
color: red;
}
</style>
解説
- scoped を付けると、そのコンポーネント内だけにスタイルが適用される
- 他のコンポーネントに影響しないので安心
- 大規模アプリでもスタイルが衝突しにくい
7. コンポーネント間通信の応用
機能
親子関係だけでなく、兄弟コンポーネントや遠いコンポーネント間でデータをやり取りする方法があります。
小規模なら「イベントバス」や「provide/inject」
コード例
// 親コンポーネント
Vue.component('parent-box', {
provide: {
color: 'blue'
},
template: `
<div>
<child-box></child-box>
</div>
`
});
// 子コンポーネント
Vue.component('child-box', {
inject: ['color'],
template: '<p style="color: {{ color }}">色付きテキスト</p>'
});
解説
- provide → 親コンポーネントが「共有したいデータ」を提供
- inject → 子コンポーネントがそのデータを受け取る
- Propsのように毎回渡さなくても、深い階層のコンポーネントにデータを届けられる
まとめ
この記事では、Vue.jsのコンポーネントについて紹介しました。
内容をまとめると以下の通りです。
- 基本 → 再利用可能な部品を作れる
- Props → 親から子へデータを渡す
- $emit → 子から親へイベントを通知する
- ライフサイクルフック → コンポーネントの生成・表示・削除のタイミングで処理を実行
- slot → コンポーネント内に差し込み部分を作れる
- コンポーネントのスタイル → コンポーネントごとにスタイルを閉じ込められる
- コンポーネント間通信の応用 → 親子以外でもデータをやり取りできる