フロントエンドのクリーンアーキテクチャ（TypeScript・クラスなし）

要約

フロントエンドにもクリーンアーキテクチャの考え方を適用できる。UseCase・Service・Repository の層構造で責務を分離し、クラスではなく関数ベースで TypeScript 実装する。依存方向を一方向に保つことで保守性を高める。

層構造

UI (React/Vue 等)
    ↓
UseCase（ビジネスロジック）
    ↓
Service（ドメインサービス）
    ↓
Repository（データアクセス抽象化）
    ↓
Infrastructure（API, localStorage 等）

ポイント

• クラス不要: 関数 + 型で同じ責務分離を実現できる
• 依存の方向: 上位レイヤーが下位レイヤーに依存。逆は禁止
• Repository でデータソースを抽象化: API・localStorage・IndexedDB を差し替え可能に
• UseCase がビジネスルールを持つ: UI や外部ライブラリへの依存を持たない
• テスタビリティが上がり、UI フレームワーク変更時の影響範囲が小さくなる

参照記事

https://dev.to/bespoyasov/clean-architecture-on-frontend-4311