MB.js

ディレクトリの作りで見通しが変わる

これは転職後はじめてのプロジェクトで設計したディレクトリの構成に失敗した話です。

自分が作業を進めていくなかで、どんなディレクトリが出来上がっていくのか知らなかったため、

あとから見返したときにファイルがすごく見つけにくくなってしまった反省として書きます。

静的サイトって？

ここでいう静的というのは、マークアップしたHTMLがそのまま画面に表示されたページのことです。

モックは見本という意味です。

ちなみにこのブログも、Javascripitを使ったHexoというライブラリで静的サイトをネット上にアップロードしています。

逆に動的なサイトは、なにかフォームに文字を入力してサーバに送信したら、画面に表示された何かが変わるということとします。

後悔してる構成

今も後悔している、ディレクトリとファイルの構成はこんな感じです。

初めてタスクランナーのGulpを使ったのもこの時でした。

• ダメな構成

project ━┳━ src ━┳━ html
         ┃       ┣━ css
         ┃       ┣━ pug ━┳━ header.pug
         ┃       ┃       ┣━ footer.pug
         ┃       ┃       ┣━ etc...
         ┃       ┣━ img
         ┃       ┗━ js
         ┃
         ┣━ scss ━┳━ style.scss layout
         ┃        ┣━ header.scss
         ┃        ┣━ footer.scss
         ┃        ┣━ etc...
         ┃
         ┣━ .git
         ┣━ .gitignore
         ┣━ node_modules
         ┣━ gulpfile.js
         ┣━ etc...

どこがいけなかったのか、このときの自分に教えるつもりで書いていきます。

また、ここに出てくるディレクトリ名は一例です。

どこがいけないのか

なぜscssディレクトリだけがsrcでディレクトリと同じ階層にいるんだ！

原因

今まで個人で活動してきた中で、HTMLとCSSだけでサイトを作っていた僕は、

ディレクトリの構成手法の知識が2000年頃で止まっていました。

要は、srcディレクトリの中に、HTMLとCSSとimgディレクトリが入っているだけの、

ごくごくシンプル…を通り越して素材の味を楽しむだけのものでした。

srcディレクトリとdistディレクトリ

- src srcはsourceの略。 だからページの元になるディレクトリの名前になる。

今回でいうと、例えばpugはコンパイルされてHTMLになるし、 scssはCSSになるので、これらがsourceになります。

つまり、pugやscssがsrcディレクトリに入って、 Gulpによって生成されたHTMLやCSSは別のディレクトリになるべきです。

- dist distはdistributionの略。 distributionは配布という意味。

つまり、Gulpで生成された後、ネット上に配信されるファイル群がここになくてはいけない。 上記のダメな構成には出てこなかった、作ったほうがよいディレクトリ。

メンテナンス性

フロントエンドは、HTMLやCSS、JSファイルを細かくパーツ単位で制作し、 GulpやWebpackなどのコンパイラー（タスクランナー）で整形させます。

特に静的なページは、ヘッダーのいち部分を修正したいとなった際、 すべてのHTMLのページを開いて、該当部分を見つけ出して、ひとつひとつ修正していく…

なんて作業を、2,3ページならまだしも5ページ以上あったら大変ですし、 ヌケモレが出てくると思います。

パーツが細かくなっていれば、そのファイル1つを更新するだけで そのパーツファイルを読み込んでいるすべてのページに反映されるので、 見通しもメンテナンス性もぐっと良くなりますね。

今の僕がやるならば...

こんな感じのものになると思う。（一例です）

• やりたかったもの

project ━┳━ src ━┳━ pug ━┳━ header.pug
         ┃       ┃       ┣━ footer.pug
         ┃       ┃       ┣━ etc...
         ┃       ┃
         ┃       ┣━ scss ━┳━ layout ━┳━ header.scss
         ┃       ┃        ┃          ┣━ footer.scss
         ┃       ┃        ┃          ┣━ etc...
         ┃       ┃        ┣━ variables.scss
         ┃       ┃        ┣━ top.scss
         ┃       ┃        ┣━ etc...
         ┃       ┃
         ┃       ┣━ js  ━┳━ hoge.js
         ┃       ┃       ┣━ etc...
         ┃       ┃
         ┃       ┗ img
         ┃
         ┣━ dist ━┳━ html ━━ index.html
         ┃        ┣━ css ━━ style.scss
         ┃        ┣━ js ━━ bundle.js
         ┃
         ┣━ .git
         ┣━ .gitignore
         ┣━ node_modules
         ┣━ gulpfile.js
         ┣━ etc...

distとsrcにわけて何がいいのかというと、

distは生成されたものだけが入っているので、実質無視していい。

そしてこういう場合のディレクトリは、状況のような感じに構成されています。

ということは、他の人と作業するときも、共通の認識で作業が進められるわけですね。

【結論】役割をはっきりさせる

ディレクトリにつける名前は、いわばそのディレクトリの中には

どんな役目のファイルが入っているのかを明らかにするべきだと思います。

そうすることで、srcディレクトリの中に生成されたHTMLファイルが入ることもなくなりますし、

ファイルのありかがわかるので、自分にも他の人にも優しい構成になるので参考にしてみてください。