🥦

[React] ディレクトリ構成

2021/11/15に公開

React Applicationにおけるディレクトリ構成をまとめる。
ディレクトリ構成の話なのでReactに限らずSPA(Single Page Application)ならいいかも。
React公式のファイル構成では「考えすぎない」とある。
とは言うものの、最初から綺麗に越したことなはい。

ディレクトリ構成

まずは全体概要
state(状態管理) views(見た目) utils(共通関数系)でざっくり分ける。

root/
- src/
  - state/
    - dacks/
      - store.ts
      - (e.g.)dog/
        
        index.ts
        
        models.ts
        
        actions.ts
        
        reducers.ts
        
        selector.ts
      - (e.g.)cat/
        
        ...
  - views/
    - atoms/
      - buttons/
      - inputs/
      - ...
    - (molecules/)
    - organisms/
      - tables/
      - dialogs/
      - ...
    - ecosystems/
    - environments/
    - hooks/
    - App.tsx
  - utils/
    - index.ts

state directory

stateディレクトリに関しては、そもそもApplicationでの状態管理をどうするかが直結する。
useState, useContext等あるが、ここでは状態管理にReduxを使用していることを想定する。
このサイトを参考にre-ducksパターンを一旦書いた。

なんとなく目にするのが、Applicationが小規模ならuseContextで間に合うし、大規模ならRedux、という切り分け。
Reduxは学習コストが高いとかで敬遠されているようにも感じるが、誰かが仕組みを作ってしまえば、業務においては割と単純作業になるので最初から入れてしまってもいい気がする。

大事なのはモデリングが丁寧になされていること。
dogWithCatNameみたいな訳のわからないModelは作成しない。

views directory

View(見た目)関連のディレクトリ構成は別記事のAtomic Designの考えを踏まえる。

カスタムフックをまとめるhooksフォルダもviews直下。
View Componentから呼び出すので。

atoms

画面上での単一部品を定義する
最初からあったら良さそうなatomsのサブディレクトリの例
buttons/ inputs/ labels/ icons/

molecules

moleculesディレクトリは必要になったら作成すればよい
atomsの組み合わせが一般的

organisms

最初からサブディレクトリを作成する必要は感じないが、強いてあげるなら以下
tables/ dialogs/
以下のようなComponentがorganismsにある
BaseTables.tsx BaseDialogs.tsx
で、BaseDialogを元にしたErrorDialog.tsx ConfirmationDialog.tsxもここ
特定の画面用の汎用性が低いComponetも出てくる
例えば、個人情報を入力するフォームUserInfoForm.tsxとか

ecosystems

データ取得ロジックを書いたりする層
サブディレクトリはenvironmentsと同じ構成になりがち
ZennのTopページを例に挙げるなら次のようなComponetがここ
TechList.tsx IdeaList.tsx BookList.tsx

environments

Application内の関連ある単位でまとがち
TopView.tsx MyPageView.tsxのようにサフィックス揃える

environments/
- Home.tsx
- user/
  - UserDashbordView.tsx
  - UserArticleListView.tsx
  - UserArticleDetailView.tsx
  - UserArticleEditView.tsx
- topic/
  - TopicListView.tsx
  - TopicDetailView.tsx

utils directory

ここにはproject内で使用する関数なんかを定義する。
例えば日付フォーマットとかscrollイベント抑制させるための関数とか。
無理にindexファイルにまとめなくても、dateUtilsといったサブディレクトリを作ってもいいかもしれない。