[Vue入門]コンポーネントの登録

by

このページは、すでにコンポーネントの基礎を読んでいることを前提にしています。初めてコンポーネント学ぶ方は、まずそちらをお読みください。

Vue のコンポーネントをテンプレートで使用する時は、それがどこで実装されているかを Vue に知らせるため、「登録」を行う必要があります。コンポーネントの登録方法には、グローバルとローカルの 2 つがあります。

グローバル登録

開発中の Vue アプリケーションでグローバルにコンポーネントを利用できるようにするには、以下に示す app.component() メソッドを使用します:

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // the registered name
  'MyComponent',
  // the implementation
  {
    /* ... */
  }
)

SFC を使用する場合は、インポートした .vue ファイルを登録します:

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

app.component() メソッドはチェーンにすることができます:

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

グローバル登録したコンポーネントは、アプリケーション内の任意のコンポーネントのテンプレートで使用することができます:

<!-- これはアプリ内のどのコンポーネントでも動作します -->
<ComponentA/>
<ComponentB/>
<ComponentC/>

これは、サブコンポーネントにも漏れなく適用されます。そのため、上の 3 つのコンポーネントはすべて 各コンポーネント内でも互いに 使える、ということになります。

ローカル登録

グローバル登録は便利な反面、以下に示すいくつかの欠点があります:

  1. グローバル登録では、未使用のコンポーネントを削除してくれるビルドシステムの処理 (いわゆる「ツリーシェイク」) が阻害されます。グローバル登録したコンポーネントは、最後までアプリのどこにも用いなかった場合でも、最終的なバンドルには含まれてしまいます。
  2. グローバル登録では、大規模なアプリケーションでの依存関係の分かりやすさが低下します。グローバル登録では、子コンポーネントを使っている親コンポーネントから、子コンポーネントの実装部分を探し出すことが難しくなります。きわめて多くのグローバル変数が使われている状況と同じように、これは長期的な保守性に影響を与える可能性があります。

ローカルでの登録を利用すると、登録したコンポーネントを使えるスコープが現在のコンポーネントのみに限定されます。これによって依存関係が分かりやすくなり、ツリーシェイクが働きやすくなります。

ローカル登録は、以下のように components オプションを使って行います:

でSFCを使用する場合<script setup>、インポートされたコンポーネントは登録なしでローカルで使用できます。

<script setup>
import ComponentA from './ComponentA.vue'
</script>

<template>
  <ComponentA />
</template>

<script setup>を使わない場合は下記のように登録する必要があります。

import ComponentA from './ComponentA.js'

export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}

オブジェクト内のプロパティごとcomponentsに、キーはコンポーネントの登録名になり、値にはコンポーネントの実装が含まれます。上記の例は、ES2015プロパティの省略形を使用しており、次と同等です。

export default {
  components: {
    ComponentA: ComponentA
  }
  // ...
}

ただし、 ローカル登録されたコンポーネントが子孫のコンポーネントでも利用できるようにはならないことに注意してください。上の場合、ComponentA は現在のコンポーネントのみで利用可能になり、その子や子孫のコンポーネントで利用可能になるわけではありません。

<script setup>を使用してコンポーネントをインポートした場合は、登録が必要ありません。インポートした時点でテンプレートでの使用が可能になります。

コンポーネント名での大文字・小文字の使い方

このガイドでは、コンポーネントを登録する際に PascalCase の名前を用いています。これは次の理由によります:

  1. PascalCase の名前は JavaScript の識別子として有効です。そのため、JavaScript でコンポーネントをインポートしたり登録したりするのが容易になります。また、IDE のオートコンプリートも働きやすくなります。
  2. テンプレートで <PascalCase /> を用いると、これがネイティブの HTML 要素ではなく、Vue のコンポーネントであることがより明確になります。また、Vue コンポーネントとカスタムの要素 (Web Components) を区別することも可能になります。

このスタイルは、SFC や文字列テンプレートを合わせて使う時に推奨されるスタイルです。ただし、DOM テンプレート解析の注意点 で説明しているように、DOM テンプレート内では PascalCase のタグが使えません。

幸いなことに、Vue は PascalCase で登録したコンポーネントから kebab-case 形式のタグへの解決をサポートしています。これにより、MyComponent として登録したコンポーネントは、<MyComponent> と <my-component> のどちらを使ってもテンプレート内で参照できます。そのため、テンプレートの出どころに関わらず、JavaScript のコンポーネント登録のコードには同じものを用いることができます。