フォルダ構成の最適解を考える

さて、カンプからの画像アセットを使った素材切り出しも終え、いよいよコーディング作業に入ったのだが、ここで以前から気になっていたフォルダ構成の見直しを行ったので、備忘録としてまとめたいと思う。
参考にさせていただいたのは以下のサイト。
https://inabak.com/folder-structure-best/

導入した点
*公開用のフォルダはpublicに入れる
*HTMLファイル以外は全て「assets」フォルダに入れる
*画像用フォルダ(「img」)は「common」と「各ページごと」にフォルダを分ける
*jsファイルは「lib」「plugin」とフォルダ分けし、
それぞれライブラリと他所様からいただいたjsファイルを入れ、
自分で書いたjsファイルは直下に用意したcommon.jsに入れる
サブページに関しては、フォルダを用意せず、index.htmlと同じ階層に
htmlファイルを置いた。ここは要検討。

そうして出来た最終的なフォルダ構成は以下の通り。
まあフォルダ構成を考えるほどのコンテンツ量ではあるのだけれど、
規模が小さいサイトのうちに、フォルダ構成について考えるクセをつけておきたい。

フォルダ構成

こちらがassetsの中身。
フォルダ構成2

VS Codeのデフォルト設定を変更していないため、
現状sassファイルもcssフォルダ内に出力されている。
この点は次のサイト制作時には変更したいと思う。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です