【初心者のプログラミング】ファイル構造を整理しておこう

HTML & CSS

Progateやドットインストールを利用して、プログラミング学習をしている人も多いとは思いますが、いざ実践してLP等のWebサイトを作る段階になって『ファイル構造ってどうするのが正解なの?』と悩みませんか?

本記事ではWebサイトを制作する際にファイル構造はどのようにまとめたらいいのかを解説します。

ファイル構造を整理しておこう

まずフォルダの第一階層にはindex.htmlファイルとassetsフォルダを置きましょう。

assetsフォルダの中にCSS等のファイルを整理していきます。assetsフォルダの中身は下記。
  • CSSフォルダ
  • JavaScriptフォルダ
  • Imageフォルダ
  • オリジナルフォルダ

それぞれのフォルダの中身を見ていきましょう。

CSSフォルダ

フォルダ名はcssで良いでしょう。
中身のファイルはstyle.css等のcssファイルになります。

sassで書いている人はコンバートしたファイルはcommon.min.css等の名称で保存されていると思いますが、最終的に完成したcssファイルをstyle.cssと名称を変更して格納しておけばOKです。

JavaScriptフォルダ

フォルダ名はjsで良いでしょう。
中身のファイルはscript.js等の名称でjsファイルになります。

swiperなどのプラグインを使う場合はここではなく、後ほど説明するオリジナルフォルダに格納しておくと良いです。

Imageフォルダ

フォルダ名はimgで良いでしょう。
中身のファイルはWebサイトで使用する画像を入れておけばOKです。

オリジナルフォルダ

フォルダ名はorgで良いでしょう。

中身はまずsassフォルダを置き、style.scss等のscssファイルを置けばOKです。

swiper等のプラグインを使用する場合はswiper.scss等のファイルが必要になると思いますが、ここに格納しておきましょう。複数のプラグインを使用する場合は同階層内でフォルダでまとめておくといいかもしれません。

ちなみに僕の場合でオリジナルフォルダ内の一例を紹介しておくと下記の通り。

  • _reset.scss
  • style.scss
  • style.min.css
  • libsフォルダ
  • variablesフォルダ

このような内容になっています。
libsフォルダの中にjsプラグイン系のscssファイルを入れています。

variablesフォルダの中身は下記。

  • _config.scss
  • _mixins.scss
  • _responsive.scss

scssはスタイルの割り当てファイルを分割できるのが便利なので、まだ導入していない人は下記記事を参考にしてみてください。

参考記事【Sassとは?】初心者向けに導入方法を解説

まとめ

フォルダのまとめ方はトップにindex.htmlとassetsフォルダの二つで、assetsフォルダの中にCSSやJavaScriptなど分かりやすく整理するのがいいですよ。

もちろん全て1階層の中にファイルをまとめてもWebサイトの見た目が変わることはありませんが、仕事として納品するときはそれでは話にならないので、今の内から綺麗なフォルダ構造を心がけてWeb制作を行うようにしていきましょう。

今回は以上です。それではまた。

関連記事【wow.jsの使い方】JavaScriptでアニメーションをつけよう【jQueryプラグイン】