【vue.js 入門 #10】component(コンポーネント)を使えばプログラミングの生産性が倍増する!

2020/4/24

vue.jsではページを構成するUIを部品化することができます。

これをcomponent(コンポーネント)といい、親子関係のコンポーネントではプロパティやイベントの受け渡しも可能となり、使い勝手がよくとても便利な機能です。

今回はvue.jsのコンポーネントの使い方について解説していきます。

なぜコンポーネントを使うのか?

vue.jsではインスタンスだけで、やりたいことを実現することも可能です。

しかし、インスタンスだけだと部品化して再利用することができません。

そのため、インスタンスだけでやろうとすると規模が大きくなったアプリ開発でプログラミングの見通しがめちゃくちゃ悪くなってしまうのです。

その問題を解決するのがコンポーネントなのです。

複数のコンポーネント利用してページを組み上げていくことで、プログラミングの効率が何倍にも高まるのです。

コンポーネントの基本

コンポーネントを定義するためには、Vue.componentメソッドを利用します。

定義したコンポーネントの名前を、コンストラクターで指定した要素の配下にタグ形式で記述することでコンポーネントを呼び出すことができます。

サンプルはこちら。

html

<div id="app">
   <my-hello></my-hello>
</div>

js

Vue.component('my-hello', {
   template: `<div>こんにちは、 {{ name }}</div>`,
   data: function() {
       return {
           name: 'Vue.js'
       }
   }
})

new Vue({
   el: '#app'
})

「こんにちは、Vue.js」と表示できましたでしょうか?

これがコンポーネントの基本的な使い方です。

コンポーネントの名前の付け方に注意が必要

コンポーネントの名前は自由に命名することができるのですが、バッティングするとエラーになってしまいます。

なので、従来のhtmlと区別するために、接頭辞を使うとよいでしょう。

my-helloのようにハイフンで区切るケバブケースで命名するのがオススメです。

コンポーネントのdataオブジェクト

コンポーネントにdataオブジェクトを定義する場合は、インスタンスのdataオブジェクトと少しだけ記述方法が異なります。

コンポーネントの場合は値を返す関数形式で記述しなければいけないのです。

js

data: function() {
   return {
       name: 'Vue.js'
   }
}

複数のインスタンスで同じコンポーネントを利用するので、このような形式になるのでしょう。

コンポーネントがエラーになる例

コンポーネントは複数のルート要素を設定することができません。

なので、このような書き方はエラーとなります。

js

Vue.component('my-hello', {
   template: `
       <div>こんにちは、 {{ name }}</div>
       <div>こんばんは、 {{ name }}</div>
   `,
   data: function() {
       return {
           name: 'Vue.js'
       }
   }
})

ルートとなる要素が一つになるように、このように書かなくてはいけません。

js

Vue.component('my-hello', {
   template: `<div>
       <div>こんにちは、 {{ name }}</div>
       <div>こんばんは、 {{ name }}</div>
   `</div>,
   data: function() {
       return {
           name: 'Vue.js'
       }
   }
})

ローカル登録

Vue.componentメソッドどコンポーネントを定義すると、グローバル登録となり全てのインスタンスで有効となります。

コンポーネントを特定のインスタンスに限定して所属させることをローカル登録といい、記述方法はこのようになります。

html

<div id="app">
   <local-test></local-test>
</div>

js

new Vue({
   el: '#app',
   components: {
       'local-test': {
           template: `<div>コンポーネントのローカル登録</div>`
       }
   }
})

まとめ

コンポーネントはvue.jsで書かれたコードの見通しを良くする大事な機能です。

vue.jsで書かれたほとんどのコードはコンポーネントを利用しています。

インスタンスでデータバインディングなど基本機能を理解した後は、コンポーネントを使ってコードを使いやすくすることを覚えると良いでしょう。

正社員という奴隷制度に中指を立てるWebエンジニアです。PHPが得意。繋がれた鎖を断ち切るために、自由を取り戻すために、プログラミングスキルを磨く日々です。プログラミングと個人でもできるビジネスについて、情報発信しています。

詳しくはこちら