Webサイトのディレクトリ構造とその命名規則に悩む

Webサイトのディレクトリ構造とその命名って、特に決まりがなくて迷う

筆者は英語についてはほとんどよく知らないため、完全な独断による記事。
ただし、できるだけモヤモヤしないことを優先し、筋が通っていそうなルールを目指す。

画像・スクリプト・スタイルシート等をHTMLと分けて入れるフォルダの名前をどうするか?

よくある名前

ルート直下に「HTML以外をまとめるフォルダ」を作るときは、
特に決まりはないが、だいたい以下のような名前が多いと思う。

assets, public, module, modules, common, commons, resource, resources

それぞれの単語の意味合いをまとめまた。リンクをクリックするとweblio辞書に飛ぶ

• assets：複数形で 個人・会社の 財産・資産
• public： 公開の・共有の
• modules：モジュール
• commons：共通
• resources：資源・供給源・物資

この中から検討するとすれば、まず最初に public/ は不適当だと思う。なぜならその他のHTMLファイルらもそもも公開状態にあるため、パブリックなものの中にさらに public/ という階層を作るのは、「共有の」という別の意味を差していたとしてもモヤモヤする。

次に module/・ modules/ という名称も多くの場合不適当だと思う。「モジュール」というからには、その中身は再利用可能で一定のまとまりをもった小さいパーツで構成されているべきで、PHPの .inc みたいなものであれば妥当かもしれない。しかし、JSや画像ファイルまでが「モジュール」に入っているのはモヤモヤする。

resources/ は悪くないと思うし、実際Android開発ではassetsとほとんど似た概念で扱われているらしい。しかし、sourceとresourceの違いについてググると、なんとなく「resourceは、sourceよりもさらに奥の方にある源」というニュアンスがあるように思う。たとえば、WebのCSSや画像がsourceなのであれば、元々のデザインが描かれたAIファイルやPSDファイルがresourceと呼ぶにふさわしいものかもしれない。
もし、自分がリポジトリの中にデザインのネイティブファイルも管理したいと思い始めたら、おそらく「resources」という名前を付けたくなる思う。そう考えるとここで「resources」という名前を使ってしまうと、あとでモヤモヤしてしまうかもしれない。

そう考えると、assets/、commons/のどちらかであれば、一番モヤモヤしないのではないだろうか?

asset, assets, common, commons のどれが一番良いか?

assetかassetsか → assetよりも複数形のassetsで使用することが多いらしい。Androidでもassetsと呼ばれているので、こちらを採用
commonかcommonsか → ちょっと調べたところでは、はっきりとどちらが良いか判断できず

以上の割とどうでもよい理由から「画像・スクリプト・スタイルシート等をHTMLと分けて入れるフォルダの名前」は assets/ がいいのではないかと結論する。

そんなフォルダはそもそも作らない?

実際のところ何の問題もないと思うけど…。
特に静的サイトであった場合、コンテンツの階層関係と諸々のリソースが同じレベルで並んでしまっていることにモヤモヤする。

CSSとかJSとかをまとめたフォルダの名前をどうするか

複数形にする・しないとか、imgかimagesとか、悩みは尽きない…。

言語名(?)・拡張子(??)・略称(???)で付けるよ派

• css
• js
• img
• inc
• doc, docs
• swf
• zip
• pdf, pdfs
• lib, libs

フォルダの中身が意味するところ(?)で具体的に付けるよ派

• style, styles
• script, scripts
• image, images
• include, includes
• file, files
• download, downloads
• document, documents
• archive, archives
• font, fonts
• web-fonts
• library

その両方が混在していまうという悲劇

• assets/
  • img/
  • style/
  • js/
  • library/

ライブラリとかjQueryプラグインみたいなのをどこに置くかでモヤモヤする

• assets/js/myscript.js
• assets/js/jquery.min.js
• assets/css/mystyle.css
• assets/css/normalize.css

↑ jqueryみたいなのと自分の書いた奴が並ぶのはなんか違和感

• assets/js/myscript.js
• assets/js/vendor/jquery.min.js
• assets/css/vendor/normalize.css

↑ これで済むならいいんだけど…

• assets/js/vendor/jquery.min.js
• assets/js/vendor/jquery/jquery.plugin.js
• asssets/js/vendor/lightbox/lightbox-jq.js

↑ 大分イライラしてくる

• /bower_component/ ← やめて!!
• assets/js/vendor/jquery/jquery.hogehoge-plugin-3.2.1/jquery-hogehoge-plugin.3.2.1.css ← もうやめて!!!!

外からダウンロードしてきたものは、名称を変えると中身も変えないといけないのがだるい。経験上そのままにしておくに限るのだが気分が悪い。

gruntとかsassとかの登場で、コンパイル前のことも考えないといけなくなってくる

• コンパイル前は src? source?
• コンパイル後は dest? dist? distribute? public? develop? devel? dev? pub? build? compiled?

色々あって今はこんな感じ

 dest       -- コンパイル結果
 src        -- コンパイル前
  index.html
  assets    -- コンパイル後に残らないフォルダは、先頭に「_」を付ける
    _coffee -- CoffeeScript
    _sass   -- Sass
      lib   -- Sassの共通ライブラリ
    vendor  -- 外部ライブラリはここ。bower_componentの名前を変えて運用
    js
    css
    img 

目下の悩み

CSSで使う画像はどこに入れるか?

• cssと同じ階層に直であってもよいし
• assets/css/img みたいにしてもよいし
• assets/img とかにまとめちゃう人もいるよね…