Container/Presentational パターン

React では、関心の分離を強制する方法の 1 つとして、Container/Presentational パターンを使用できます。このパターンを使用することで、ビューとアプリケーションロジックを分離できます。

使用する場合

• データ取得ロジックと UI レンダリングの間に明確な分離が欲しい場合に使用してください
• プレゼンテーショナルコンポーネントを再利用可能で、テストしやすくするために役立ちます

使用しない場合

• 2 つのファイルへの分割がオーバーヘッドになるだけで、意味のあるメリットがない小さなコンポーネントの場合
• Hooks がデータロジックをカプセル化し、別個のコンテナコンポーネントが冗長になる場合
• 1 回限りのビューで、どちらのレイヤーにも再利用の可能性がない場合

指示

• コンテナコンポーネントはデータ取得と状態を処理し、プレゼンテーショナルコンポーネントはレンダリングを処理します
• 最新の React では、同じ関心の分離のためにカスタム Hooks をコンテナコンポーネントより優先します
• プレゼンテーショナルコンポーネントは props を通じてデータを受け取る純粋な関数として保ちます
• このパターンはアーキテクチャを真に簡潔にする場合にのみ使用してください。小さなコンポーネントでは避けてください

詳細

6 つの犬の画像を取得し、画面にレンダリングするアプリケーションを作成したいとします。

理想的には、このプロセスを 2 つの部分に分離することで、関心の分離を強制したいと思います。

1. プレゼンテーショナルコンポーネント: データがユーザーにどのように表示されるかを気にするコンポーネント。この例では、犬の画像のリストをレンダリングすることです。
2. コンテナコンポーネント: どのデータがユーザーに表示されるかを気にするコンポーネント。この例では、犬の画像を取得することです。

犬の画像を取得することはアプリケーションロジックに対応し、画像を表示することはビューに対応しています。

プレゼンテーショナルコンポーネント

プレゼンテーショナルコンポーネントは props を通じてデータを受け取ります。その主な機能は、受け取ったデータをスタイルを含めて望み通りに表示することであり、そのデータを変更しないことです。

犬の画像を表示する例を見てみましょう。犬の画像をレンダリングする場合、API から取得された各犬の画像をマッピングし、それらの画像をレンダリングしたいだけです。そのために、props を通じてデータを受け取り、受け取ったデータをレンダリングする関数型コンポーネントを作成できます。

DogImages コンポーネントはプレゼンテーショナルコンポーネントです。プレゼンテーショナルコンポーネントは通常、ステートレスです。UI の目的でステートが必要な場合を除き、独自の React ステートを含みません。受け取るデータは、プレゼンテーショナルコンポーネント自体によって変更されません。

プレゼンテーショナルコンポーネントはコンテナコンポーネントからデータを受け取ります。

コンテナコンポーネント

コンテナコンポーネントの主な機能は、含んでいるプレゼンテーショナルコンポーネントにデータを渡すことです。コンテナコンポーネント自身は、通常、そのデータを気にするプレゼンテーショナルコンポーネント以外のコンポーネントはレンダリングしません。それら自体は何もレンダリングしないため、通常、スタイルも含みません。

この例では、犬の画像を DogsImages プレゼンテーショナルコンポーネントに渡したいです。その前に、外部 API からの画像を取得する必要があります。このデータを取得し、画面に表示するために DogImages プレゼンテーショナルコンポーネントにこのデータを渡すコンテナコンポーネントを作成する必要があります。

これら 2 つのコンポーネントを組み合わせることで、アプリケーションロジックの処理をビューと分離することが可能になります。

Hooks

多くの場合、Container/Presentational パターンを React Hooks に置き換えることができます。Hooks の導入により、開発者はコンテナコンポーネントがそのステートを提供する必要なく、簡単にステートフルネスを追加できるようになりました。

DogImagesContainer コンポーネント内にデータ取得ロジックを置く代わりに、画像を取得してカスタムフックを作成し、犬の配列を返すことができます。

export default function useDogImages() {
  const [dogs, setDogs] = useState([]);

  useEffect(() => {
    fetch("https://dog.ceo/api/breed/labrador/images/random/6")
      .then((res) => res.json())
      .then(({ message }) => setDogs(message));
  }, []);

  return dogs;
}

このフックを使用することで、プレゼンテーショナル DogImages コンポーネントにデータを取得して送信するラップする DogImagesContainer コンテナコンポーネントが不要になります。代わりに、このフックをプレゼンテーショナル DogImages コンポーネント内で直接使用できます！

useDogImages フックを使用することで、アプリケーションロジックはビューから分離されたままです。DogImages コンポーネント内でデータを変更することなく、useDogImages フックから返されたデータを使用しているだけです。

Hooks は Container/Presentational パターンと同じく、コンポーネント内でロジックとビューを分離しやすくします。プレゼンテーショナルコンポーネントをコンテナコンポーネント内でラップするために必要だった追加レイヤーを節約できます。

メリット

Container/Presentational パターンを使用することには多くの利点があります。

Container/Presentational パターンは関心の分離を促進します。プレゼンテーショナルコンポーネントは UI を担当する純粋な関数であり、コンテナコンポーネントはアプリケーションの状態とデータを担当しています。これにより、関心の分離を簡単に強制できます。

プレゼンテーショナルコンポーネントはデータを変更せずに単に表示するため、簡単に再利用可能にできます。アプリケーション全体でプレゼンテーショナルコンポーネントを異なる目的で再利用できます。

プレゼンテーショナルコンポーネントはアプリケーションロジックを変更しないため、プレゼンテーショナルコンポーネントの外観をコードベースの知識がない人、例えばデザイナーが簡単に変更できます。プレゼンテーショナルコンポーネントがアプリケーションの多くの部分で再利用される場合、変更はアプリ全体で一貫性を保つことができます。

プレゼンテーショナルコンポーネントのテストは簡単です。通常、純粋な関数だからです。渡すデータに基づいて、コンポーネントがレンダリングするものがわかります。データストアをモックする必要はありません。

デメリット

Container/Presentational パターンは、アプリケーションロジックをレンダリングロジックから分離しやすくします。しかし、Hooks により、Container/Presentational パターンを使用せず、ステートレス関数型コンポーネントをクラスコンポーネントに書き直す必要なく、同じ結果を達成することができます。今日では、状態を使用するためにクラスコンポーネントを作成する必要がないことに注意してください。

React Hooks でも Container/Presentational パターンを使用できますが、このパターンは小さなアプリケーションでは簡単にオーバーキルになる可能性があります。

ソース

• patterns.dev/react/presentational-container-pattern

参考資料

• Presentational and Container Components - Dan Abramov