はじめに
本記事はAngular Advent Calendar 2022の3日目の記事になります。
約4年Angularの開発を行っており、
その中での個人的ベストと感じたフォルダ構成について
ナレッジ含め共有します。
そもそもフォルダ構成のベストプラクティスを公式は公開しているか？
残念ながら、フォルダ構成について公開されておらず、
各々のプロジェクトに任せるとのことです。。
そのため、各種案件に参加するたびにフォルダ構成にバラツキが発生する。。
構成の考え方
AngularはモジュールのLazy Loadが存在するため
モジュール単位での構成を立てるのが良いかと思います。
実際の構成
.vscode ・・・ VsCodeの各種設定ファイルを管理
src
└app
└ modules
└ 各種モジュールフォルダ
└ components
└ models
└ servies
└ shared・・ 共通モジュール
└ shared
└ models
└ utils・・各種ユーティリティ機能を管理
assets ・・・ 静的ファイルを管理
└css
└i18n
└images
environments ・・・ 環境設定ファイルを管理
フォルダ構成を適切に管理するツール
npmパッケージにls-lintがあります。
ls-lintは所定のフォルダに拡張子単位で正しいファイル名で配置しているかを
チェックしてくれます。
公式URL
ls-lint
Angularの構成管理出力ツール
余談になりますが、Angularのソースを元にAngularの構成を出力するnpmパッケージがあるので紹介します。
・モジュールの依存度
・Router情報
・ドキュメントのカバレッジ
・クラスやディレクティブの情報など
詳しくは以下でご参照ください。
Compodoc
最後に
フォルダ構成は、その時々のプロジェクトに合った構成がありますので
あくまで参考にしてもらえればと思います。
もしくはもっといい構成があれば、教えてください。
明日は、Jialipassionさんです