Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

BCD Designに学ぶ、package by featureのための一貫したfeature...

Avatar for airRnot airRnot
November 30, 2025
840

BCD Designに学ぶ、package by featureのための一貫したfeatureの切り方

Avatar for airRnot

airRnot

November 30, 2025
Tweet

Transcript

  1. Package by Featureとは 機能(Feature)ごとにコードを分類する設計手法 Package by Layer 技術的な役割で分類 Package by

    Feature 機能で分類 src/ ├── components/ │ ├── UserProfile.tsx │ └── ProductCard.tsx ├── hooks/ │ ├── useUser.ts │ └── useProduct.ts └── contexts/ ├── UserContext.tsx └── ProductContext.tsx src/ └── features/ ├── user/ │ ├── UserProfile.tsx │ ├── useUser.ts │ └── UserContext.tsx └── product/ ├── ProductCard.tsx ├── useProduct.ts └── ProductContext.tsx 3
  2. BCD Designが教えてくれたこと その2 Featureは後方一致で分類する user とuser-contribution は同じ粒度の別のFeature ❌ ✅️ user

    はuser が関心の対象 user-contribution はcontribution が関心の対象 関心の対象ごとにまとめる features/ └── user/ ├── UserProfile.tsx └── user-contribution/ └── UserContributionGraph.ts features/ ├── user/ │ └── UserProfile.tsx └── user-contribution/ └── UserContributionGraph.ts 14
  3. BCD Designが教えてくれたこと その2 Featureは後方一致で分類する general-user とpremium-user は同じFeature ❌ ✅️ general-user

    もpremium-user も、関心の対象はどちらもuser 後方一致の原則により、同じuser のFeatureに属する features/ ├── general-user/ │ └── GeneralUserProfile.tsx └── premium-user/ └── PremiumUserProfile.tsx features/ └── user/ ├── general-user/ │ └── GeneralUserProfile.tsx └── premium-user/ └── PremiumUserProfile.tsx 15