【基礎】Vue.jsの『コンポーネント』とは？

2019年6月25日

コンポーネントについての概要

『コンポーネント』とは？

コンポーネントとは、画面を構成する要素を個々のパーツ（機能・役割別）として分割し管理した物のことを言います。

作成したコンポーネントを組み合わせて画面を構成することで、それぞれの機能が明確になりコードの肥大化を防げたり、メソッドやデータの管理もしやすくなるなどのメリットがあります。

下記の例で言うと、ヘッダー、フッター、サイドバー、メインコンテンツなどに分割されていますが、これら1つ1つをコンポーネントと言います。

一度登録したコンポーネントは何度でも呼び出すことができ、簡単に再利用ができるようになります。

スポンサードサーチ

コンポーネントの作成方法

コンポーネントの作成方法はいくつかありますが、今回は1つのjavascriptファイル上にVueインスタンスとコンポーネントを記述する方法をご紹介します。

一番上にVue.componentというメソッドが使われており、これを呼び出すことでコンポーネントを登録することができます。

第一引数には、任意のコンポーネント名を指定します。

指定したコンポーネントは、HTMLのタグのように呼び出すことができます。

テンプレートの第二引数には、Vueインスタンスを生成する時と同じ様にオプションを指定することができます。

今回のサンプルだと、dataとtempateオプションを使用しています。

dataの定義方法には注意が必要で、Vueインスタンス生成時と違いコンポーネントでは常に関数でデータを返さないといけないという決まりがあります。

その他の注意点として、コンポーネントの登録はVueインスタンスの生成より前に行う必要があります。

この順番が逆になると動作しないので覚えておきましょう。

以上が、簡単なコンポーネントの作成例となります。

これまでの説明は、Udemyの『Vue.js + Firebaseで作るシングルページアプリケーション』というコースを学習し、アウトプットした内容となりますので、興味がある方は下記より本家の内容をご確認ください。
Vue.js + Firebaseで作るシングルページアプリケーション※記事中で使用されている画像は、Udemyの動画よりキャプチャを取りサンプルとして使用させて頂いています。