React+Reduxアプリのおすすめフォルダ構成

タグ: , ,

React + Reduxで作るアプリケーションをいくつか作っていて、フォルダ構成に悩みました。

調べてみると、以下の方法があるようです。

 

A: コンポーネントやコンテナなどのフォルダ分けする

B: ドメイン単位で分ける

 

私がしっくり来たのはドメインで分ける方法です。

 

以下のURL構造のSPAのフォルダ構成を例にします。

https://example.com/posts
https://example.com/post/:id
https://example.com/posts/new

 

パターンAのフォルダ構成は以下になります。

/components
 - Posts.tsx
 - Post.tsx
 - NewPost.tsx
/containers
 - Post.ts
 - Post.ts
 - NewPost.ts

これはページ数が増えるとしんどくなります。

フォルダ内のファイルが増えるとcomponentとcontaienrのセット見つけるのがめんどうになります。

 

上記の理由でパターンBをよく使っています。

パターンBのフォルダ構成はこちら

/posts
- /posts
  - index.ts
  - Posts.tsx
  - /PostList
    - PostList.tsx
  - /Header
    - index.ts
    - Header.tsx
- /post
  - index.ts
  - Post.tsx
- /newPost
  - index.ts
  - NewPost.tsx

こんな感じでページごとに分けます。

ページごとにフォルダを作り、以下にindex.ts(コンテナ)とフォルダ名と同名のコンポーネントを作成します。

リスト表示などページ内で使うコンポーネントはページ内にフォルダを作り配置します。

URLに合わせてフォルダを作るので簡単に目的のファイルが見つかりますし、ページレイアウトのコンポーネントはフォルダと同名にしてあるので一目でわかります。

お仕事の相談

フリーランスエンジニアをお探しでしたらこちらよりご連絡ください お仕事の相談