resolveComponent() 名前によるコンポーネントの解決

最終更新：2026-10-22

resolveComponent() はレンダー関数内で、登録名からコンポーネントを解決します。得た定義を h() でレンダリングできます。

📝 構文

const Comp = resolveComponent("my-button")
return h(Comp, null, "クリック")

name	コンポーネントの登録名（文字列。大文字小文字の一致が必要）

戻り値：コンポーネント定義（見つからない場合は文字列名を返し警告）

以下のコードを編集して結果を確認しましょう：

出力：

Renders a button labelled 'button from render'.

ℹ️ 補足 レンダー関数でのみ必要です。テンプレートコンパイラはコンポーネント名を自動的に解決します。

💡 ヒント 通常はコンポーネントを直接 import して h(Comp) とする方が明確です。名前による解決は動的/グローバル登録の場面に向いています。

⚠️ 注意 名前が未登録の場合は元の文字列が返り、ネイティブタグとしてレンダリングされ警告が出ます。

Q 直接 import してはいけないのですか？

A 動的な名前（設定駆動）のシナリオでは静的な import ができないため、名前による解決が唯一の手段です。

Q 大文字小文字は区別されますか？

A はい。登録名と一致する必要があります（kebab-case が一般的です）。

Q SSR 環境でも使えますか？

A 使えます。解決はランタイムの同期処理です。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。