コンテナコンポーネントの基本と使用例

まず、コンテナコンポーネントの役割について説明しましょう。コンテナコンポーネントは、データや状態の管理、APIの呼び出し、ロジックの処理など、アプリケーションのビジネスロジックを担当します。一方、プレゼンテーショナルコンポーネントは、UIの表示やユーザーの入力に関連する処理を担当します。

コンテナコンポーネントの作成方法は簡単です。まず、Reactコンポーネントを作成し、必要なデータや状態を管理するためのstateを定義します。次に、必要なロジックやAPIの呼び出しを実装し、プレゼンテーショナルコンポーネントにデータや処理を渡します。

以下は、シンプルなコード例です。

import React, { useState, useEffect } from 'react';
const UserContainer = () => {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    fetchUsers();
  }, []);
  const fetchUsers = async () => {
    const response = await fetch('https://api.example.com/users');
    const data = await response.json();
    setUsers(data);
  };
  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};
export default UserContainer;

上記の例では、UserContainerというコンテナコンポーネントを作成しています。fetchUsers関数はAPIからユーザーデータを取得し、取得したデータをstateにセットします。UserContainerコンポーネントは、取得したユーザーデータを表示するためのプレゼンテーショナルコンポーネントにデータを渡しています。

コンテナコンポーネントを使用することで、アプリケーションのビジネスロジックを分離し、コンポーネントの再利用性やテスト容易性を向上させることができます。ぜひ、このパターンを活用して効率的なフロントエンド開発を行ってください。

この記事では、コンテナコンポーネントの基本について説明し、シンプルな使用例を示しました。コンテナコンポーネントの理解と活用は、アプリケーションのフロントエンド開発において非常に重要です。