web-dev-qa-db-ja.com

Webプロジェクトのフォルダー/ディレクトリ構造-ベストプラクティス

私はさまざまなWebプロジェクトに取り組んでいますが、プロジェクト/フォルダー構造に関する経験則はあるのでしょうか？

私のアプリの多くは、各ファイルタイプに独自のディレクトリがある構造で構築されています。例えば：

└─┬root
  |
  ├─┬node_modules
  | └ // node_modules (npm libraries)
  |
  └─┬www
    |
    ├─┬Libs // Js libraries 
    | |
    | ├─┬Angular
    | | └ … (.js files)
    | |
    | └─┬Bootstrap
    |   └ … (.js files)
    |
    ├─┬JavaScript // my Js files
    | |
    | ├─┬Services
    | | └ … // my services (.js files)
    | |
    | ├─┬Controllers
    | | └ … // my controllers (.js files)
    | |
    | ├─┬Directives
    | | └ … // my directives (.js files)
    | |
    | └app.js // js entry point
    |
    ├─┬StyleSheets
    | |
    | ├─┬Less
    | | └ … // my styles (.less files)
    | |
    | └─┬Css
    |   └ … // my styles (.css files)
    |
    ├─┬Views
    | |
    | ├─┬Pages
    | | └ … // pages layout (.html files)
    | |
    | └─┬DirectivesTemplates
    |   └ // templates layout (.html files)
    |
    ├─┬Assets
    | |
    | ├─┬Fonts
    | | └ … // app fonts (.ttf/ .woff files)
    | |
    | └─┬Images
    |   └ // app images (.jpg/ .png files)
    |
    ├─┬Data
    | |
    | └ // app info (.json files)
    |
    └index.html // web site entry point

しかし最近、いくつかのプロジェクトがあります。各モジュールには、コード（.jsファイル）、ビュー（.htmlファイル）、スタイル（.css/.lessファイル）およびデータ（.jsonファイル、画像、フォント）が含まれる独自のフォルダーがありますなど）たとえば：

└─┬root
  |
  ├─┬node_modules
  | └ // node_modules (npm libraries)
  |
  └─┬www
    |
    ├─┬Libs // Js libraries 
    | |
    | ├─┬Angular
    | | └ … (.js files)
    | |
    | └─┬Bootstrap
    |   └ … (.js files)
    |
    ├─┬Modules
    | |
    | ├─┬moduleA
    | | |
    | | ├moduleA.js   //modules controller
    | | |
    | | ├moduleA.html //modules view
    | | |
    | | ├moduleA.less //modules style
    | | |
    | | └moduleA.json //modules data
    | |
    | ├─┬moduleB
    | | |
    | | ├moduleB.js  
    | | |
    | | ├moduleB.html
    | | |
    | | ├moduleB.less 
    | | |
    | | ├moduleB.json 
    | | |
    | | └moduleB-icon.png
    | |
    | └─┬moduleC
    |   |
    |   ├moduleC.js  
    |   |
    |   ├moduleC.html
    |   |
    |   ├moduleC.less 
    |   |
    |   ├moduleC.json
    |   |
    |   └moduleC-font.woff
    |
    └index.html // web site entry point

プロジェクト構造に関するベストプラクティスはありますか？

javascripthtmlcssproject-structure
13
Gil Epshtain

サンプルには、2つの一般的なプロジェクト構造が示されており、ファイルをタイプ別またはモジュール別に整理しています。私は後者（モジュールに分離されたコード）を好み、javascriptフロントエンドフレームワークに多く使用されていると思います。 Angular style guide （angularベストプラクティス）の優れたリファレンス）が 機能別フォルダー と呼ぶものです。

Angular=スタイルガイドを参照します。これは、例でAngularプロジェクトを示していますが、コンセプトは他のフレームワークに翻訳できます。コードは機能別に整理されているため、編集する必要のあるファイルを見つけます。誰かがコメントで指摘したように、このプロジェクト構造は、アプリとチームの規模が拡大するにつれてうまく拡張されます。

5
allienx