高階コンポーネント
コンポーネントをラップして、元のコンポーネントを変更せずに動作やデータを追加します。
「高階コンポーネント」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
HOC の定義
高階コンポーネントは別のコンポーネントをラップし、動作やデータを追加します。
Svelte での利用
ラッパーコンポーネントを作成して、ベースコンポーネントをインポートし、ロギング、認証、テーマ設定などの機能を追加できます。
<!-- WithAuth.svelte -->
{#if user}
<slot />
{:else}
<a href="/login">Login</a>
{/if}使い方
認証が必要なページをラップします。
<WithAuth>
<Dashboard />
</WithAuth>動作を追加する
HOC はイベントハンドラーを追加したり、スクロールを監視したり、子の周囲にスタイルを注入したりできます。
構成との比較
HOC は 1 つのパターンです。スロットやスニペットによる構成のほうが、より簡単な場合がよくあります。
HOC を使うタイミング
多くのコンポーネントを一貫した方法でラップする必要がある横断的関心事に使用します。
Context Provider HOC
setContext を呼び出す HOC は、サブツリー内に依存関係のスコープを限定するための明確な方法です。
Props の転送
$$restProps または $props() の rest を使って、任意の props をそのまま渡します。
パフォーマンス
ラッパーによってコンポーネントの層が 1 つ増えます。通常は問題ありませんが、深くネストした UI では注意してください。
テスト
さまざまな入力でラッパーをマウントすれば、HOC は簡単にテストできます。
代替案: Custom Stores
場合によっては、HOC よりもカスタムストアと小さなコンポーネントを組み合わせるほうが明確です。
クイックチェック
HOC は何をしますか？
まとめ
HOCはコンポーネントをラップして、横断的な関心事を追加します。複数のページで認証、テーマ設定、ロギングを共有する場合に役立ちます。
よくある質問
「高階コンポーネント」レッスンは無料ですか？
はい。「高階コンポーネント」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「高階コンポーネント」で何を学びますか？
コンポーネントをラップして、元のコンポーネントを変更せずに動作やデータを追加します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「高階コンポーネント」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。