ブログ

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

最近はこんな感じにしてる

いろいろReactアプリを作ってきて今はこんな感じで作ることにしています。

componentsとcontainerを分けない

1ファイルの中にcontainerとcomponentsを書いています。

例えばTodoのコンポーネントを作るときは1ファイルにこんな感じ

const Todos = () => {
  return (
    <div></div>
  )
}

const TodosContainer = () => {
  return <Todos/>
}