機能別フォルダ｜基礎を学ぶ

種類でまとめると、直すたびに散らばる

ファイルが増えてくると、まず思いつくのは種類でまとめる形です。

components/  ItemList.tsx  Cart.tsx  ItemCard.tsx  CartLine.tsx
hooks/       useItems.ts   useCart.ts
types/       item.ts       cart.ts

一見きれいですが、仕事のしかたと合っていません。「カートに数量を足す」という1つの用事で、components と hooks と types を行き来することになります。関係のあるファイルほど遠くに置かれる形だからです。

fleama を「商品」と「カート」という機能で割ると、こうなります。

features/
  items/   ItemList.tsx  types.ts
  cart/    Cart.tsx      types.ts
components/  Layout.tsx

カートを直すときに開くのは features/cart だけになります。機能ごと消したくなったら、フォルダごと消せます。一緒に変わるものを一緒に置く、というのがこの分け方の考え方です。

features に入れないのは、どの機能のものでもない部品です。Layout やボタンのような枠は components に置きます。迷ったら、その部品が fleama の商品を知っているかどうかで決めます。知っていれば features、知らなければ components です。

移すと、呼ぶ側の道のりが変わります。

import { ItemList } from "./features/items/ItemList";
import { Cart } from "./features/cart/Cart";

型も機能の持ち物です。商品の Item は features/items/types.ts に置き、カートからもそこを読みます。同じ型を2か所に書くと、片方だけ直して静かに壊れます。

いまの平たい構成を、features の下に機能別に置き直します。