結論
Vue.jsでは単一ファイルコンポーネント(SFC)の場合、nameオプションにコンポーネント名を指定しなくてもファイル名(○○.vue)からコンポーネント名を自動推論してくれます。
そのため、通常はnameオプションでコンポーネント名を明示的に指定する必要はありません。
<template>
<button>Example Button 1</button>
</template>
<script>
export default {
name: "Button1", // この指定は省略可能
// (省略した場合のコンポーネント名は、ファイル名が「Button1.vue」なので「Button1」となる)
methods: {
// ...
}
};
</script>
参考:Automatic Name Inference - Vue.js (v3) APIリファレンス ※英語
そもそもname指定は何のために必要なの?
Vue.jsの公式ドキュメント内、nameオプションの説明によると下記の通りです。
コンポーネントがテンプレートの中で自分自身を再帰的に呼び出すことを許可します。コンポーネントが
app.componentでグローバルに登録されているとき、グローバル ID が自動的にその名前として設定されることに注意してください。
nameオプションを指定する他の利点はデバッグです。名前付きのコンポーネントは、警告メッセージでより助けになります。また、vue-devtools でアプリケーションを調査するとき、名前のないコンポーネントは<AnonymousComponent>として表示されてしまい、あまり情報量が多くありません。nameオプションを提供することで、より情報量の多いコンポーネントツリーを得ることができます。
要約すると、
(1) コンポーネントAの中で、A自身を再度呼び出したいときに使う
(2) vue-devtoolsでコンポーネント名を表示するために使う
という2つの目的で使われるとのことです。
また、Vue.js APIリファレンスの「Automatic Name Inference」によると、「Dev warning formatting」(開発時警告のフォーマット)にも使われるそうです。おそらく、開発者ツールで表示されるWarningやエラーメッセージの際に使用されるのでしょう。
おわりに
Vue CLI(vue create)やVite(npm init vite@latest)で新しいVue.jsプロジェクトを作成すると、その中のサンプルコードでは軒並みnameが指定されています。
そのため、Vue.jsを学び始めるときにサンプルコードを見て「なるほど、Vue.jsではコンポーネントの名前を常に指定した方がいいんだな。ファイル名と手動で合わせないといけないから二重記載になって面倒だけど仕方ない
」と思い、そのあと自分の作ったVue.jsプロジェクトでもずっとnameを指定し続けていませんでしたか? 私はそうしていました。
この記事を読んで、同じようなトラップにはまる人が減り、逐一name指定を書く手間から解放されれば幸いです。