目次

はじめに

こんにちは。Aintekの川井です。
ReactJSが（いつか）NGだと言われそうなので、VueJSに手を出してみました。

基本的に、VueJS公式ページを参考にすれば、ある程度は書けるようになる気がしました。
Vue.js公式ページ：
https://jp.vuejs.org/
ただ、コンポーネントのローカル登録で少し躓いてしまったので、メモ書きしておきます。

まず、コンポーネントとはなんですか？？

公式ページにも、同じ表題で記載があります。
しかしながら何とも理解しがたい表現なので、以下のように解釈しました。

“何度も使い回すような部品（コード）”

上記のような解釈をしたうえで、具体的にどのようなコードを書くか見ていきましょう！

実際に、コンポーネントを書いてみる

具体的に、どのように表現できるか解説します。

<div id="example">
  <my-component></my-component>
</div>

これは、DOMを表示するテンプレートです。

ここに示した、“my-component” はVueコンポーネントであり、テンプレートから利用することができます。
利用するためには、“my-component” に該当するVueインスタンスを書く（Vueでは登録すると言う）必要があります。
Vueインスタンスは、以下のように書くことができます。

// 登録する
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// root インスタンスを作成する
new Vue({
  el: '#example'
})

すると、HTML上では以下のように表示されます。

<div id="example">
  <div>A custom component!</div>
</div>

まずは、基本的なコンポーネントの書き方はこんな感じです。

ローカル登録してみる

上記のような書き方だと、グローバル空間にコンポーネントが登録されます。
しかし、インスタンスオプションの"components"に登録することで、参照可能なスコープを限定化することができます。
DOM表示のテンプレートは変更せずに、Vueインスタンスを以下のように書き換えてみます。

var Child = {
  template: '<div>A custom component as child!</div>'
}
 
Vue.component('my-component', {
  template: '<my-com></my-com>',
  // <my-com> は親テンプレートでのみ有効になります
  components: {
    "my-com": Child
  }
})
// root インスタンスを作成する
new Vue({
  el: '#example'
})

上記のように書いた場合、HTML上では以下のように表示されます。

<div id="example">
  <div>A custom component as child!</div>
</div>

"my-com"は親テンプレートでのみ有効となり、他のテンプレートから参照することはできません。

まとめ

コンポーネントをローカル登録することで、不用意にグローバルな空間への登録を避けることができます。
そのおかげで、予期せぬバグを未然に防ぐことができる場合があります。
適切にローカル登録を使っていきましょう！