コンポーネントの基本 [Vue.js]

ここでは、Vue.jsのコンポーネントについて紹介します。

1 コンポーネントとは
2 コンポーネントの構成
3 コンポーネント化によるメリット
4 コンポーネントの定義
5 グローバルコンポーネント
6 ローカルコンポーネント
7 コンポーネントの利用（呼び出し）
8 templateプロパティオプション
9 コンポーネントの名前の付け方

コンポーネントとは

コンポーネントとはページを構成するUI部品のことです。
WebページやWebアプリケーションのUIには、ヘッダーやフッター、メニューにコンテンツ、コンテンツ内のデータを編集する領域などの様々な部品がありますが、そのひとつひとつがコンポーネントとして作成することができます。

コンポーネントの構成

コンポーネントはテンプレート（見た目）と、それに関連するロジック（機能）から構成されます。
Vue.jsを利用してアプリケーションを作成する場合と同様に、テンプレート部分はHTMLで作成し、ロジック部分はJavaScriptやTypeScriptなどのプログラムで作成します。

コンポーネント化によるメリット

コンポーネントとして部品化すると、考える範囲や影響範囲を限定できます。また、部品化することで再利用可能となりますので、保守性が向上します。
部品化せずにUIを作成すると、複雑なページやアプリケーションではコードの見通しが悪くなります。しかし、コンポーネント化するとコードがシンプルになります。また役割が明確になりますのでメンテナンス等がしやすくなります。

コンポーネントの定義

コンポーネントは、全体から（グローバルに）使用できるグローバルコンポーネントと、Vueのインスタンスやコンポーネント内からのみ使用できるローカルコンポーネントを定義することができます。

グローバルコンポーネント

グローバルコンポーネントは、Vueのインスタンスのcomponentメソッドで定義します。

Vue.createApp({}).component('sample-component', {
  date: function() {
    return {
      message: 'Vue.js is the Progressive Javascript Framework'
    }
  },
  template:`<div>{{message}}</div>`
})

Vue.createApp({}).component('sample-component', {

date: function() {

return {

message: 'Vue.js is the Progressive Javascript Framework'

}

template:`<div>{{message}}</div>`

})

Vueインスタンスを変数に格納する場合は以下のようになります。tg

const app = Vue.createApp({})
app.component('sample-component', {
  date: function() {
    return {
      message: 'Vue.js is the Progressive Javascript Framework'
    }
  },
  template:`<div>{{message}}</div>`
})

const app = Vue.createApp({})

app.component('sample-component', {

date: function() {

return {

message: 'Vue.js is the Progressive Javascript Framework'

}

template:`<div>{{message}}</div>`

})

コンポーネントは名前が付いたVueの再利用可能なインスタンスになります。
グローバルコンポーネントを作成するcomponentメソッドでは、第1引数にコンポーネントの名前を指定します。（上記の例では「sample-component」）第2引数には、Vue.jsでアプリケーションを作成する場合にVue.createAppメソッドでインスタンスを作成してその中にプロパティオプションを定義するのと同様に、オプションオブジェクトを定義します。
オプションオブジェクトには、HTMLテンプレートとなるtemplateプロパティを定義します。templateプロパティにはコンポーネントのUIを定義します。

ローカルコンポーネント

グローバルコンポーネントでは、もしコンポーネントの名前が重複してしまうと、意図しないコンポーネントが配置されてしまう可能性があります。
Vue.jsのコンポーネントには、グローバルに使用できるコンポーネントの他に、Vueのインスタンス内でのみ使用できるコンポーネントを定義する方法が用意されています。
上記の「グローバルコンポーネント」で作成した「sample-component」をローカルコンポーネントとして記述すると次のようになります。

Vue.createApp({
  components: {
    'sample-component': {
      date: function() {
        return {
          message: 'Vue.js is the Progressive Javascript Framework'
        }
      },
      template:`<div>{{message}}</div>`
    }
  }
}).mount('#app')

Vue.createApp({

components: {

'sample-component': {

date: function() {

return {

message: 'Vue.js is the Progressive Javascript Framework'

}

template:`<div>{{message}}</div>`

}

}).mount('#app')

ローカルコンポーネントを定義する場合はcomponentsプロパティオプションを使用します。
componentsオプションには、コンポーネントの名前をプロパティ名（キー名）として、値にオブジェクトを指定します。
オブジェクト内では、dataオプションなどのオブジェクトと、templateオプションを定義します。

コンポーネントの利用（呼び出し）

定義したコンポーネントはHTMLから呼び出します。
HTMLにコンポーネントを配置する時は、コンポーネント名前をHTML要素と同じようにタグの形式で記述します。
上記のコンポーネントの「sample-component」をHTMLに記載すると以下のようになります。

<div id="app">
  <sample-component></sample-component>
</div>

<sample-component></sample-component>

</div>

このようにタグの形式で記述したコンポーネントの要素のことをWeb Componentsではカスタム要素（custom elements）といいます。
カスタム要素（コンポーネント）はVueのcreateAppメソッドで作成されたインスタンスの内部に配置します。
上記の例では、Vueインスタンスにマウントされているid属性が「app」のdiv要素の子要素としてコンポーネントのカスタム要素を配置しています。
グローバルコンポーネントの場合は、コンポーネントとは別に作成したアプリケーションのVueのインスタンスがマウントしているHTML要素内で使用します。
ローカルこのぽ―ネントの場合は、アプリケーションのVueインスタンス内にコンポーネントを定義しますので、アプリケーションがマウントしているHTML要素内で使用します。

templateプロパティオプション

コンポーネントで使用するtemplateオプションでは、HTMLテンプレートとして文字列を指定できます。
本記事でここまでに記載したコンポーネントの定義例では、templateオプションに直接HTML文字列を記述してきました。HTMLテンプレートが簡素であれば、これでもあまり問題にはなりませんが、HTMLテンプレートが複雑なものになってくると、templateオプションの値に記述するコードが長くなりますのでコードの可読性が悪くなります。
templateオプションに指定するHTMLテンプレートは、直接記述する方法の他にHTML側に記述したものを参照することもできますので、HTMLテンプレートの記述が長くなる場合は、HTMLに記述したものを参照する方がコードが読みやすくなります。

以下にHTML側にテンプレートを記載する場合の例を示します。
ここではコンポーネントをローカルコンポーネントとして定義しています。
HTML

<div id="app">
  <sample-component></sample-component>
  <sample-component></sample-component>
  <sample-component></sample-component>
</div>
<script type="text/x-template" id="sample-template">
  <input type="text" v-model="text">
</script>

<sample-component></sample-component>

</div>

</script>

JavaScript

Vue.createApp({
  components: {
    'sample-component': {
      date: function() {
        return {
          text: ''
        }
      },
      template: '#sample-template'
    }
  }
}).mount('#app')

Vue.createApp({

components: {

'sample-component': {

date: function() {

return {

text: ''

}

template: '#sample-template'

}

}).mount('#app')

HTMLにコンポーネントのテンプレートを記述する際はscript要素（タグ）を使用します。
script要素のtype属性に「text/x-template」を指定し、id属性にはVueインスタンスのtemplateオプションから参照するためのIDを指定します。上記の例では「sample-template」というIDを指定して、Vueインスタンスのtemplateオプションでセレクタの「#sample-template」を使用して参照しています。