機能別フォルダ

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

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

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

機能でまとめる

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

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

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

import の書き換えが起きる

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

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

演習

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