React(Next)のディレクトリ構造を考える

はじめに

Reactアプリケーション開発におけるディレクトリ構造は、アプリケーションのスケーラビリティ、保守性、および全体的なコード管理に大きな影響を及ぼします。適切なディレクトリ構造を選択することは、開発チームの生産性を高め、プロジェクトの成長に伴う複雑さを管理するのに役立ちます。
今回は、現在の流行で見られるDirectory構造について見ていきながら個人的な視点を元にどの設計をどのように利用するかを考えて行きます。

構造の種類と解説

構造タイプを分け，それぞれの解説を行う。

比較するために，設計するプロジェクトを定義する．

定義するプロジェクト

想定するプロジェクトは、複数の機能を持つある程度大規模なWebアプリケーションです。このアプリケーションには、ユーザー認証、記事投稿、コメント機能、ユーザープロファイル管理などの機能が含まれています。

1. ファイルタイプ別にグループ化

このアプローチでは、コンポーネント、コンテキスト、フックなどのファイルタイプごとにフォルダを作成します。各フォルダには、それぞれのファイルタイプに関連するサブフォルダやファイルが含まれます。例えば、components フォルダには、各コンポーネントとそれに関連するスタイルやテストが含まれます。

src/
├── components/
│   ├── Header/
│   │   ├── Header.js
│   │   ├── Header.test.js
│   │   └── Header.css
│   ├── Footer/
│   ├── LoginForm/
│   └── ...
├── contexts/
│   ├── AuthContext.js
│   └── ...
├── hooks/
│   ├── useAuth.js
│   └── ...
└── ...

2. ページ別にグループ化

ページごとにコンポーネントとロジックをグループ化します。例えば、HomePage フォルダには、ホームページに特有のコンポーネントとロジックが含まれます。

src/
├── HomePage/
│   ├── components/
│   │   ├── HeroSection.js
│   │   ├── Features.js
│   │   └── ...
│   ├── HomePage.js
│   └── HomePage.css
├── ProfilePage/
└── ...

3. 機能ベースの構造

機能や機能性に基づいてファイルやコンポーネントをグループ化します。例えば、authentication フォルダには、ログインやユーザー認証に関連するファイルが含まれます。

src/
├── features/
│   ├── authentication/
│   │   ├── components/
│   │   │   ├── LoginForm.js
│   │   │   └── ...
│   │   ├── hooks/
│   │   └── ...
│   ├── articles/
│   └── ...
├── shared/
│   ├── components/
│   └── ...
└── ...

4. 標準的な構造

このアプローチでは、srcディレクトリ内にソースコードを配置し、Reduxを使用する場合はactionsとreducersのフォルダ、components, styles, utils, viewsなどのフォルダを含めます。viewsフォルダにはアプリの特定のページまたはセクションをレンダリングするための上位レベルのコンポーネントが含まれます。

src/
├── actions/
├── reducers/
├── components/
│   ├── Header/
│   ├── Footer/
│   └── ...
├── views/
│   ├── HomePage/
│   ├── ProfilePage/
│   └── ...
├── styles/
└── utils/

5. タイプ別にコンポーネントをグループ化

componentsフォルダ内で、forms, tables, buttons, layoutなどのタイプ別にコンポーネントをグループ化します。各コンポーネントタイプごとにフォルダを作成し、その中にコンポーネント自体、スタイル、テスト、Storybookファイルなどが含まれます。

src/
├── components/
│   ├── forms/
│   │   ├── LoginForm.js
│   │   ├── RegisterForm.js
│   │   └── ...
│   ├── tables/
│   └── ...
└── ...

個人的に使っていきたい構造

私が好むディレクトリ構造は、「2.ページ別にグループ化」のアプローチですが、純粋なページ毎のグループ化ではなく、ページ固有のロジックに依存する要素のみを各ページの配下に配置する形式を採用します。この設計により、ページ間での再利用性が低いコンポーネントや情報は、それぞれのページ内で管理され、アプリケーション全体に影響を及ぼす機能（例えば認証やメモリ内プロセス）はページ外の別の場所で管理されます。このアプローチは、コードの整理と保守性を向上させるだけでなく、エディターでの作業効率も高めます。ファイルツリーを展開し、参照する際の移動が少なくなり、作業の流れがスムーズになるからです。

調べてみて

この調査を通じて得られた最も重要な洞察の一つは、ディレクトリ構造の設計において"one-size-fits-all"の解決策は存在しないということです。（大体の同じような記事に書いてありました）
従って、プロジェクトの特性や規模、チームの動向に応じて、最適な構造を選択する柔軟性はこれからも不可欠です。将来のプロジェクトでは、今回の学びを活かし、より洗練されたディレクトリ構造を目指していきたいと思います。