Vue入門11 コンポーネントとは？

Vue入門の第11回（第1回はこちら）です。今回は、Vueにおける「コンポーネント」について学びます。コンポーネントとは何か？をざっくりとイメージできるようになることが今回の目標です。

コンポーネントとは？

Vueに限らずReactなどの他のフレームワークでもコンポーネントという概念が登場します。これらのフレームワークで使われるコンポーネントとは、ウェブページを構成するブロックのようなものです。

例えば、以下のようなページがある場合、ページを構成する各部分をコンポーネント単位に分けると作成しやすくなります。

上記ページをどのようにコンポーネントとしてまとめるかは制作者次第ですが、例えば、以下のように機能単位でまとめても良いかもしれません。

あるいは、より細かく分割したほうがメンテナンスしやすい場合もあるかもしれません。また、コンポーネントを入れ子にしても良いかもしれません。

上記のコンポーネントの分割の仕方は、あくまでも一例にすぎません。重要なポイントは、ウェブページをコンポーネント単位で分割してやることで、各コンポーネントの再利用性が高まるなど、アプリケーションがより柔軟で扱いやすいものになるということです。

Vueコンポーネントの書式

Vueコンポーネントの書式は以下の通りです。

Vue.component('コンポーネント名', {
    template: `
        <div>
            <h1>・・・</h1>
            <p>・・・</p>
        </div>
    `,
    data() {
        return {
            //dataプロパティ
        }
    },
    methods: {
        //methodsプロパティ
    },
    computed: {
        //computedプロパティ
    }
})

templateプロパティでは、HTMLテンプレートをバッククォート（ ` ）で囲んで記述します。バッククォート（ ` ）は、Windows用キーボードでは [Shift] + [@]キーで入力します。

templateプロパティのルート要素は、必ず1つのみでなくてはなりません。そのため、上記例ではh1要素とp要素の外側をdiv要素で囲んで、ルート要素を1つのdiv要素としてまとめています。

Vueコンポーネントでは、dataプロパティは戻り値を返す関数となります。これは、コンポーネントの再利用性を確保するためです。dataプロパティを関数にしておくことで、同じコンポーネントが複数利用される場合にもそれぞれ個別のdataインスタンスが生成されるようになります。