React アプリ構築するときのディレクトリ構成とかについて最近やっていること

こんにちは。私は最近 React アプリを作る時以下のようなディレクトリ構成でやっていっています。

src/ ---> App.tsx
      |---> Components/ ---> Fuck/ ---> index.tsx
      |                  |          |-> useSomething.ts
      |                  |          |---> SubComponent/ ---> index.tsx
      |                  |
      |                  |-> Shit/ ---> index.tsx
      |
      |---> hooks/ ---> useGarbage.ts
      |             |-> useShit.ts
      |
      |---> store/ ---> index.ts
                    |-> modules/ ---> gomi.ts
                                  |-> unko.ts

store 以下は redux を使う場合で Ducks っぽい奴がいます。しかし最近はもう useState で済まして redux 使わないことも多い(あんまり SSR しないなどの事情もあり)。

非常にシンプル、かつ Components 以下にとにかくなんでもコンポーネントを置いて、さらにコンポーネントの中は秩序をあまり求めない、というルール。サブコンポーネントを複数持った巨大なコンポーネントもいれば、 4 行ぐらいしかない超小さいのもあったりする。

Component について比較的よく見るのが「画面」と「それ以外」でさらに分類する、というようなやつで、僕も昔はそれをやっていたんですが辞めました。というのも何が「画面」なのかは恣意的な分類で意味がないという考えに至ったからです。よくある感じだと react-router で URL 振られているもののトップコンポーネントを「画面」とみなすとかそんなんでしょうか。しかしそれだけ特別扱いする理由もとくにないです。

またモバイルファーストなアプリの場合、モーダルのような挙動であらわれて完全に全画面占有しているものにたいして URL をふるかどうかっていうのも場合場合によって決まってくるし、あるいは PC 版では画面の一要素でしかないものがモバイル版では URL を振ったうえで全画面占有であるといったこともあり得ます。

React Native の場合はさらに難しく、 react-navigation を多段で使っているとかごく普通のことで、結局「画面」というのは極めて恣意的な分類であることがわかります。

というようなことを考えていくと React Component をなんらかのかたちで分類していくことは非常に恣意的で自転車小屋になりやすいのではないか、ということでとにかく全部 Components に入れるし中の実装にもルールとして干渉しない、というふうに今はやっています。 Components ディレクトリ以下にはたくさんディレクトリができますが、まあでもそれで困ってないです、今は。

ただこのあたり今ぼくが働いてる会社のチームの規模だとこれがいい、という話でスキルレベルがもっと分散してたらルールで縛るとか必要になるし、規模が大きいチームだともっとマイクロフロントエンド的な何かでやっていく必要がでてきたりもするでしょう。

まあでもこれくらいの脳筋でも案外どうにかなるっていうか結構快適ですよ。

Diary

@ssig33