React HOC

1. Higher Order Component (HOC) とは？

Higher Order Component (HOC / 高階コンポーネント) は、Reactコンポーネントに機能を追加するための ラッパー（wrapper） のようなものです。

スマートフォンにケースを装着するシーンをイメージしてください。ケースを付けることで、スマートフォン本体（コンポーネント）そのものに変更を加えることなく、防水や耐衝撃といった新しい機能を追加できます。それと同じ役割を果たすのがHOCです。

       注意: HOCは「コンポーネントを引数に取り、そのコンポーネントを拡張した新しいコンポーネントを返す 関数」です。

2. 実装例：ボーダー（枠線）の追加

HOCの動作を理解するために、渡された任意のコンポーネントに青い枠線を追加するシンプルな例を作成してみましょう。

実装例:
任意のコンポーネントをラップして周囲に枠線を表示する関数を作成します。

// これが HOC です。渡されたコンポーネントに枠線（ボーダー）を追加します
function withBorder(WrappedComponent) {
  return function NewComponent(props) {
    return (
      <div style={{ border: '2px solid blue', padding: '10px' }}>
        <WrappedComponent {...props} />
      </div>
    );
  };
}

// 枠線のないシンプルなコンポーネント
function Greeting({ name }) {
  return <h1>こんにちは、{name}さん！</h1>;
}

// HOCを使用して枠線付きの新しいコンポーネントを作成
const GreetingWithBorder = withBorder(Greeting);

function App() {
  return (
    <div>
      {/* 通常のコンポーネントを使用 */}
      <Greeting name="太郎" />
      
      {/* HOCによって拡張されたコンポーネントを使用 */}
      <GreetingWithBorder name="花子" />
    </div>
  );
}

2.1 実装のポイント

この例では以下のことが行われています：

• withBorder はHOCであり、コンポーネントを引数として受け取る関数です。
• この関数は、元のコンポーネントを div（枠線付き）でラップした新しいコンポーネントを返します。
• 元のコンポーネント（Greeting）は一切変更されていません。
• 開発者は、元のバージョンと拡張されたバージョンの両方を必要に応じて使い分けることができます。

3. HOCの使用上の注意

多くの場合、現在ではHOCの代わりに React Hooks を使用してロジックを共有することが推奨されます。しかし、認証チェック（ログイン済みかどうかの判定）やデータ取得の共通パターン、あるいは特定のUIデコレーターといった 横断的な関心事（cross-cutting concerns） を扱う際には、今でもHOCは非常に強力なツールとなります。