React でスケーラブルなアプリケーションを構築するには、単なる堅実なビジネス ロジック以上のものが必要です。コンポーネントのアーキテクチャは、アプリケーションの成長に応じてアプリケーションの保守性、パフォーマンス、柔軟性がどの程度向上するかにおいて重要な役割を果たします。多くの Web アプリケーションにおける基本的なタスクの 1 つは、データのリストを処理することです。製品リスト、テーブル、ダッシュボードのいずれをレンダリングする場合でも、繰り返し可能で再利用可能なリスト構造を必要とするシナリオに遭遇することがよくあります。

再利用可能なリスト コンポーネントを構築することで、コードベースの複雑さを大幅に軽減しながら、保守性とスケーラビリティを向上させることができます。このブログ投稿では、React で再利用可能なリスト コンポーネントを構築する方法と、それがアプリケーションのスケーリングにとって重要である理由を探り、プロセスのガイドとなる広範なコード例を提供します。

React アプリのスケーリングに再利用性が重要な理由

React アプリをスケーリングする場合、再利用性が鍵となります。アプリ全体でさまざまなリスト コンポーネントを処理するコードを複製する代わりに、再利用可能なリスト コンポーネントを構築すると、共通のロジックと UI 構造をスタンドアロン コンポーネントに抽象化できます。これにより、React コンポーネントをモジュール形式で拡張できるようになり、アプリの拡張に伴う潜在的なバグやメンテナンスの問題につながる可能性があるコードの重複を防ぐことができます。

再利用可能なコンポーネントを作成すると、さまざまな props を渡してリストのレンダリングを制御できるため、ユースケースごとに同じロジックを書き直すことなく、アプリケーションをより動的かつ柔軟にすることができます。このアプローチにより、アプリがスケーラブルになるだけでなく、コードの読みやすさと保守性が簡素化されて開発者のエクスペリエンスも向上します。

再利用可能なリスト コンポーネントの中心的な概念

スケーラブルで再利用可能なリスト コンポーネントを構築するには、いくつかの React の概念を理解する必要があります:

Props と State: これらを使用すると、それぞれコンポーネントにデータを渡し、コンポーネントの内部動作を制御できます。

配列メソッド: .map()、.filter()、.reduce() などのメソッドは、React コンポーネントで配列を変換するために不可欠です。

継承よりも合成: React では、合成パターンが継承よりも優先されます。より小さく再利用可能なコンポーネントを組み合わせることで、複雑な UI を構築できます。

プロパティ駆動型 UI: 再利用可能なリスト コンポーネントはプロパティによって駆動される必要があります。これにより、親コンポーネントからさまざまなデータ、レンダリング ロジック、さらにはスタイルを渡すことができます。

例 1: 単純な再利用可能なリスト コンポーネント

まず、アイテムの配列をプロップとして受け入れ、それらを動的にレンダリングできる、シンプルで再利用可能なリスト コンポーネントを作成しましょう。

import React from 'react';

const SimpleList = ({ items }) => {
  return (
    

{items.map((item, index) => (
• {item}
))}

この例では、SimpleList は配列である items プロパティを受け入れます。 .map() 関数を使用して配列を反復処理し、順序なしリスト (

)。各項目は
• 要素で囲まれます。 key prop により、リストが変更されたときに React が DOM を効率的に更新できるようになります。

  使用例:
  

  import React from 'react';
  import SimpleList from './SimpleList';
  
  const App = () => {
    const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];
  
    return (
      
  
        
  Fruit List
        
      
    );
  };
  
  export default App;
  

  この例では、果物の基本的なリストをレンダリングします。このコンポーネントは十分に柔軟なので、任意のデータ配列を渡すことができます。

  リストコンポーネントの再利用性の強化

  上記の例は機能しますが、非常に制限されています。実際のアプリケーションでは、リスト項目を条件付きでレンダリングしたり、カスタム スタイルを適用したり、個々の項目にイベント リスナーを追加したりするなど、より複雑な要件を処理する必要があることがよくあります。

  レンダー プロパティを介してカスタム レンダー ロジックを許可することで、SimpleList をより再利用しやすくしましょう。

  例 2: カスタム リスト レンダリングにレンダー プロップを使用する

  Render props は、コンポーネント内でレンダリングされる内容を制御できる React のパターンです。このパターンを使用してリスト項目のカスタム レンダリングを可能にする方法は次のとおりです:
  

  const ReusableList = ({ items, renderItem }) => {
    return (
      

  {items.map((item, index) => (
  • {renderItem(item)}
  ))}
  ); };

  この場合、ReusableList コンポーネントは、項目を取得して JSX を返す関数である renderItem プロパティを受け入れます。これにより、各リスト項目のレンダリング方法を制御する柔軟な方法が提供されます。

  使用例:
  

  const App = () => {
    const users = [
      { id: 1, name: 'John Doe', age: 30 },
      { id: 2, name: 'Jane Smith', age: 25 },
    ];
  
    return (
      
  
        
  User List
         (
            
  
              
  {user.name}
              
  Age: {user.age}
            
          )}
        />
      
    );
  };
  

  この例では、renderItem プロパティを使用して、各ユーザーの表示方法をカスタマイズできます。これで、特定のユースケースに従ってレンダリングして、任意のデータ構造に対して同じリスト コンポーネントを再利用できるようになりました。

  例 3: リスト コンポーネントを高次コンポーネントで拡張可能にする

  React のもう 1 つの強力なパターンは、高次コンポーネント (HOC) です。 HOC は、コンポーネントを受け取り、追加の機能を備えた新しいコンポーネントを返す関数です。

  たとえば、データのフェッチや条件付きレンダリングなどの追加の動作で ReusableList を強化したい場合は、HOC を使用できます。
  

  const withLoading = (Component) => {
    return function WithLoadingComponent({ isLoading, ...props }) {
      if (isLoading) return 
  Loading...
  ;
      return ;
    };
  };
  

  ここで、withLoading HOC は、任意のコンポーネントに読み込み動作を追加します。これを ReusableList に適用しましょう:
  

  const EnhancedList = withLoading(ReusableList);
  
  const App = () => {
    const [isLoading, setIsLoading] = React.useState(true);
    const [users, setUsers] = React.useState([]);
  
    React.useEffect(() => {
      setTimeout(() => {
        setUsers([
          { id: 1, name: 'John Doe', age: 30 },
          { id: 2, name: 'Jane Smith', age: 25 },
        ]);
        setIsLoading(false);
      }, 2000);
    }, []);
  
    return (
      
  
        
  User List
         (
            
  
              
  {user.name}
              
  Age: {user.age}
            
          )}
        />
      
    );
  };
  

  この例では、withLoading HOC が ReusableList をラップし、それに読み込み状態管理を追加します。このパターンは、元のコンポーネントを変更せずに追加ロジックでコンポーネントを強化することにより、コードの再利用を促進します。

  例 4: フックを使用した高度なリスト コンポーネント

  React フックを使用すると、ステートフル ロジックをコンポーネントに直接統合することで、再利用可能なリスト コンポーネントを別のレベルに引き上げることができます。ページネーションを処理できる再利用可能なリストを作成しましょう。
  

  const usePagination = (items, itemsPerPage) => {
    const [currentPage, setCurrentPage] = React.useState(1);
    const maxPage = Math.ceil(items.length / itemsPerPage);
  
    const currentItems = items.slice(
      (currentPage - 1) * itemsPerPage,
      currentPage * itemsPerPage
    );
  
    const nextPage = () => {
      setCurrentPage((prevPage) => Math.min(prevPage   1, maxPage));
    };
  
    const prevPage = () => {
      setCurrentPage((prevPage) => Math.max(prevPage - 1, 1));
    };
  
    return { currentItems, nextPage, prevPage, currentPage, maxPage };
  };
  

  usePagination フックはページネーション ロジックをカプセル化します。これで、リスト コンポーネント内でこのフックを使用できるようになりました。
  

  const PaginatedList = ({ items, renderItem, itemsPerPage }) => {
    const { currentItems, nextPage, prevPage, currentPage, maxPage } = usePagination(
      items,
      itemsPerPage
    );
  
    return (
      
  
        
  
          {currentItems.map((item, index) => (
            
  {renderItem(item)}
          ))}
        
        
  
          
            Previous
          
          
            Next
          
        
      
    );
  };
  

  使用例:
  

  const App = () => {
    const items = Array.from({ length: 100 }, (_, i) => `Item ${i   1}`);
  
    return (
      
  
        
  Paginated List
         
  {item}
  }
        />
      
    );
  };
  

  この例は、ユーザーがアイテムのページ間を移動できるページ分割されたリストを示しています。フックはすべてのページネーション ロジックを処理します。

  さまざまなコンポーネント間で再利用可能になります。

  結論

  React で再利用可能なリスト コンポーネントを構築することは、スケーラブルなアプリケーションを作成するための基本的な方法です。レンダー プロップ、上位コンポーネント、フックなどのパターンを使用して共通ロジックを抽象化することで、さまざまなユース ケースに適応する、柔軟で拡張可能で保守可能なリスト コンポーネントを作成できます。

  React アプリケーションが成長するにつれて、再利用可能なコンポーネントを採用すると、コードベースが簡素化されるだけでなく、パフォーマンスが向上し、冗長性が削減され、新機能の迅速な反復が可能になります。単純なリストを処理する場合でも、より複雑な UI 要件を処理する場合でも、再利用可能なコンポーネントの作成に時間を投資することは、長期的には効果があります。

  参考資料

  React 公式ドキュメント
  
  React レンダー プロップ
  
  高次コンポーネントに反応
  
  反応フック