JavaScriptデザインパターンを学ぶ 第2版

第14章. React.jsのアプリケーション構造

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

小さな趣味のプロジェクト（ ）を作ったり、新しい概念やライブラリを試したりするとき、開発者は計画や整理構造を持たずに、フォルダにファイルを追加し始めることがある。これらには、CSS、ヘルパーコンポーネント、画像、ページなどが含まれる。プロジェクトが大きくなるにつれて、すべてのリソースを一つのフォルダで管理することは不可能になる。それなりの規模のコードベースであれば、論理的な基準に基づいてアプリケーションのフォルダ構造に整理する必要がある。ファイルやアプリケーションコンポーネントをどのように構造化するかは、個人的/チーム的な選択となる。また、一般的には、アプリケーションのドメインと使用する技術に依存するだろう。

この章では、主にReact.jsアプリケーションのフォルダ構造に焦点を当て、プロジェクトが成長するにつれて、より良い管理ができるようにする。

はじめに

React.js自体は、 、プロジェクトの構造化に関するガイドラインを提供していないが、よく使われるアプローチをいくつか提案している。複雑なプロジェクトやNext.jsアプリケーションのためのフォルダ構造について議論する前に、これらを見て、その長所と短所を理解しよう。

高レベルでは、Reactアプリケーションのファイルを2つの方法でグループ化できる：

機能別にグループ化する

アプリケーションモジュール、機能、ルートごとにフォルダを作成する。

ファイルタイプでグループ化する

ファイルの種類ごとにフォルダを作成する。

この分類を詳しく見てみよう。

モジュール、フィーチャー、ルートでグループ化する

この場合、ファイル構造は 、ビジネスモデルやアプリケーションフローを反映することになる。たとえば、eコマースアプリケーションがあれば、product、productlist、checkoutなどのフォルダがある。productモジュールに明示的に必要なCSS、JSXコンポーネント、テスト、サブコンポーネント、またはヘルパーライブラリはproductフォルダに存在する：

common/
  Avatar.js
  Avatar.css
  ErrorUtils.js
  ErrorUtils.test.js
product/
  index.js
  product.css
  price.js
  product.test.js
checkout/
  index.js
  checkout.css
  checkout.test.js

機能ごとにファイルをグループ化する利点は、モジュールに変更があった場合、影響を受けるすべてのファイルが同じフォルダにまとめられ、コードの特定の部分に変更が局所化されることだ。

欠点は、モジュール間で使用される共通のコンポーネント、ロジック、スタイルを定期的に特定し、繰り返しを避け、一貫性と再利用を促進しなければならないことである。

ファイルタイプでグループ化する

このタイプのグループ化では、 、CSS、コンポーネント、テストファイル、イメージ、ライブラリなどのために異なるフォルダを作成することになる。このように、論理的に関連するファイルは、ファイルタイプに基づいて異なるフォルダに存在することになる：

css/ global.css checkout.css product.css lib/ date.js currency.js ...