Last-Modified: 2020/03/04

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

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

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

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

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

assetsフォルダの中にCSS等のファイルを整理していきます。assetsフォルダの中身は下記。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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