高階コンポーネント（HOC）パターン
HOCによるコンポーネントのラップ、propsとスロットの転送、HOCとComposableの使い分け
「高階コンポーネント（HOC）パターン」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
高階コンポーネントとは
高階コンポーネント（HOC）とは、コンポーネントを受け取り、それをラップした新しいコンポーネントを返す関数です。元のコンポーネントを変更せずに、ログ記録、認証チェック、データ読み込みなどの横断的な振る舞いを追加します。
関数シグネチャ
慣例として、HOCにはwithプレフィックスを付けた名前を付けます。ラップ対象のコンポーネントを受け取り、拡張したコンポーネントを返します。
function withLogging(Wrapped) {
// return a new component
}defineComponentを返す
新しいコンポーネントはdefineComponentで構築します。そのsetup関数はhを使ってラップ対象のコンポーネントをレンダーします。
import { defineComponent, h } from "vue";
function withLogging(Wrapped) {
return defineComponent({
setup(props, ctx) {
return () => h(Wrapped, props, ctx.slots);
}
});
}属性を引き継ぐ
ラッパーを透過的にするには、ctx.attrsをラップ対象のコンポーネントにスプレッドします。これにより、class、style、その他の認識されないpropsが引き継がれます。
setup(props, { attrs, slots }) {
return () => h(Wrapped, { ...attrs }, slots);
}スロットを引き継ぐ
ラップ対象のコンポーネントが利用側から渡されたすべてのスロットコンテンツを受け取れるよう、ラッパーのslotsオブジェクトをchildren引数として渡します。
return () => h(Wrapped, attrs, slots);横断的な振る舞いを追加する
目的は振る舞いを注入することです。ここでは、ラップしたコンポーネントのマウントとアンマウントの前後でログを記録します。
import { onMounted, onUnmounted } from "vue";
function withLogging(Wrapped) {
return defineComponent({
setup(props, { attrs, slots }) {
onMounted(() => console.log("mounted"));
onUnmounted(() => console.log("unmounted"));
return () => h(Wrapped, attrs, slots);
}
});
}HOCを使う
任意のコンポーネントをラップし、その結果をテンプレートや他のレンダー関数で通常のコンポーネントとして使います。
import BaseTable from "./BaseTable.vue";
const LoggedTable = withLogging(BaseTable);
// register or use LoggedTable like any componentラッパーに名前を付ける
Vue DevToolsでラッパーを識別できるよう、nameを設定します。ラップ対象の名前を組み合わせると、ツリーを読みやすく保てます。
return defineComponent({
name: "WithLogging(" + (Wrapped.name || "Anonymous") + ")",
setup(props, ctx) { /* ... */ }
});追加のPropsを注入する
HOCは、取得したデータセットや機能フラグなど、追加のpropsをラップ対象のコンポーネントに提供できます。
function withUser(Wrapped) {
return defineComponent({
setup(props, { attrs, slots }) {
const user = inject("currentUser");
return () => h(Wrapped, { ...attrs, user }, slots);
}
});
}HOCとコンポーザブルの比較
コンポーザブルはロジックを共有するもので、Vue 3ではよく選ばれます。HOCは、編集できない既存コンポーネントのレンダリングをラップする必要がある場合や、エラーハンドリングなどの境界を標準化する場合に適しています。
複数のHOCを合成する
各HOCはコンポーネントを返すため、ネストして合成できます。最も外側のものを最後に適用します。
const Enhanced = withLogging(withUser(BaseTable));理解度チェック
HOCラッパーを透過的にするには、何をラップ対象のコンポーネントに引き継ぐ必要がありますか？
まとめ
withLogging(Wrapped)のようなHOCは、setupでh(Wrapped, attrs, slots)を使ってラップ対象のコンポーネントをレンダーする新しいdefineComponentを返し、ログ記録や注入したpropsなどの横断的な振る舞いを追加します。透過性を保つためにattrsとslotsを引き継ぎ、ロジックの共有だけが必要な場合はコンポーザブルを優先します。
よくある質問
「高階コンポーネント（HOC）パターン」レッスンは無料ですか？
はい。「高階コンポーネント（HOC）パターン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「高階コンポーネント（HOC）パターン」で何を学びますか？
HOCによるコンポーネントのラップ、propsとスロットの転送、HOCとComposableの使い分け ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「高階コンポーネント（HOC）パターン」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- h()関数を深く理解する
- ViteでのVue 3 JSX
- render関数による動的コンポーネント
- 高階コンポーネント（HOC）パターン