React アプリのプロジェクト構成について
これは何
- React で SPA 作る時にプロジェクト構成どうすれば良いのか迷ったので調べたメモ
React 公式
ファイル構成 – React
https://ja.legacy.reactjs.org/docs/faq-structure.html
legacy.reactjs.org の情報だが、以下のようなポイントが紹介されている
- 機能ないしルート別にグループ化する
- ファイルタイプ別にグループ化する
- ネストのしすぎを避ける
- 考えすぎない
https://react.dev/learn の方には記載が無いのがちょっと気になるが、ベースの考えとしては良さそう
Next.js App Router 公式
Routing: Project Organization | Next.js
https://nextjs.org/docs/app/building-your-application/routing/colocation
今回は Next.js は使用しないため割愛
Bulletproof React
bulletproof-react/docs/project-structure.md at master · alan2207/bulletproof-react
https://github.com/alan2207/bulletproof-react/blob/master/docs/project-structure.md
- Bulletproof React は公式情報ではないものの、有名な React のガイド
- 主に機能別にディレクトリを作成して管理していく感じ
その他
私の推しフロントエンドディレクトリ構成と気をつけたいポイント
https://zenn.dev/sakito/articles/af87061a5016e6
- Bulletproof React に似たパターン
- ベースとしては機能ごとにディレクトリを作成していく感じ
考察
プロジェクト規模やメンバーのレベル感に依る部分もあるものの、概ね React 公式または Bulletproof React をベースに検討して、マッチしない部分があるようならカスタマイズするという感じが良さそう