「Reactのディレクトリ構成について」に関しての考えをまとめました。

目次

Reactを用いてアプリを作成するときに、src配下のディレクトリ構成を迷った。デファクトスタンダードを知らなければ、オレオレフレームワークになりかねない。

調べてみると、公式にてコンポーネントのファイル構成の案内があった。 ファイル構成 – React

（主として）ルート別に分類する

以下引用。ここの表題に「主として」という注釈を入れたのは、ルートパスが機能のディレクトリ名と異なっていたり、すべての機能がHTTPでアクセスする必要ないためである。

プロジェクトを構成する一般的な方法の 1 つは、CSS や JS やテストをまとめて、機能別ないしルート別のフォルダにグループ化するというものです。

common/
  Avatar.js
  Avatar.css
  APIUtils.js
  APIUtils.test.js
feed/
  index.js
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  FeedAPI.js
profile/
  index.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css
  ProfileAPI.js

機能の種類やルートパスの種類の分類の粒度は、アプリケーション次第である。

ここでの「機能」の定義は普遍的なものではないので、粒度の選択はあなた次第です。トップレベルのフォルダの名前が思いつかない場合は、ユーザに「この製品の主な構成部品は何か」と聞いてみて、ユーザの思考モデルを青写真として使いましょう。

ファイルの性質別に分類する

APIや、HTML用のコンポーネント・DB接続のためのリポジトリなどの粒度でディレクトリを分ける方法である。

api/
  APIUtils.js
  APIUtils.test.js
  ProfileAPI.js
  UserAPI.js
components/
  Avatar.js
  Avatar.css
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css

コンポーネント部位は、さらに粒度を細かく分ける方法論もある。

役割別に分類する

役割の分類法としてAtomicDesiginの方法論がある。これらの方法論は従うべき厳格なルールではなく、基本となる考え方に過ぎないので、固執し過ぎないようにする。

アトミックデザイン | ブラッド・フロスト

種類|例 Atomic|フォームにおけるラベル・input要素・ボタン要素単体などで、それ自体ではあまり役の立たないものが多い Molecules|化合物の最小の基本単位で、フォームのラベルとinputフォームとbuttonをくっつけたもの。独自の性質を持つ Organism|ヘッダーなどを示す。分子同士を組み合わせて作られた複雑で明確なセクションを示す分子グループ。 Templates|生物同士を組み合わせたもので、HTMLワイヤーフレームを示している。 Page|テンプレートのインスタンスでテンプレート内のプレースホルダーが具体的なコンテンツに置き換えられ最終のページを示す