フロントエンドのディレクトリ設計思想

はじめに フロントエンドのディレクトリ構成、世の中に色んな「推し」が有って悩みますよね。 例えば、、、 さらに最近は、App Directoryの登場や、それに合わせたNext.js公式の「推し」構成がドキュメント化されたりと、さらに色々なパターンが出てきています。 本記事の趣旨 本記事では、具体的な構成そのものではなく、 様々ある構成を横串で見通して整理できる設計思想を紹介します。 新しい推し構成の紹介ではなく、構成を考えたり決めたりするときに役立つ抽象的・汎用的な指針を提供できればと考えています。 基本となる考え 分割の方向 一般的に、アーキテクチャにおける分割には2つの方向が有ります。 (出典も良書なのでリンクを貼っておきます： https://www.amazon.co.jp/dp/4873119820) これはディレクトリにおいても同じだと思っていて、筆者は分かりやすさのために

[glass-_-onion]

Pnpmのワークスペースを使ってモノレポ構成を作ってからページ側をFeature型、コンポーネント側をLayer型で分けてることが多い

[efcl]

共通のLayerと機能ごとのFeatureのディレクトリ構造の組み合わせ

[mumei-0]

“ファイルベースルーティングはFeature型と相性が良い”