今回の記事はTypeScriptベースのReactプロジェクトで、フォルダ・ファイル構成の最適案をご紹介する記事です。あくまでも私個人のフォルダ構成ですので意見は何でもコメントください。参考になれば幸いです。
Reactのフォルダ・ファイル構成最適案
私の提案する最適案は下記のような構造です。
├── App.css
├── App.test.tsx
├── App.tsx
├── Componets
│ ├── button.ts
│ └── gridview.ts
├── Hooks
│ ├── showDialog.ts
│ └── showMessage.ts
├── Layout
│ ├── base.ts
│ ├── footer.ts
│ └── header.ts
├── Pages
│ ├── Page1
│ │ ├── Components
│ │ ├── Hooks
│ │ └── index.tsx
│ ├── Page2
│ └── Types
│ └── page1.ts
├── Theme
├── Utils
├── index.css
├── index.tsx
├── logo.svg
├── react-app-env.d.ts
├── reportWebVitals.ts
├── route.ts
└── setupTests.ts各フォルダに関して解説して行きます。
基本的にsrc以下のみをいじるイメージです。
Componentsフォルダ
各画面で共通の部品、たとえばボタンやグリッドビューなどをまとめて配置しておくフォルダ。アトミックデザインを意識して、Component(コンポーネント)からOrganisation(オーガニゼーション)の構成にできればなお良い。
Hooksフォルダ
各画面で共通して使用するカスタムフックスフォルダ。メッセージ表示やダイアログ表示、API接続などまとめておくフックスを配置。
Layoutフォルダ
画面の使い回す部分（テンプレートにあたるヘッダーやフッター、共通部など）を格納するフォルダ。
Pagesフォルダ
各画面ごとに中でフォルダ分けを行う。そのフォルダ以下でさらに画面で使用するコンポーネントフォルダとデータ取得などのカスタムフックスフォルダを用意。ページごとのフォルダとは分けてそれぞれのページで利用する型フォルダはTypes以下に配置。
Themeフォルダ
画面で共通して使用する色などを定義しておく。
Utilsフォルダ
日付の形式変更やコンマ区切りなど凡用関数配置。
ざっくりいうとフォルダ階層は上記の通りです。ファイル名に関しては全て小文字。フックス系はuse〇〇。特にデータ取得の場合は「useFetch〇〇.ts」、データ登録は「useRegist〇〇.ts」などに統一しておくとみただけでどのようなHooksかわかる。
また、拡張子は基本的にindexファイル以外は「.ts」にする。
ページルーティングは「route.ts」にまとめて記述。
以上が私のTypescriptベースのReactにおけるフォルダ・ファイル最適案です。ご意見は受付中です。これより良い構成を逆に知りたいのでご教示くださいませ。
では今回の記事は以上です。他にも多数のReact入門・記事を記載しているので是非興味があればサイト内見ていって下さい。
コメント