h() 仮想ノードの作成

最終更新：2026-10-22

h() は仮想ノード（VNode）を作成します。レンダー関数と JSX の基盤となる API で、動的に構造を生成する場合にも使われます。

📝 構文

h("div", { class: "box" }, "コンテンツ")
h(MyComp, { msg: "hi" }, { default: () => "スロットの内容" })

type, props?, children?	型（タグ名またはコンポーネント）+ 任意の props オブジェクト + 子ノード（文字列/配列/スロットオブジェクト）

戻り値：VNode（仮想ノード）

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

出力：

Renders a three-item list.

ℹ️ 補足 テンプレートのコンパイル結果は h() の呼び出しです。理解しておくと、コンパイル後のコードや JSX が読みやすくなります。

💡 ヒント 完全にプログラマティックな構造が必要なときだけ h() を手書きします。通常のページではテンプレートの方が保守しやすいです。

⚠️ 注意 第 1 引数は大文字小文字を区別します。h('div') はネイティブタグですが、h('Div') はコンポーネントとして解釈されます。

Q h と JSX はどちらが良いですか？

A JSX は HTML に近く可読性が高いですが、ビルド環境が必要です。h はビルド不要で、少量の動的構造に向いています。

Q スロットはどう渡しますか？

A 第 3 引数にオブジェクトを渡します：{ default: () => [...], header: () => [...] }。

Q import は必須ですか？

A ビルドプロジェクトでは vue から import します。CDN 環境では Vue.h を使います。

Web-Tutorial 技術チーム

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