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

Transcript

1. BCD Designに学ぶ、 package by featureのための 一貫したfeatureの切り方 2025/11/30 フロントエンドカンファレンス関西2025 airRnot / @airRnot1106
2. 自己紹介 airRnot Webアプリケーションエンジニア : @airRnot1106 : @airRnot1106 2
3. 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
4. Package by Featureとは 機能で分類するといっても、具体的にどうすればいいの？ (機能を把握しないと分類できない) 4
5. BCD Designとは コンポーネントを関心・状況・基礎の3つの軸で分類する手法 https://qiita.com/misuken/items/19f9f603ab165e228fe1 5
6. BCD Designとは コンポーネントを関心・状況・基礎の3つの軸で分類する手法 6
7. BCD Designとは 例: リポジトリを作成するボタンリンクなので RepositoryCreateButtonLink Domain(関心): Repository Case(状況): Create Base(基礎): ButtonLink 7
8. BCD Designが教えてくれたこと 「明名」という概念 8
9. BCD Designが教えてくれたこと 明名という概念 「何の何をどうするUI」という法則に従って命名することで、 簡単に一貫性のあるコンポーネント名を導きだせる 「ユーザ」の「プロフィール」を「編集」する「ボタン」 UserProfileEditButton 何 何 どう UI 9
10. BCD Designが教えてくれたこと 明名という概念 コンポーネント名は決めるものではなく その依存や性質によって勝手に決まるもの 名前を明らかにする、明名 10
11. BCD Designが教えてくれたこと 明名という概念 これってPackage by Featureでも 同じことが言えるのでは……？ 11
12. Featureを明名する 明名によって明らかにしたDomainをそのままFeatureとして切る 例: 「ユーザ」の「貢献」を表示する機能 (Base(基礎)はFeatureレベルだと関係ないので気にしなくてOK) features/user-contribution 12
13. Featureを明名する 明名によって明らかにしたDomainをそのままFeatureとして切る 例: 「ユーザ」の「貢献」を表示する機能 (Base(基礎)はFeatureレベルだと関係ないので気にしなくてOK) features/user-contribution とにかく、日本語で機能名を認識するのが重要！ 13
14. 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
15. 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
16. まとめ 命名ではなく明名を意識する 「何の何をどうする機能」という 日本語のフレーズで機能名を認識する Featureは後方一致で、関心の対象ごとにまとめる 16
17. ご清聴ありがとうございました！