Reactのディレクトリ構成どうしてる？
前置き
Reactのスターターキットを作ってみて、ディレクトリ構成について迷いながらも作ってみたので、その構成について紹介したいと思います。
構成について言及している記事はまだ少なく、ベスト構成とというものは存在しないと思います。
今回紹介する構成もまだまだ改良していかなければいけないと思いますが、構成について迷っている方に少しでも役立てればと思います。
開発環境について
node v12.13.1
npm v6.13.4
使用している技術について
- React (reactHooks)
- Redux (Redux-toolkit)
- TypeScript
今回作成したスターターは、redux-toolkitを使っています。
小さいプロジェクトにはredux不要では？？という考えもあると思います。（自分もちょっとそう思います）
ですが、redux-toolkitの登場によってreduxを簡単に使えるようになったこと、
またreduxを追加実装するコストを考えると最初から入れてしまった方がいいのでは、という考えのもと、初期から含めることにしました！
↓この記事にものすごく感銘を受けました！
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話
公式での扱いは？？
Reactは推奨されるディレクトリ構成はありません。
公式でも考えすぎるべきではないと書かれています。
React はファイルをどのようにフォルダ分けするかについての意見を持っていません。
まだプロジェクトを始めたばかりなら、ファイル構成を決めるのに 5 分以上かけないようにしましょう。上述の方法の 1 つを選ぶか、自分自身の方法を考えて、コードを書き始めましょう！ おそらく実際のコードをいくらか書けば、なんにせよ考え直したくなる可能性が高いでしょう。
規模によって適切なディレクトリ構成が変わり、一つの答えはありません。
また、React周りは新しいツールがどんどん出てきて、何を使うか、どのように使用するかは目まぐるしく変わっているように感じます。
それも相まってディレクトリ構成を決めることが難しくなってるのだと思います。
構成について
さて本題です！
早速ですが実際作成したコードはこちら↓
簡単にどのディレクトリでどういったファイルを扱うかを説明したいと思います。
(実際のコードを見てもらえると早いかもしれません…)
構成は以下の通りになっています。
─── src
├── img (画像置き場)
│ └── common
│ └── favicon.png
├── pug (render先を指定)
│ └── index.pug
├── ts (react外でjsを使うときに使用)
│ └── app.ts
├── tsconfig.json
└── tsx
├── index.tsx (エントリーポイント)
├── stores
│ ├── index.ts (slicesディレクトリで作られたSliceを結合する)
│ └── slices (このディレクトリ下で各sliceファイルを扱う)
│ └── userSlice.ts
├── style（各page,componentのcssを切り分けたい時に使用)
│ ├── GlobalStyle.tsx
│ ├── components
│ │ ├── atoms
│ │ │ └── Button.tsx
│ │ └── block
│ │ ├── Footer.tsx
│ │ └── Header.tsx
│ ├── pages
│ │ ├── Login.tsx
│ │ └── Top.tsx
│ ├── resetStyle.tsx
│ └── variables.tsx
├── utils(定数などを管理)
│ └── constants.tsx
└── views
├── components（使い回しのできる要素）
│ ├── atoms(最小単位のcomponent)
│ │ └── Button.tsx
│ ├── block(atomsを組み合わせたり、atomsでは管理しきれないcomponent)
│ │ ├── Footer.tsx
│ │ └── Header.tsx
│ └── modules(機能を持ったcomponent)
│ └── ScrollTop.tsx
└── pages（各ページの呼び出し先）
├── login
│ └── Login.tsx
└── top
├── Top.tsx
└── TopList.tsx（そのページでしか使われないreact-componentは同階層に設置）
各ディレクトリの意味合いについてはこちらで記載しております
作ってみた感想
これを作る上でご意見、ご協力いただいた方々には最高に感謝です
まだまだ雑なところが多く、使ってみて思うことはたくさんあるのですが、viewsとstoreで分ける構成は悪くないんじゃないかな…と思ってます。
うちではこうしてる、ここはこうした方が良いなど、ご意見いただけますと幸いです
Discussion