【要約】React + Vite プロジェクトに bulletproof-react × オニオンアーキテクチャを取り入れた話 [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
開発者がReactプロジェクトのディレクトリ構成を検討する際、機能単位の分割だけでは不十分な状況に直面する。単なる機能分割では、以下の課題が生じるためである。
- ・APIやUIの都合により、ビジネスルールが書き換えられてしまう。
- ・feature内部で「どこにロジックを書くべきか」という判断が曖昧になる。
- ・UIとビジネスロジックが密結合し、テストの記述が困難になる。
// Approach
開発者は、bulletproof-reactをベースに、feature内部へオニオンアーキテクチャのレイヤー構造を導入した。これにより、関心事の分離を徹底している。
- ・feature内部をdomain, application, infrastructure, presentationの4層に分割。
- ・依存の向きを常に内側（domain）へ向けることで、ビジネスロジックを保護。
- ・ESLintを用いてfeature間の直接参照を制限し、循環依存を防止。
- ・複数featureから参照される中核ドメインをcore（共有カーネル）として分離。
- ・ロジックの複雑さに応じて、ページをapp/routesからfeaturesへ段階的に昇格。
// Result
開発者は、ビジネスルールの変更と技術的な実装の詳細を切り離して管理できる。設計の明確化により、以下の成果が得られる。
- ・ロジックの変更理由に基づき、修正すべきレイヤーが明確になる。
- ・core層の導入により、feature間の依存を「正規ルート」として扱える。
- ・ロジックの複雑化に合わせて、段階的にfeature化する運用を実現。
Senior Engineer Insight
> 本設計は、中長期的な運用を見据えた大規模プロジェクトにおいて強力な武器となる。ビジネスロジックをUIから隔離する判断は、テスト容易性と保守性を向上させる。ただし、階層の増加に伴うボイラープレートの増大は避けられない。小規模なプロジェクトでは過剰設計となるため、適用には慎重な判断が必要だ。