Vue Academy · レッスン

h()関数を深く理解する

Q: 「h()関数を深く理解する」で何を学びますか？

h(type, props, children)のシグネチャ、VNodeの構造、動的なコンポーネント型のレンダリング ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

h(type, props, children)のシグネチャ、VNodeの構造、動的なコンポーネント型のレンダリング

「h()関数を深く理解する」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

h関数とは

h関数（hyperscriptの略）は、JavaScriptで仮想DOMノード（VNode）を直接作成します。これは、テンプレートがコンパイルされる先の基盤です。レンダー関数はhを呼び出した結果を返します。

シグネチャ

hは3つの引数を受け取ります：h(type, props, children)。typeには、タグ名の文字列、コンポーネントオブジェクト、または関数コンポーネントを指定できます。propsは、属性、props、イベントをまとめたオブジェクトです。childrenには、テキスト、VNodeの配列、またはスロットオブジェクトを指定します。

import { h } from "vue";

h(type, props, children);

シンプルな要素

タグ名とclassを含むpropsオブジェクトを渡すと、スタイル付きの要素が生成されます。ここでの3番目の引数は通常のテキストコンテンツです。

import { h } from "vue";

h("div", { class: "foo" }, "text");
// renders: <div class="foo">text</div>

Propsと属性

すべてを同じpropsオブジェクトに指定します。HTML属性、DOM props、class、style、イベントリスナーなどです。Vueはパッチ処理の時点で、それぞれをどこに適用するか判断します。

h("input", {
  type: "text",
  value: "hello",
  class: "field",
  placeholder: "Type here"
});

子要素の配列

要素が複数の子要素を持つ場合は、3番目の引数としてVNodeの配列を渡します。それぞれの子要素は、hの呼び出し自体になります。

h("ul", null, [
  h("li", null, "item")
]);
// renders: <ul><li>item</li></ul>

Propsがない場合のnullの渡し方

要素にpropsがない場合は、子要素が3番目の引数になるよう、2番目の引数としてnull（または空のオブジェクト）を渡せます。

h("ul", null, [
  h("li", null, "first"),
  h("li", null, "second")
]);

コンポーネントのレンダー

type引数にはインポートしたコンポーネントを指定できます。渡したpropsは、そのコンポーネントのpropsになります。

import { h } from "vue";
import MyComponent from "./MyComponent.vue";

h(MyComponent, { title: "Hello" });

オブジェクトとしてスロットを渡す

コンポーネントにスロットのコンテンツを渡すには、children引数を関数のオブジェクトにします。各キーはスロット名で、各値はVNodeまたはテキストを返す関数です。

h(MyComponent, { title: "Hello" }, {
  default: () => "slot content"
});

名前付きスロットとスコープ付きスロット

複数のスロットは、複数のキーにすぎません。スコープ付きスロットには、そのpropsが関数の引数として渡されます。

h(MyComponent, null, {
  header: () => h("h1", null, "Title"),
  default: (props) => h("p", null, props.text)
});

イベントリスナー

イベントは、PascalCaseのイベント名の前にonを付けたpropsです。クリックリスナーはonClickというpropsです。

h("button", {
  onClick: () => console.log("clicked")
}, "Press me");

レンダー関数からhを返す

setupの内部では、テンプレートの代わりにレンダー関数を返せます。これは再レンダーのたびに呼び出され、VNodeツリーを生成します。

import { h, ref } from "vue";

export default {
  setup() {
    const count = ref(0);
    return () => h("button", {
      onClick: () => count.value++
    }, "Count: " + count.value);
  }
};

理解度チェック

hを使って、デフォルトスロットのコンテンツをコンポーネントに渡すにはどうすればよいですか？

まとめ

h関数は、h(type, props, children)によってVNodeを構築します。typeはタグまたはコンポーネント、propsは属性とonEventリスナー、childrenはテキスト、VNodeの配列、または関数で構成されたスロットオブジェクトです。レンダー関数はhの呼び出しを返し、再レンダーのたびに実行されます。

よくある質問

「h()関数を深く理解する」レッスンは無料ですか？

はい。「h()関数を深く理解する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「h()関数を深く理解する」で何を学びますか？

h(type, props, children)のシグネチャ、VNodeの構造、動的なコンポーネント型のレンダリングブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「h()関数を深く理解する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る