つくる - 設計リファクタ
動くものを、動いたまま組み直す
新しいことは出てきません。この章の3つを、fleama 全体に一度に当てます。
- 表示担当とデータ担当に分ける
- 枠は穴だけ持ち、中身は呼ぶ側で差し込む
- 機能ごとにフォルダを分ける
いまの App.tsx は、通信も、状態も、枠も、並べ方も全部を1つの関数で抱えています。画面はこのあと1行も変わりません。変わるのは、次に手を入れる人が読む量だけです。
どこから切るか
順番があります。まずデータの流れを外へ出し、次に見た目を割り、最後にフォルダへ配ります。
プレーンテキスト
App.tsx 枠を組み立てるだけ
components/Layout.tsx 穴が3つある枠
features/items/types.ts Item の型
features/items/ItemListContainer.tsx 取ってきて渡す
features/items/ItemListView.tsx 並べるだけApp が持つのは「どの枠に何を差すか」だけになります。App に fetch と useEffect が残っていたら、まだ途中です。
売り切れの札は表示担当の仕事
売り切れかどうかで見た目を変えるのは、判断ではなく描き分けです。
TypeScript (JSX)
{item.status === "sold" && <span className="sold">売り切れ</span>}props で受け取ったものだけを見て描いているので、これは表示担当に置いて構いません。逆に「売れたら再取得する」のような話は、データ担当の仕事になります。
演習
App.tsx に固まっている fleama を、4つのファイルへ配り直します。