0Pricing
React Academy · レッスン

Higher-Order Components（HOC）の基礎

HOC factoryを使ってコンポーネントをラップし、propsの注入、ルートの保護、ログ機能の追加を行います。

「Higher-Order Components（HOC）の基礎」はCoddyKit上の無料React Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ようこそ

このレッスンでは、高階コンポーネント（HOC）とは何か、その書き方や一般的な用途、フックと比べた場合のトレードオフを理解します。

HOCとは

高階コンポーネントは、コンポーネントを入力として受け取り、拡張された新しいコンポーネントを返す関数です。元のコンポーネントを変更せずに、propの追加、認証チェック、ロギングなどの振る舞いを追加できます。
// HOC signature
function withEnhancement(WrappedComponent) {
  return function Enhanced(props) {
    // add behaviour here
    return <WrappedComponent {...props} extraProp="value" />;
  };
}

認証ガードHOC

よくあるHOCの一つは、認証されていないユーザーをログインページへリダイレクトします。元のコンポーネントが認証ロジックを知る必要はありません。
function withAuth(Component) {
  return function AuthGuard(props) {
    const isLoggedIn = useAuth();
    if (!isLoggedIn) return <Navigate to="/login" />;
    return <Component {...props} />;
  };
}

const ProtectedPage = withAuth(DashboardPage);

ロギングHOC

HOCを使うと、デバッグのためにコンポーネント名とpropを含むすべてのレンダリングを記録できます。任意のコンポーネントをwithLoggerでラップすると、トレース機能を追加できます。
function withLogger(Component) {
  return function Logged(props) {
    console.log('[render]', Component.displayName, props);
    return <Component {...props} />;
  };
}

Propの受け渡し

受け取ったすべてのpropは、必ず`{...props}`を使ってラップしたコンポーネントに展開して渡してください。これを行わないと、元のコンポーネントのAPIが壊れてしまいます。
return function HOC(props) {
  return <WrappedComponent {...props} injectedProp={value} />;
};

displayNameの設定

HOCが返すコンポーネントは、React DevTools上で名前を失います。意味のあるdisplayNameを設定して、コンポーネントツリー内で識別できるようにしてください。
function withAuth(Component) {
  function AuthGuard(props) { /* ... */ }
  AuthGuard.displayName = 'withAuth(' + (Component.displayName || Component.name) + ')';
  return AuthGuard;
}

Refのフォワーディング

HOCはデフォルトではrefを遮断します。HOC内で`React.forwardRef`を使い、ラップしたコンポーネントにrefを渡してください。
function withStyle(Component) {
  return React.forwardRef(function (props, ref) {
    return <Component ref={ref} {...props} className="styled" />;
  });
}

HOC、Render Props、フックの比較

HOCはpropを注入し、ルートを保護できます。Render propsは動的なUIを渡します。カスタムフックはロジックを切り出します。現代のReactでは、ラッパー地獄を避けられ、合成もしやすいフックが推奨されます。HOCはクラスコンポーネントやサードパーティとの統合で役立ちます。

ラッパー地獄

多くのHOCを適用すると、コンポーネントツリーが深くネストされます。`withTheme(withAuth(withLogger(MyPage)))`のような形です。DevToolsには匿名のラッパー層が多数表示されます。フックを使えば、この問題を完全に避けられます。

実際のライブラリで使われるHOC

Reduxの`connect()`、React Router v5の`withRouter()`、MobXの`observer()`は、すべてHOCです。HOCを理解しておくと、これらの古いライブラリAPIを扱いやすくなります。

クイックチェック

高階コンポーネントは、受け取ったpropに対して必ず何をしなければなりませんか？

まとめ

HOCは、コンポーネントを受け取り、拡張されたコンポーネントを返す関数です。propの注入、ルートの保護、ロギングを行えます。常にpropを展開して渡し、displayNameを設定し、refをフォワーディングしてください。現代のReactではフックを優先しましょう。

次のレッスン

次のレッスン：**HOC、Render Props、カスタムフックの比較** — 可読性、テスト、合成の観点から、3つのコード共有戦略を比較します。

よくある質問

「Higher-Order Components（HOC）の基礎」レッスンは無料ですか？

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

「Higher-Order Components（HOC）の基礎」で何を学びますか？

HOC factoryを使ってコンポーネントをラップし、propsの注入、ルートの保護、ログ機能の追加を行います。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Higher-Order Components（HOC）の基礎」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. Render Propsパターン
  2. Higher-Order Components（HOC）の基礎
  3. HOC・Render Props・Custom Hooksの比較
  4. HOCからCustom Hookへのリファクタリング
← React Academyに戻る