初心者から見たVue3コンポーネントの実装のしやすさについて Vision.5

Vue3コンポーネントの実装のしやすさについて Vision.5

Vue3のコンポーネントの実装について、前回はVue3コンポーネントの概略から、
DOM内テンプレート解析の注意点について、まとめました。

前回：DOM内テンプレート解析の注意点

今回は、グローバル登録を以下にまとめます。

Vue3のコンポーネントの詳細1

公式ページ：コンポーネントの登録を読み進めながら、以下のように解釈。

グローバル登録(Global Registration): グローバルにコンポーネントを利用可能にするには
以下に示す.component()メソッドを使用します。

main.ts

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.component(
  // 登録名
  'MyComponent',
  // 実装
  {
    /* ... */
  }
)

アプリケーションの作成ページとチュートリアルの実装から、単一ファイル
コンポーネントを使用したルートコンポーネントの実装を前提とした方が、
今は分かりやすいと感じたので、若干、公式ページの記述から変えました。

.componentに渡すコンポーネントが単一ファイルコンポーネントの場合は
インポートした.vueファイルを登録します。

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import MyComponent from './MyComponent.vue'

const app = createApp(App)
app.component('MyComponent', MyComponent)

.componentはメソッドチェーンが使えます。

app
  .component('MyComponentA', MyComponentA)
  .component('MyComponentB', MyComponentB)
  .component('MyComponentC', MyComponentC)

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

anyComponent.vue

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

つまり、以下のように1ファイルずつimportを記述する必要が無くなるということですね。
どのページでも共通して利用するコンポーネントをグローバルに登録しておくと
記述がすっきりしますし、他にもメリットがあるかもしれません。

anyComponent.vue

<!-- グローバル登録済のコンポーネントは以下の記述が不要になります。 -->
<script setup>
import ComponentA from './ComponentA.vue'
</script>

グローバル登録のデメリットについて、次のローカル登録の節に記述がありましたので追記

1. 未使用でも残り続ける
   vue3には、ツリーシェイク(Tree Shaking) という未使用のコンポーネントを
   削除してくれるビルドシステムが存在しています。

   しかし、グローバル登録では、ツリーシェイクが阻害されます。
   グローバル登録したコンポーネントは、最後までアプリのどこにも用いなかった場合でも
   最終的なバンドルには含まれてしまいます。

2. 依存関係が分かりづらくなる
   一度、グローバル登録してしまえば、どこからでも登録済コンポーネントを
   呼び出せることがメリットでしたが、多数のコンポーネントを使用する
   大規模アプリケーションの開発においては、子コンポーネントを使っている
   親コンポーネントから、子コンポーネントの実装部分を探し出すことが難しくなります。
   極めて多くのグローバル変数が使われている状況と同じように、これは長期的な
   保守性に影響を与える可能性があります。

今回も目に見えたUI表現には影響しませんので、実装例はありません。
手元のコードは色々記述を変えたりしましたが、当然ながら見栄えに特に
影響はありませんでした。

次回：ローカル登録について