今回はWEBサイトを構築する時のフォルダ構造(ディレクトリ構造)のお話。
設計の段階でファイルの置き場所を意識しておかないと、ファイルを全て同じ階層に入れてしまったり、フォルダ内にCSSと画像が混在したり…とデータ管理が煩雑になってしまうことがあります。
そこで当記事では、私が管理がしやすいと思うWEBサイトのフォルダ構成例を紹介します。以下で紹介する構造をベースに、プロジェクトの規模や要件によってカスタマイズしていくといいと思います。
基本的なWEBサイトのフォルダ構造
index.html(またはindex.phpなどの拡張子に対応するファイル)
ウェブサイトのエントリーポイントとなるメインのHTMLファイルです。通常、ルートフォルダに配置されます。
css/
CSSファイルを格納するフォルダです。スタイルシートファイルを管理するために使用されます。
js/
JavaScriptファイルを格納するフォルダです。ウェブサイトのインタラクティブな機能や動的なコンテンツを実装するために使用されます。
images/
ウェブサイトで使用する画像ファイルを格納するフォルダです。ロゴ、写真、アイコンなどの画像ファイルがここに配置されます。
fonts/
ウェブサイトで使用するフォントファイル(TrueTypeやOpenTypeなど)を格納するフォルダです。カスタムフォントを使用する場合に使用されます。
assets/
その他の静的な資産ファイル(動画、音声、PDFなど)を格納するフォルダです。
lib/ (またはlibraries/、vendor/など)
サードパーティ製のライブラリやフレームワークファイルを格納するフォルダです。外部ライブラリや依存関係を管理するために使用されます。
pages/
ウェブサイトの個別のページを格納するフォルダです。便宜上、pagesとしていますが、実際はページをまとめたフォルダ(カテゴリ)にするのが一般的だと思います。例えば、会社概要ならcompany/、製品紹介ならproduct/といった感じです。
その他のフォルダ
以下は、配布データなどに入っていることのあるフォルダです。一般的なWEBサイト構築ではあまり使わないと思いますが、配布データに何が入っているかの目安になるので、頭の片隅に入れておくといいかもしれません。
config/
ウェブサイトの設定ファイル(データベース接続情報や環境設定など)を格納するフォルダです。
includes/
ヘッダーやフッターなどの再利用される部分を分割して管理するためのフォルダです。PHPやサーバーサイドのテンプレートエンジンを使用する場合、これらの部分を別々のファイルに分割してincludeすることが一般的です。
dist/
ソフトウェアの配布(ディストリビューション)に関連するファイルを格納するために使用されるフォルダです。一般的には、コンパイル済みの実行可能ファイルや必要なリソース、設定ファイルなど、ユーザーが実際にソフトウェアを実行するために必要なファイルを含みます。配布バージョンのソフトウェアが生成される際には、このフォルダに関連するファイルが生成されることがあります。
plugin/
ソフトウェアに追加機能や拡張機能(プラグイン)を提供するために使用されるフォルダです。プラグインは、ソフトウェアの機能をカスタマイズしたり、追加機能を提供したりするために、ユーザーまたはサードパーティによって開発されることがあります。このフォルダには、プラグインの実行ファイルや関連するリソースファイルが含まれることがあります。ソフトウェアがプラグインアーキテクチャをサポートしている場合、このフォルダはプラグインの配置場所として使用されます。
build/
ソフトウェアのビルド(コンパイルやパッケージング)に関連するファイルを格納するために使用されるフォルダです。ビルドプロセスでは、ソースコードやリソースファイルをコンパイルし、実行可能ファイルやライブラリ、設定ファイルなどの成果物を生成します。buildフォルダは、このビルドプロセスに関連する一時ファイルや出力ファイルを保持する場所として使用されます。