Slide 1

Slide 1 text

BCD Designに学ぶ、 package by featureのための 一貫したfeatureの切り方 2025/11/30 フロントエンドカンファレンス関西2025 airRnot / @airRnot1106

Slide 2

Slide 2 text

自己紹介 airRnot Webアプリケーションエンジニア : @airRnot1106 : @airRnot1106 2

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Package by Featureとは 機能で分類するといっても、具体的にどうすればいいの? (機能を把握しないと分類できない) 4

Slide 5

Slide 5 text

BCD Designとは コンポーネントを関心・状況・基礎の3つの軸で分類する手法 https://qiita.com/misuken/items/19f9f603ab165e228fe1 5

Slide 6

Slide 6 text

BCD Designとは コンポーネントを関心・状況・基礎の3つの軸で分類する手法 6

Slide 7

Slide 7 text

BCD Designとは 例: リポジトリを作成するボタンリンクなので RepositoryCreateButtonLink Domain(関心): Repository Case(状況): Create Base(基礎): ButtonLink 7

Slide 8

Slide 8 text

BCD Designが教えてくれたこと 「明名」という概念 8

Slide 9

Slide 9 text

BCD Designが教えてくれたこと 明名という概念 「何の何をどうするUI」という法則に従って命名することで、 簡単に一貫性のあるコンポーネント名を導きだせる 「ユーザ」の「プロフィール」を「編集」する「ボタン」 UserProfileEditButton 何 何 どう UI 9

Slide 10

Slide 10 text

BCD Designが教えてくれたこと 明名という概念 コンポーネント名は決めるものではなく その依存や性質によって勝手に決まるもの 名前を明らかにする、明名 10

Slide 11

Slide 11 text

BCD Designが教えてくれたこと 明名という概念 これってPackage by Featureでも 同じことが言えるのでは……? 11

Slide 12

Slide 12 text

Featureを明名する 明名によって明らかにしたDomainをそのままFeatureとして切る 例: 「ユーザ」の「貢献」を表示する機能 (Base(基礎)はFeatureレベルだと関係ないので気にしなくてOK) features/user-contribution 12

Slide 13

Slide 13 text

Featureを明名する 明名によって明らかにしたDomainをそのままFeatureとして切る 例: 「ユーザ」の「貢献」を表示する機能 (Base(基礎)はFeatureレベルだと関係ないので気にしなくてOK) features/user-contribution とにかく、日本語で機能名を認識するのが重要! 13

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

まとめ 命名ではなく明名を意識する 「何の何をどうする機能」という 日本語のフレーズで機能名を認識する Featureは後方一致で、関心の対象ごとにまとめる 16

Slide 17

Slide 17 text

ご清聴ありがとうございました!