Component Registration - グローバル登録とローカル登録

ロードマップ: Vue.js学習ロードマップ

What（何についてか）

Vueコンポーネントをテンプレート内で使うには、Vueにその実装を認識させる必要がある。このページでは、コンポーネント登録の方法として global registration と local registration を扱う。

Why（なぜ必要か）

コンポーネント登録は、単に表示のための儀式ではなく、依存関係の見え方や保守性、ビルド最適化に影響する。

• global registration はアプリ全体で使えて便利
• local registration は依存関係が明示され、保守しやすい
• 実務では local registration を基本にした方が構造が追いやすい

How（どう動くか）

Global Registration

app.component() を使って、Vueアプリ全体で使えるコンポーネントとして登録する。

import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'
 
const app = createApp({})
 
app.component('MyComponent', MyComponent)

この方式で登録したコンポーネントは、そのアプリ配下の任意のコンポーネントから利用できる。

Local Registration

利用するコンポーネントの中でだけ使えるようにスコープを限定する。

<script setup> では import するだけでテンプレートから利用できる。

<script setup lang="ts">
import ComponentA from './ComponentA.vue'
</script>
 
<template>
  <ComponentA />
</template>

<script setup> を使わない場合は components オプションに明示登録する。

import ComponentA from './ComponentA.vue'
 
export default {
  components: {
    ComponentA
  }
}

local registration したコンポーネントは、そのコンポーネント内でのみ有効であり、子孫コンポーネントには自動で伝播しない。

実務上の判断軸

flowchart TD
  A["コンポーネントを使いたい"] --> B{"利用範囲は広いか"}
  B -->|"アプリ全体で共通"| C["global registration を検討"]
  B -->|"特定コンポーネントだけ"| D["local registration を採用"]
  D --> E["依存関係が明示される"]
  D --> F["tree-shaking に有利"]
  C --> G["便利だが依存関係が見えにくい"]

実務では、まず local registration を基本とし、アプリ全体で頻出する共通UIなどに限って global registration を慎重に採用するのが自然。

Component Name Casing

コンポーネント名は PascalCase を基準に扱う。

• JavaScript の識別子として自然
• import 名と一致しやすい
• IDE 補完と追跡がしやすい
• HTML要素との区別がつきやすい

テンプレートでは PascalCase と kebab-case の両方が使える。

<MyComponent />
<my-component />

Options API → Composition API 差分

項目	Options API（旧）	Composition API（新）
ローカル利用宣言	components: { ComponentA } に登録する	<script setup> では import だけでテンプレート利用可能
依存の見え方	options の中に定義が集まる	import がそのまま依存宣言になる
記述量	やや定型的	より短く直接的

Key Concepts

用語	説明
Global Registration	アプリ全体でコンポーネントを使えるようにする登録方式
Local Registration	現在のコンポーネント内だけで利用可能にする登録方式
<script setup>	Composition API の簡潔なSFC記法。importしたコンポーネントをそのままテンプレートで使える
PascalCase	MyComponent のような先頭大文字の命名規則
kebab-case	my-component のようなハイフン区切りの命名規則
tree-shaking	未使用コードを最終bundleから除去する最適化